@reltio/components 1.4.2018 → 1.4.2019

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

@@ -0,0 +1,129 @@
+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 };
+    }
+};
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { ThemeProvider } from '@mui/styles';
+import { createTheme } from '@mui/material/styles';
+import { mockDndKit } from '../../../test-utils/dndKit';
+import { DndContext } from '@dnd-kit/core';
+import { isCrosswalkDisabled, theme } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { CrosswalkRow } from './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 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 = userEvent.setup({ delay: null });
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(DndContext, __assign({}, dndProps),
+            React.createElement(MdmModuleProvider, { values: { metadata: metadata } },
+                React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                    React.createElement(ThemeProvider, { theme: createTheme(theme) }, children)))));
+    };
+    var renderer = render(React.createElement(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 });
+            screen.debug(screen.getByText('Reltio'));
+            fireEvent.mouseDown(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 () {
+        isCrosswalkDisabled.mockReturnValue(true);
+        var onDragStart = jest.fn();
+        setUp(defaultProps, { onDragStart: onDragStart });
+        fireEvent.mouseDown(screen.getByText('Reltio'));
+        expect(onDragStart).not.toHaveBeenCalled();
+    });
+});

package/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/features/crosswalks/CrosswalkRow/styles.js

@@ -12,7 +12,11 @@ export var useStyles = 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;
@@ -57,5 +61,10 @@ export var useStyles = makeStyles({
         width: '16px',
         height: '16px',
         fillOpacity: 0.38
+    },
+    dragWrapper: {
+        display: 'flex',
+        flexGrow: 1,
+        alignItems: 'center'
     }
 });

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

@@ -55,7 +55,6 @@ import { SourceCrosswalksRow } from './SourceCrosswalksRow';
 import { theme } from '@reltio/mdm-sdk';
 import { MdmModuleProvider } from '../../../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/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/features/crosswalks/hooks/useDraggingCrosswalk.js

@@ -0,0 +1,15 @@
+import { useCallback, useState } from 'react';
+export var useDraggingCrosswalk = function () {
+    var _a = useState(null), draggingCrosswalk = _a[0], setDraggingCrosswalk = _a[1];
+    var onDragStart = 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 = useCallback(function () {
+        setDraggingCrosswalk(null);
+    }, []);
+    return { draggingCrosswalk: draggingCrosswalk, onDragStart: onDragStart, onDragEnd: onDragEnd };
+};

package/features/crosswalks/hooks/useModifiedEntity.js

@@ -83,6 +83,12 @@ export 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 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 (isNil(index)) {
@@ -90,12 +96,6 @@ export var useModifiedEntity = function (_a) {
             }
             return addNewAttribute({ entity: entity, attributeType: attributeType, newAttribute: newAttribute, index: index });
         });
