@reltio/components 1.4.2018 → 1.4.2019

package/BarChart/helpers.d.ts

@@ -4,8 +4,8 @@ import { BarChartOptions } from '@reltio/mdm-sdk';
 type BarChartSettings = {
     barChart: React.ComponentProps<typeof BarChart>;
     bar: Omit<BarProps, 'ref'>;
-    xAxis: XAxisProps;
-    yAxis: YAxisProps;
+    xAxis: Omit<XAxisProps, 'ref'>;
+    yAxis: Omit<YAxisProps, 'ref'>;
     cartesianGrid: Omit<CartesianGridProps, 'ref'>;
     tooltip: TooltipProps<number, string>;
 };

package/BasicTable/IntegrationBasicTable.test.js

@@ -48,16 +48,16 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { screen, render, within, fireEvent, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import HTML5Backend from 'react-dnd-html5-backend';
-import { DndProvider } from 'react-dnd';
+import { mockDndKit } from '../test-utils/dndKit';
+jest.mock('@dnd-kit/core', function () { return mockDndKit; });
 import { BasicTable } from './BasicTable';
 import { CollapseRowButton } from '../CollapseRowButton';
 import { mockBasicTableSizing } from '../test-utils';
 var FirstColumnRenderer = function (_a) {
-    var value = _a.value, rowValue = _a.rowValue, rowIndex = _a.rowIndex, dragRef = _a.dragRef;
+    var value = _a.value, rowValue = _a.rowValue, rowIndex = _a.rowIndex, draggableProps = _a.draggableProps;
     return (React.createElement("div", null,
         React.createElement(CollapseRowButton, { rowIndex: rowIndex, rowValue: rowValue }),
-        React.createElement("div", { ref: dragRef }, "drag el"),
+        React.createElement("div", __assign({}, draggableProps), "drag el"),
         React.createElement("div", null, value.name)));
 };
 var SecondColumnRenderer = function (_a) {
@@ -117,11 +117,7 @@ var defaultProps = {
 };
 var setUp = function (props) {
     var user = userEvent.setup();
-    var Providers = function (_a) {
-        var children = _a.children;
-        return React.createElement(DndProvider, { backend: HTML5Backend }, children);
-    };
-    return __assign(__assign({}, render(React.createElement(BasicTable, __assign({}, props)), { wrapper: Providers })), { user: user });
+    return __assign(__assign({}, render(React.createElement(BasicTable, __assign({}, props)))), { user: user });
 };
 describe('basic table tests', function () {
     it('should collapse all rows after start dragging', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -153,7 +149,7 @@ describe('basic table tests', function () {
                     dragIndicator = within(getCellByIndexes(1, 0)).queryByText('drag el');
                     return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                fireEvent.dragStart(dragIndicator);
+                                fireEvent.mouseDown(dragIndicator);
                                 return [2 /*return*/];
                             });
                         }); })];
@@ -164,14 +160,6 @@ describe('basic table tests', function () {
                     expect(within(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).not.toBeInTheDocument();
                     expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
                     expect(within(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).not.toBeInTheDocument();
-                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                fireEvent.dragEnd(getCellByIndexes(1, 0));
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 4:
-                    _a.sent();
                     unmockTableSizing();
                     return [2 /*return*/];
             }

package/EditModeAttributesView/IntegrationEditModeAttributesView.test.js

@@ -48,8 +48,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, act, waitFor } from '@testing-library/react';
-import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { ErrorType, Mode, getAttributesListForEditMode, uploadImage } from '@reltio/mdm-sdk';
 import { EditModeAttributesView } from './EditModeAttributesView';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
@@ -106,9 +104,8 @@ describe('EditModeAttributesView tests', function () {
         var user = userEvent.setup(userOptions);
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(DndProvider, { backend: HTML5Backend },
-                React.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-                    React.createElement(ScrollToElementProvider, null, children))));
+            return (React.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions },
+                React.createElement(ScrollToElementProvider, null, children)));
         };
         return __assign({ user: user }, render(React.createElement(EditModeAttributesView, __assign({}, props)), { wrapper: Providers }));
     };

package/ImageAttributesLineEditor/ImageAttributesLineEditor.test.js

@@ -13,8 +13,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import ReactResizeDetector from 'react-resize-detector';
 import { mount } from 'enzyme';
-import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { Mode, insertDefaultImageByAttrUri } from '@reltio/mdm-sdk';
 import { Image } from '../Image';
 import { EmptyStub } from '../EmptyStub';
@@ -91,9 +89,8 @@ var defaultProps = {
 };
 var setUp = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.mdmActions, mdmActions = _e === void 0 ? defaultMdmActions : _e;
