@reltio/components 1.4.2017 → 1.4.2019

package/cjs/features/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -29,8 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrosswalkRow = void 0;
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+var core_1 = require("@dnd-kit/core");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
@@ -63,17 +73,15 @@ exports.CrosswalkRow = (0, react_1.memo)(function (_a) {
     var crosswalkId = (0, mdm_sdk_1.getLastUriPart)(crosswalk.uri);
     var crosswalkDisabled = (0, mdm_sdk_1.isCrosswalkDisabled)(crosswalk);
     var styles = (0, styles_1.useStyles)({ color: color, isOpaque: !isDimmed, isFocused: isFocused });
-    var _j = (0, react_dnd_1.useDrag)({
-        item: {
+    var _j = (0, core_1.useDraggable)({
+        id: crosswalk.uri,
+        data: {
             type: 'Crosswalk',
             crosswalk: crosswalk
         },
-        canDrag: !crosswalkDisabled
-    }), drag = _j[1], preview = _j[2];
+        disabled: crosswalkDisabled
+    }), setNodeRef = _j.setNodeRef, attributes = _j.attributes, listeners = _j.listeners;
     var canDelete = !crosswalkDisabled && crosswalk.ownerType !== 'relation';
-    (0, react_1.useEffect)(function () {
-        preview((0, react_dnd_html5_backend_1.getEmptyImage)(), { captureDraggingState: true });
-    }, []);
     (0, react_1.useEffect)(function () {
         var _a, _b;
         if (focusable &&
@@ -91,15 +99,16 @@ exports.CrosswalkRow = (0, react_1.memo)(function (_a) {
     return (react_1.default.createElement("div", { className: styles.root, ref: ref },
         react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { size: "XXS", className: styles.focusedIcon, icon: focusable && Visibility_1.default, onClick: function () { return toggleCrosswalkFocus(); }, disabled: !focusable, tooltipTitle: focusable && ui_i18n_1.default.text('Focus') }),
         react_1.default.createElement("div", { className: styles.crosswalkWrapper },
-            react_1.default.createElement(ColoredBlock_1.ColoredBlock, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'disabled' : 'standart', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
+            react_1.default.createElement(ColoredBlock_1.ColoredBlock, { className: styles.header, color: color, variant: crosswalkDisabled ? 'disabled' : 'standart', onMouseEnter: highlightCrosswalk, onMouseLeave: removeHighlight },
                 isDependent && react_1.default.createElement(NestedAttribute_1.default, { className: styles.dependentIcon }),
                 react_1.default.createElement(ArrowExpandButton_1.ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
-                react_1.default.createElement(SourceIcon_1.SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
-                react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: sourceSystemLabel },
-                    react_1.default.createElement(Typography_1.default, { variant: 'body2', noWrap: true }, sourceSystemLabel)),
-                react_1.default.createElement(Spacer_1.Spacer, null),
-                react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: crosswalk.value },
-                    react_1.default.createElement(Typography_1.default, { variant: 'body2', className: styles.labelValue, noWrap: true }, crosswalk.value))),
+                react_1.default.createElement("div", __assign({ className: styles.dragWrapper, ref: setNodeRef }, listeners, attributes),
+                    react_1.default.createElement(SourceIcon_1.SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
+                    react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: sourceSystemLabel },
+                        react_1.default.createElement(Typography_1.default, { variant: 'body2', noWrap: true }, sourceSystemLabel)),
+                    react_1.default.createElement(Spacer_1.Spacer, null),
+                    react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: crosswalk.value },
+                        react_1.default.createElement(Typography_1.default, { variant: 'body2', className: styles.labelValue, noWrap: true }, crosswalk.value)))),
             expanded && (react_1.default.createElement("div", { className: styles.attributesWrapper },
                 canDelete && (react_1.default.createElement("div", { className: styles.deleteCrosswalkButton },
                     react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Delete_1.default, disabled: disableDelete, onClick: function () { return setDeleteDialogOpen(true); }, size: "XS", tooltipTitle: disableDelete

package/cjs/features/crosswalks/CrosswalkRow/CrosswalkRow.test.js

@@ -80,14 +80,12 @@ var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider")
 var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var styles_1 = require("@mui/styles");
 var styles_2 = require("@mui/material/styles");
-var reactDnd = __importStar(require("react-dnd"));
-var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var CrosswalksDisplay = __importStar(require("../../../contexts/CrosswalksDisplayContext"));
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var CrosswalkRow_1 = require("./CrosswalkRow");
+var core_1 = require("@dnd-kit/core");
 jest.unmock('@mui/styles');
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDrag: jest.fn() })); });
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { isCrosswalkDisabled: jest.fn() })); });
 var metadata = {
     sources: [
@@ -123,14 +121,16 @@ var defaultProps = {
     onDelete: jest.fn(),
     onEdit: jest.fn()
 };
-var setUp = function (props) {
+var setUp = function (props, dndProps) {
     if (props === void 0) { props = defaultProps; }
+    if (dndProps === void 0) { dndProps = {}; }
     var user = user_event_1.default.setup({ delay: null });
     var Providers = function (_a) {
         var children = _a.children;
-        return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } },
-            react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
-                react_1.default.createElement(styles_1.ThemeProvider, { theme: (0, styles_2.createTheme)(mdm_sdk_1.theme) }, children))));
+        return (react_1.default.createElement(core_1.DndContext, __assign({}, dndProps),
+            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } },
+                react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+                    react_1.default.createElement(styles_1.ThemeProvider, { theme: (0, styles_2.createTheme)(mdm_sdk_1.theme) }, children)))));
     };
     var renderer = (0, react_2.render)(react_1.default.createElement(CrosswalkRow_1.CrosswalkRow, __assign({}, props)), { wrapper: Providers });
     return __assign(__assign({}, renderer), { user: user });