-        if (!temporaryAttributes.current.some(function (tempUri) { return 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 = useCallback(function (event) {
         var uri = event.attributeValue.uri, attributeType = event.attributeType;

package/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/features/crosswalks/index.js

@@ -1,8 +1,8 @@
 // components
 export { AttributesTable } from './AttributesTable';
-export { CrosswalkDragLayer } from './CrosswalkDragLayer';
 export { SourceCrosswalksRow } from './SourceCrosswalksRow';
 export { CrosswalkEditor } from './CrosswalkEditor';
+export { CrosswalkDndComponent } from './CrosswalkDndComponent';
 // hooks
 export { useModifiedEntity } from './hooks/useModifiedEntity';
 export { useCrosswalkActions } from './hooks/useCrosswalkActions';

package/hooks/useDndBasicTableScrollModifier/index.d.ts

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

package/hooks/useDndBasicTableScrollModifier/index.js

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

package/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/hooks/useDndBasicTableScrollModifier/useDndBasicTableScrollModifier.js

@@ -0,0 +1,53 @@
+import { useCallback, useRef } from 'react';
+import { any, gt } from 'ramda';
+var SCROLL_SPEED = 10;
+var TRIGGER_SCROLL_DISTANCE = 150;
+export var useDndBasicTableScrollModifier = function (_a) {
+    var tableRef = _a.tableRef;
+    var intervalRef = useRef();
+    var stopScroll = useCallback(function () {
+        if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+        }
+    }, []);
+    var scrollGrid = 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 = 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 = any(gt(TRIGGER_SCROLL_DISTANCE), [diffTop, diffBottom])
+                ? SCROLL_SPEED * scrollYDirection
+                : 0;
+            var scrollXDirection = diffLeft < diffRight ? -1 : 1;
+            var scrollX_1 = any(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
+    };
+};

package/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/index.js

@@ -273,6 +273,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';
 // helpers
 export { buildColumnsFilter, buildColumnsSizeById, columnFilterToMdmFilter, defaultGetRowCellHeight, defaultRenderRowCell } from './helpers/basicTable';
 export { enrichDataWithPercents } from './helpers/charts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2018",
+  "version": "1.4.2019",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1896",
+    "@reltio/mdm-sdk": "^1.4.1897",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
@@ -49,7 +49,7 @@
     "prop-types": "^15.6.2",
     "ramda": "^0.28.0",
     "react": "^17.0.2",
-    "react-components": "bitbucket:reltio-ondemand/react-components#v3.27.2",
+    "react-components": "bitbucket:reltio-ondemand/react-components#v4.2.3",
     "react-resize-detector": "^9.1.1",
     "ui-i18n": "bitbucket:reltio-ondemand/ui-i18n#v1.4.0"
   },

package/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/test-utils/dndKit/DndContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var DndContext = createContext(null);

package/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 {};

package/test-utils/dndKit/DndContextComponent.js

@@ -0,0 +1,70 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { DndContext } from './DndContext';
+import { DndMonitorContext } from './DndMonitorContext';
+import { useDndMonitorProvider } from './useDndMonitorProvider';
+export var DndContextComponent = function (_a) {
+    var onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onDragOver = _a.onDragOver, children = _a.children;
+    var draggableNodesRef = useRef(new Map());
+    var droppableNodesRef = useRef(new Map());
+    var _b = useDndMonitorProvider(), dispatchMonitorEvent = _b[0], registerMonitorListener = _b[1];
+    var dragActiveIdRef = useRef(null);
+    var dragOverIdRef = useRef(null);
+    var _c = useState(null), dragActive = _c[0], setDragActive = _c[1];
+    var handleDragStart = useCallback(function (nodeId) {
+        var draggableNode = draggableNodesRef.current.get(nodeId);
+        dragActiveIdRef.current = nodeId;
+        setDragActive(true);
+        var event = {
+            active: draggableNode
+        };
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+        dispatchMonitorEvent({
+            type: 'onDragStart',
+            event: event
+        });
+    }, [dispatchMonitorEvent, onDragStart]);
+    var handleDragOver = useCallback(function (nodeId) {
+        dragOverIdRef.current = nodeId;
+        var draggableNode = draggableNodesRef.current.get(dragActiveIdRef.current);
+        var droppableNode = droppableNodesRef.current.get(nodeId);
+        var event = {
+            active: draggableNode,
+            over: droppableNode
+        };
+        onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(event);
+        dispatchMonitorEvent({
+            type: 'onDragOver',
+            event: {
+                active: draggableNode,
+                over: droppableNode
+            }
+        });
+    }, [dispatchMonitorEvent, onDragOver]);
+    var handleDragEnd = useCallback(function () {
+        var draggableNode = draggableNodesRef.current.get(dragActiveIdRef.current);
+        var droppableNode = droppableNodesRef.current.get(dragOverIdRef.current);
+        var event = {
+            active: draggableNode,
+            over: droppableNode
+        };
+        setDragActive(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event);
+        dispatchMonitorEvent({
+            type: 'onDragEnd',
+            event: event
+        });
+        dragActiveIdRef.current = null;
+        dragOverIdRef.current = null;
+    }, [dispatchMonitorEvent, onDragEnd]);
+    var contextValue = useMemo(function () { return ({
+        draggableNodesRef: draggableNodesRef,
+        droppableNodesRef: droppableNodesRef,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        dragActive: dragActive,
+        measureDroppableContainers: function () { }
+    }); }, [dragActive, handleDragStart, handleDragEnd, handleDragOver]);
+    return (React.createElement(DndContext.Provider, { value: contextValue },
+        React.createElement(DndMonitorContext.Provider, { value: registerMonitorListener }, children)));
+};

package/test-utils/dndKit/DndMonitorContext.d.ts

@@ -0,0 +1,2 @@
+import { RegisterListener } from '@dnd-kit/core/dist/components/DndMonitor/types';
+export declare const DndMonitorContext: import("react").Context<RegisterListener>;

package/test-utils/dndKit/DndMonitorContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var DndMonitorContext = createContext(null);

package/test-utils/dndKit/DragOverlay.d.ts

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

package/test-utils/dndKit/DragOverlay.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { useDndContext } from './useDndContext';
+export var DragOverlay = function (_a) {
+    var children = _a.children;
+    var dndContext = useDndContext();
+    return React.createElement("div", null, dndContext.dragActive ? children : null);
+};

package/test-utils/dndKit/index.d.ts

@@ -0,0 +1,32 @@
+export declare const mockDndKit: {
+    DndContext: ({ onDragStart, onDragEnd, onDragOver, children }: import("@dnd-kit/core").DndContextProps) => import("react").JSX.Element;
+    DragOverlay: ({ children }: import("@dnd-kit/core").DragOverlayProps) => import("react").JSX.Element;
+    useDraggable: (props: import("./type").MockUseDraggableArguments) => {
+        attributes: {};
+        listeners: {
+            onMouseDown?: undefined;
+            onMouseUp?: undefined;
+        } | {
+            onMouseDown(): void;
+            onMouseUp(): void;
+        };
+        setNodeRef: (element: HTMLElement | null) => void;
+    };
+    useDroppable: (props: import("./type").MockUseDraggableArguments) => {
+        setNodeRef: (element: HTMLElement | null) => void;
+    };
+    useDndContext: () => {
+        draggableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+        droppableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+        onDragStart: (nodeId: string) => void;
+        onDragOver: (nodeId: string) => void;
+        onDragEnd: () => void;
+        dragActive: boolean;
+    };
+    useDndMonitor: (listener: import("@dnd-kit/core").DndMonitorListener) => void;
+    useSensor: jest.Mock<any, any, any>;
+    useSensors: jest.Mock<any, any, any>;
+    MeasuringStrategy: {
+        Always: string;
+    };
+};

package/test-utils/dndKit/index.js

@@ -0,0 +1,19 @@
+import { DndContextComponent } from './DndContextComponent';
+import { DragOverlay } from './DragOverlay';
+import { useDndContext } from './useDndContext';
+import { useDndMonitor } from './useDndMonitor';
+import { useDraggable } from './useDraggable';
+import { useDroppable } from './useDroppable';
+export var mockDndKit = {
+    DndContext: DndContextComponent,
+    DragOverlay: DragOverlay,
+    useDraggable: useDraggable,
+    useDroppable: useDroppable,
+    useDndContext: useDndContext,
+    useDndMonitor: useDndMonitor,
+    useSensor: jest.fn(),
+    useSensors: jest.fn(),
+    MeasuringStrategy: {
+        Always: 'Always'
+    }
+};

package/test-utils/dndKit/type.d.ts

@@ -0,0 +1,17 @@
+import { UseDraggableArguments, UseDroppableArguments } from '@dnd-kit/core';
+export type MockUseDraggableArguments = Omit<UseDraggableArguments, 'id'> & {
+    id: string;
+    node: React.MutableRefObject<HTMLElement>;
+    rect?: unknown;
+    data: {
+        current: any;
+    };
+};
+export type MockUseDroppableArguments = Omit<UseDroppableArguments, 'id'> & {
+    id: string;
+    node: React.MutableRefObject<HTMLElement>;
+    rect?: unknown;
+    data: {
+        current: any;
+    };
+};

package/test-utils/dndKit/type.js

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

package/test-utils/dndKit/useDndContext.d.ts

@@ -0,0 +1,8 @@
+export declare const useDndContext: () => {
+    draggableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+    droppableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+    onDragStart: (nodeId: string) => void;
+    onDragOver: (nodeId: string) => void;
+    onDragEnd: () => void;
+    dragActive: boolean;
+};

package/test-utils/dndKit/useDndContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { DndContext } from './DndContext';
+export var useDndContext = function () {
+    var contextValue = useContext(DndContext);
+    if (!contextValue) {
+        throw Error('Must use inside DndContext');
+    }
+    return contextValue;
+};

package/test-utils/dndKit/useDndMonitor.d.ts

@@ -0,0 +1,2 @@
+import { DndMonitorArguments } from '@dnd-kit/core';
+export declare const useDndMonitor: (listener: DndMonitorArguments) => void;

package/test-utils/dndKit/useDndMonitor.js

@@ -0,0 +1,9 @@
+import { useContext, useEffect } from 'react';
+import { DndMonitorContext } from './DndMonitorContext';
+export var useDndMonitor = function (listener) {
+    var registerListener = useContext(DndMonitorContext);
+    useEffect(function () {
+        var unsubscribe = registerListener(listener);
+        return unsubscribe;
+    }, [listener, registerListener]);
+};

package/test-utils/dndKit/useDndMonitorProvider.d.ts

@@ -0,0 +1 @@
+export declare const useDndMonitorProvider: () => readonly [({ type, event }: any) => void, (listener: any) => () => boolean];

package/test-utils/dndKit/useDndMonitorProvider.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+export var useDndMonitorProvider = function () {
+    var listeners = useState(function () { return new Set(); })[0];
+    var registerListener = useCallback(function (listener) {
+        listeners.add(listener);
+        return function () { return listeners.delete(listener); };
+    }, [listeners]);
+    var dispatch = useCallback(function (_a) {
+        var type = _a.type, event = _a.event;
+        listeners.forEach(function (listener) { var _a; return (_a = listener[type]) === null || _a === void 0 ? void 0 : _a.call(listener, event); });
+    }, [listeners]);
+    return [dispatch, registerListener];
+};

package/test-utils/dndKit/useDraggable.d.ts

@@ -0,0 +1,12 @@
+import { MockUseDraggableArguments } from './type';
+export declare const useDraggable: (props: MockUseDraggableArguments) => {
+    attributes: {};
+    listeners: {
+        onMouseDown?: undefined;
+        onMouseUp?: undefined;
+    } | {
+        onMouseDown(): void;
+        onMouseUp(): void;
+    };
+    setNodeRef: (element: HTMLElement | null) => void;
+};