@reltio/components 1.4.2018 → 1.4.2020

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2018",
+  "version": "1.4.2020",
   "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;
+};

package/test-utils/dndKit/useDraggable.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useNodeRef } from '@dnd-kit/utilities';
+import { useDndContext } from './useDndContext';
+export var useDraggable = function (props) {
+    var _a = useDndContext(), draggableNodesRef = _a.draggableNodesRef, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
+    var onChangeNode = useCallback(function (newElement) {
+        if (newElement) {
+            newElement.setAttribute('data-test-dnd-drag-id', props.id);
+        }
+    }, [props.id]);
+    var _b = useNodeRef(onChangeNode), node = _b[0], setNodeRef = _b[1];
+    var data = useRef(props.data);
+    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 = 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
+    };
+};

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

package/test-utils/dndKit/useDroppable.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNodeRef } from '@dnd-kit/utilities';
+import { useDndContext } from './useDndContext';
+export var useDroppable = function (props) {
+    var _a = useDndContext(), droppableNodesRef = _a.droppableNodesRef, onDragOver = _a.onDragOver;
+    var _b = useState(null), element = _b[0], setElement = _b[1];
+    var onChangeElem = useCallback(function (newElement) {
+        if (newElement) {
+            newElement.setAttribute('data-test-dnd-drop-id', props.id);
+            setElement(newElement);
+        }
+    }, [props.id]);
+    var _c = useNodeRef(onChangeElem), node = _c[0], setNodeRef = _c[1];
+    var data = useRef(props.data);
+    useEffect(function () {
+        droppableNodesRef.current.set(props.id, { id: props.id, data: data, node: node });
+        return function () {
+            var node = droppableNodesRef.current.get(props.id);
+            if (node) {
+                droppableNodesRef.current.delete(props.id);
+            }
+        };
+    }, [props.id]);
+    useEffect(function () {
+        if (!element) {
+            return;
+        }
+        var onMouseOver = function (event) {
+            if (element === event.target) {
+                onDragOver(props.id);
+            }
+        };
+        element.addEventListener('mouseover', onMouseOver);
+        return function () {
+            element.removeEventListener('mouseover', onMouseOver);
+        };
+    }, [element, onDragOver, props.id]);
+    return {
+        setNodeRef: setNodeRef
+    };
+};

package/types/basicTable.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DataTypeDefinition, SearchValue, SortOrder } from '@reltio/mdm-sdk';
 import { useCollapsibleTableRows } from '../hooks/useCollapsibleTableRows';
+import { DraggableAttributes } from '@dnd-kit/core';
 export type Sorting = {
     field: string;
     order: SortOrder;
@@ -89,4 +90,7 @@ export type OnFilter = (event: {
     columnId: string;
     filter: ColumnFilter;
 }) => void;
+export type DraggableProps = DraggableAttributes & {
+    ref: (element: HTMLElement | null) => void;
+};
 export {};

package/VerticalHeadingsTable/components/TableColumnDragLayer/TableColumnDragLayer.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type Props = {
-    columnHeight: number;
-};
-export declare const TableColumnDragLayer: ({ columnHeight }: Props) => React.JSX.Element;
-export {};

package/VerticalHeadingsTable/components/TableColumnDragLayer/TableColumnDragLayer.js

@@ -1,23 +0,0 @@
-import React, { useRef } from 'react';
-import { useDragLayer } from 'react-dnd';
-import { TableColumnDragPreview } from '../TableColumnDragPreview';
-import { DndItemTypes } from '../../types';
-import { getItemStyles } from './helpers';
-import { useStyles } from './styles';
-export var TableColumnDragLayer = function (_a) {
-    var _b;
-    var columnHeight = _a.columnHeight;
-    var styles = useStyles();
-    var dragLayerRef = useRef();
-    var _c = useDragLayer(function (monitor) { return ({
-        isDragging: monitor.isDragging(),
-        clientOffset: monitor.getClientOffset(),
-        item: monitor.getItem()
-    }); }), isDragging = _c.isDragging, clientOffset = _c.clientOffset, item = _c.item;
-    if (!isDragging || !item) {
-        return null;
-    }
-    var columnWidth = (_b = item.getColumnWidth) === null || _b === void 0 ? void 0 : _b.call(item);
-    return (React.createElement("div", { className: styles.dragLayer, ref: dragLayerRef },
-        React.createElement("div", { style: getItemStyles(dragLayerRef.current, clientOffset, columnWidth) }, item.type === DndItemTypes.Column && (React.createElement(TableColumnDragPreview, { columnWidth: columnWidth, columnHeight: columnHeight, item: item })))));
-};

package/VerticalHeadingsTable/components/TableColumnDragLayer/helpers.d.ts

@@ -1,6 +0,0 @@
-import { XYCoord } from 'react-dnd';
-export declare const getItemStyles: (dragLayerEl: HTMLElement, clientOffset: XYCoord, columnWidth: number) => {
-    display: string;
-    transform: string;
-    WebkitTransform: string;
-};

package/VerticalHeadingsTable/components/TableColumnDragLayer/helpers.js

@@ -1,11 +0,0 @@
-export var getItemStyles = function (dragLayerEl, clientOffset, columnWidth) {
-    var dragLayerRect = (dragLayerEl === null || dragLayerEl === void 0 ? void 0 : dragLayerEl.getBoundingClientRect()) || { x: 0, y: 0 };
-    var dragItemX = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.x) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.x) - columnWidth / 2;
-    var dragItemY = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.y) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.y);
-    var dragItemTransform = "translate(".concat(dragItemX, "px, ").concat(dragItemY, "px");
-    return {
-        display: 'flex',
-        transform: dragItemTransform,
-        WebkitTransform: dragItemTransform
-    };
-};

