@reltio/components 1.4.2018 → 1.4.2019

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

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

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DndContextComponent = void 0;
+var react_1 = __importStar(require("react"));
+var DndContext_1 = require("./DndContext");
+var DndMonitorContext_1 = require("./DndMonitorContext");
+var useDndMonitorProvider_1 = require("./useDndMonitorProvider");
+var DndContextComponent = function (_a) {
+    var onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onDragOver = _a.onDragOver, children = _a.children;
+    var draggableNodesRef = (0, react_1.useRef)(new Map());
+    var droppableNodesRef = (0, react_1.useRef)(new Map());
+    var _b = (0, useDndMonitorProvider_1.useDndMonitorProvider)(), dispatchMonitorEvent = _b[0], registerMonitorListener = _b[1];
+    var dragActiveIdRef = (0, react_1.useRef)(null);
+    var dragOverIdRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(null), dragActive = _c[0], setDragActive = _c[1];
+    var handleDragStart = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(function () { return ({
+        draggableNodesRef: draggableNodesRef,
+        droppableNodesRef: droppableNodesRef,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        dragActive: dragActive,
+        measureDroppableContainers: function () { }
+    }); }, [dragActive, handleDragStart, handleDragEnd, handleDragOver]);
+    return (react_1.default.createElement(DndContext_1.DndContext.Provider, { value: contextValue },
+        react_1.default.createElement(DndMonitorContext_1.DndMonitorContext.Provider, { value: registerMonitorListener }, children)));
+};
+exports.DndContextComponent = DndContextComponent;

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragOverlay = void 0;
+var react_1 = __importDefault(require("react"));
+var useDndContext_1 = require("./useDndContext");
+var DragOverlay = function (_a) {
+    var children = _a.children;
+    var dndContext = (0, useDndContext_1.useDndContext)();
+    return react_1.default.createElement("div", null, dndContext.dragActive ? children : null);
+};
+exports.DragOverlay = DragOverlay;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mockDndKit = void 0;
+var DndContextComponent_1 = require("./DndContextComponent");
+var DragOverlay_1 = require("./DragOverlay");
+var useDndContext_1 = require("./useDndContext");
+var useDndMonitor_1 = require("./useDndMonitor");
+var useDraggable_1 = require("./useDraggable");
+var useDroppable_1 = require("./useDroppable");
+exports.mockDndKit = {
+    DndContext: DndContextComponent_1.DndContextComponent,
+    DragOverlay: DragOverlay_1.DragOverlay,
+    useDraggable: useDraggable_1.useDraggable,
+    useDroppable: useDroppable_1.useDroppable,
+    useDndContext: useDndContext_1.useDndContext,
+    useDndMonitor: useDndMonitor_1.useDndMonitor,
+    useSensor: jest.fn(),
+    useSensors: jest.fn(),
+    MeasuringStrategy: {
+        Always: 'Always'
+    }
+};

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndContext = void 0;
+var react_1 = require("react");
+var DndContext_1 = require("./DndContext");
+var useDndContext = function () {
+    var contextValue = (0, react_1.useContext)(DndContext_1.DndContext);
+    if (!contextValue) {
+        throw Error('Must use inside DndContext');
+    }
+    return contextValue;
+};
+exports.useDndContext = useDndContext;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndMonitor = void 0;
+var react_1 = require("react");
+var DndMonitorContext_1 = require("./DndMonitorContext");
+var useDndMonitor = function (listener) {
+    var registerListener = (0, react_1.useContext)(DndMonitorContext_1.DndMonitorContext);
+    (0, react_1.useEffect)(function () {
+        var unsubscribe = registerListener(listener);
+        return unsubscribe;
+    }, [listener, registerListener]);
+};
+exports.useDndMonitor = useDndMonitor;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndMonitorProvider = void 0;
+var react_1 = require("react");
+var useDndMonitorProvider = function () {
+    var listeners = (0, react_1.useState)(function () { return new Set(); })[0];
+    var registerListener = (0, react_1.useCallback)(function (listener) {
+        listeners.add(listener);
+        return function () { return listeners.delete(listener); };
+    }, [listeners]);
+    var dispatch = (0, react_1.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];
+};
+exports.useDndMonitorProvider = useDndMonitorProvider;

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

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = void 0;
+var react_1 = require("react");
+var utilities_1 = require("@dnd-kit/utilities");
+var useDndContext_1 = require("./useDndContext");
+var useDraggable = function (props) {
+    var _a = (0, useDndContext_1.useDndContext)(), draggableNodesRef = _a.draggableNodesRef, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
+    var onChangeNode = (0, react_1.useCallback)(function (newElement) {
+        if (newElement) {
+            newElement.setAttribute('data-test-dnd-drag-id', props.id);
+        }
+    }, [props.id]);
+    var _b = (0, utilities_1.useNodeRef)(onChangeNode), node = _b[0], setNodeRef = _b[1];
+    var data = (0, react_1.useRef)(props.data);
+    (0, react_1.useEffect)(function () {
+        draggableNodesRef.current.set(props.id, { id: props.id, data: data, node: node });
+        return function () {
+            var node = draggableNodesRef.current.get(props.id);
+            if (node) {
+                draggableNodesRef.current.delete(props.id);
+            }
+        };
+    }, [props.id]);
+    var listeners = (0, react_1.useMemo)(function () {
+        return props.disabled
+            ? {}
+            : {
+                onMouseDown: function () {
+                    onDragStart(props.id);
+                },
+                onMouseUp: function () {
+                    onDragEnd();
+                }
+            };
+    }, [props.id, onDragStart, onDragEnd, props.disabled]);
+    return {
+        attributes: {},
+        listeners: listeners,
+        setNodeRef: setNodeRef
+    };
+};
+exports.useDraggable = useDraggable;

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

@@ -0,0 +1,4 @@
+import { MockUseDraggableArguments } from './type';
+export declare const useDroppable: (props: MockUseDraggableArguments) => {
+    setNodeRef: (element: HTMLElement | null) => void;
+};