-    return mount(React.createElement(DndProvider, { backend: HTML5Backend },
-        React.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-            React.createElement(ImageAttributesLineEditor, __assign({}, props)))));
+    return mount(React.createElement(MdmModuleProvider, { values: mdmValues, actions: mdmActions },
+        React.createElement(ImageAttributesLineEditor, __assign({}, props))));
 };
 describe('ImageAttributesLineEditor edit tests', function () {
     beforeAll(function () {

package/InlineAttributesPager/components/InlineSimpleAttributesBlock/InlineSimpleAttributesBlock.js

@@ -20,37 +20,48 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import i18n from 'ui-i18n';
-import { useDrop } from 'react-dnd';
-import { checkMetadataForCreate, isEntityTypeUri, isEntityUri, isRelationTypeUri, isRelationUri, Mode } from '@reltio/mdm-sdk';
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { canAddCrosswalk } from '@reltio/mdm-sdk';
 import { InlineSimpleAttribute } from '../../../InlineSimpleAttribute';
 import { useStyles } from './styles';
 export var InlineSimpleAttributesBlock = function (_a) {
     var attributeValues = _a.attributeValues, attributeType = _a.attributeType, parentUri = _a.parentUri, disableEdit = _a.disableEdit, crosswalksMap = _a.crosswalksMap, onAdd = _a.onAdd, emptyTempAttributeUris = _a.emptyTempAttributeUris, props = __rest(_a, ["attributeValues", "attributeType", "parentUri", "disableEdit", "crosswalksMap", "onAdd", "emptyTempAttributeUris"]);
     var styles = useStyles();
-    var _b = useDrop({
-        accept: 'Crosswalk',
-        canDrop: function (_a) {
-            var crosswalk = _a.crosswalk;
-            var isRelationCrosswalk = isRelationUri(crosswalk.uri) || crosswalk.ownerType === 'relation';
-            var isEntityCrosswalk = isEntityUri(crosswalk.uri) && crosswalk.ownerType === 'entity';
-            return (checkMetadataForCreate(Mode.Editing, attributeType) &&
-                !disableEdit &&
-                ((isRelationCrosswalk && isRelationTypeUri(attributeType.uri)) ||
-                    (isEntityCrosswalk && isEntityTypeUri(attributeType.uri))));
+    var _b = useState(false), isDragItemOver = _b[0], setIsDragItemOver = _b[1];
+    var checkCanAddCrosswalk = useCallback(function (event) {
+        var _a;
+        var draggingData = event.active.data.current;
+        var crosswalk = draggingData === null || draggingData === void 0 ? void 0 : draggingData.crosswalk;
+        return (!disableEdit &&
+            (draggingData === null || draggingData === void 0 ? void 0 : draggingData.type) === 'Crosswalk' &&
+            attributeType.uri === ((_a = event.over) === null || _a === void 0 ? void 0 : _a.id) &&
+            crosswalk &&
+            canAddCrosswalk(crosswalk, attributeType));
+    }, [disableEdit, attributeType]);
+    useDndMonitor({
+        onDragOver: function (event) {
+            setIsDragItemOver(checkCanAddCrosswalk(event));
         },
-        collect: function (monitor) { return ({
-            isDragItemOver: monitor.isOver() && monitor.canDrop()
-        }); },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        drop: function (_a, monitor) {
-            var crosswalk = _a.crosswalk;
-            onAdd({ attributeType: attributeType, crosswalk: crosswalk, parentUri: parentUri, index: attributeValues.length });
+        onDragEnd: function (event) {
+            var draggingData = event.active.data.current;
+            var crosswalk = draggingData === null || draggingData === void 0 ? void 0 : draggingData.crosswalk;
+            if (checkCanAddCrosswalk(event)) {
+                onAdd({ attributeType: attributeType, crosswalk: crosswalk, parentUri: parentUri, index: attributeValues.length });
+            }
+            setIsDragItemOver(false);
         }
-    }), isDragItemOver = _b[0].isDragItemOver, drop = _b[1];
+    });
+    var setNodeRef = useDroppable({
+        id: attributeType.uri,
+        data: {
+            type: 'Crosswalk',
+            attributeType: attributeType
+        }
+    }).setNodeRef;
     var attributeIndex = 0;
-    return (React.createElement("div", { ref: drop, className: styles.simpleAttributesWrapper, "data-reltio-id": 'simple-attributes-wrapper' },
+    return (React.createElement("div", { ref: setNodeRef, className: styles.simpleAttributesWrapper, "data-reltio-id": 'simple-attributes-wrapper' },
         attributeValues.map(function (value) {
             var _a;
             return (_a = crosswalksMap[value.uri]) === null || _a === void 0 ? void 0 : _a.map(function (crosswalk) { return (React.createElement(InlineSimpleAttribute, __assign({ key: value.uri + crosswalk.uri, attributeType: attributeType, attributeValue: value, crosswalk: crosswalk, disableEdit: disableEdit, isEmpty: emptyTempAttributeUris.includes(value.uri), dataReltioId: "value-index-".concat(attributeIndex++) }, props))); });

package/InlineAttributesPager/components/InlineSimpleAttributesBlock/InlineSimpleAttributesBlock.test.js

@@ -10,10 +10,10 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { shallow } from 'enzyme';
 import { InlineSimpleAttributesBlock } from './InlineSimpleAttributesBlock';
-import * as reactDnd from 'react-dnd';
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDrop: jest.fn() })); });
+import { DndContext, useDndMonitor } from '@dnd-kit/core';
+import { act, render, screen } from '@testing-library/react';
+jest.mock('@dnd-kit/core', function () { return (__assign(__assign({}, jest.requireActual('@dnd-kit/core')), { useDndMonitor: jest.fn() })); });
 describe('InlineSimpleAttributesBlock tests', function () {
     var attributeType = {
         uri: 'configuration/entityTypes/HCP/attributes/Simple',
@@ -73,43 +73,52 @@ describe('InlineSimpleAttributesBlock tests', function () {
         onEdit: jest.fn(),
         onDelete: jest.fn()
     };
-    var props = __assign({ attributeValues: attributeValues, crosswalksMap: crosswalksMap, parentUri: 'entities/1', onAdd: jest.fn(), emptyTempAttributeUris: [] }, commonProps);
-    var useDropMock = jest.spyOn(reactDnd, 'useDrop').mockReturnValue([{}, function () { return null; }]);
+    var defaultProps = __assign({ attributeValues: attributeValues, crosswalksMap: crosswalksMap, parentUri: 'entities/1', onAdd: jest.fn(), emptyTempAttributeUris: [] }, commonProps);
+    var getDragEvent = function (draggingData, attributeType) { return ({
+        active: {
+            data: {
+                current: __assign({}, draggingData)
+            }
+        },
+        over: {
+            id: attributeType.uri
+        }
+    }); };
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var Providers = function (_a) {
+            var children = _a.children;
+            return React.createElement(DndContext, null, children);
+        };
+        return render(React.createElement(InlineSimpleAttributesBlock, __assign({}, props)), { wrapper: Providers });
+    };
     it('should render values for each crosswalk', function () {
-        var wrapper = shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props)));
-        var attributes = wrapper.find('InlineSimpleAttribute');
-        expect(attributes.length).toBe(3);
-        attributes.forEach(function (attribute) {
-            expect(attribute.props()).toMatchObject(commonProps);
-        });
-        expect(attributes.at(0).prop('attributeValue')).toBe(attributeValues[0]);
-        expect(attributes.at(0).prop('crosswalk')).toBe(crosswalks[0]);
-        expect(attributes.at(1).prop('attributeValue')).toBe(attributeValues[1]);
-        expect(attributes.at(1).prop('crosswalk')).toBe(crosswalks[0]);
-        expect(attributes.at(2).prop('attributeValue')).toBe(attributeValues[1]);
-        expect(attributes.at(2).prop('crosswalk')).toBe(crosswalks[1]);
+        setUp();
+        expect(screen.getByText(attributeValues[0].value)).toBeInTheDocument();
+        expect(screen.getAllByText(attributeValues[1].value)).toHaveLength(2);
     });
-    describe('dnd', function () {
-        afterEach(function () {
-            useDropMock.mockClear();
-        });
-        it('should accept Crosswalk drag items', function () {
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props)));
-            var accept = useDropMock.mock.calls[0][0].accept;
-            expect(accept).toEqual('Crosswalk');
+    describe('dnd behavior', function () {
+        var onDragOver, onDragEnd;
+        beforeAll(function () {
+            useDndMonitor.mockImplementation(function (listeners) {
+                onDragOver = listeners.onDragOver;
+                onDragEnd = listeners.onDragEnd;
+            });
         });
         it('should not allow drop relation crosswalk on entity attribute', function () {
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props)));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'relation',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
+            setUp();
+            act(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'relation',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, defaultProps.attributeType));
+            });
+            expect(screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should allow drop relation crosswalk on relation attribute', function () {
             var attributeType = {
@@ -132,26 +141,31 @@ describe('InlineSimpleAttributesBlock tests', function () {
                     ov: false
                 }
             ];
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props, { attributeType: attributeType, attributeValues: attributeValues })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'relations/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(true);
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'relation',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(true);
+            setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType, attributeValues: attributeValues }));
+            act(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'relations/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, attributeType));
+            });
+            expect(screen.getByText('Drop here')).toBeInTheDocument();
+            act(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'relation',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, attributeType));
+            });
+            expect(screen.getByText('Drop here')).toBeInTheDocument();
         });
         it('should not allow drop entity crosswalk on relation attribute', function () {
             var attributeType = {
@@ -174,76 +188,70 @@ describe('InlineSimpleAttributesBlock tests', function () {
                     ov: false
                 }
             ];
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props, { attributeType: attributeType, attributeValues: attributeValues })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
+            setUp(__assign(__assign({}, defaultProps), { attributeType: attributeType, attributeValues: attributeValues }));
+            act(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, attributeType));
+            });
+            expect(screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should not allow drop crosswalk on entity attribute without permission to create', function () {
             var readOnlyAttrType = __assign(__assign({}, attributeType), { access: ['READ'] });
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props, { attributeType: readOnlyAttrType })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
+            setUp(__assign(__assign({}, defaultProps), { attributeType: readOnlyAttrType, attributeValues: attributeValues }));
+            act(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, readOnlyAttrType));
+            });
+            expect(screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should not allow drop crosswalk on attribute if parent attribute can not be edited', function () {
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props, { disableEdit: true })));
-            var canDrop = useDropMock.mock.calls[0][0].canDrop;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(false);
-        });
-        it('should render drop indicator if crosswalks is over and can be dropped', function () {
-            var wrapper = shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props)));
-            var _a = useDropMock.mock.calls[0][0], canDrop = _a.canDrop, collect = _a.collect;
-            expect(canDrop({
-                type: 'Crosswalk',
-                crosswalk: {
-                    uri: 'entities/1/crosswalks/1',
-                    ownerType: 'entity',
-                    type: 'configuration/sources/FB',
-                    value: '123'
-                }
-            }, {})).toBe(true);
-            expect(wrapper.find('.dropIndicator')).toHaveLength(0);
-            collect({ isOver: function () { return true; }, canDrop: function () { return true; } });
-            expect(wrapper.find('.dropIndicator')).toHaveLength(0);
+            setUp(__assign(__assign({}, defaultProps), { disableEdit: true }));
+            act(function () {
+                onDragOver(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: {
+                        uri: 'entities/1/crosswalks/1',
+                        ownerType: 'entity',
+                        type: 'configuration/sources/FB',
+                        value: '123'
+                    }
+                }, defaultProps.attributeType));
+            });
+            expect(screen.queryByText('Drop here')).not.toBeInTheDocument();
         });
         it('should call props.onAdd on crosswalk drop', function () {
-            shallow(React.createElement(InlineSimpleAttributesBlock, __assign({}, props)));
-            var drop = useDropMock.mock.calls[0][0].drop;
+            setUp();
             var crosswalk = {
                 uri: 'entities/1/crosswalks/1',
                 ownerType: 'entity',
                 type: 'configuration/sources/FB',
                 value: '123'
             };
-            drop({ crosswalk: crosswalk, type: 'Crosswalk' }, {});
-            expect(props.onAdd).toHaveBeenCalledWith({
-                parentUri: props.parentUri,
-                attributeType: props.attributeType,
+            act(function () {
+                onDragEnd(getDragEvent({
+                    type: 'Crosswalk',
+                    crosswalk: crosswalk
+                }, defaultProps.attributeType));
+            });
+            expect(defaultProps.onAdd).toHaveBeenCalledWith({
+                parentUri: defaultProps.parentUri,
+                attributeType: defaultProps.attributeType,
                 crosswalk: crosswalk,
-                index: props.attributeValues.length
+                index: defaultProps.attributeValues.length
             });
         });
     });