package/VerticalHeadingsTable/components/TableColumnDragLayer/index.d.ts

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

package/VerticalHeadingsTable/components/TableColumnDragLayer/index.js

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

package/VerticalHeadingsTable/components/TableColumnDragLayer/styles.js

@@ -1,13 +0,0 @@
-import { makeStyles } from '@mui/styles';
-import { POPUP_Z_INDEX } from '../../../constants';
-export var useStyles = makeStyles({
-    dragLayer: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: POPUP_Z_INDEX,
-        pointerEvents: 'none'
-    }
-});

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/TableColumnDragLayer.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-type Props = {
-    columnHeight: number;
-};
-export declare const TableColumnDragLayer: ({ columnHeight }: Props) => React.JSX.Element;
-export {};

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/TableColumnDragLayer.js

@@ -1,50 +0,0 @@
-"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.TableColumnDragLayer = void 0;
-var react_1 = __importStar(require("react"));
-var react_dnd_1 = require("react-dnd");
-var TableColumnDragPreview_1 = require("../TableColumnDragPreview");
-var types_1 = require("../../types");
-var helpers_1 = require("./helpers");
-var styles_1 = require("./styles");
-var TableColumnDragLayer = function (_a) {
-    var _b;
-    var columnHeight = _a.columnHeight;
-    var styles = (0, styles_1.useStyles)();
-    var dragLayerRef = (0, react_1.useRef)();
-    var _c = (0, react_dnd_1.useDragLayer)(function (monitor) { return ({
-        isDragging: monitor.isDragging(),
-        clientOffset: monitor.getClientOffset(),
-        item: monitor.getItem()
-    }); }), isDragging = _c.isDragging, clientOffset = _c.clientOffset, item = _c.item;
-    if (!isDragging || !item) {
-        return null;
-    }
-    var columnWidth = (_b = item.getColumnWidth) === null || _b === void 0 ? void 0 : _b.call(item);
-    return (react_1.default.createElement("div", { className: styles.dragLayer, ref: dragLayerRef },
-        react_1.default.createElement("div", { style: (0, helpers_1.getItemStyles)(dragLayerRef.current, clientOffset, columnWidth) }, item.type === types_1.DndItemTypes.Column && (react_1.default.createElement(TableColumnDragPreview_1.TableColumnDragPreview, { columnWidth: columnWidth, columnHeight: columnHeight, item: item })))));
-};
-exports.TableColumnDragLayer = TableColumnDragLayer;

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/helpers.d.ts

@@ -1,6 +0,0 @@
-import { XYCoord } from 'react-dnd';
-export declare const getItemStyles: (dragLayerEl: HTMLElement, clientOffset: XYCoord, columnWidth: number) => {
-    display: string;
-    transform: string;
-    WebkitTransform: string;
-};

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/helpers.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemStyles = void 0;
-var getItemStyles = function (dragLayerEl, clientOffset, columnWidth) {
-    var dragLayerRect = (dragLayerEl === null || dragLayerEl === void 0 ? void 0 : dragLayerEl.getBoundingClientRect()) || { x: 0, y: 0 };
-    var dragItemX = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.x) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.x) - columnWidth / 2;
-    var dragItemY = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.y) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.y);
-    var dragItemTransform = "translate(".concat(dragItemX, "px, ").concat(dragItemY, "px");
-    return {
-        display: 'flex',
-        transform: dragItemTransform,
-        WebkitTransform: dragItemTransform
-    };
-};
-exports.getItemStyles = getItemStyles;

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/index.d.ts

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

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/index.js

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

package/cjs/VerticalHeadingsTable/components/TableColumnDragLayer/styles.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-var constants_1 = require("../../../constants");
-exports.useStyles = (0, styles_1.makeStyles)({
-    dragLayer: {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        zIndex: constants_1.POPUP_Z_INDEX,
-        pointerEvents: 'none'
-    }
-});

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

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CrosswalkDragLayer: React.MemoExoticComponent<() => React.JSX.Element>;

package/cjs/features/crosswalks/CrosswalkDragLayer/CrosswalkDragLayer.js

@@ -1,51 +0,0 @@
-"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.CrosswalkDragLayer = void 0;
-var react_1 = __importStar(require("react"));
-var react_dnd_1 = require("react-dnd");
-var CrosswalkDragPreview_1 = require("./components/CrosswalkDragPreview");
-var styles_1 = require("./styles");
-exports.CrosswalkDragLayer = (0, react_1.memo)(function () {
-    var _a;
-    var styles = (0, styles_1.useStyles)();
-    var _b = (0, react_dnd_1.useDragLayer)(function (monitor) { return ({
-        isDragging: monitor.isDragging(),
-        clientOffset: monitor.getClientOffset(),
-        item: monitor.getItem()
-    }); }), isDragging = _b.isDragging, clientOffset = _b.clientOffset, item = _b.item;
-    var dragLayerRef = (0, react_1.useRef)();
-    var dragLayerRect = ((_a = dragLayerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || { x: 0, y: 0 };
-    var dragItemX = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.x) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.x);
-    var dragItemY = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.y) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.y);
-    var dragItemTransform = "translate(".concat(dragItemX, "px, ").concat(dragItemY, "px");
-    return (isDragging && (react_1.default.createElement("div", { ref: dragLayerRef, className: styles.dragLayer },
-        react_1.default.createElement("div", { style: {
-                display: 'flex',
-                transform: dragItemTransform,
-                WebkitTransform: dragItemTransform
-            } }, item.type === 'Crosswalk' && react_1.default.createElement(CrosswalkDragPreview_1.CrosswalkDragPreview, { crosswalk: item.crosswalk })))));
-});
-exports.CrosswalkDragLayer.displayName = 'CrosswalkDragLayer';