@@ -139,8 +139,6 @@ describe('CrosswalkRow tests', function () {
     var highlightCrosswalk = jest.fn();
     var removeHighlight = jest.fn();
     var toggleCrosswalkFocus = jest.fn();
-    var preview = jest.fn();
-    var useDragMock = jest.spyOn(reactDnd, 'useDrag').mockReturnValue([undefined, function () { return null; }, preview]);
     var useHighlightedCrosswalksMock = jest.spyOn(CrosswalksDisplay, 'useHighlightedCrosswalks').mockReturnValue([]);
     beforeEach(function () {
         mdm_sdk_1.isCrosswalkDisabled.mockReturnValue(false);
@@ -472,28 +470,4 @@ describe('CrosswalkRow tests', function () {
         rerender(react_1.default.createElement(CrosswalkRow_1.CrosswalkRow, __assign({}, props, { crosswalk: __assign({}, crosswalk) })));
         expect(node.scrollIntoView).toHaveBeenCalled();
     });
-    describe('dnd', function () {
-        afterEach(function () {
-            useDragMock.mockClear();
-        });
-        it('should use correct drag item', function () {
-            setUp();
-            var _a = useDragMock.mock.calls[0][0], item = _a.item, canDrag = _a.canDrag;
-            expect(item).toEqual({
-                type: 'Crosswalk',
-                crosswalk: defaultProps.crosswalk
-            });
-            expect(canDrag).toBe(true);
-        });
-        it('should use empty image preview', function () {
-            setUp();
-            expect(preview).toHaveBeenCalledWith((0, react_dnd_html5_backend_1.getEmptyImage)(), { captureDraggingState: true });
-        });
-        it('should not allow drag if crosswalk is disabled', function () {
-            mdm_sdk_1.isCrosswalkDisabled.mockReturnValue(true);
-            setUp();
-            var canDrag = useDragMock.mock.calls[0][0].canDrag;
-            expect(canDrag).toBe(false);
-        });
-    });
 });

package/cjs/features/crosswalks/CrosswalkRow/DndCrosswalkRow.test.d.ts

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

package/cjs/features/crosswalks/CrosswalkRow/DndCrosswalkRow.test.js

@@ -0,0 +1,134 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
+var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
+var styles_1 = require("@mui/styles");
+var styles_2 = require("@mui/material/styles");
+var dndKit_1 = require("../../../test-utils/dndKit");
+var core_1 = require("@dnd-kit/core");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CrosswalkRow_1 = require("./CrosswalkRow");
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { isCrosswalkDisabled: jest.fn() })); });
+jest.mock('@dnd-kit/core', function () { return dndKit_1.mockDndKit; });
+var metadata = {
+    sources: [
+        {
+            uri: 'configuration/sources/Reltio',
+            label: 'Reltio',
+            icon: 'images/source/reltio.png',
+            abbreviation: 'Reltio'
+        },
+        {
+            uri: 'configuration/sources/AHA',
+            label: 'AHA',
+            icon: 'images/source/source_s.png',
+            abbreviation: 'AHA'
+        }
+    ]
+};
+var crosswalk = {
+    uri: 'entities/j8K1vc9/crosswalks/1kQ5cap2n',
+    type: 'configuration/sources/Reltio',
+    value: 'some value',
+    attributes: [],
+    singleAttributeUpdateDates: {},
+    createDate: '2021-05-14T05:21:14.532Z'
+};
+var defaultProps = {
+    crosswalk: crosswalk,
+    focusable: true,
+    isDependent: false,
+    disableEdit: false,
+    disableDelete: false,
+    onToggleFocus: jest.fn(),
+    onDelete: jest.fn(),
+    onEdit: jest.fn()
+};
+var setUp = function (props, dndProps) {
+    if (props === void 0) { props = defaultProps; }
+    if (dndProps === void 0) { dndProps = {}; }
+    var user = user_event_1.default.setup({ delay: null });
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(core_1.DndContext, __assign({}, dndProps),
+            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } },
+                react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+                    react_1.default.createElement(styles_1.ThemeProvider, { theme: (0, styles_2.createTheme)(mdm_sdk_1.theme) }, children)))));
+    };
+    var renderer = (0, react_2.render)(react_1.default.createElement(CrosswalkRow_1.CrosswalkRow, __assign({}, props)), { wrapper: Providers });
+    return __assign(__assign({}, renderer), { user: user });
+};
+describe('CrosswalkRow dnd tests', function () {
+    it('should use correct drag item', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onDragStart;
+        return __generator(this, function (_a) {
+            onDragStart = jest.fn();
+            setUp(defaultProps, { onDragStart: onDragStart });
+            react_2.screen.debug(react_2.screen.getByText('Reltio'));
+            react_2.fireEvent.mouseDown(react_2.screen.getByText('Reltio'));
+            expect(onDragStart.mock.calls[0][0].active.data.current.crosswalk).toBe(defaultProps.crosswalk);
+            return [2 /*return*/];
+        });
+    }); });
+    it('should not allow drag if crosswalk is disabled', function () {
+        mdm_sdk_1.isCrosswalkDisabled.mockReturnValue(true);
+        var onDragStart = jest.fn();
+        setUp(defaultProps, { onDragStart: onDragStart });
+        react_2.fireEvent.mouseDown(react_2.screen.getByText('Reltio'));
+        expect(onDragStart).not.toHaveBeenCalled();
+    });
+});