package/InlineSimpleAttribute/InlineSimpleAttribute.js

@@ -36,7 +36,7 @@ export var InlineSimpleAttribute = function (_a) {
     var showIgnore = !isTemporary && ((!isReadingMode && hasBasicPermission) || attributeValue.ignored);
     var showMaskingSwitcher = (isUnmaskingNeeded && !isTemporary && !isReadingMode) || isUnmasking;
     useEffect(function () {
-        if (isTemporary && !isEmpty) {
+        if (isTemporary && isEmpty) {
             setEditingMode();
         }
     }, [isEmpty]);

package/LineChart/helpers.d.ts

@@ -3,8 +3,8 @@ import { LineChartOptions } from '@reltio/mdm-sdk';
 import { CartesianGridProps, LineChart, LineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 type LineChartSettings = {
     lineChart: React.ComponentProps<typeof LineChart>;
-    xAxis: XAxisProps;
-    yAxis: YAxisProps;
+    xAxis: Omit<XAxisProps, 'ref'>;
+    yAxis: Omit<YAxisProps, 'ref'>;
     cartesianGrid: Omit<CartesianGridProps, 'ref'>;
     tooltip: TooltipProps<number, string>;
     line: Omit<LineProps, 'ref'>;

package/PieChart/PieChart.test.js

@@ -86,11 +86,15 @@ describe('PieChart', function () {
         expect(wrapper.find(Pie).prop('innerRadius')).toBe('50%');
     });
     it('should call props.onItemClick on sector click', function () {
+        jest.useFakeTimers();
         var onItemClick = jest.fn();
         var wrapper = mount(React.createElement(PieChart, { width: 600, height: 300, data: data, onItemClick: onItemClick }));
+        jest.runAllTimers();
+        wrapper.update();
         var sector = wrapper.find('.recharts-pie-sector').first();
         sector.simulate('click');
         expect(onItemClick).toHaveBeenCalledWith('1');
+        jest.useRealTimers();
     });
     it('should render chart legend with percents correctly', function () {
         var legendPayload = [

package/UploadImageDialog/UploadImageDialog.specs.js

@@ -48,8 +48,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import TestBackend from 'react-dnd-test-backend';
-import { DndProvider } from 'react-dnd';
 import { uploadImage } from '@reltio/mdm-sdk';
 import { MAX_IMAGE_SIZE } from './constants';
 import { UploadImageDialog } from './UploadImageDialog';
@@ -68,8 +66,7 @@ describe('UploadImageDialog tests', function () {
         var props = { onClose: onClose, onUpload: onUpload, open: true };
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(MdmModuleProvider, { values: { imageServicePath: imageServicePath, environment: environment, tenant: tenant } },
-                React.createElement(DndProvider, { backend: TestBackend }, children)));
+            return (React.createElement(MdmModuleProvider, { values: { imageServicePath: imageServicePath, environment: environment, tenant: tenant } }, children));
         };
         return __assign({ user: user }, render(React.createElement(UploadImageDialog, __assign({}, props)), { wrapper: Providers }));
     };

package/UploadImageDialog/components/TargetBox/TargetBox.js

@@ -1,34 +1,45 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
-import { useDrop } from 'react-dnd';
-import { NativeTypes } from 'react-dnd-html5-backend';
 import Typography from '@mui/material/Typography';
 import { SelectImageButton } from '../SelectImageButton';
 import UploadIcon from '../../../icons/UploadIcon';
 import { MAX_IMAGE_SIZE } from '../../constants';
 import { useStyles } from './styles';
+var ACCEPTABLE_FILE_TYPE = 'Files';
 export var TargetBox = function (_a) {
     var _b;
     var onAppendFile = _a.onAppendFile, className = _a.className;
     var styles = useStyles();
-    var _c = useDrop({
-        accept: [NativeTypes.FILE],
-        drop: function (item) {
-            if (item) {
-                // TODO remove after update react-dnd
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                onAppendFile(item.files[0]);
-            }
-        },
-        collect: function (monitor) { return ({
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop()
-        }); }
-    }), _d = _c[0], canDrop = _d.canDrop, isOver = _d.isOver, drop = _c[1];
-    var isActive = canDrop && isOver;
-    return (React.createElement("div", { ref: drop, className: classnames(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className) },
+    var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
+    var handleDragOver = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var filesType = e.dataTransfer.types[0];
+        var isValidType = filesType === ACCEPTABLE_FILE_TYPE;
+        e.dataTransfer.dropEffect = isValidType ? 'copy' : 'none';
+        setIsActive(isValidType);
+    }, []);
+    var handleDragLeave = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var relatedTarget = e.relatedTarget;
+        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
+        if (isLeave || !relatedTarget) {
+            setIsActive(false);
+        }
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsActive(false);
+        var filesType = e.dataTransfer.types[0];
+        if (filesType === ACCEPTABLE_FILE_TYPE) {
+            var file = e.dataTransfer.files[0];
+            onAppendFile(file);
+        }
+    }, [onAppendFile]);
+    return (React.createElement("div", { className: classnames(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
         React.createElement(UploadIcon, { className: styles.icon }),
         React.createElement(Typography, { className: styles.title }, i18n.text('Drag an image here')),
         React.createElement(Typography, { className: styles.description }, i18n.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {

package/UploadImageDialog/components/TargetBox/TargetBox.specs.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';