package/cjs/features/crosswalks/CrosswalkRow/styles.d.ts

@@ -3,5 +3,5 @@ type StylesProps = {
     isOpaque?: boolean;
     isFocused?: boolean;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"header" | "root" | "attributesWrapper" | "sourceIcon" | "focusedIcon" | "crosswalkWrapper" | "deleteCrosswalkButton" | "labelValue" | "dependentIcon">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"header" | "root" | "attributesWrapper" | "sourceIcon" | "focusedIcon" | "crosswalkWrapper" | "deleteCrosswalkButton" | "labelValue" | "dependentIcon" | "dragWrapper">;
 export {};

package/cjs/features/crosswalks/CrosswalkRow/styles.js

@@ -15,7 +15,11 @@ exports.useStyles = (0, styles_1.makeStyles)({
         width: '100%',
         display: 'flex',
         alignItems: 'center',
-        height: '28px'
+        height: '28px',
+        cursor: 'grab',
+        '&[aria-disabled="true"]': {
+            cursor: 'default'
+        }
     },
     focusedIcon: function (_a) {
         var isFocused = _a.isFocused;
@@ -60,5 +64,10 @@ exports.useStyles = (0, styles_1.makeStyles)({
         width: '16px',
         height: '16px',
         fillOpacity: 0.38
+    },
+    dragWrapper: {
+        display: 'flex',
+        flexGrow: 1,
+        alignItems: 'center'
     }
 });

package/cjs/features/crosswalks/SourceCrosswalksRow/SourceCrosswalksRow.test.js

@@ -83,7 +83,6 @@ var SourceCrosswalksRow_1 = require("./SourceCrosswalksRow");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 jest.unmock('@mui/styles');
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDrag: jest.fn().mockReturnValue([undefined, function () { return null; }, jest.fn()]) })); });
 var metadata = {
     sources: [
         {

package/cjs/features/crosswalks/hooks/useDraggingCrosswalk.d.ts

@@ -0,0 +1,6 @@
+import { CrosswalkBase } from '@reltio/mdm-sdk';
+export declare const useDraggingCrosswalk: () => {
+    draggingCrosswalk: CrosswalkBase;
+    onDragStart: (event: any) => void;
+    onDragEnd: () => void;
+};

package/cjs/features/crosswalks/hooks/useDraggingCrosswalk.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggingCrosswalk = void 0;
+var react_1 = require("react");
+var useDraggingCrosswalk = function () {
+    var _a = (0, react_1.useState)(null), draggingCrosswalk = _a[0], setDraggingCrosswalk = _a[1];
+    var onDragStart = (0, react_1.useCallback)(function (event) {
+        var _a, _b;
+        var draggingData = (_b = (_a = event === null || event === void 0 ? void 0 : event.active) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current;
+        if ((draggingData === null || draggingData === void 0 ? void 0 : draggingData.type) === 'Crosswalk') {
+            setDraggingCrosswalk(draggingData.crosswalk);
+        }
+    }, []);
+    var onDragEnd = (0, react_1.useCallback)(function () {
+        setDraggingCrosswalk(null);
+    }, []);
+    return { draggingCrosswalk: draggingCrosswalk, onDragStart: onDragStart, onDragEnd: onDragEnd };
+};
+exports.useDraggingCrosswalk = useDraggingCrosswalk;

package/cjs/features/crosswalks/hooks/useModifiedEntity.js

@@ -86,6 +86,12 @@ var useModifiedEntity = function (_a) {
                 return (__assign(__assign({}, crosswalksMap), (_a = {}, _a[ownerType_1] = __assign(__assign({}, crosswalksMap[ownerType_1]), (_b = {}, _b[uri] = [crosswalk], _b)), _a)));
             });
         }
+        if (!temporaryAttributes.current.some(function (tempUri) { return (0, mdm_sdk_1.areOneHierarchyUris)(uri, tempUri); })) {
+            temporaryAttributes.current.push(uri);
+        }
+        if (!emptyTempAttributeUris.includes(newAttribute.uri)) {
+            setEmptyTempAttributeUris(function (emptyTempAttributeUris) { return __spreadArray(__spreadArray([], emptyTempAttributeUris, true), [newAttribute.uri], false); });
+        }
         setModifiedEntity(function (entity) {
             var _a;
             if ((0, ramda_1.isNil)(index)) {
@@ -93,12 +99,6 @@ var useModifiedEntity = function (_a) {
             }
             return (0, mdm_sdk_1.addNewAttribute)({ entity: entity, attributeType: attributeType, newAttribute: newAttribute, index: index });
         });
-        if (!temporaryAttributes.current.some(function (tempUri) { return (0, mdm_sdk_1.areOneHierarchyUris)(uri, tempUri); })) {
-            temporaryAttributes.current.push(uri);
-        }
-        if (!emptyTempAttributeUris.includes(newAttribute.uri)) {
-            setEmptyTempAttributeUris(function (emptyTempAttributeUris) { return __spreadArray(__spreadArray([], emptyTempAttributeUris, true), [newAttribute.uri], false); });
-        }
     }, []);
     var onDeleteAttribute = (0, react_1.useCallback)(function (event) {
         var uri = event.attributeValue.uri, attributeType = event.attributeType;

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

@@ -1,7 +1,7 @@
 export { AttributesTable } from './AttributesTable';
-export { CrosswalkDragLayer } from './CrosswalkDragLayer';
 export { SourceCrosswalksRow } from './SourceCrosswalksRow';
 export { CrosswalkEditor } from './CrosswalkEditor';
+export { CrosswalkDndComponent } from './CrosswalkDndComponent';
 export { useModifiedEntity } from './hooks/useModifiedEntity';
 export { useCrosswalkActions } from './hooks/useCrosswalkActions';
 export { groupCrosswalksByTypesAndSources } from './utils/legend';

package/cjs/features/crosswalks/index.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CrosswalkType = exports.groupCrosswalksByTypesAndSources = exports.useCrosswalkActions = exports.useModifiedEntity = exports.CrosswalkEditor = exports.SourceCrosswalksRow = exports.CrosswalkDragLayer = exports.AttributesTable = void 0;
+exports.CrosswalkType = exports.groupCrosswalksByTypesAndSources = exports.useCrosswalkActions = exports.useModifiedEntity = exports.CrosswalkDndComponent = exports.CrosswalkEditor = exports.SourceCrosswalksRow = exports.AttributesTable = void 0;
 // components
 var AttributesTable_1 = require("./AttributesTable");
 Object.defineProperty(exports, "AttributesTable", { enumerable: true, get: function () { return AttributesTable_1.AttributesTable; } });
-var CrosswalkDragLayer_1 = require("./CrosswalkDragLayer");
-Object.defineProperty(exports, "CrosswalkDragLayer", { enumerable: true, get: function () { return CrosswalkDragLayer_1.CrosswalkDragLayer; } });
 var SourceCrosswalksRow_1 = require("./SourceCrosswalksRow");
 Object.defineProperty(exports, "SourceCrosswalksRow", { enumerable: true, get: function () { return SourceCrosswalksRow_1.SourceCrosswalksRow; } });
 var CrosswalkEditor_1 = require("./CrosswalkEditor");
 Object.defineProperty(exports, "CrosswalkEditor", { enumerable: true, get: function () { return CrosswalkEditor_1.CrosswalkEditor; } });
+var CrosswalkDndComponent_1 = require("./CrosswalkDndComponent");
+Object.defineProperty(exports, "CrosswalkDndComponent", { enumerable: true, get: function () { return CrosswalkDndComponent_1.CrosswalkDndComponent; } });
 // hooks
 var useModifiedEntity_1 = require("./hooks/useModifiedEntity");
 Object.defineProperty(exports, "useModifiedEntity", { enumerable: true, get: function () { return useModifiedEntity_1.useModifiedEntity; } });

package/cjs/hooks/useDndBasicTableScrollModifier/index.d.ts

@@ -0,0 +1 @@
+export { useDndBasicTableScrollModifier } from './useDndBasicTableScrollModifier';

package/cjs/hooks/useDndBasicTableScrollModifier/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndBasicTableScrollModifier = void 0;
+var useDndBasicTableScrollModifier_1 = require("./useDndBasicTableScrollModifier");
+Object.defineProperty(exports, "useDndBasicTableScrollModifier", { enumerable: true, get: function () { return useDndBasicTableScrollModifier_1.useDndBasicTableScrollModifier; } });

package/cjs/hooks/useDndBasicTableScrollModifier/useDndBasicTableScrollModifier.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BasicTable } from '../../BasicTable';
+type Props = {
+    tableRef: React.ElementRef<typeof BasicTable>;
+};
+export declare const useDndBasicTableScrollModifier: ({ tableRef }: Props) => {
+    scrollModifier: (data: any) => any;
+    stopScroll: () => void;
+};
+export {};

package/cjs/hooks/useDndBasicTableScrollModifier/useDndBasicTableScrollModifier.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndBasicTableScrollModifier = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+var SCROLL_SPEED = 10;
+var TRIGGER_SCROLL_DISTANCE = 150;
+var useDndBasicTableScrollModifier = function (_a) {
+    var tableRef = _a.tableRef;
+    var intervalRef = (0, react_1.useRef)();
+    var stopScroll = (0, react_1.useCallback)(function () {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+    }, []);
+    var scrollGrid = (0, react_1.useCallback)(function (x, y) {
+        var _a, _b;
+        var grid = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.gridOuterRef) === null || _b === void 0 ? void 0 : _b.current;
+        if (!grid) {
+            return;
+        }
+        stopScroll();
+        intervalRef.current = setInterval(function () {
+            grid.scrollBy(x, y);
+        }, 10);
+    }, [stopScroll, tableRef]);
+    var scrollModifier = (0, react_1.useCallback)(function (data) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (data) {
+            var gridRect = (_c = (_b = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.gridOuterRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+            var diffBottom = (gridRect === null || gridRect === void 0 ? void 0 : gridRect.bottom) - (((_d = data.draggingNodeRect) === null || _d === void 0 ? void 0 : _d.bottom) + ((_e = data.transform) === null || _e === void 0 ? void 0 : _e.y));
+            var diffTop = ((_f = data.draggingNodeRect) === null || _f === void 0 ? void 0 : _f.top) + ((_g = data.transform) === null || _g === void 0 ? void 0 : _g.y) - (gridRect === null || gridRect === void 0 ? void 0 : gridRect.top);
+            var diffLeft = ((_h = data.draggingNodeRect) === null || _h === void 0 ? void 0 : _h.left) + ((_j = data.transform) === null || _j === void 0 ? void 0 : _j.x) - (gridRect === null || gridRect === void 0 ? void 0 : gridRect.left);
+            var diffRight = (gridRect === null || gridRect === void 0 ? void 0 : gridRect.right) - (((_k = data.draggingNodeRect) === null || _k === void 0 ? void 0 : _k.right) + ((_l = data.transform) === null || _l === void 0 ? void 0 : _l.x));
+            var scrollYDirection = diffTop < diffBottom ? -1 : 1;
+            var scrollY_1 = (0, ramda_1.any)((0, ramda_1.gt)(TRIGGER_SCROLL_DISTANCE), [diffTop, diffBottom])
+                ? SCROLL_SPEED * scrollYDirection
+                : 0;
+            var scrollXDirection = diffLeft < diffRight ? -1 : 1;
+            var scrollX_1 = (0, ramda_1.any)((0, ramda_1.gt)(TRIGGER_SCROLL_DISTANCE), [diffLeft, diffRight])
+                ? SCROLL_SPEED * scrollXDirection
+                : 0;
+            if (scrollX_1 || scrollY_1) {
+                scrollGrid(scrollX_1, scrollY_1);
+            }
+            else {
+                stopScroll();
+            }
+        }
+        return data.transform;
+    }, [scrollGrid, stopScroll, tableRef]);
+    return {
+        scrollModifier: scrollModifier,
+        stopScroll: stopScroll
+    };
+};
+exports.useDndBasicTableScrollModifier = useDndBasicTableScrollModifier;

package/cjs/index.d.ts

@@ -269,6 +269,7 @@ export { useMarkers, resolveMarkers } from './hooks/useMarkers';
 export { useSegmentationRequest } from './hooks/useSegmentationRequest';
 export { useFilterAutoFocus } from './hooks/useFilterAutoFocus';
 export { useDynamicYAxisWidth } from './hooks/useDynamicYAxisWidth';
+export { useDndBasicTableScrollModifier } from './hooks/useDndBasicTableScrollModifier';
 export { buildColumnsFilter, buildColumnsSizeById, columnFilterToMdmFilter, defaultGetRowCellHeight, defaultRenderRowCell } from './helpers/basicTable';
 export { enrichDataWithPercents } from './helpers/charts';
 export { showDefaultErrorMessage, showErrorMessage } from './helpers/errors';
@@ -278,7 +279,7 @@ export { getAttributeSelectorItems } from './helpers/attributesSelector';
 export type { AttributeFiltersComponentProps } from './AttributesFiltersBuilder';
 export type { ChartData } from './types/charts';
 export type { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from './types/inlineAttributes';
-export type { ColumnData, ColumnSize, ColumnFilter, Sorting, GroupedColumnsData, GroupedColumns, RenderRowCellProps, RowId, ElementsRowsData, TableRowsData, RowValue } from './types/basicTable';
+export type { ColumnData, ColumnSize, ColumnFilter, Sorting, GroupedColumnsData, GroupedColumns, RenderRowCellProps, RowId, ElementsRowsData, TableRowsData, RowValue, DraggableProps } from './types/basicTable';
 export * from './types/preferences';
 export * from './types';
 export * from './constants';

package/cjs/index.js

@@ -20,7 +20,7 @@ exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.Mo
 exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = void 0;
 exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = void 0;
 exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.SegmentationContext = exports.useReloadData = void 0;
-exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = void 0;
+exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -601,6 +601,8 @@ var useFilterAutoFocus_1 = require("./hooks/useFilterAutoFocus");
 Object.defineProperty(exports, "useFilterAutoFocus", { enumerable: true, get: function () { return useFilterAutoFocus_1.useFilterAutoFocus; } });
 var useDynamicYAxisWidth_1 = require("./hooks/useDynamicYAxisWidth");
 Object.defineProperty(exports, "useDynamicYAxisWidth", { enumerable: true, get: function () { return useDynamicYAxisWidth_1.useDynamicYAxisWidth; } });
+var useDndBasicTableScrollModifier_1 = require("./hooks/useDndBasicTableScrollModifier");
+Object.defineProperty(exports, "useDndBasicTableScrollModifier", { enumerable: true, get: function () { return useDndBasicTableScrollModifier_1.useDndBasicTableScrollModifier; } });
 // helpers
 var basicTable_1 = require("./helpers/basicTable");
 Object.defineProperty(exports, "buildColumnsFilter", { enumerable: true, get: function () { return basicTable_1.buildColumnsFilter; } });

package/cjs/test-utils/dndKit/DndContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { MockUseDraggableArguments } from './type';
+type Props = {
+    draggableNodesRef: React.MutableRefObject<Map<string, MockUseDraggableArguments>>;
+    droppableNodesRef: React.MutableRefObject<Map<string, MockUseDraggableArguments>>;
+    onDragStart: (nodeId: string) => void;
+    onDragOver: (nodeId: string) => void;
+    onDragEnd: () => void;
+    dragActive: boolean;
+};
+export declare const DndContext: React.Context<Props>;
+export {};

package/cjs/test-utils/dndKit/DndContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DndContext = void 0;
+var react_1 = require("react");
+exports.DndContext = (0, react_1.createContext)(null);

package/cjs/test-utils/dndKit/DndContextComponent.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DndContext as DndKitContext } from '@dnd-kit/core';
+type Props = React.ComponentProps<typeof DndKitContext>;
+export declare const DndContextComponent: ({ onDragStart, onDragEnd, onDragOver, children }: Props) => React.JSX.Element;
+export {};