material-react-table 0.20.0 → 0.22.1

package/dist/material-react-table.cjs.development.js

@@ -9,8 +9,8 @@ var React__default = _interopDefault(React);
 var iconsMaterial = require('@mui/icons-material');
 var reactTable = require('@tanstack/react-table');
 var material = require('@mui/material');
-var jsxRuntime = require('react/jsx-runtime');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
+var reactVirtual = require('react-virtual');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -369,2782 +369,6 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }));
 };
 
-/**
- * Create the React Context
- */ const DndContext = React.createContext({
-    dragDropManager: undefined
-});
-
-// Inlined version of the `symbol-observable` polyfill
-var $$observable = (function () {
-  return typeof Symbol === 'function' && Symbol.observable || '@@observable';
-})();
-
-/**
- * These are private action types reserved by Redux.
- * For any unknown actions, you must return the current state.
- * If the current state is undefined, you must return the initial state.
- * Do not reference these action types directly in your code.
- */
-var randomString = function randomString() {
-  return Math.random().toString(36).substring(7).split('').join('.');
-};
-
-var ActionTypes = {
-  INIT: "@@redux/INIT" + randomString(),
-  REPLACE: "@@redux/REPLACE" + randomString(),
-  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
-    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
-  }
-};
-
-/**
- * @param {any} obj The object to inspect.
- * @returns {boolean} True if the argument appears to be a plain object.
- */
-function isPlainObject(obj) {
-  if (typeof obj !== 'object' || obj === null) return false;
-  var proto = obj;
-
-  while (Object.getPrototypeOf(proto) !== null) {
-    proto = Object.getPrototypeOf(proto);
-  }
-
-  return Object.getPrototypeOf(obj) === proto;
-}
-
-// Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of
-function miniKindOf(val) {
-  if (val === void 0) return 'undefined';
-  if (val === null) return 'null';
-  var type = typeof val;
-
-  switch (type) {
-    case 'boolean':
-    case 'string':
-    case 'number':
-    case 'symbol':
-    case 'function':
-      {
-        return type;
-      }
-  }
-
-  if (Array.isArray(val)) return 'array';
-  if (isDate(val)) return 'date';
-  if (isError(val)) return 'error';
-  var constructorName = ctorName(val);
-
-  switch (constructorName) {
-    case 'Symbol':
-    case 'Promise':
-    case 'WeakMap':
-    case 'WeakSet':
-    case 'Map':
-    case 'Set':
-      return constructorName;
-  } // other
-
-
-  return type.slice(8, -1).toLowerCase().replace(/\s/g, '');
-}
-
-function ctorName(val) {
-  return typeof val.constructor === 'function' ? val.constructor.name : null;
-}
-
-function isError(val) {
-  return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';
-}
-
-function isDate(val) {
-  if (val instanceof Date) return true;
-  return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';
-}
-
-function kindOf(val) {
-  var typeOfVal = typeof val;
-
-  {
-    typeOfVal = miniKindOf(val);
-  }
-
-  return typeOfVal;
-}
-
-/**
- * @deprecated
- *
- * **We recommend using the `configureStore` method
- * of the `@reduxjs/toolkit` package**, which replaces `createStore`.
- *
- * Redux Toolkit is our recommended approach for writing Redux logic today,
- * including store setup, reducers, data fetching, and more.
- *
- * **For more details, please read this Redux docs page:**
- * **https://redux.js.org/introduction/why-rtk-is-redux-today**
- *
- * `configureStore` from Redux Toolkit is an improved version of `createStore` that
- * simplifies setup and helps avoid common bugs.
- *
- * You should not be using the `redux` core package by itself today, except for learning purposes.
- * The `createStore` method from the core `redux` package will not be removed, but we encourage
- * all users to migrate to using Redux Toolkit for all Redux code.
- *
- * If you want to use `createStore` without this visual deprecation warning, use
- * the `legacy_createStore` import instead:
- *
- * `import { legacy_createStore as createStore} from 'redux'`
- *
- */
-
-function createStore(reducer, preloadedState, enhancer) {
-  var _ref2;
-
-  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
-    throw new Error( 'It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.');
-  }
-
-  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
-    enhancer = preloadedState;
-    preloadedState = undefined;
-  }
-
-  if (typeof enhancer !== 'undefined') {
-    if (typeof enhancer !== 'function') {
-      throw new Error( "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
-    }
-
-    return enhancer(createStore)(reducer, preloadedState);
-  }
-
-  if (typeof reducer !== 'function') {
-    throw new Error( "Expected the root reducer to be a function. Instead, received: '" + kindOf(reducer) + "'");
-  }
-
-  var currentReducer = reducer;
-  var currentState = preloadedState;
-  var currentListeners = [];
-  var nextListeners = currentListeners;
-  var isDispatching = false;
-  /**
-   * This makes a shallow copy of currentListeners so we can use
-   * nextListeners as a temporary list while dispatching.
-   *
-   * This prevents any bugs around consumers calling
-   * subscribe/unsubscribe in the middle of a dispatch.
-   */
-
-  function ensureCanMutateNextListeners() {
-    if (nextListeners === currentListeners) {
-      nextListeners = currentListeners.slice();
-    }
-  }
-  /**
-   * Reads the state tree managed by the store.
-   *
-   * @returns {any} The current state tree of your application.
-   */
-
-
-  function getState() {
-    if (isDispatching) {
-      throw new Error( 'You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
-    }
-
-    return currentState;
-  }
-  /**
-   * Adds a change listener. It will be called any time an action is dispatched,
-   * and some part of the state tree may potentially have changed. You may then
-   * call `getState()` to read the current state tree inside the callback.
-   *
-   * You may call `dispatch()` from a change listener, with the following
-   * caveats:
-   *
-   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
-   * If you subscribe or unsubscribe while the listeners are being invoked, this
-   * will not have any effect on the `dispatch()` that is currently in progress.
-   * However, the next `dispatch()` call, whether nested or not, will use a more
-   * recent snapshot of the subscription list.
-   *
-   * 2. The listener should not expect to see all state changes, as the state
-   * might have been updated multiple times during a nested `dispatch()` before
-   * the listener is called. It is, however, guaranteed that all subscribers
-   * registered before the `dispatch()` started will be called with the latest
-   * state by the time it exits.
-   *
-   * @param {Function} listener A callback to be invoked on every dispatch.
-   * @returns {Function} A function to remove this change listener.
-   */
-
-
-  function subscribe(listener) {
-    if (typeof listener !== 'function') {
-      throw new Error( "Expected the listener to be a function. Instead, received: '" + kindOf(listener) + "'");
-    }
-
-    if (isDispatching) {
-      throw new Error( 'You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
-    }
-
-    var isSubscribed = true;
-    ensureCanMutateNextListeners();
-    nextListeners.push(listener);
-    return function unsubscribe() {
-      if (!isSubscribed) {
-        return;
-      }
-
-      if (isDispatching) {
-        throw new Error( 'You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
-      }
-
-      isSubscribed = false;
-      ensureCanMutateNextListeners();
-      var index = nextListeners.indexOf(listener);
-      nextListeners.splice(index, 1);
-      currentListeners = null;
-    };
-  }
-  /**
-   * Dispatches an action. It is the only way to trigger a state change.
-   *
-   * The `reducer` function, used to create the store, will be called with the
-   * current state tree and the given `action`. Its return value will
-   * be considered the **next** state of the tree, and the change listeners
-   * will be notified.
-   *
-   * The base implementation only supports plain object actions. If you want to
-   * dispatch a Promise, an Observable, a thunk, or something else, you need to
-   * wrap your store creating function into the corresponding middleware. For
-   * example, see the documentation for the `redux-thunk` package. Even the
-   * middleware will eventually dispatch plain object actions using this method.
-   *
-   * @param {Object} action A plain object representing “what changed”. It is
-   * a good idea to keep actions serializable so you can record and replay user
-   * sessions, or use the time travelling `redux-devtools`. An action must have
-   * a `type` property which may not be `undefined`. It is a good idea to use
-   * string constants for action types.
-   *
-   * @returns {Object} For convenience, the same action object you dispatched.
-   *
-   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
-   * return something else (for example, a Promise you can await).
-   */
-
-
-  function dispatch(action) {
-    if (!isPlainObject(action)) {
-      throw new Error( "Actions must be plain objects. Instead, the actual type was: '" + kindOf(action) + "'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.");
-    }
-
-    if (typeof action.type === 'undefined') {
-      throw new Error( 'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.');
-    }
-
-    if (isDispatching) {
-      throw new Error( 'Reducers may not dispatch actions.');
-    }
-
-    try {
-      isDispatching = true;
-      currentState = currentReducer(currentState, action);
-    } finally {
-      isDispatching = false;
-    }
-
-    var listeners = currentListeners = nextListeners;
-
-    for (var i = 0; i < listeners.length; i++) {
-      var listener = listeners[i];
-      listener();
-    }
-
-    return action;
-  }
-  /**
-   * Replaces the reducer currently used by the store to calculate the state.
-   *
-   * You might need this if your app implements code splitting and you want to
-   * load some of the reducers dynamically. You might also need this if you
-   * implement a hot reloading mechanism for Redux.
-   *
-   * @param {Function} nextReducer The reducer for the store to use instead.
-   * @returns {void}
-   */
-
-
-  function replaceReducer(nextReducer) {
-    if (typeof nextReducer !== 'function') {
-      throw new Error( "Expected the nextReducer to be a function. Instead, received: '" + kindOf(nextReducer));
-    }
-
-    currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
-    // Any reducers that existed in both the new and old rootReducer
-    // will receive the previous state. This effectively populates
-    // the new state tree with any relevant data from the old one.
-
-    dispatch({
-      type: ActionTypes.REPLACE
-    });
-  }
-  /**
-   * Interoperability point for observable/reactive libraries.
-   * @returns {observable} A minimal observable of state changes.
-   * For more information, see the observable proposal:
-   * https://github.com/tc39/proposal-observable
-   */
-
-
-  function observable() {
-    var _ref;
-
-    var outerSubscribe = subscribe;
-    return _ref = {
-      /**
-       * The minimal observable subscription method.
-       * @param {Object} observer Any object that can be used as an observer.
-       * The observer object should have a `next` method.
-       * @returns {subscription} An object with an `unsubscribe` method that can
-       * be used to unsubscribe the observable from the store, and prevent further
-       * emission of values from the observable.
-       */
-      subscribe: function subscribe(observer) {
-        if (typeof observer !== 'object' || observer === null) {
-          throw new Error( "Expected the observer to be an object. Instead, received: '" + kindOf(observer) + "'");
-        }
-
-        function observeState() {
-          if (observer.next) {
-            observer.next(getState());
-          }
-        }
-
-        observeState();
-        var unsubscribe = outerSubscribe(observeState);
-        return {
-          unsubscribe: unsubscribe
-        };
-      }
-    }, _ref[$$observable] = function () {
-      return this;
-    }, _ref;
-  } // When a store is created, an "INIT" action is dispatched so that every
-  // reducer returns their initial state. This effectively populates
-  // the initial state tree.
-
-
-  dispatch({
-    type: ActionTypes.INIT
-  });
-  return _ref2 = {
-    dispatch: dispatch,
-    subscribe: subscribe,
-    getState: getState,
-    replaceReducer: replaceReducer
-  }, _ref2[$$observable] = observable, _ref2;
-}
-
-/**
- * Prints a warning in the console if it exists.
- *
- * @param {String} message The warning message.
- * @returns {void}
- */
-function warning(message) {
-  /* eslint-disable no-console */
-  if (typeof console !== 'undefined' && typeof console.error === 'function') {
-    console.error(message);
-  }
-  /* eslint-enable no-console */
-
-
-  try {
-    // This error was thrown as a convenience so that if you enable
-    // "break on all exceptions" in your console,
-    // it would pause the execution at this line.
-    throw new Error(message);
-  } catch (e) {} // eslint-disable-line no-empty
-
-}
-
-/*
- * This is a dummy function to check if the function name has been altered by minification.
- * If the function has been minified and NODE_ENV !== 'production', warn the user.
- */
-
-function isCrushed() {}
-
-if ( typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
-  warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
-}
-
-/**
- * Use invariant() to assert state which your program assumes to be true.
- *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
- *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */ function invariant(condition, format, ...args) {
-    if (isProduction()) {
-        if (format === undefined) {
-            throw new Error('invariant requires an error message argument');
-        }
-    }
-    if (!condition) {
-        let error;
-        if (format === undefined) {
-            error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
-        } else {
-            let argIndex = 0;
-            error = new Error(format.replace(/%s/g, function() {
-                return args[argIndex++];
-            }));
-            error.name = 'Invariant Violation';
-        }
-        error.framesToPop = 1 // we don't care about invariant's own frame
-        ;
-        throw error;
-    }
-}
-function isProduction() {
-    return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
-}
-
-// cheap lodash replacements
-/**
- * drop-in replacement for _.get
- * @param obj
- * @param path
- * @param defaultValue
- */ function get(obj, path, defaultValue) {
-    return path.split('.').reduce((a, c)=>a && a[c] ? a[c] : defaultValue || null
-    , obj);
-}
-/**
- * drop-in replacement for _.without
- */ function without(items, item) {
-    return items.filter((i)=>i !== item
-    );
-}
-/**
- * drop-in replacement for _.isString
- * @param input
- */ function isObject(input) {
-    return typeof input === 'object';
-}
-/**
- * replacement for _.xor
- * @param itemsA
- * @param itemsB
- */ function xor(itemsA, itemsB) {
-    const map = new Map();
-    const insertItem = (item)=>{
-        map.set(item, map.has(item) ? map.get(item) + 1 : 1);
-    };
-    itemsA.forEach(insertItem);
-    itemsB.forEach(insertItem);
-    const result = [];
-    map.forEach((count, key)=>{
-        if (count === 1) {
-            result.push(key);
-        }
-    });
-    return result;
-}
-/**
- * replacement for _.intersection
- * @param itemsA
- * @param itemsB
- */ function intersection(itemsA, itemsB) {
-    return itemsA.filter((t)=>itemsB.indexOf(t) > -1
-    );
-}
-
-const INIT_COORDS = 'dnd-core/INIT_COORDS';
-const BEGIN_DRAG = 'dnd-core/BEGIN_DRAG';
-const PUBLISH_DRAG_SOURCE = 'dnd-core/PUBLISH_DRAG_SOURCE';
-const HOVER = 'dnd-core/HOVER';
-const DROP = 'dnd-core/DROP';
-const END_DRAG = 'dnd-core/END_DRAG';
-
-function setClientOffset(clientOffset, sourceClientOffset) {
-    return {
-        type: INIT_COORDS,
-        payload: {
-            sourceClientOffset: sourceClientOffset || null,
-            clientOffset: clientOffset || null
-        }
-    };
-}
-
-const ResetCoordinatesAction = {
-    type: INIT_COORDS,
-    payload: {
-        clientOffset: null,
-        sourceClientOffset: null
-    }
-};
-function createBeginDrag(manager) {
-    return function beginDrag(sourceIds = [], options = {
-        publishSource: true
-    }) {
-        const { publishSource =true , clientOffset , getSourceClientOffset ,  } = options;
-        const monitor = manager.getMonitor();
-        const registry = manager.getRegistry();
-        // Initialize the coordinates using the client offset
-        manager.dispatch(setClientOffset(clientOffset));
-        verifyInvariants(sourceIds, monitor, registry);
-        // Get the draggable source
-        const sourceId = getDraggableSource(sourceIds, monitor);
-        if (sourceId == null) {
-            manager.dispatch(ResetCoordinatesAction);
-            return;
-        }
-        // Get the source client offset
-        let sourceClientOffset = null;
-        if (clientOffset) {
-            if (!getSourceClientOffset) {
-                throw new Error('getSourceClientOffset must be defined');
-            }
-            verifyGetSourceClientOffsetIsFunction(getSourceClientOffset);
-            sourceClientOffset = getSourceClientOffset(sourceId);
-        }
-        // Initialize the full coordinates
-        manager.dispatch(setClientOffset(clientOffset, sourceClientOffset));
-        const source = registry.getSource(sourceId);
-        const item = source.beginDrag(monitor, sourceId);
-        // If source.beginDrag returns null, this is an indicator to cancel the drag
-        if (item == null) {
-            return undefined;
-        }
-        verifyItemIsObject(item);
-        registry.pinSource(sourceId);
-        const itemType = registry.getSourceType(sourceId);
-        return {
-            type: BEGIN_DRAG,
-            payload: {
-                itemType,
-                item,
-                sourceId,
-                clientOffset: clientOffset || null,
-                sourceClientOffset: sourceClientOffset || null,
-                isSourcePublic: !!publishSource
-            }
-        };
-    };
-}
-function verifyInvariants(sourceIds, monitor, registry) {
-    invariant(!monitor.isDragging(), 'Cannot call beginDrag while dragging.');
-    sourceIds.forEach(function(sourceId) {
-        invariant(registry.getSource(sourceId), 'Expected sourceIds to be registered.');
-    });
-}
-function verifyGetSourceClientOffsetIsFunction(getSourceClientOffset) {
-    invariant(typeof getSourceClientOffset === 'function', 'When clientOffset is provided, getSourceClientOffset must be a function.');
-}
-function verifyItemIsObject(item) {
-    invariant(isObject(item), 'Item must be an object.');
-}
-function getDraggableSource(sourceIds, monitor) {
-    let sourceId = null;
-    for(let i = sourceIds.length - 1; i >= 0; i--){
-        if (monitor.canDragSource(sourceIds[i])) {
-            sourceId = sourceIds[i];
-            break;
-        }
-    }
-    return sourceId;
-}
-
-function _defineProperty(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _objectSpread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === 'function') {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function createDrop(manager) {
-    return function drop(options = {}) {
-        const monitor = manager.getMonitor();
-        const registry = manager.getRegistry();
-        verifyInvariants$1(monitor);
-        const targetIds = getDroppableTargets(monitor);
-        // Multiple actions are dispatched here, which is why this doesn't return an action
-        targetIds.forEach((targetId, index)=>{
-            const dropResult = determineDropResult(targetId, index, registry, monitor);
-            const action = {
-                type: DROP,
-                payload: {
-                    dropResult: _objectSpread({}, options, dropResult)
-                }
-            };
-            manager.dispatch(action);
-        });
-    };
-}
-function verifyInvariants$1(monitor) {
-    invariant(monitor.isDragging(), 'Cannot call drop while not dragging.');
-    invariant(!monitor.didDrop(), 'Cannot call drop twice during one drag operation.');
-}
-function determineDropResult(targetId, index, registry, monitor) {
-    const target = registry.getTarget(targetId);
-    let dropResult = target ? target.drop(monitor, targetId) : undefined;
-    verifyDropResultType(dropResult);
-    if (typeof dropResult === 'undefined') {
-        dropResult = index === 0 ? {} : monitor.getDropResult();
-    }
-    return dropResult;
-}
-function verifyDropResultType(dropResult) {
-    invariant(typeof dropResult === 'undefined' || isObject(dropResult), 'Drop result must either be an object or undefined.');
-}
-function getDroppableTargets(monitor) {
-    const targetIds = monitor.getTargetIds().filter(monitor.canDropOnTarget, monitor);
-    targetIds.reverse();
-    return targetIds;
-}
-
-function createEndDrag(manager) {
-    return function endDrag() {
-        const monitor = manager.getMonitor();
-        const registry = manager.getRegistry();
-        verifyIsDragging(monitor);
-        const sourceId = monitor.getSourceId();
-        if (sourceId != null) {
-            const source = registry.getSource(sourceId, true);
-            source.endDrag(monitor, sourceId);
-            registry.unpinSource();
-        }
-        return {
-            type: END_DRAG
-        };
-    };
-}
-function verifyIsDragging(monitor) {
-    invariant(monitor.isDragging(), 'Cannot call endDrag while not dragging.');
-}
-
-function matchesType(targetType, draggedItemType) {
-    if (draggedItemType === null) {
-        return targetType === null;
-    }
-    return Array.isArray(targetType) ? targetType.some((t)=>t === draggedItemType
-    ) : targetType === draggedItemType;
-}
-
-function createHover(manager) {
-    return function hover(targetIdsArg, { clientOffset  } = {}) {
-        verifyTargetIdsIsArray(targetIdsArg);
-        const targetIds = targetIdsArg.slice(0);
-        const monitor = manager.getMonitor();
-        const registry = manager.getRegistry();
-        const draggedItemType = monitor.getItemType();
-        removeNonMatchingTargetIds(targetIds, registry, draggedItemType);
-        checkInvariants(targetIds, monitor, registry);
-        hoverAllTargets(targetIds, monitor, registry);
-        return {
-            type: HOVER,
-            payload: {
-                targetIds,
-                clientOffset: clientOffset || null
-            }
-        };
-    };
-}
-function verifyTargetIdsIsArray(targetIdsArg) {
-    invariant(Array.isArray(targetIdsArg), 'Expected targetIds to be an array.');
-}
-function checkInvariants(targetIds, monitor, registry) {
-    invariant(monitor.isDragging(), 'Cannot call hover while not dragging.');
-    invariant(!monitor.didDrop(), 'Cannot call hover after drop.');
-    for(let i = 0; i < targetIds.length; i++){
-        const targetId = targetIds[i];
-        invariant(targetIds.lastIndexOf(targetId) === i, 'Expected targetIds to be unique in the passed array.');
-        const target = registry.getTarget(targetId);
-        invariant(target, 'Expected targetIds to be registered.');
-    }
-}
-function removeNonMatchingTargetIds(targetIds, registry, draggedItemType) {
-    // Remove those targetIds that don't match the targetType.  This
-    // fixes shallow isOver which would only be non-shallow because of
-    // non-matching targets.
-    for(let i = targetIds.length - 1; i >= 0; i--){
-        const targetId = targetIds[i];
-        const targetType = registry.getTargetType(targetId);
-        if (!matchesType(targetType, draggedItemType)) {
-            targetIds.splice(i, 1);
-        }
-    }
-}
-function hoverAllTargets(targetIds, monitor, registry) {
-    // Finally call hover on all matching targets.
-    targetIds.forEach(function(targetId) {
-        const target = registry.getTarget(targetId);
-        target.hover(monitor, targetId);
-    });
-}
-
-function createPublishDragSource(manager) {
-    return function publishDragSource() {
-        const monitor = manager.getMonitor();
-        if (monitor.isDragging()) {
-            return {
-                type: PUBLISH_DRAG_SOURCE
-            };
-        }
-        return;
-    };
-}
-
-function createDragDropActions(manager) {
-    return {
-        beginDrag: createBeginDrag(manager),
-        publishDragSource: createPublishDragSource(manager),
-        hover: createHover(manager),
-        drop: createDrop(manager),
-        endDrag: createEndDrag(manager)
-    };
-}
-
-class DragDropManagerImpl {
-    receiveBackend(backend) {
-        this.backend = backend;
-    }
-    getMonitor() {
-        return this.monitor;
-    }
-    getBackend() {
-        return this.backend;
-    }
-    getRegistry() {
-        return this.monitor.registry;
-    }
-    getActions() {
-        /* eslint-disable-next-line @typescript-eslint/no-this-alias */ const manager = this;
-        const { dispatch  } = this.store;
-        function bindActionCreator(actionCreator) {
-            return (...args)=>{
-                const action = actionCreator.apply(manager, args);
-                if (typeof action !== 'undefined') {
-                    dispatch(action);
-                }
-            };
-        }
-        const actions = createDragDropActions(this);
-        return Object.keys(actions).reduce((boundActions, key)=>{
-            const action = actions[key];
-            boundActions[key] = bindActionCreator(action);
-            return boundActions;
-        }, {});
-    }
-    dispatch(action) {
-        this.store.dispatch(action);
-    }
-    constructor(store, monitor){
-        this.isSetUp = false;
-        this.handleRefCountChange = ()=>{
-            const shouldSetUp = this.store.getState().refCount > 0;
-            if (this.backend) {
-                if (shouldSetUp && !this.isSetUp) {
-                    this.backend.setup();
-                    this.isSetUp = true;
-                } else if (!shouldSetUp && this.isSetUp) {
-                    this.backend.teardown();
-                    this.isSetUp = false;
-                }
-            }
-        };
-        this.store = store;
-        this.monitor = monitor;
-        store.subscribe(this.handleRefCountChange);
-    }
-}
-
-/**
- * Coordinate addition
- * @param a The first coordinate
- * @param b The second coordinate
- */ function add(a, b) {
-    return {
-        x: a.x + b.x,
-        y: a.y + b.y
-    };
-}
-/**
- * Coordinate subtraction
- * @param a The first coordinate
- * @param b The second coordinate
- */ function subtract(a, b) {
-    return {
-        x: a.x - b.x,
-        y: a.y - b.y
-    };
-}
-/**
- * Returns the cartesian distance of the drag source component's position, based on its position
- * at the time when the current drag operation has started, and the movement difference.
- *
- * Returns null if no item is being dragged.
- *
- * @param state The offset state to compute from
- */ function getSourceClientOffset(state) {
-    const { clientOffset , initialClientOffset , initialSourceClientOffset  } = state;
-    if (!clientOffset || !initialClientOffset || !initialSourceClientOffset) {
-        return null;
-    }
-    return subtract(add(clientOffset, initialSourceClientOffset), initialClientOffset);
-}
-/**
- * Determines the x,y offset between the client offset and the initial client offset
- *
- * @param state The offset state to compute from
- */ function getDifferenceFromInitialOffset(state) {
-    const { clientOffset , initialClientOffset  } = state;
-    if (!clientOffset || !initialClientOffset) {
-        return null;
-    }
-    return subtract(clientOffset, initialClientOffset);
-}
-
-const NONE = [];
-const ALL = [];
-NONE.__IS_NONE__ = true;
-ALL.__IS_ALL__ = true;
-/**
- * Determines if the given handler IDs are dirty or not.
- *
- * @param dirtyIds The set of dirty handler ids
- * @param handlerIds The set of handler ids to check
- */ function areDirty(dirtyIds, handlerIds) {
-    if (dirtyIds === NONE) {
-        return false;
-    }
-    if (dirtyIds === ALL || typeof handlerIds === 'undefined') {
-        return true;
-    }
-    const commonIds = intersection(handlerIds, dirtyIds);
-    return commonIds.length > 0;
-}
-
-class DragDropMonitorImpl {
-    subscribeToStateChange(listener, options = {}) {
-        const { handlerIds  } = options;
-        invariant(typeof listener === 'function', 'listener must be a function.');
-        invariant(typeof handlerIds === 'undefined' || Array.isArray(handlerIds), 'handlerIds, when specified, must be an array of strings.');
-        let prevStateId = this.store.getState().stateId;
-        const handleChange = ()=>{
-            const state = this.store.getState();
-            const currentStateId = state.stateId;
-            try {
-                const canSkipListener = currentStateId === prevStateId || currentStateId === prevStateId + 1 && !areDirty(state.dirtyHandlerIds, handlerIds);
-                if (!canSkipListener) {
-                    listener();
-                }
-            } finally{
-                prevStateId = currentStateId;
-            }
-        };
-        return this.store.subscribe(handleChange);
-    }
-    subscribeToOffsetChange(listener) {
-        invariant(typeof listener === 'function', 'listener must be a function.');
-        let previousState = this.store.getState().dragOffset;
-        const handleChange = ()=>{
-            const nextState = this.store.getState().dragOffset;
-            if (nextState === previousState) {
-                return;
-            }
-            previousState = nextState;
-            listener();
-        };
-        return this.store.subscribe(handleChange);
-    }
-    canDragSource(sourceId) {
-        if (!sourceId) {
-            return false;
-        }
-        const source = this.registry.getSource(sourceId);
-        invariant(source, `Expected to find a valid source. sourceId=${sourceId}`);
-        if (this.isDragging()) {
-            return false;
-        }
-        return source.canDrag(this, sourceId);
-    }
-    canDropOnTarget(targetId) {
-        // undefined on initial render
-        if (!targetId) {
-            return false;
-        }
-        const target = this.registry.getTarget(targetId);
-        invariant(target, `Expected to find a valid target. targetId=${targetId}`);
-        if (!this.isDragging() || this.didDrop()) {
-            return false;
-        }
-        const targetType = this.registry.getTargetType(targetId);
-        const draggedItemType = this.getItemType();
-        return matchesType(targetType, draggedItemType) && target.canDrop(this, targetId);
-    }
-    isDragging() {
-        return Boolean(this.getItemType());
-    }
-    isDraggingSource(sourceId) {
-        // undefined on initial render
-        if (!sourceId) {
-            return false;
-        }
-        const source = this.registry.getSource(sourceId, true);
-        invariant(source, `Expected to find a valid source. sourceId=${sourceId}`);
-        if (!this.isDragging() || !this.isSourcePublic()) {
-            return false;
-        }
-        const sourceType = this.registry.getSourceType(sourceId);
-        const draggedItemType = this.getItemType();
-        if (sourceType !== draggedItemType) {
-            return false;
-        }
-        return source.isDragging(this, sourceId);
-    }
-    isOverTarget(targetId, options = {
-        shallow: false
-    }) {
-        // undefined on initial render
-        if (!targetId) {
-            return false;
-        }
-        const { shallow  } = options;
-        if (!this.isDragging()) {
-            return false;
-        }
-        const targetType = this.registry.getTargetType(targetId);
-        const draggedItemType = this.getItemType();
-        if (draggedItemType && !matchesType(targetType, draggedItemType)) {
-            return false;
-        }
-        const targetIds = this.getTargetIds();
-        if (!targetIds.length) {
-            return false;
-        }
-        const index = targetIds.indexOf(targetId);
-        if (shallow) {
-            return index === targetIds.length - 1;
-        } else {
-            return index > -1;
-        }
-    }
-    getItemType() {
-        return this.store.getState().dragOperation.itemType;
-    }
-    getItem() {
-        return this.store.getState().dragOperation.item;
-    }
-    getSourceId() {
-        return this.store.getState().dragOperation.sourceId;
-    }
-    getTargetIds() {
-        return this.store.getState().dragOperation.targetIds;
-    }
-    getDropResult() {
-        return this.store.getState().dragOperation.dropResult;
-    }
-    didDrop() {
-        return this.store.getState().dragOperation.didDrop;
-    }
-    isSourcePublic() {
-        return Boolean(this.store.getState().dragOperation.isSourcePublic);
-    }
-    getInitialClientOffset() {
-        return this.store.getState().dragOffset.initialClientOffset;
-    }
-    getInitialSourceClientOffset() {
-        return this.store.getState().dragOffset.initialSourceClientOffset;
-    }
-    getClientOffset() {
-        return this.store.getState().dragOffset.clientOffset;
-    }
-    getSourceClientOffset() {
-        return getSourceClientOffset(this.store.getState().dragOffset);
-    }
-    getDifferenceFromInitialOffset() {
-        return getDifferenceFromInitialOffset(this.store.getState().dragOffset);
-    }
-    constructor(store, registry){
-        this.store = store;
-        this.registry = registry;
-    }
-}
-
-// Safari 6 and 6.1 for desktop, iPad, and iPhone are the only browsers that
-// have WebKitMutationObserver but not un-prefixed MutationObserver.
-// Must use `global` or `self` instead of `window` to work in both frames and web
-// workers. `global` is a provision of Browserify, Mr, Mrs, or Mop.
-/* globals self */ const scope = typeof global !== 'undefined' ? global : self;
-const BrowserMutationObserver = scope.MutationObserver || scope.WebKitMutationObserver;
-function makeRequestCallFromTimer(callback) {
-    return function requestCall() {
-        // We dispatch a timeout with a specified delay of 0 for engines that
-        // can reliably accommodate that request. This will usually be snapped
-        // to a 4 milisecond delay, but once we're flushing, there's no delay
-        // between events.
-        const timeoutHandle = setTimeout(handleTimer, 0);
-        // However, since this timer gets frequently dropped in Firefox
-        // workers, we enlist an interval handle that will try to fire
-        // an event 20 times per second until it succeeds.
-        const intervalHandle = setInterval(handleTimer, 50);
-        function handleTimer() {
-            // Whichever timer succeeds will cancel both timers and
-            // execute the callback.
-            clearTimeout(timeoutHandle);
-            clearInterval(intervalHandle);
-            callback();
-        }
-    };
-}
-// To request a high priority event, we induce a mutation observer by toggling
-// the text of a text node between "1" and "-1".
-function makeRequestCallFromMutationObserver(callback) {
-    let toggle = 1;
-    const observer = new BrowserMutationObserver(callback);
-    const node = document.createTextNode('');
-    observer.observe(node, {
-        characterData: true
-    });
-    return function requestCall() {
-        toggle = -toggle;
-        node.data = toggle;
-    };
-}
-const makeRequestCall = typeof BrowserMutationObserver === 'function' ? // reliably everywhere they are implemented.
-// They are implemented in all modern browsers.
-//
-// - Android 4-4.3
-// - Chrome 26-34
-// - Firefox 14-29
-// - Internet Explorer 11
-// - iPad Safari 6-7.1
-// - iPhone Safari 7-7.1
-// - Safari 6-7
-makeRequestCallFromMutationObserver : // task queue, are implemented in Internet Explorer 10, Safari 5.0-1, and Opera
-// 11-12, and in web workers in many engines.
-// Although message channels yield to any queued rendering and IO tasks, they
-// would be better than imposing the 4ms delay of timers.
-// However, they do not work reliably in Internet Explorer or Safari.
-// Internet Explorer 10 is the only browser that has setImmediate but does
-// not have MutationObservers.
-// Although setImmediate yields to the browser's renderer, it would be
-// preferrable to falling back to setTimeout since it does not have
-// the minimum 4ms penalty.
-// Unfortunately there appears to be a bug in Internet Explorer 10 Mobile (and
-// Desktop to a lesser extent) that renders both setImmediate and
-// MessageChannel useless for the purposes of ASAP.
-// https://github.com/kriskowal/q/issues/396
-// Timers are implemented universally.
-// We fall back to timers in workers in most engines, and in foreground
-// contexts in the following browsers.
-// However, note that even this simple case requires nuances to operate in a
-// broad spectrum of browsers.
-//
-// - Firefox 3-13
-// - Internet Explorer 6-9
-// - iPad Safari 4.3
-// - Lynx 2.8.7
-makeRequestCallFromTimer;
-
-class AsapQueue {
-    // Use the fastest means possible to execute a task in its own turn, with
-    // priority over other events including IO, animation, reflow, and redraw
-    // events in browsers.
-    //
-    // An exception thrown by a task will permanently interrupt the processing of
-    // subsequent tasks. The higher level `asap` function ensures that if an
-    // exception is thrown by a task, that the task queue will continue flushing as
-    // soon as possible, but if you use `rawAsap` directly, you are responsible to
-    // either ensure that no exceptions are thrown from your task, or to manually
-    // call `rawAsap.requestFlush` if an exception is thrown.
-    enqueueTask(task) {
-        const { queue: q , requestFlush  } = this;
-        if (!q.length) {
-            requestFlush();
-            this.flushing = true;
-        }
-        // Equivalent to push, but avoids a function call.
-        q[q.length] = task;
-    }
-    constructor(){
-        this.queue = [];
-        // We queue errors to ensure they are thrown in right order (FIFO).
-        // Array-as-queue is good enough here, since we are just dealing with exceptions.
-        this.pendingErrors = [];
-        // Once a flush has been requested, no further calls to `requestFlush` are
-        // necessary until the next `flush` completes.
-        // @ts-ignore
-        this.flushing = false;
-        // The position of the next task to execute in the task queue. This is
-        // preserved between calls to `flush` so that it can be resumed if
-        // a task throws an exception.
-        this.index = 0;
-        // If a task schedules additional tasks recursively, the task queue can grow
-        // unbounded. To prevent memory exhaustion, the task queue will periodically
-        // truncate already-completed tasks.
-        this.capacity = 1024;
-        // The flush function processes all tasks that have been scheduled with
-        // `rawAsap` unless and until one of those tasks throws an exception.
-        // If a task throws an exception, `flush` ensures that its state will remain
-        // consistent and will resume where it left off when called again.
-        // However, `flush` does not make any arrangements to be called again if an
-        // exception is thrown.
-        this.flush = ()=>{
-            const { queue: q  } = this;
-            while(this.index < q.length){
-                const currentIndex = this.index;
-                // Advance the index before calling the task. This ensures that we will
-                // begin flushing on the next task the task throws an error.
-                this.index++;
-                q[currentIndex].call();
-                // Prevent leaking memory for long chains of recursive calls to `asap`.
-                // If we call `asap` within tasks scheduled by `asap`, the queue will
-                // grow, but to avoid an O(n) walk for every task we execute, we don't
-                // shift tasks off the queue after they have been executed.
-                // Instead, we periodically shift 1024 tasks off the queue.
-                if (this.index > this.capacity) {
-                    // Manually shift all values starting at the index back to the
-                    // beginning of the queue.
-                    for(let scan = 0, newLength = q.length - this.index; scan < newLength; scan++){
-                        q[scan] = q[scan + this.index];
-                    }
-                    q.length -= this.index;
-                    this.index = 0;
-                }
-            }
-            q.length = 0;
-            this.index = 0;
-            this.flushing = false;
-        };
-        // In a web browser, exceptions are not fatal. However, to avoid
-        // slowing down the queue of pending tasks, we rethrow the error in a
-        // lower priority turn.
-        this.registerPendingError = (err)=>{
-            this.pendingErrors.push(err);
-            this.requestErrorThrow();
-        };
-        // `requestFlush` requests that the high priority event queue be flushed as
-        // soon as possible.
-        // This is useful to prevent an error thrown in a task from stalling the event
-        // queue if the exception handled by Node.js’s
-        // `process.on("uncaughtException")` or by a domain.
-        // `requestFlush` is implemented using a strategy based on data collected from
-        // every available SauceLabs Selenium web driver worker at time of writing.
-        // https://docs.google.com/spreadsheets/d/1mG-5UYGup5qxGdEMWkhP6BWCz053NUb2E1QoUTU16uA/edit#gid=783724593
-        this.requestFlush = makeRequestCall(this.flush);
-        this.requestErrorThrow = makeRequestCallFromTimer(()=>{
-            // Throw first error
-            if (this.pendingErrors.length) {
-                throw this.pendingErrors.shift();
-            }
-        });
-    }
-} // The message channel technique was discovered by Malte Ubl and was the
- // original foundation for this library.
- // http://www.nonblocking.io/2011/06/windownexttick.html
- // Safari 6.0.5 (at least) intermittently fails to create message ports on a
- // page's first load. Thankfully, this version of Safari supports
- // MutationObservers, so we don't need to fall back in that case.
- // function makeRequestCallFromMessageChannel(callback) {
- //     var channel = new MessageChannel();
- //     channel.port1.onmessage = callback;
- //     return function requestCall() {
- //         channel.port2.postMessage(0);
- //     };
- // }
- // For reasons explained above, we are also unable to use `setImmediate`
- // under any circumstances.
- // Even if we were, there is another bug in Internet Explorer 10.
- // It is not sufficient to assign `setImmediate` to `requestFlush` because
- // `setImmediate` must be called *by name* and therefore must be wrapped in a
- // closure.
- // Never forget.
- // function makeRequestCallFromSetImmediate(callback) {
- //     return function requestCall() {
- //         setImmediate(callback);
- //     };
- // }
- // Safari 6.0 has a problem where timers will get lost while the user is
- // scrolling. This problem does not impact ASAP because Safari 6.0 supports
- // mutation observers, so that implementation is used instead.
- // However, if we ever elect to use timers in Safari, the prevalent work-around
- // is to add a scroll event listener that calls for a flush.
- // `setTimeout` does not call the passed callback if the delay is less than
- // approximately 7 in web workers in Firefox 8 through 18, and sometimes not
- // even then.
- // This is for `asap.js` only.
- // Its name will be periodically randomized to break any code that depends on
- // // its existence.
- // rawAsap.makeRequestCallFromTimer = makeRequestCallFromTimer
- // ASAP was originally a nextTick shim included in Q. This was factored out
- // into this ASAP package. It was later adapted to RSVP which made further
- // amendments. These decisions, particularly to marginalize MessageChannel and
- // to capture the MutationObserver implementation in a closure, were integrated
- // back into ASAP proper.
- // https://github.com/tildeio/rsvp.js/blob/cddf7232546a9cf858524b75cde6f9edf72620a7/lib/rsvp/asap.js
-
-// `call`, just like a function.
-class RawTask {
-    call() {
-        try {
-            this.task && this.task();
-        } catch (error) {
-            this.onError(error);
-        } finally{
-            this.task = null;
-            this.release(this);
-        }
-    }
-    constructor(onError, release){
-        this.onError = onError;
-        this.release = release;
-        this.task = null;
-    }
-}
-
-class TaskFactory {
-    create(task) {
-        const tasks = this.freeTasks;
-        const t1 = tasks.length ? tasks.pop() : new RawTask(this.onError, (t)=>tasks[tasks.length] = t
-        );
-        t1.task = task;
-        return t1;
-    }
-    constructor(onError){
-        this.onError = onError;
-        this.freeTasks = [];
-    }
-}
-
-const asapQueue = new AsapQueue();
-const taskFactory = new TaskFactory(asapQueue.registerPendingError);
-/**
- * Calls a task as soon as possible after returning, in its own event, with priority
- * over other events like animation, reflow, and repaint. An error thrown from an
- * event will not interrupt, nor even substantially slow down the processing of
- * other events, but will be rather postponed to a lower priority event.
- * @param {{call}} task A callable object, typically a function that takes no
- * arguments.
- */ function asap(task) {
-    asapQueue.enqueueTask(taskFactory.create(task));
-}
-
-const ADD_SOURCE = 'dnd-core/ADD_SOURCE';
-const ADD_TARGET = 'dnd-core/ADD_TARGET';
-const REMOVE_SOURCE = 'dnd-core/REMOVE_SOURCE';
-const REMOVE_TARGET = 'dnd-core/REMOVE_TARGET';
-function addSource(sourceId) {
-    return {
-        type: ADD_SOURCE,
-        payload: {
-            sourceId
-        }
-    };
-}
-function addTarget(targetId) {
-    return {
-        type: ADD_TARGET,
-        payload: {
-            targetId
-        }
-    };
-}
-function removeSource(sourceId) {
-    return {
-        type: REMOVE_SOURCE,
-        payload: {
-            sourceId
-        }
-    };
-}
-function removeTarget(targetId) {
-    return {
-        type: REMOVE_TARGET,
-        payload: {
-            targetId
-        }
-    };
-}
-
-function validateSourceContract(source) {
-    invariant(typeof source.canDrag === 'function', 'Expected canDrag to be a function.');
-    invariant(typeof source.beginDrag === 'function', 'Expected beginDrag to be a function.');
-    invariant(typeof source.endDrag === 'function', 'Expected endDrag to be a function.');
-}
-function validateTargetContract(target) {
-    invariant(typeof target.canDrop === 'function', 'Expected canDrop to be a function.');
-    invariant(typeof target.hover === 'function', 'Expected hover to be a function.');
-    invariant(typeof target.drop === 'function', 'Expected beginDrag to be a function.');
-}
-function validateType(type, allowArray) {
-    if (allowArray && Array.isArray(type)) {
-        type.forEach((t)=>validateType(t, false)
-        );
-        return;
-    }
-    invariant(typeof type === 'string' || typeof type === 'symbol', allowArray ? 'Type can only be a string, a symbol, or an array of either.' : 'Type can only be a string or a symbol.');
-}
-
-var HandlerRole;
-(function(HandlerRole) {
-    HandlerRole["SOURCE"] = "SOURCE";
-    HandlerRole["TARGET"] = "TARGET";
-})(HandlerRole || (HandlerRole = {}));
-
-let nextUniqueId = 0;
-function getNextUniqueId() {
-    return nextUniqueId++;
-}
-
-function getNextHandlerId(role) {
-    const id = getNextUniqueId().toString();
-    switch(role){
-        case HandlerRole.SOURCE:
-            return `S${id}`;
-        case HandlerRole.TARGET:
-            return `T${id}`;
-        default:
-            throw new Error(`Unknown Handler Role: ${role}`);
-    }
-}
-function parseRoleFromHandlerId(handlerId) {
-    switch(handlerId[0]){
-        case 'S':
-            return HandlerRole.SOURCE;
-        case 'T':
-            return HandlerRole.TARGET;
-        default:
-            throw new Error(`Cannot parse handler ID: ${handlerId}`);
-    }
-}
-function mapContainsValue(map, searchValue) {
-    const entries = map.entries();
-    let isDone = false;
-    do {
-        const { done , value: [, value] ,  } = entries.next();
-        if (value === searchValue) {
-            return true;
-        }
-        isDone = !!done;
-    }while (!isDone)
-    return false;
-}
-class HandlerRegistryImpl {
-    addSource(type, source) {
-        validateType(type);
-        validateSourceContract(source);
-        const sourceId = this.addHandler(HandlerRole.SOURCE, type, source);
-        this.store.dispatch(addSource(sourceId));
-        return sourceId;
-    }
-    addTarget(type, target) {
-        validateType(type, true);
-        validateTargetContract(target);
-        const targetId = this.addHandler(HandlerRole.TARGET, type, target);
-        this.store.dispatch(addTarget(targetId));
-        return targetId;
-    }
-    containsHandler(handler) {
-        return mapContainsValue(this.dragSources, handler) || mapContainsValue(this.dropTargets, handler);
-    }
-    getSource(sourceId, includePinned = false) {
-        invariant(this.isSourceId(sourceId), 'Expected a valid source ID.');
-        const isPinned = includePinned && sourceId === this.pinnedSourceId;
-        const source = isPinned ? this.pinnedSource : this.dragSources.get(sourceId);
-        return source;
-    }
-    getTarget(targetId) {
-        invariant(this.isTargetId(targetId), 'Expected a valid target ID.');
-        return this.dropTargets.get(targetId);
-    }
-    getSourceType(sourceId) {
-        invariant(this.isSourceId(sourceId), 'Expected a valid source ID.');
-        return this.types.get(sourceId);
-    }
-    getTargetType(targetId) {
-        invariant(this.isTargetId(targetId), 'Expected a valid target ID.');
-        return this.types.get(targetId);
-    }
-    isSourceId(handlerId) {
-        const role = parseRoleFromHandlerId(handlerId);
-        return role === HandlerRole.SOURCE;
-    }
-    isTargetId(handlerId) {
-        const role = parseRoleFromHandlerId(handlerId);
-        return role === HandlerRole.TARGET;
-    }
-    removeSource(sourceId) {
-        invariant(this.getSource(sourceId), 'Expected an existing source.');
-        this.store.dispatch(removeSource(sourceId));
-        asap(()=>{
-            this.dragSources.delete(sourceId);
-            this.types.delete(sourceId);
-        });
-    }
-    removeTarget(targetId) {
-        invariant(this.getTarget(targetId), 'Expected an existing target.');
-        this.store.dispatch(removeTarget(targetId));
-        this.dropTargets.delete(targetId);
-        this.types.delete(targetId);
-    }
-    pinSource(sourceId) {
-        const source = this.getSource(sourceId);
-        invariant(source, 'Expected an existing source.');
-        this.pinnedSourceId = sourceId;
-        this.pinnedSource = source;
-    }
-    unpinSource() {
-        invariant(this.pinnedSource, 'No source is pinned at the time.');
-        this.pinnedSourceId = null;
-        this.pinnedSource = null;
-    }
-    addHandler(role, type, handler) {
-        const id = getNextHandlerId(role);
-        this.types.set(id, type);
-        if (role === HandlerRole.SOURCE) {
-            this.dragSources.set(id, handler);
-        } else if (role === HandlerRole.TARGET) {
-            this.dropTargets.set(id, handler);
-        }
-        return id;
-    }
-    constructor(store){
-        this.types = new Map();
-        this.dragSources = new Map();
-        this.dropTargets = new Map();
-        this.pinnedSourceId = null;
-        this.pinnedSource = null;
-        this.store = store;
-    }
-}
-
-const strictEquality = (a, b)=>a === b
-;
-/**
- * Determine if two cartesian coordinate offsets are equal
- * @param offsetA
- * @param offsetB
- */ function areCoordsEqual(offsetA, offsetB) {
-    if (!offsetA && !offsetB) {
-        return true;
-    } else if (!offsetA || !offsetB) {
-        return false;
-    } else {
-        return offsetA.x === offsetB.x && offsetA.y === offsetB.y;
-    }
-}
-/**
- * Determines if two arrays of items are equal
- * @param a The first array of items
- * @param b The second array of items
- */ function areArraysEqual(a, b, isEqual = strictEquality) {
-    if (a.length !== b.length) {
-        return false;
-    }
-    for(let i = 0; i < a.length; ++i){
-        if (!isEqual(a[i], b[i])) {
-            return false;
-        }
-    }
-    return true;
-}
-
-function reduce(// eslint-disable-next-line @typescript-eslint/no-unused-vars
-_state = NONE, action) {
-    switch(action.type){
-        case HOVER:
-            break;
-        case ADD_SOURCE:
-        case ADD_TARGET:
-        case REMOVE_TARGET:
-        case REMOVE_SOURCE:
-            return NONE;
-        case BEGIN_DRAG:
-        case PUBLISH_DRAG_SOURCE:
-        case END_DRAG:
-        case DROP:
-        default:
-            return ALL;
-    }
-    const { targetIds =[] , prevTargetIds =[]  } = action.payload;
-    const result = xor(targetIds, prevTargetIds);
-    const didChange = result.length > 0 || !areArraysEqual(targetIds, prevTargetIds);
-    if (!didChange) {
-        return NONE;
-    }
-    // Check the target ids at the innermost position. If they are valid, add them
-    // to the result
-    const prevInnermostTargetId = prevTargetIds[prevTargetIds.length - 1];
-    const innermostTargetId = targetIds[targetIds.length - 1];
-    if (prevInnermostTargetId !== innermostTargetId) {
-        if (prevInnermostTargetId) {
-            result.push(prevInnermostTargetId);
-        }
-        if (innermostTargetId) {
-            result.push(innermostTargetId);
-        }
-    }
-    return result;
-}
-
-function _defineProperty$1(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _objectSpread$1(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === 'function') {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty$1(target, key, source[key]);
-        });
-    }
-    return target;
-}
-const initialState = {
-    initialSourceClientOffset: null,
-    initialClientOffset: null,
-    clientOffset: null
-};
-function reduce$1(state = initialState, action) {
-    const { payload  } = action;
-    switch(action.type){
-        case INIT_COORDS:
-        case BEGIN_DRAG:
-            return {
-                initialSourceClientOffset: payload.sourceClientOffset,
-                initialClientOffset: payload.clientOffset,
-                clientOffset: payload.clientOffset
-            };
-        case HOVER:
-            if (areCoordsEqual(state.clientOffset, payload.clientOffset)) {
-                return state;
-            }
-            return _objectSpread$1({}, state, {
-                clientOffset: payload.clientOffset
-            });
-        case END_DRAG:
-        case DROP:
-            return initialState;
-        default:
-            return state;
-    }
-}
-
-function _defineProperty$2(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _objectSpread$2(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === 'function') {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty$2(target, key, source[key]);
-        });
-    }
-    return target;
-}
-const initialState$1 = {
-    itemType: null,
-    item: null,
-    sourceId: null,
-    targetIds: [],
-    dropResult: null,
-    didDrop: false,
-    isSourcePublic: null
-};
-function reduce$2(state = initialState$1, action) {
-    const { payload  } = action;
-    switch(action.type){
-        case BEGIN_DRAG:
-            return _objectSpread$2({}, state, {
-                itemType: payload.itemType,
-                item: payload.item,
-                sourceId: payload.sourceId,
-                isSourcePublic: payload.isSourcePublic,
-                dropResult: null,
-                didDrop: false
-            });
-        case PUBLISH_DRAG_SOURCE:
-            return _objectSpread$2({}, state, {
-                isSourcePublic: true
-            });
-        case HOVER:
-            return _objectSpread$2({}, state, {
-                targetIds: payload.targetIds
-            });
-        case REMOVE_TARGET:
-            if (state.targetIds.indexOf(payload.targetId) === -1) {
-                return state;
-            }
-            return _objectSpread$2({}, state, {
-                targetIds: without(state.targetIds, payload.targetId)
-            });
-        case DROP:
-            return _objectSpread$2({}, state, {
-                dropResult: payload.dropResult,
-                didDrop: true,
-                targetIds: []
-            });
-        case END_DRAG:
-            return _objectSpread$2({}, state, {
-                itemType: null,
-                item: null,
-                sourceId: null,
-                dropResult: null,
-                didDrop: false,
-                isSourcePublic: null,
-                targetIds: []
-            });
-        default:
-            return state;
-    }
-}
-
-function reduce$3(state = 0, action) {
-    switch(action.type){
-        case ADD_SOURCE:
-        case ADD_TARGET:
-            return state + 1;
-        case REMOVE_SOURCE:
-        case REMOVE_TARGET:
-            return state - 1;
-        default:
-            return state;
-    }
-}
-
-function reduce$4(state = 0) {
-    return state + 1;
-}
-
-function _defineProperty$3(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _objectSpread$3(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === 'function') {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty$3(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function reduce$5(state = {}, action) {
-    return {
-        dirtyHandlerIds: reduce(state.dirtyHandlerIds, {
-            type: action.type,
-            payload: _objectSpread$3({}, action.payload, {
-                prevTargetIds: get(state, 'dragOperation.targetIds', [])
-            })
-        }),
-        dragOffset: reduce$1(state.dragOffset, action),
-        refCount: reduce$3(state.refCount, action),
-        dragOperation: reduce$2(state.dragOperation, action),
-        stateId: reduce$4(state.stateId)
-    };
-}
-
-function createDragDropManager(backendFactory, globalContext = undefined, backendOptions = {}, debugMode = false) {
-    const store = makeStoreInstance(debugMode);
-    const monitor = new DragDropMonitorImpl(store, new HandlerRegistryImpl(store));
-    const manager = new DragDropManagerImpl(store, monitor);
-    const backend = backendFactory(manager, globalContext, backendOptions);
-    manager.receiveBackend(backend);
-    return manager;
-}
-function makeStoreInstance(debugMode) {
-    // TODO: if we ever make a react-native version of this,
-    // we'll need to consider how to pull off dev-tooling
-    const reduxDevTools = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__;
-    return createStore(reduce$5, debugMode && reduxDevTools && reduxDevTools({
-        name: 'dnd-core',
-        instanceId: 'dnd-core'
-    }));
-}
-
-function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$1(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-let refCount = 0;
-const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
-var DndProvider = /*#__PURE__*/ React.memo(function DndProvider(_param) {
-    var { children  } = _param, props = _objectWithoutProperties(_param, [
-        "children"
-    ]);
-    const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
-    ;
-    /**
-		 * If the global context was used to store the DND context
-		 * then where theres no more references to it we should
-		 * clean it up to avoid memory leaks
-		 */ React.useEffect(()=>{
-        if (isGlobalInstance) {
-            const context = getGlobalContext();
-            ++refCount;
-            return ()=>{
-                if (--refCount === 0) {
-                    context[INSTANCE_SYM] = null;
-                }
-            };
-        }
-        return;
-    }, []);
-    return /*#__PURE__*/ jsxRuntime.jsx(DndContext.Provider, {
-        value: manager,
-        children: children
-    });
-});
-function getDndContextValue(props) {
-    if ('manager' in props) {
-        const manager = {
-            dragDropManager: props.manager
-        };
-        return [
-            manager,
-            false
-        ];
-    }
-    const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
-    const isGlobalInstance = !props.context;
-    return [
-        manager,
-        isGlobalInstance
-    ];
-}
-function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
-    const ctx = context;
-    if (!ctx[INSTANCE_SYM]) {
-        ctx[INSTANCE_SYM] = {
-            dragDropManager: createDragDropManager(backend, context, options, debugMode)
-        };
-    }
-    return ctx[INSTANCE_SYM];
-}
-function getGlobalContext() {
-    return typeof global !== 'undefined' ? global : window;
-}
-
-// do not edit .js files directly - edit src/index.jst
-
-
-
-var fastDeepEqual = function equal(a, b) {
-  if (a === b) return true;
-
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
-    if (a.constructor !== b.constructor) return false;
-
-    var length, i, keys;
-    if (Array.isArray(a)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (!equal(a[i], b[i])) return false;
-      return true;
-    }
-
-
-
-    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
-
-    keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length) return false;
-
-    for (i = length; i-- !== 0;)
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-
-    for (i = length; i-- !== 0;) {
-      var key = keys[i];
-
-      if (!equal(a[key], b[key])) return false;
-    }
-
-    return true;
-  }
-
-  // true if both NaN, false otherwise
-  return a!==a && b!==b;
-};
-
-// suppress the useLayoutEffect warning on server side.
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-/**
- *
- * @param monitor The monitor to collect state from
- * @param collect The collecting function
- * @param onUpdate A method to invoke when updates occur
- */ function useCollector(monitor, collect, onUpdate) {
-    const [collected, setCollected] = React.useState(()=>collect(monitor)
-    );
-    const updateCollected = React.useCallback(()=>{
-        const nextValue = collect(monitor);
-        // This needs to be a deep-equality check because some monitor-collected values
-        // include XYCoord objects that may be equivalent, but do not have instance equality.
-        if (!fastDeepEqual(collected, nextValue)) {
-            setCollected(nextValue);
-            if (onUpdate) {
-                onUpdate();
-            }
-        }
-    }, [
-        collected,
-        monitor,
-        onUpdate
-    ]);
-    // update the collected properties after react renders.
-    // Note that the "Dustbin Stress Test" fails if this is not
-    // done when the component updates
-    useIsomorphicLayoutEffect(updateCollected);
-    return [
-        collected,
-        updateCollected
-    ];
-}
-
-function useMonitorOutput(monitor, collect, onCollect) {
-    const [collected, updateCollected] = useCollector(monitor, collect, onCollect);
-    useIsomorphicLayoutEffect(function subscribeToMonitorStateChange() {
-        const handlerId = monitor.getHandlerId();
-        if (handlerId == null) {
-            return;
-        }
-        return monitor.subscribeToStateChange(updateCollected, {
-            handlerIds: [
-                handlerId
-            ]
-        });
-    }, [
-        monitor,
-        updateCollected
-    ]);
-    return collected;
-}
-
-function useCollectedProps(collector, monitor, connector) {
-    return useMonitorOutput(monitor, collector || (()=>({})
-    ), ()=>connector.reconnect()
-    );
-}
-
-function useOptionalFactory(arg, deps) {
-    const memoDeps = [
-        ...deps || []
-    ];
-    if (deps == null && typeof arg !== 'function') {
-        memoDeps.push(arg);
-    }
-    return React.useMemo(()=>{
-        return typeof arg === 'function' ? arg() : arg;
-    }, memoDeps);
-}
-
-function useConnectDragSource(connector) {
-    return React.useMemo(()=>connector.hooks.dragSource()
-    , [
-        connector
-    ]);
-}
-function useConnectDragPreview(connector) {
-    return React.useMemo(()=>connector.hooks.dragPreview()
-    , [
-        connector
-    ]);
-}
-
-let isCallingCanDrag = false;
-let isCallingIsDragging = false;
-class DragSourceMonitorImpl {
-    receiveHandlerId(sourceId) {
-        this.sourceId = sourceId;
-    }
-    getHandlerId() {
-        return this.sourceId;
-    }
-    canDrag() {
-        invariant(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
-        try {
-            isCallingCanDrag = true;
-            return this.internalMonitor.canDragSource(this.sourceId);
-        } finally{
-            isCallingCanDrag = false;
-        }
-    }
-    isDragging() {
-        if (!this.sourceId) {
-            return false;
-        }
-        invariant(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
-        try {
-            isCallingIsDragging = true;
-            return this.internalMonitor.isDraggingSource(this.sourceId);
-        } finally{
-            isCallingIsDragging = false;
-        }
-    }
-    subscribeToStateChange(listener, options) {
-        return this.internalMonitor.subscribeToStateChange(listener, options);
-    }
-    isDraggingSource(sourceId) {
-        return this.internalMonitor.isDraggingSource(sourceId);
-    }
-    isOverTarget(targetId, options) {
-        return this.internalMonitor.isOverTarget(targetId, options);
-    }
-    getTargetIds() {
-        return this.internalMonitor.getTargetIds();
-    }
-    isSourcePublic() {
-        return this.internalMonitor.isSourcePublic();
-    }
-    getSourceId() {
-        return this.internalMonitor.getSourceId();
-    }
-    subscribeToOffsetChange(listener) {
-        return this.internalMonitor.subscribeToOffsetChange(listener);
-    }
-    canDragSource(sourceId) {
-        return this.internalMonitor.canDragSource(sourceId);
-    }
-    canDropOnTarget(targetId) {
-        return this.internalMonitor.canDropOnTarget(targetId);
-    }
-    getItemType() {
-        return this.internalMonitor.getItemType();
-    }
-    getItem() {
-        return this.internalMonitor.getItem();
-    }
-    getDropResult() {
-        return this.internalMonitor.getDropResult();
-    }
-    didDrop() {
-        return this.internalMonitor.didDrop();
-    }
-    getInitialClientOffset() {
-        return this.internalMonitor.getInitialClientOffset();
-    }
-    getInitialSourceClientOffset() {
-        return this.internalMonitor.getInitialSourceClientOffset();
-    }
-    getSourceClientOffset() {
-        return this.internalMonitor.getSourceClientOffset();
-    }
-    getClientOffset() {
-        return this.internalMonitor.getClientOffset();
-    }
-    getDifferenceFromInitialOffset() {
-        return this.internalMonitor.getDifferenceFromInitialOffset();
-    }
-    constructor(manager){
-        this.sourceId = null;
-        this.internalMonitor = manager.getMonitor();
-    }
-}
-
-let isCallingCanDrop = false;
-class DropTargetMonitorImpl {
-    receiveHandlerId(targetId) {
-        this.targetId = targetId;
-    }
-    getHandlerId() {
-        return this.targetId;
-    }
-    subscribeToStateChange(listener, options) {
-        return this.internalMonitor.subscribeToStateChange(listener, options);
-    }
-    canDrop() {
-        // Cut out early if the target id has not been set. This should prevent errors
-        // where the user has an older version of dnd-core like in
-        // https://github.com/react-dnd/react-dnd/issues/1310
-        if (!this.targetId) {
-            return false;
-        }
-        invariant(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor');
-        try {
-            isCallingCanDrop = true;
-            return this.internalMonitor.canDropOnTarget(this.targetId);
-        } finally{
-            isCallingCanDrop = false;
-        }
-    }
-    isOver(options) {
-        if (!this.targetId) {
-            return false;
-        }
-        return this.internalMonitor.isOverTarget(this.targetId, options);
-    }
-    getItemType() {
-        return this.internalMonitor.getItemType();
-    }
-    getItem() {
-        return this.internalMonitor.getItem();
-    }
-    getDropResult() {
-        return this.internalMonitor.getDropResult();
-    }
-    didDrop() {
-        return this.internalMonitor.didDrop();
-    }
-    getInitialClientOffset() {
-        return this.internalMonitor.getInitialClientOffset();
-    }
-    getInitialSourceClientOffset() {
-        return this.internalMonitor.getInitialSourceClientOffset();
-    }
-    getSourceClientOffset() {
-        return this.internalMonitor.getSourceClientOffset();
-    }
-    getClientOffset() {
-        return this.internalMonitor.getClientOffset();
-    }
-    getDifferenceFromInitialOffset() {
-        return this.internalMonitor.getDifferenceFromInitialOffset();
-    }
-    constructor(manager){
-        this.targetId = null;
-        this.internalMonitor = manager.getMonitor();
-    }
-}
-
-function registerTarget(type, target, manager) {
-    const registry = manager.getRegistry();
-    const targetId = registry.addTarget(type, target);
-    return [
-        targetId,
-        ()=>registry.removeTarget(targetId)
-    ];
-}
-function registerSource(type, source, manager) {
-    const registry = manager.getRegistry();
-    const sourceId = registry.addSource(type, source);
-    return [
-        sourceId,
-        ()=>registry.removeSource(sourceId)
-    ];
-}
-
-function shallowEqual(objA, objB, compare, compareContext) {
-    let compareResult = compare ? compare.call(compareContext, objA, objB) : void 0;
-    if (compareResult !== void 0) {
-        return !!compareResult;
-    }
-    if (objA === objB) {
-        return true;
-    }
-    if (typeof objA !== 'object' || !objA || typeof objB !== 'object' || !objB) {
-        return false;
-    }
-    const keysA = Object.keys(objA);
-    const keysB = Object.keys(objB);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
-    // Test for A's keys different from B.
-    for(let idx = 0; idx < keysA.length; idx++){
-        const key = keysA[idx];
-        if (!bHasOwnProperty(key)) {
-            return false;
-        }
-        const valueA = objA[key];
-        const valueB = objB[key];
-        compareResult = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;
-        if (compareResult === false || compareResult === void 0 && valueA !== valueB) {
-            return false;
-        }
-    }
-    return true;
-}
-
-function isRef(obj) {
-    return(// eslint-disable-next-line no-prototype-builtins
-    obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current'));
-}
-
-function throwIfCompositeComponentElement(element) {
-    // Custom components can no longer be wrapped directly in React DnD 2.0
-    // so that we don't need to depend on findDOMNode() from react-dom.
-    if (typeof element.type === 'string') {
-        return;
-    }
-    const displayName = element.type.displayName || element.type.name || 'the component';
-    throw new Error('Only native element nodes can now be passed to React DnD connectors.' + `You can either wrap ${displayName} into a <div>, or turn it into a ` + 'drag source or a drop target itself.');
-}
-function wrapHookToRecognizeElement(hook) {
-    return (elementOrNode = null, options = null)=>{
-        // When passed a node, call the hook straight away.
-        if (!React.isValidElement(elementOrNode)) {
-            const node = elementOrNode;
-            hook(node, options);
-            // return the node so it can be chained (e.g. when within callback refs
-            // <div ref={node => connectDragSource(connectDropTarget(node))}/>
-            return node;
-        }
-        // If passed a ReactElement, clone it and attach this function as a ref.
-        // This helps us achieve a neat API where user doesn't even know that refs
-        // are being used under the hood.
-        const element = elementOrNode;
-        throwIfCompositeComponentElement(element);
-        // When no options are passed, use the hook directly
-        const ref = options ? (node)=>hook(node, options)
-         : hook;
-        return cloneWithRef(element, ref);
-    };
-}
-function wrapConnectorHooks(hooks) {
-    const wrappedHooks = {};
-    Object.keys(hooks).forEach((key)=>{
-        const hook = hooks[key];
-        // ref objects should be passed straight through without wrapping
-        if (key.endsWith('Ref')) {
-            wrappedHooks[key] = hooks[key];
-        } else {
-            const wrappedHook = wrapHookToRecognizeElement(hook);
-            wrappedHooks[key] = ()=>wrappedHook
-            ;
-        }
-    });
-    return wrappedHooks;
-}
-function setRef(ref, node) {
-    if (typeof ref === 'function') {
-        ref(node);
-    } else {
-        ref.current = node;
-    }
-}
-function cloneWithRef(element, newRef) {
-    const previousRef = element.ref;
-    invariant(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' + 'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' + 'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs');
-    if (!previousRef) {
-        // When there is no ref on the element, use the new ref directly
-        return React.cloneElement(element, {
-            ref: newRef
-        });
-    } else {
-        return React.cloneElement(element, {
-            ref: (node)=>{
-                setRef(previousRef, node);
-                setRef(newRef, node);
-            }
-        });
-    }
-}
-
-class SourceConnector {
-    receiveHandlerId(newHandlerId) {
-        if (this.handlerId === newHandlerId) {
-            return;
-        }
-        this.handlerId = newHandlerId;
-        this.reconnect();
-    }
-    get connectTarget() {
-        return this.dragSource;
-    }
-    get dragSourceOptions() {
-        return this.dragSourceOptionsInternal;
-    }
-    set dragSourceOptions(options) {
-        this.dragSourceOptionsInternal = options;
-    }
-    get dragPreviewOptions() {
-        return this.dragPreviewOptionsInternal;
-    }
-    set dragPreviewOptions(options) {
-        this.dragPreviewOptionsInternal = options;
-    }
-    reconnect() {
-        const didChange = this.reconnectDragSource();
-        this.reconnectDragPreview(didChange);
-    }
-    reconnectDragSource() {
-        const dragSource = this.dragSource;
-        // if nothing has changed then don't resubscribe
-        const didChange = this.didHandlerIdChange() || this.didConnectedDragSourceChange() || this.didDragSourceOptionsChange();
-        if (didChange) {
-            this.disconnectDragSource();
-        }
-        if (!this.handlerId) {
-            return didChange;
-        }
-        if (!dragSource) {
-            this.lastConnectedDragSource = dragSource;
-            return didChange;
-        }
-        if (didChange) {
-            this.lastConnectedHandlerId = this.handlerId;
-            this.lastConnectedDragSource = dragSource;
-            this.lastConnectedDragSourceOptions = this.dragSourceOptions;
-            this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
-        }
-        return didChange;
-    }
-    reconnectDragPreview(forceDidChange = false) {
-        const dragPreview = this.dragPreview;
-        // if nothing has changed then don't resubscribe
-        const didChange = forceDidChange || this.didHandlerIdChange() || this.didConnectedDragPreviewChange() || this.didDragPreviewOptionsChange();
-        if (didChange) {
-            this.disconnectDragPreview();
-        }
-        if (!this.handlerId) {
-            return;
-        }
-        if (!dragPreview) {
-            this.lastConnectedDragPreview = dragPreview;
-            return;
-        }
-        if (didChange) {
-            this.lastConnectedHandlerId = this.handlerId;
-            this.lastConnectedDragPreview = dragPreview;
-            this.lastConnectedDragPreviewOptions = this.dragPreviewOptions;
-            this.dragPreviewUnsubscribe = this.backend.connectDragPreview(this.handlerId, dragPreview, this.dragPreviewOptions);
-        }
-    }
-    didHandlerIdChange() {
-        return this.lastConnectedHandlerId !== this.handlerId;
-    }
-    didConnectedDragSourceChange() {
-        return this.lastConnectedDragSource !== this.dragSource;
-    }
-    didConnectedDragPreviewChange() {
-        return this.lastConnectedDragPreview !== this.dragPreview;
-    }
-    didDragSourceOptionsChange() {
-        return !shallowEqual(this.lastConnectedDragSourceOptions, this.dragSourceOptions);
-    }
-    didDragPreviewOptionsChange() {
-        return !shallowEqual(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions);
-    }
-    disconnectDragSource() {
-        if (this.dragSourceUnsubscribe) {
-            this.dragSourceUnsubscribe();
-            this.dragSourceUnsubscribe = undefined;
-        }
-    }
-    disconnectDragPreview() {
-        if (this.dragPreviewUnsubscribe) {
-            this.dragPreviewUnsubscribe();
-            this.dragPreviewUnsubscribe = undefined;
-            this.dragPreviewNode = null;
-            this.dragPreviewRef = null;
-        }
-    }
-    get dragSource() {
-        return this.dragSourceNode || this.dragSourceRef && this.dragSourceRef.current;
-    }
-    get dragPreview() {
-        return this.dragPreviewNode || this.dragPreviewRef && this.dragPreviewRef.current;
-    }
-    clearDragSource() {
-        this.dragSourceNode = null;
-        this.dragSourceRef = null;
-    }
-    clearDragPreview() {
-        this.dragPreviewNode = null;
-        this.dragPreviewRef = null;
-    }
-    constructor(backend){
-        this.hooks = wrapConnectorHooks({
-            dragSource: (node, options)=>{
-                this.clearDragSource();
-                this.dragSourceOptions = options || null;
-                if (isRef(node)) {
-                    this.dragSourceRef = node;
-                } else {
-                    this.dragSourceNode = node;
-                }
-                this.reconnectDragSource();
-            },
-            dragPreview: (node, options)=>{
-                this.clearDragPreview();
-                this.dragPreviewOptions = options || null;
-                if (isRef(node)) {
-                    this.dragPreviewRef = node;
-                } else {
-                    this.dragPreviewNode = node;
-                }
-                this.reconnectDragPreview();
-            }
-        });
-        this.handlerId = null;
-        // The drop target may either be attached via ref or connect function
-        this.dragSourceRef = null;
-        this.dragSourceOptionsInternal = null;
-        // The drag preview may either be attached via ref or connect function
-        this.dragPreviewRef = null;
-        this.dragPreviewOptionsInternal = null;
-        this.lastConnectedHandlerId = null;
-        this.lastConnectedDragSource = null;
-        this.lastConnectedDragSourceOptions = null;
-        this.lastConnectedDragPreview = null;
-        this.lastConnectedDragPreviewOptions = null;
-        this.backend = backend;
-    }
-}
-
-class TargetConnector {
-    get connectTarget() {
-        return this.dropTarget;
-    }
-    reconnect() {
-        // if nothing has changed then don't resubscribe
-        const didChange = this.didHandlerIdChange() || this.didDropTargetChange() || this.didOptionsChange();
-        if (didChange) {
-            this.disconnectDropTarget();
-        }
-        const dropTarget = this.dropTarget;
-        if (!this.handlerId) {
-            return;
-        }
-        if (!dropTarget) {
-            this.lastConnectedDropTarget = dropTarget;
-            return;
-        }
-        if (didChange) {
-            this.lastConnectedHandlerId = this.handlerId;
-            this.lastConnectedDropTarget = dropTarget;
-            this.lastConnectedDropTargetOptions = this.dropTargetOptions;
-            this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
-        }
-    }
-    receiveHandlerId(newHandlerId) {
-        if (newHandlerId === this.handlerId) {
-            return;
-        }
-        this.handlerId = newHandlerId;
-        this.reconnect();
-    }
-    get dropTargetOptions() {
-        return this.dropTargetOptionsInternal;
-    }
-    set dropTargetOptions(options) {
-        this.dropTargetOptionsInternal = options;
-    }
-    didHandlerIdChange() {
-        return this.lastConnectedHandlerId !== this.handlerId;
-    }
-    didDropTargetChange() {
-        return this.lastConnectedDropTarget !== this.dropTarget;
-    }
-    didOptionsChange() {
-        return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
-    }
-    disconnectDropTarget() {
-        if (this.unsubscribeDropTarget) {
-            this.unsubscribeDropTarget();
-            this.unsubscribeDropTarget = undefined;
-        }
-    }
-    get dropTarget() {
-        return this.dropTargetNode || this.dropTargetRef && this.dropTargetRef.current;
-    }
-    clearDropTarget() {
-        this.dropTargetRef = null;
-        this.dropTargetNode = null;
-    }
-    constructor(backend){
-        this.hooks = wrapConnectorHooks({
-            dropTarget: (node, options)=>{
-                this.clearDropTarget();
-                this.dropTargetOptions = options;
-                if (isRef(node)) {
-                    this.dropTargetRef = node;
-                } else {
-                    this.dropTargetNode = node;
-                }
-                this.reconnect();
-            }
-        });
-        this.handlerId = null;
-        // The drop target may either be attached via ref or connect function
-        this.dropTargetRef = null;
-        this.dropTargetOptionsInternal = null;
-        this.lastConnectedHandlerId = null;
-        this.lastConnectedDropTarget = null;
-        this.lastConnectedDropTargetOptions = null;
-        this.backend = backend;
-    }
-}
-
-/**
- * A hook to retrieve the DragDropManager from Context
- */ function useDragDropManager() {
-    const { dragDropManager  } = React.useContext(DndContext);
-    invariant(dragDropManager != null, 'Expected drag drop context');
-    return dragDropManager;
-}
-
-function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
-    const manager = useDragDropManager();
-    const connector = React.useMemo(()=>new SourceConnector(manager.getBackend())
-    , [
-        manager
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        connector.dragSourceOptions = dragSourceOptions || null;
-        connector.reconnect();
-        return ()=>connector.disconnectDragSource()
-        ;
-    }, [
-        connector,
-        dragSourceOptions
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        connector.dragPreviewOptions = dragPreviewOptions || null;
-        connector.reconnect();
-        return ()=>connector.disconnectDragPreview()
-        ;
-    }, [
-        connector,
-        dragPreviewOptions
-    ]);
-    return connector;
-}
-
-function useDragSourceMonitor() {
-    const manager = useDragDropManager();
-    return React.useMemo(()=>new DragSourceMonitorImpl(manager)
-    , [
-        manager
-    ]);
-}
-
-class DragSourceImpl {
-    beginDrag() {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        let result = null;
-        if (typeof spec.item === 'object') {
-            result = spec.item;
-        } else if (typeof spec.item === 'function') {
-            result = spec.item(monitor);
-        } else {
-            result = {};
-        }
-        return result !== null && result !== void 0 ? result : null;
-    }
-    canDrag() {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        if (typeof spec.canDrag === 'boolean') {
-            return spec.canDrag;
-        } else if (typeof spec.canDrag === 'function') {
-            return spec.canDrag(monitor);
-        } else {
-            return true;
-        }
-    }
-    isDragging(globalMonitor, target) {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        const { isDragging  } = spec;
-        return isDragging ? isDragging(monitor) : target === globalMonitor.getSourceId();
-    }
-    endDrag() {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        const connector = this.connector;
-        const { end  } = spec;
-        if (end) {
-            end(monitor.getItem(), monitor);
-        }
-        connector.reconnect();
-    }
-    constructor(spec, monitor, connector){
-        this.spec = spec;
-        this.monitor = monitor;
-        this.connector = connector;
-    }
-}
-
-function useDragSource(spec, monitor, connector) {
-    const handler = React.useMemo(()=>new DragSourceImpl(spec, monitor, connector)
-    , [
-        monitor,
-        connector
-    ]);
-    React.useEffect(()=>{
-        handler.spec = spec;
-    }, [
-        spec
-    ]);
-    return handler;
-}
-
-function useDragType(spec) {
-    return React.useMemo(()=>{
-        const result = spec.type;
-        invariant(result != null, 'spec.type must be defined');
-        return result;
-    }, [
-        spec
-    ]);
-}
-
-function useRegisteredDragSource(spec, monitor, connector) {
-    const manager = useDragDropManager();
-    const handler = useDragSource(spec, monitor, connector);
-    const itemType = useDragType(spec);
-    useIsomorphicLayoutEffect(function registerDragSource() {
-        if (itemType != null) {
-            const [handlerId, unregister] = registerSource(itemType, handler, manager);
-            monitor.receiveHandlerId(handlerId);
-            connector.receiveHandlerId(handlerId);
-            return unregister;
-        }
-        return;
-    }, [
-        manager,
-        monitor,
-        connector,
-        handler,
-        itemType
-    ]);
-}
-
-/**
- * useDragSource hook
- * @param sourceSpec The drag source specification (object or function, function preferred)
- * @param deps The memoization deps array to use when evaluating spec changes
- */ function useDrag(specArg, deps) {
-    const spec = useOptionalFactory(specArg, deps);
-    invariant(!spec.begin, `useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)`);
-    const monitor = useDragSourceMonitor();
-    const connector = useDragSourceConnector(spec.options, spec.previewOptions);
-    useRegisteredDragSource(spec, monitor, connector);
-    return [
-        useCollectedProps(spec.collect, monitor, connector),
-        useConnectDragSource(connector),
-        useConnectDragPreview(connector), 
-    ];
-}
-
-function useConnectDropTarget(connector) {
-    return React.useMemo(()=>connector.hooks.dropTarget()
-    , [
-        connector
-    ]);
-}
-
-function useDropTargetConnector(options) {
-    const manager = useDragDropManager();
-    const connector = React.useMemo(()=>new TargetConnector(manager.getBackend())
-    , [
-        manager
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        connector.dropTargetOptions = options || null;
-        connector.reconnect();
-        return ()=>connector.disconnectDropTarget()
-        ;
-    }, [
-        options
-    ]);
-    return connector;
-}
-
-function useDropTargetMonitor() {
-    const manager = useDragDropManager();
-    return React.useMemo(()=>new DropTargetMonitorImpl(manager)
-    , [
-        manager
-    ]);
-}
-
-/**
- * Internal utility hook to get an array-version of spec.accept.
- * The main utility here is that we aren't creating a new array on every render if a non-array spec.accept is passed in.
- * @param spec
- */ function useAccept(spec) {
-    const { accept  } = spec;
-    return React.useMemo(()=>{
-        invariant(spec.accept != null, 'accept must be defined');
-        return Array.isArray(accept) ? accept : [
-            accept
-        ];
-    }, [
-        accept
-    ]);
-}
-
-class DropTargetImpl {
-    canDrop() {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        return spec.canDrop ? spec.canDrop(monitor.getItem(), monitor) : true;
-    }
-    hover() {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        if (spec.hover) {
-            spec.hover(monitor.getItem(), monitor);
-        }
-    }
-    drop() {
-        const spec = this.spec;
-        const monitor = this.monitor;
-        if (spec.drop) {
-            return spec.drop(monitor.getItem(), monitor);
-        }
-        return;
-    }
-    constructor(spec, monitor){
-        this.spec = spec;
-        this.monitor = monitor;
-    }
-}
-
-function useDropTarget(spec, monitor) {
-    const dropTarget = React.useMemo(()=>new DropTargetImpl(spec, monitor)
-    , [
-        monitor
-    ]);
-    React.useEffect(()=>{
-        dropTarget.spec = spec;
-    }, [
-        spec
-    ]);
-    return dropTarget;
-}
-
-function useRegisteredDropTarget(spec, monitor, connector) {
-    const manager = useDragDropManager();
-    const dropTarget = useDropTarget(spec, monitor);
-    const accept = useAccept(spec);
-    useIsomorphicLayoutEffect(function registerDropTarget() {
-        const [handlerId, unregister] = registerTarget(accept, dropTarget, manager);
-        monitor.receiveHandlerId(handlerId);
-        connector.receiveHandlerId(handlerId);
-        return unregister;
-    }, [
-        manager,
-        monitor,
-        dropTarget,
-        connector,
-        accept.map((a)=>a.toString()
-        ).join('|'), 
-    ]);
-}
-
-/**
- * useDropTarget Hook
- * @param spec The drop target specification (object or function, function preferred)
- * @param deps The memoization deps array to use when evaluating spec changes
- */ function useDrop(specArg, deps) {
-    const spec = useOptionalFactory(specArg, deps);
-    const monitor = useDropTargetMonitor();
-    const connector = useDropTargetConnector(spec.options);
-    useRegisteredDropTarget(spec, monitor, connector);
-    return [
-        useCollectedProps(spec.collect, monitor, connector),
-        useConnectDropTarget(connector), 
-    ];
-}
-
 var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   var column = _ref.column,
       table = _ref.table;
@@ -3196,8 +420,10 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   })))));
 };
 
-var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var table = _ref.table;
+var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
+  var handleDragStart = _ref.handleDragStart,
+      handleDragEnd = _ref.handleDragEnd,
+      table = _ref.table;
   var _table$options = table.options,
       DragHandleIcon = _table$options.icons.DragHandleIcon,
       localization = _table$options.localization;
@@ -3209,7 +435,9 @@ var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     title: localization.grab
   }, React__default.createElement(material.IconButton, {
     disableRipple: true,
-    ref: ref,
+    draggable: "true",
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
     size: "small",
     sx: {
       cursor: 'grab',
@@ -3226,7 +454,7 @@ var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   }, React__default.createElement(DragHandleIcon, null)));
-});
+};
 
 var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
   var itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
@@ -3445,6 +673,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
   var allColumns = _ref.allColumns,
+      currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       column = _ref.column,
       isSubMenu = _ref.isSubMenu,
       table = _ref.table;
@@ -3461,30 +691,6 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
 
   var columnDef = column.columnDef;
   var columnDefType = columnDef.columnDefType;
-
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
-
-  var _useDrag = useDrag({
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    item: function item() {
-      return column;
-    },
-    type: 'column'
-  }),
-      dragRef = _useDrag[1],
-      previewRef = _useDrag[2];
-
   var switchChecked = columnDefType !== 'group' && column.getIsVisible() || columnDefType === 'group' && column.getLeafColumns().some(function (col) {
     return col.getIsVisible();
   });
@@ -3501,32 +707,64 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     }
   };
 
+  var menuItemRef = React__default.useRef(null);
+
+  var _useState = React.useState(false),
+      isDragging = _useState[0],
+      setIsDragging = _useState[1];
+
+  var handleDragStart = function handleDragStart(e) {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+  };
+
+  var handleDragEnd = function handleDragEnd(_e) {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  var handleDragEnter = function handleDragEnter(_e) {
+    if (!isDragging) {
+      setCurrentHoveredColumn(column);
+    }
+  };
+
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
-    ref: columnDefType === 'data' ? dropRef : undefined,
-    sx: {
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      my: 0,
-      pl: (column.depth + 0.5) * 2 + "rem",
-      py: '6px'
+    disableRipple: enableColumnOrdering,
+    ref: menuItemRef,
+    onDragEnter: handleDragEnter,
+    sx: function sx(theme) {
+      return {
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        my: 0,
+        opacity: isDragging ? 0.5 : 1,
+        outline: isDragging ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : 'none',
+        pl: (column.depth + 0.5) * 2 + "rem",
+        py: '6px'
+      };
     }
   }, React__default.createElement(material.Box, {
-    ref: previewRef,
     sx: {
       display: 'flex',
       flexWrap: 'nowrap',
       gap: '8px'
     }
-  }, columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
+  }, !isSubMenu && columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
     return col.columnDef.columnDefType === 'group';
   }) && (columnDef.enableColumnOrdering !== false ? React__default.createElement(MRT_GrabHandleButton, {
-    ref: dragRef,
+    handleDragEnd: handleDragEnd,
+    handleDragStart: handleDragStart,
     table: table
   }) : React__default.createElement(material.Box, {
     sx: {
       width: '28px'
     }
-  })), enablePinning && !isSubMenu && (column.getCanPin() ? React__default.createElement(MRT_ColumnPinningButtons, {
+  })), !isSubMenu && enablePinning && (column.getCanPin() ? React__default.createElement(MRT_ColumnPinningButtons, {
     column: column,
     table: table
   }) : React__default.createElement(material.Box, {
@@ -3561,9 +799,11 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   }, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
-      key: i + "-" + c.id,
       column: c,
+      currentHoveredColumn: currentHoveredColumn,
       isSubMenu: isSubMenu,
+      key: i + "-" + c.id,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   }));
@@ -3617,6 +857,11 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
 
     return columns;
   }, [columnOrder, columnPinning, getAllColumns(), getCenterLeafColumns(), getLeftLeafColumns(), getRightLeafColumns()]);
+
+  var _useState = React.useState(null),
+      currentHoveredColumn = _useState[0],
+      setCurrentHoveredColumn = _useState[1];
+
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -3654,8 +899,10 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
       column: column,
+      currentHoveredColumn: currentHoveredColumn,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   }));
@@ -4103,1026 +1350,55 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
-      selectAll = _ref.selectAll,
-      table = _ref.table;
-  var getState = table.getState,
-      _table$options = table.options,
-      localization = _table$options.localization,
-      muiSelectCheckboxProps = _table$options.muiSelectCheckboxProps,
-      muiSelectAllCheckboxProps = _table$options.muiSelectAllCheckboxProps,
-      selectAllMode = _table$options.selectAllMode;
-
-  var _getState = getState(),
-      density = _getState.density;
-
-  var handleSelectChange = function handleSelectChange(event) {
-    if (selectAll) {
-      if (selectAllMode === 'all') {
-        table.getToggleAllRowsSelectedHandler()(event);
-      } else if (selectAllMode === 'page') {
-        table.getToggleAllPageRowsSelectedHandler()(event);
-      }
-    } else if (row) {
-      row == null ? void 0 : row.getToggleSelectedHandler()(event);
-    }
-  };
-
-  var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
-    table: table
-  }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
-    row: row,
-    table: table
-  }) : muiSelectCheckboxProps;
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
-  }, React__default.createElement(material.Checkbox, Object.assign({
-    checked: selectAll ? table.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
-    indeterminate: selectAll ? table.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
-    inputProps: {
-      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
-    },
-    onChange: handleSelectChange,
-    size: density === 'compact' ? 'small' : 'medium'
-  }, checkboxProps, {
-    sx: _extends({
-      height: density === 'compact' ? '1.75rem' : '2.25rem',
-      width: density === 'compact' ? '1.75rem' : '2.25rem'
-    }, checkboxProps == null ? void 0 : checkboxProps.sx)
-  })));
-};
-
-// cheap lodash replacements
-function memoize(fn) {
-    let result = null;
-    const memoized = ()=>{
-        if (result == null) {
-            result = fn();
-        }
-        return result;
-    };
-    return memoized;
-}
-/**
- * drop-in replacement for _.without
- */ function without$1(items, item) {
-    return items.filter((i)=>i !== item
-    );
-}
-function union(itemsA, itemsB) {
-    const set = new Set();
-    const insertItem = (item)=>set.add(item)
-    ;
-    itemsA.forEach(insertItem);
-    itemsB.forEach(insertItem);
-    const result = [];
-    set.forEach((key)=>result.push(key)
-    );
-    return result;
-}
-
-class EnterLeaveCounter {
-    enter(enteringNode) {
-        const previousLength = this.entered.length;
-        const isNodeEntered = (node)=>this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode))
-        ;
-        this.entered = union(this.entered.filter(isNodeEntered), [
-            enteringNode
-        ]);
-        return previousLength === 0 && this.entered.length > 0;
-    }
-    leave(leavingNode) {
-        const previousLength = this.entered.length;
-        this.entered = without$1(this.entered.filter(this.isNodeInDocument), leavingNode);
-        return previousLength > 0 && this.entered.length === 0;
-    }
-    reset() {
-        this.entered = [];
-    }
-    constructor(isNodeInDocument){
-        this.entered = [];
-        this.isNodeInDocument = isNodeInDocument;
-    }
-}
-
-class NativeDragSource {
-    initializeExposedProperties() {
-        Object.keys(this.config.exposeProperties).forEach((property)=>{
-            Object.defineProperty(this.item, property, {
-                configurable: true,
-                enumerable: true,
-                get () {
-                    // eslint-disable-next-line no-console
-                    console.warn(`Browser doesn't allow reading "${property}" until the drop event.`);
-                    return null;
-                }
-            });
-        });
-    }
-    loadDataTransfer(dataTransfer) {
-        if (dataTransfer) {
-            const newProperties = {};
-            Object.keys(this.config.exposeProperties).forEach((property)=>{
-                const propertyFn = this.config.exposeProperties[property];
-                if (propertyFn != null) {
-                    newProperties[property] = {
-                        value: propertyFn(dataTransfer, this.config.matchesTypes),
-                        configurable: true,
-                        enumerable: true
-                    };
-                }
-            });
-            Object.defineProperties(this.item, newProperties);
-        }
-    }
-    canDrag() {
-        return true;
-    }
-    beginDrag() {
-        return this.item;
-    }
-    isDragging(monitor, handle) {
-        return handle === monitor.getSourceId();
-    }
-    endDrag() {
-    // empty
-    }
-    constructor(config){
-        this.config = config;
-        this.item = {};
-        this.initializeExposedProperties();
-    }
-}
-
-const FILE = '__NATIVE_FILE__';
-const URL = '__NATIVE_URL__';
-const TEXT = '__NATIVE_TEXT__';
-const HTML = '__NATIVE_HTML__';
-
-var NativeTypes = {
-  __proto__: null,
-  FILE: FILE,
-  URL: URL,
-  TEXT: TEXT,
-  HTML: HTML
-};
-
-function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
-    const result = typesToTry.reduce((resultSoFar, typeToTry)=>resultSoFar || dataTransfer.getData(typeToTry)
-    , '');
-    return result != null ? result : defaultValue;
-}
-
-const nativeTypesConfig = {
-    [FILE]: {
-        exposeProperties: {
-            files: (dataTransfer)=>Array.prototype.slice.call(dataTransfer.files)
-            ,
-            items: (dataTransfer)=>dataTransfer.items
-            ,
-            dataTransfer: (dataTransfer)=>dataTransfer
-        },
-        matchesTypes: [
-            'Files'
-        ]
-    },
-    [HTML]: {
-        exposeProperties: {
-            html: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
-            ,
-            dataTransfer: (dataTransfer)=>dataTransfer
-        },
-        matchesTypes: [
-            'Html',
-            'text/html'
-        ]
-    },
-    [URL]: {
-        exposeProperties: {
-            urls: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n')
-            ,
-            dataTransfer: (dataTransfer)=>dataTransfer
-        },
-        matchesTypes: [
-            'Url',
-            'text/uri-list'
-        ]
-    },
-    [TEXT]: {
-        exposeProperties: {
-            text: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
-            ,
-            dataTransfer: (dataTransfer)=>dataTransfer
-        },
-        matchesTypes: [
-            'Text',
-            'text/plain'
-        ]
-    }
-};
-
-function createNativeDragSource(type, dataTransfer) {
-    const config = nativeTypesConfig[type];
-    if (!config) {
-        throw new Error(`native type ${type} has no configuration`);
-    }
-    const result = new NativeDragSource(config);
-    result.loadDataTransfer(dataTransfer);
-    return result;
-}
-function matchNativeItemType(dataTransfer) {
-    if (!dataTransfer) {
-        return null;
-    }
-    const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
-    return Object.keys(nativeTypesConfig).filter((nativeItemType)=>{
-        const typeConfig = nativeTypesConfig[nativeItemType];
-        if (!(typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.matchesTypes)) {
-            return false;
-        }
-        return typeConfig.matchesTypes.some((t)=>dataTransferTypes.indexOf(t) > -1
-        );
-    })[0] || null;
-}
-
-const isFirefox = memoize(()=>/firefox/i.test(navigator.userAgent)
-);
-const isSafari = memoize(()=>Boolean(window.safari)
-);
-
-class MonotonicInterpolant {
-    interpolate(x) {
-        const { xs , ys , c1s , c2s , c3s  } = this;
-        // The rightmost point in the dataset should give an exact result
-        let i = xs.length - 1;
-        if (x === xs[i]) {
-            return ys[i];
-        }
-        // Search for the interval x is in, returning the corresponding y if x is one of the original xs
-        let low = 0;
-        let high = c3s.length - 1;
-        let mid;
-        while(low <= high){
-            mid = Math.floor(0.5 * (low + high));
-            const xHere = xs[mid];
-            if (xHere < x) {
-                low = mid + 1;
-            } else if (xHere > x) {
-                high = mid - 1;
-            } else {
-                return ys[mid];
-            }
-        }
-        i = Math.max(0, high);
-        // Interpolate
-        const diff = x - xs[i];
-        const diffSq = diff * diff;
-        return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
-    }
-    constructor(xs, ys){
-        const { length  } = xs;
-        const dxs = [];
-        const ms = [];
-        let dx;
-        let dy;
-        for(let i1 = 0; i1 < length - 1; i1++){
-            dx = xs[i1 + 1] - xs[i1];
-            dy = ys[i1 + 1] - ys[i1];
-            dxs.push(dx);
-            ms.push(dy / dx);
-        }
-        // Get degree-1 coefficients
-        const c1s = [
-            ms[0]
-        ];
-        for(let i2 = 0; i2 < dxs.length - 1; i2++){
-            const m2 = ms[i2];
-            const mNext = ms[i2 + 1];
-            if (m2 * mNext <= 0) {
-                c1s.push(0);
-            } else {
-                dx = dxs[i2];
-                const dxNext = dxs[i2 + 1];
-                const common = dx + dxNext;
-                c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
-            }
-        }
-        c1s.push(ms[ms.length - 1]);
-        // Get degree-2 and degree-3 coefficients
-        const c2s = [];
-        const c3s = [];
-        let m;
-        for(let i3 = 0; i3 < c1s.length - 1; i3++){
-            m = ms[i3];
-            const c1 = c1s[i3];
-            const invDx = 1 / dxs[i3];
-            const common = c1 + c1s[i3 + 1] - m - m;
-            c2s.push((m - c1 - common) * invDx);
-            c3s.push(common * invDx * invDx);
-        }
-        this.xs = xs;
-        this.ys = ys;
-        this.c1s = c1s;
-        this.c2s = c2s;
-        this.c3s = c3s;
-    }
-}
-
-const ELEMENT_NODE = 1;
-function getNodeClientOffset(node) {
-    const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
-    if (!el) {
-        return null;
-    }
-    const { top , left  } = el.getBoundingClientRect();
-    return {
-        x: left,
-        y: top
-    };
-}
-function getEventClientOffset(e) {
-    return {
-        x: e.clientX,
-        y: e.clientY
-    };
-}
-function isImageNode(node) {
-    var ref;
-    return node.nodeName === 'IMG' && (isFirefox() || !((ref = document.documentElement) === null || ref === void 0 ? void 0 : ref.contains(node)));
-}
-function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
-    let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
-    let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
-    // Work around @2x coordinate discrepancies in browsers
-    if (isSafari() && isImage) {
-        dragPreviewHeight /= window.devicePixelRatio;
-        dragPreviewWidth /= window.devicePixelRatio;
-    }
-    return {
-        dragPreviewWidth,
-        dragPreviewHeight
-    };
-}
-function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
-    // The browsers will use the image intrinsic size under different conditions.
-    // Firefox only cares if it's an image, but WebKit also wants it to be detached.
-    const isImage = isImageNode(dragPreview);
-    const dragPreviewNode = isImage ? sourceNode : dragPreview;
-    const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
-    const offsetFromDragPreview = {
-        x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
-        y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
-    };
-    const { offsetWidth: sourceWidth , offsetHeight: sourceHeight  } = sourceNode;
-    const { anchorX , anchorY  } = anchorPoint;
-    const { dragPreviewWidth , dragPreviewHeight  } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight);
-    const calculateYOffset = ()=>{
-        const interpolantY = new MonotonicInterpolant([
-            0,
-            0.5,
-            1
-        ], [
-            // Dock to the top
-            offsetFromDragPreview.y,
-            // Align at the center
-            (offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
-            // Dock to the bottom
-            offsetFromDragPreview.y + dragPreviewHeight - sourceHeight, 
-        ]);
-        let y = interpolantY.interpolate(anchorY);
-        // Work around Safari 8 positioning bug
-        if (isSafari() && isImage) {
-            // We'll have to wait for @3x to see if this is entirely correct
-            y += (window.devicePixelRatio - 1) * dragPreviewHeight;
-        }
-        return y;
-    };
-    const calculateXOffset = ()=>{
-        // Interpolate coordinates depending on anchor point
-        // If you know a simpler way to do this, let me know
-        const interpolantX = new MonotonicInterpolant([
-            0,
-            0.5,
-            1
-        ], [
-            // Dock to the left
-            offsetFromDragPreview.x,
-            // Align at the center
-            (offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
-            // Dock to the right
-            offsetFromDragPreview.x + dragPreviewWidth - sourceWidth, 
-        ]);
-        return interpolantX.interpolate(anchorX);
-    };
-    // Force offsets if specified in the options.
-    const { offsetX , offsetY  } = offsetPoint;
-    const isManualOffsetX = offsetX === 0 || offsetX;
-    const isManualOffsetY = offsetY === 0 || offsetY;
-    return {
-        x: isManualOffsetX ? offsetX : calculateXOffset(),
-        y: isManualOffsetY ? offsetY : calculateYOffset()
-    };
-}
-
-class OptionsReader {
-    get window() {
-        if (this.globalContext) {
-            return this.globalContext;
-        } else if (typeof window !== 'undefined') {
-            return window;
-        }
-        return undefined;
-    }
-    get document() {
-        var ref;
-        if ((ref = this.globalContext) === null || ref === void 0 ? void 0 : ref.document) {
-            return this.globalContext.document;
-        } else if (this.window) {
-            return this.window.document;
-        } else {
-            return undefined;
-        }
-    }
-    get rootElement() {
-        var ref;
-        return ((ref = this.optionsArgs) === null || ref === void 0 ? void 0 : ref.rootElement) || this.window;
-    }
-    constructor(globalContext, options){
-        this.ownerDocument = null;
-        this.globalContext = globalContext;
-        this.optionsArgs = options;
-    }
-}
-
-function _defineProperty$4(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _objectSpread$4(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === 'function') {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _defineProperty$4(target, key, source[key]);
-        });
-    }
-    return target;
-}
-class HTML5BackendImpl {
-    /**
-	 * Generate profiling statistics for the HTML5Backend.
-	 */ profile() {
-        var ref, ref1;
-        return {
-            sourcePreviewNodes: this.sourcePreviewNodes.size,
-            sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
-            sourceNodeOptions: this.sourceNodeOptions.size,
-            sourceNodes: this.sourceNodes.size,
-            dragStartSourceIds: ((ref = this.dragStartSourceIds) === null || ref === void 0 ? void 0 : ref.length) || 0,
-            dropTargetIds: this.dropTargetIds.length,
-            dragEnterTargetIds: this.dragEnterTargetIds.length,
-            dragOverTargetIds: ((ref1 = this.dragOverTargetIds) === null || ref1 === void 0 ? void 0 : ref1.length) || 0
-        };
-    }
-    // public for test
-    get window() {
-        return this.options.window;
-    }
-    get document() {
-        return this.options.document;
-    }
-    /**
-	 * Get the root element to use for event subscriptions
-	 */ get rootElement() {
-        return this.options.rootElement;
-    }
-    setup() {
-        const root = this.rootElement;
-        if (root === undefined) {
-            return;
-        }
-        if (root.__isReactDndBackendSetUp) {
-            throw new Error('Cannot have two HTML5 backends at the same time.');
-        }
-        root.__isReactDndBackendSetUp = true;
-        this.addEventListeners(root);
-    }
-    teardown() {
-        const root = this.rootElement;
-        if (root === undefined) {
-            return;
-        }
-        root.__isReactDndBackendSetUp = false;
-        this.removeEventListeners(this.rootElement);
-        this.clearCurrentDragSourceNode();
-        if (this.asyncEndDragFrameId) {
-            var ref;
-            (ref = this.window) === null || ref === void 0 ? void 0 : ref.cancelAnimationFrame(this.asyncEndDragFrameId);
-        }
-    }
-    connectDragPreview(sourceId, node, options) {
-        this.sourcePreviewNodeOptions.set(sourceId, options);
-        this.sourcePreviewNodes.set(sourceId, node);
-        return ()=>{
-            this.sourcePreviewNodes.delete(sourceId);
-            this.sourcePreviewNodeOptions.delete(sourceId);
-        };
-    }
-    connectDragSource(sourceId, node, options) {
-        this.sourceNodes.set(sourceId, node);
-        this.sourceNodeOptions.set(sourceId, options);
-        const handleDragStart = (e)=>this.handleDragStart(e, sourceId)
-        ;
-        const handleSelectStart = (e)=>this.handleSelectStart(e)
-        ;
-        node.setAttribute('draggable', 'true');
-        node.addEventListener('dragstart', handleDragStart);
-        node.addEventListener('selectstart', handleSelectStart);
-        return ()=>{
-            this.sourceNodes.delete(sourceId);
-            this.sourceNodeOptions.delete(sourceId);
-            node.removeEventListener('dragstart', handleDragStart);
-            node.removeEventListener('selectstart', handleSelectStart);
-            node.setAttribute('draggable', 'false');
-        };
-    }
-    connectDropTarget(targetId, node) {
-        const handleDragEnter = (e)=>this.handleDragEnter(e, targetId)
-        ;
-        const handleDragOver = (e)=>this.handleDragOver(e, targetId)
-        ;
-        const handleDrop = (e)=>this.handleDrop(e, targetId)
-        ;
-        node.addEventListener('dragenter', handleDragEnter);
-        node.addEventListener('dragover', handleDragOver);
-        node.addEventListener('drop', handleDrop);
-        return ()=>{
-            node.removeEventListener('dragenter', handleDragEnter);
-            node.removeEventListener('dragover', handleDragOver);
-            node.removeEventListener('drop', handleDrop);
-        };
-    }
-    addEventListeners(target) {
-        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
-        if (!target.addEventListener) {
-            return;
-        }
-        target.addEventListener('dragstart', this.handleTopDragStart);
-        target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
-        target.addEventListener('dragend', this.handleTopDragEndCapture, true);
-        target.addEventListener('dragenter', this.handleTopDragEnter);
-        target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
-        target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
-        target.addEventListener('dragover', this.handleTopDragOver);
-        target.addEventListener('dragover', this.handleTopDragOverCapture, true);
-        target.addEventListener('drop', this.handleTopDrop);
-        target.addEventListener('drop', this.handleTopDropCapture, true);
-    }
-    removeEventListeners(target) {
-        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
-        if (!target.removeEventListener) {
-            return;
-        }
-        target.removeEventListener('dragstart', this.handleTopDragStart);
-        target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
-        target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
-        target.removeEventListener('dragenter', this.handleTopDragEnter);
-        target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
-        target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
-        target.removeEventListener('dragover', this.handleTopDragOver);
-        target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
-        target.removeEventListener('drop', this.handleTopDrop);
-        target.removeEventListener('drop', this.handleTopDropCapture, true);
-    }
-    getCurrentSourceNodeOptions() {
-        const sourceId = this.monitor.getSourceId();
-        const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
-        return _objectSpread$4({
-            dropEffect: this.altKeyPressed ? 'copy' : 'move'
-        }, sourceNodeOptions || {});
-    }
-    getCurrentDropEffect() {
-        if (this.isDraggingNativeItem()) {
-            // It makes more sense to default to 'copy' for native resources
-            return 'copy';
-        }
-        return this.getCurrentSourceNodeOptions().dropEffect;
-    }
-    getCurrentSourcePreviewNodeOptions() {
-        const sourceId = this.monitor.getSourceId();
-        const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
-        return _objectSpread$4({
-            anchorX: 0.5,
-            anchorY: 0.5,
-            captureDraggingState: false
-        }, sourcePreviewNodeOptions || {});
-    }
-    isDraggingNativeItem() {
-        const itemType = this.monitor.getItemType();
-        return Object.keys(NativeTypes).some((key)=>NativeTypes[key] === itemType
-        );
-    }
-    beginDragNativeItem(type, dataTransfer) {
-        this.clearCurrentDragSourceNode();
-        this.currentNativeSource = createNativeDragSource(type, dataTransfer);
-        this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
-        this.actions.beginDrag([
-            this.currentNativeHandle
-        ]);
-    }
-    setCurrentDragSourceNode(node) {
-        this.clearCurrentDragSourceNode();
-        this.currentDragSourceNode = node;
-        // A timeout of > 0 is necessary to resolve Firefox issue referenced
-        // See:
-        //   * https://github.com/react-dnd/react-dnd/pull/928
-        //   * https://github.com/react-dnd/react-dnd/issues/869
-        const MOUSE_MOVE_TIMEOUT = 1000;
-        // Receiving a mouse event in the middle of a dragging operation
-        // means it has ended and the drag source node disappeared from DOM,
-        // so the browser didn't dispatch the dragend event.
-        //
-        // We need to wait before we start listening for mousemove events.
-        // This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
-        // immediately in some browsers.
-        //
-        // See:
-        //   * https://github.com/react-dnd/react-dnd/pull/928
-        //   * https://github.com/react-dnd/react-dnd/issues/869
-        //
-        this.mouseMoveTimeoutTimer = setTimeout(()=>{
-            var ref;
-            return (ref = this.rootElement) === null || ref === void 0 ? void 0 : ref.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
-        }, MOUSE_MOVE_TIMEOUT);
-    }
-    clearCurrentDragSourceNode() {
-        if (this.currentDragSourceNode) {
-            this.currentDragSourceNode = null;
-            if (this.rootElement) {
-                var ref;
-                (ref = this.window) === null || ref === void 0 ? void 0 : ref.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
-                this.rootElement.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
-            }
-            this.mouseMoveTimeoutTimer = null;
-            return true;
-        }
-        return false;
-    }
-    handleDragStart(e, sourceId) {
-        if (e.defaultPrevented) {
-            return;
-        }
-        if (!this.dragStartSourceIds) {
-            this.dragStartSourceIds = [];
-        }
-        this.dragStartSourceIds.unshift(sourceId);
-    }
-    handleDragEnter(_e, targetId) {
-        this.dragEnterTargetIds.unshift(targetId);
-    }
-    handleDragOver(_e, targetId) {
-        if (this.dragOverTargetIds === null) {
-            this.dragOverTargetIds = [];
-        }
-        this.dragOverTargetIds.unshift(targetId);
-    }
-    handleDrop(_e, targetId) {
-        this.dropTargetIds.unshift(targetId);
-    }
-    constructor(manager, globalContext, options){
-        this.sourcePreviewNodes = new Map();
-        this.sourcePreviewNodeOptions = new Map();
-        this.sourceNodes = new Map();
-        this.sourceNodeOptions = new Map();
-        this.dragStartSourceIds = null;
-        this.dropTargetIds = [];
-        this.dragEnterTargetIds = [];
-        this.currentNativeSource = null;
-        this.currentNativeHandle = null;
-        this.currentDragSourceNode = null;
-        this.altKeyPressed = false;
-        this.mouseMoveTimeoutTimer = null;
-        this.asyncEndDragFrameId = null;
-        this.dragOverTargetIds = null;
-        this.lastClientOffset = null;
-        this.hoverRafId = null;
-        this.getSourceClientOffset = (sourceId)=>{
-            const source = this.sourceNodes.get(sourceId);
-            return source && getNodeClientOffset(source) || null;
-        };
-        this.endDragNativeItem = ()=>{
-            if (!this.isDraggingNativeItem()) {
-                return;
-            }
-            this.actions.endDrag();
-            if (this.currentNativeHandle) {
-                this.registry.removeSource(this.currentNativeHandle);
-            }
-            this.currentNativeHandle = null;
-            this.currentNativeSource = null;
-        };
-        this.isNodeInDocument = (node)=>{
-            // Check the node either in the main document or in the current context
-            return Boolean(node && this.document && this.document.body && this.document.body.contains(node));
-        };
-        this.endDragIfSourceWasRemovedFromDOM = ()=>{
-            const node = this.currentDragSourceNode;
-            if (node == null || this.isNodeInDocument(node)) {
-                return;
-            }
-            if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
-                this.actions.endDrag();
-            }
-            this.cancelHover();
-        };
-        this.scheduleHover = (dragOverTargetIds)=>{
-            if (this.hoverRafId === null && typeof requestAnimationFrame !== 'undefined') {
-                this.hoverRafId = requestAnimationFrame(()=>{
-                    if (this.monitor.isDragging()) {
-                        this.actions.hover(dragOverTargetIds || [], {
-                            clientOffset: this.lastClientOffset
-                        });
-                    }
-                    this.hoverRafId = null;
-                });
-            }
-        };
-        this.cancelHover = ()=>{
-            if (this.hoverRafId !== null && typeof cancelAnimationFrame !== 'undefined') {
-                cancelAnimationFrame(this.hoverRafId);
-                this.hoverRafId = null;
-            }
-        };
-        this.handleTopDragStartCapture = ()=>{
-            this.clearCurrentDragSourceNode();
-            this.dragStartSourceIds = [];
-        };
-        this.handleTopDragStart = (e)=>{
-            if (e.defaultPrevented) {
-                return;
-            }
-            const { dragStartSourceIds  } = this;
-            this.dragStartSourceIds = null;
-            const clientOffset = getEventClientOffset(e);
-            // Avoid crashing if we missed a drop event or our previous drag died
-            if (this.monitor.isDragging()) {
-                this.actions.endDrag();
-                this.cancelHover();
-            }
-            // Don't publish the source just yet (see why below)
-            this.actions.beginDrag(dragStartSourceIds || [], {
-                publishSource: false,
-                getSourceClientOffset: this.getSourceClientOffset,
-                clientOffset
-            });
-            const { dataTransfer  } = e;
-            const nativeType = matchNativeItemType(dataTransfer);
-            if (this.monitor.isDragging()) {
-                if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
-                    // Use custom drag image if user specifies it.
-                    // If child drag source refuses drag but parent agrees,
-                    // use parent's node as drag image. Neither works in IE though.
-                    const sourceId = this.monitor.getSourceId();
-                    const sourceNode = this.sourceNodes.get(sourceId);
-                    const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode;
-                    if (dragPreview) {
-                        const { anchorX , anchorY , offsetX , offsetY  } = this.getCurrentSourcePreviewNodeOptions();
-                        const anchorPoint = {
-                            anchorX,
-                            anchorY
-                        };
-                        const offsetPoint = {
-                            offsetX,
-                            offsetY
-                        };
-                        const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
-                        dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
-                    }
-                }
-                try {
-                    // Firefox won't drag without setting data
-                    dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.setData('application/json', {});
-                } catch (err) {
-                // IE doesn't support MIME types in setData
-                }
-                // Store drag source node so we can check whether
-                // it is removed from DOM and trigger endDrag manually.
-                this.setCurrentDragSourceNode(e.target);
-                // Now we are ready to publish the drag source.. or are we not?
-                const { captureDraggingState  } = this.getCurrentSourcePreviewNodeOptions();
-                if (!captureDraggingState) {
-                    // Usually we want to publish it in the next tick so that browser
-                    // is able to screenshot the current (not yet dragging) state.
-                    //
-                    // It also neatly avoids a situation where render() returns null
-                    // in the same tick for the source element, and browser freaks out.
-                    setTimeout(()=>this.actions.publishDragSource()
-                    , 0);
-                } else {
-                    // In some cases the user may want to override this behavior, e.g.
-                    // to work around IE not supporting custom drag previews.
-                    //
-                    // When using a custom drag layer, the only way to prevent
-                    // the default drag preview from drawing in IE is to screenshot
-                    // the dragging state in which the node itself has zero opacity
-                    // and height. In this case, though, returning null from render()
-                    // will abruptly end the dragging, which is not obvious.
-                    //
-                    // This is the reason such behavior is strictly opt-in.
-                    this.actions.publishDragSource();
-                }
-            } else if (nativeType) {
-                // A native item (such as URL) dragged from inside the document
-                this.beginDragNativeItem(nativeType);
-            } else if (dataTransfer && !dataTransfer.types && (e.target && !e.target.hasAttribute || !e.target.hasAttribute('draggable'))) {
-                // Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
-                // Just let it drag. It's a native type (URL or text) and will be picked up in
-                // dragenter handler.
-                return;
-            } else {
-                // If by this time no drag source reacted, tell browser not to drag.
-                e.preventDefault();
-            }
-        };
-        this.handleTopDragEndCapture = ()=>{
-            if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
-                // Firefox can dispatch this event in an infinite loop
-                // if dragend handler does something like showing an alert.
-                // Only proceed if we have not handled it already.
-                this.actions.endDrag();
-            }
-            this.cancelHover();
-        };
-        this.handleTopDragEnterCapture = (e)=>{
-            this.dragEnterTargetIds = [];
-            if (this.isDraggingNativeItem()) {
-                var ref;
-                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
-            }
-            const isFirstEnter = this.enterLeaveCounter.enter(e.target);
-            if (!isFirstEnter || this.monitor.isDragging()) {
-                return;
-            }
-            const { dataTransfer  } = e;
-            const nativeType = matchNativeItemType(dataTransfer);
-            if (nativeType) {
-                // A native item (such as file or URL) dragged from outside the document
-                this.beginDragNativeItem(nativeType, dataTransfer);
-            }
-        };
-        this.handleTopDragEnter = (e)=>{
-            const { dragEnterTargetIds  } = this;
-            this.dragEnterTargetIds = [];
-            if (!this.monitor.isDragging()) {
-                // This is probably a native item type we don't understand.
-                return;
-            }
-            this.altKeyPressed = e.altKey;
-            // If the target changes position as the result of `dragenter`, `dragover` might still
-            // get dispatched despite target being no longer there. The easy solution is to check
-            // whether there actually is a target before firing `hover`.
-            if (dragEnterTargetIds.length > 0) {
-                this.actions.hover(dragEnterTargetIds, {
-                    clientOffset: getEventClientOffset(e)
-                });
-            }
-            const canDrop = dragEnterTargetIds.some((targetId)=>this.monitor.canDropOnTarget(targetId)
-            );
-            if (canDrop) {
-                // IE requires this to fire dragover events
-                e.preventDefault();
-                if (e.dataTransfer) {
-                    e.dataTransfer.dropEffect = this.getCurrentDropEffect();
-                }
-            }
-        };
-        this.handleTopDragOverCapture = (e)=>{
-            this.dragOverTargetIds = [];
-            if (this.isDraggingNativeItem()) {
-                var ref;
-                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
-            }
-        };
-        this.handleTopDragOver = (e)=>{
-            const { dragOverTargetIds  } = this;
-            this.dragOverTargetIds = [];
-            if (!this.monitor.isDragging()) {
-                // This is probably a native item type we don't understand.
-                // Prevent default "drop and blow away the whole document" action.
-                e.preventDefault();
-                if (e.dataTransfer) {
-                    e.dataTransfer.dropEffect = 'none';
-                }
-                return;
-            }
-            this.altKeyPressed = e.altKey;
-            this.lastClientOffset = getEventClientOffset(e);
-            this.scheduleHover(dragOverTargetIds);
-            const canDrop = (dragOverTargetIds || []).some((targetId)=>this.monitor.canDropOnTarget(targetId)
-            );
-            if (canDrop) {
-                // Show user-specified drop effect.
-                e.preventDefault();
-                if (e.dataTransfer) {
-                    e.dataTransfer.dropEffect = this.getCurrentDropEffect();
-                }
-            } else if (this.isDraggingNativeItem()) {
-                // Don't show a nice cursor but still prevent default
-                // "drop and blow away the whole document" action.
-                e.preventDefault();
-            } else {
-                e.preventDefault();
-                if (e.dataTransfer) {
-                    e.dataTransfer.dropEffect = 'none';
-                }
-            }
-        };
-        this.handleTopDragLeaveCapture = (e)=>{
-            if (this.isDraggingNativeItem()) {
-                e.preventDefault();
-            }
-            const isLastLeave = this.enterLeaveCounter.leave(e.target);
-            if (!isLastLeave) {
-                return;
-            }
-            if (this.isDraggingNativeItem()) {
-                setTimeout(()=>this.endDragNativeItem()
-                , 0);
-            }
-            this.cancelHover();
-        };
-        this.handleTopDropCapture = (e)=>{
-            this.dropTargetIds = [];
-            if (this.isDraggingNativeItem()) {
-                var ref;
-                e.preventDefault();
-                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
-            } else if (matchNativeItemType(e.dataTransfer)) {
-                // Dragging some elements, like <a> and <img> may still behave like a native drag event,
-                // even if the current drag event matches a user-defined type.
-                // Stop the default behavior when we're not expecting a native item to be dropped.
-                e.preventDefault();
-            }
-            this.enterLeaveCounter.reset();
-        };
-        this.handleTopDrop = (e)=>{
-            const { dropTargetIds  } = this;
-            this.dropTargetIds = [];
-            this.actions.hover(dropTargetIds, {
-                clientOffset: getEventClientOffset(e)
-            });
-            this.actions.drop({
-                dropEffect: this.getCurrentDropEffect()
-            });
-            if (this.isDraggingNativeItem()) {
-                this.endDragNativeItem();
-            } else if (this.monitor.isDragging()) {
-                this.actions.endDrag();
-            }
-            this.cancelHover();
-        };
-        this.handleSelectStart = (e)=>{
-            const target = e.target;
-            // Only IE requires us to explicitly say
-            // we want drag drop operation to start
-            if (typeof target.dragDrop !== 'function') {
-                return;
-            }
-            // Inputs and textareas should be selectable
-            if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-                return;
-            }
-            // For other targets, ask IE
-            // to enable drag and drop
-            e.preventDefault();
-            target.dragDrop();
-        };
-        this.options = new OptionsReader(globalContext, options);
-        this.actions = manager.getActions();
-        this.monitor = manager.getMonitor();
-        this.registry = manager.getRegistry();
-        this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
+      selectAll = _ref.selectAll,
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      localization = _table$options.localization,
+      muiSelectCheckboxProps = _table$options.muiSelectCheckboxProps,
+      muiSelectAllCheckboxProps = _table$options.muiSelectAllCheckboxProps,
+      selectAllMode = _table$options.selectAllMode;
+
+  var _getState = getState(),
+      density = _getState.density;
+
+  var handleSelectChange = function handleSelectChange(event) {
+    if (selectAll) {
+      if (selectAllMode === 'all') {
+        table.getToggleAllRowsSelectedHandler()(event);
+      } else if (selectAllMode === 'page') {
+        table.getToggleAllPageRowsSelectedHandler()(event);
+      }
+    } else if (row) {
+      row == null ? void 0 : row.getToggleSelectedHandler()(event);
     }
-}
+  };
 
-const HTML5Backend = function createBackend(manager, context, options) {
-    return new HTML5BackendImpl(manager, context, options);
+  var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
+    table: table
+  }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
+    row: row,
+    table: table
+  }) : muiSelectCheckboxProps;
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+  }, React__default.createElement(material.Checkbox, Object.assign({
+    checked: selectAll ? table.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
+    indeterminate: selectAll ? table.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
+    inputProps: {
+      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+    },
+    onChange: handleSelectChange,
+    size: density === 'compact' ? 'small' : 'medium'
+  }, checkboxProps, {
+    sx: _extends({
+      height: density === 'compact' ? '1.75rem' : '2.25rem',
+      width: density === 'compact' ? '1.75rem' : '2.25rem'
+    }, checkboxProps == null ? void 0 : checkboxProps.sx)
+  })));
 };
 
 var _excluded = ["table"];
@@ -6148,12 +2424,10 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _ref2, _columnDef$header$len, _columnDef$header;
 
-  var dragRef = _ref.dragRef,
-      dropRef = _ref.dropRef,
+  var currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       header = _ref.header,
-      table = _ref.table,
-      isDragging = _ref.isDragging,
-      previewRef = _ref.previewRef;
+      table = _ref.table;
   var getState = table.getState,
       _table$options = table.options,
       enableColumnActions = _table$options.enableColumnActions,
@@ -6161,11 +2435,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       enableColumnResizing = _table$options.enableColumnResizing,
       enableGrouping = _table$options.enableGrouping,
       enableMultiSort = _table$options.enableMultiSort,
-      muiTableHeadCellProps = _table$options.muiTableHeadCellProps;
+      muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
+      setColumnOrder = table.setColumnOrder;
 
   var _getState = getState(),
-      density = _getState.density,
-      showFilters = _getState.showFilters;
+      columnOrder = _getState.columnOrder,
+      density = _getState.density;
 
   var column = header.column;
   var columnDef = column.columnDef;
@@ -6198,30 +2473,56 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
+  var tableHeadCellRef = React__default.useRef(null);
+
+  var _useState = React.useState(false),
+      isDragging = _useState[0],
+      setIsDragging = _useState[1];
+
+  var handleDragStart = function handleDragStart(e) {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+  };
+
+  var handleDragEnd = function handleDragEnd(_e) {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  var handleDragEnter = function handleDragEnter(_e) {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return React__default.createElement(material.TableCell, Object.assign({
     align: columnDefType === 'group' ? 'center' : 'left',
-    colSpan: header.colSpan
+    colSpan: header.colSpan,
+    onDragEnter: handleDragEnter,
+    ref: tableHeadCellRef
   }, tableCellProps, {
-    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       var _columnDef$minSize;
 
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
         backgroundImage: 'inherit',
+        border: isDragging ? "2px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
         fontWeight: 'bold',
-        height: '100%',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'visible',
+        opacity: isDragging ? 0.5 : 1,
         p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType !== 'data' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
+        pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-        verticalAlign: columnDefType === 'display' && showFilters ? 'center' : 'text-top',
+        verticalAlign: 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
@@ -6230,7 +2531,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       });
     }
   }), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React__default.createElement(material.Box, {
-    ref: previewRef,
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
@@ -6259,7 +2559,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       whiteSpace: 'nowrap'
     }
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_GrabHandleButton, {
-    ref: dragRef,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd,
     table: table
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
@@ -6273,58 +2574,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }));
 };
 
-var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
-  var header = _ref.header,
-      table = _ref.table;
-  var getState = table.getState,
-      setColumnOrder = table.setColumnOrder;
-
-  var _getState = getState(),
-      columnOrder = _getState.columnOrder;
-
-  var column = header.column;
-
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
-
-  var _useDrag = useDrag({
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    item: function item() {
-      return column;
-    },
-    type: 'column'
-  }),
-      isDragging = _useDrag[0].isDragging,
-      dragRef = _useDrag[1],
-      previewRef = _useDrag[2];
-
-  return React__default.createElement(MRT_TableHeadCell, {
-    dragRef: dragRef,
-    dropRef: dropRef,
-    header: header,
-    isDragging: isDragging,
-    previewRef: previewRef,
-    table: table
-  });
-};
-
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var headerGroup = _ref.headerGroup,
+  var currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
+      headerGroup = _ref.headerGroup,
       table = _ref.table;
-  var _table$options = table.options,
-      enableColumnOrdering = _table$options.enableColumnOrdering,
-      enableGrouping = _table$options.enableGrouping,
-      muiTableHeadRowProps = _table$options.muiTableHeadRowProps;
+  var muiTableHeadRowProps = table.options.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
     table: table
@@ -6337,11 +2592,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
   }), headerGroup.headers.map(function (header, index) {
-    return enableColumnOrdering || enableGrouping ? React__default.createElement(MRT_DraggableTableHeadCell, {
-      header: header,
-      key: header.id || index,
-      table: table
-    }) : React__default.createElement(MRT_TableHeadCell, {
+    return React__default.createElement(MRT_TableHeadCell, {
+      currentHoveredColumn: currentHoveredColumn,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       header: header,
       key: header.id || index,
       table: table
@@ -6350,7 +2603,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 };
 
 var MRT_TableHead = function MRT_TableHead(_ref) {
-  var table = _ref.table;
+  var currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
+      table = _ref.table;
   var getHeaderGroups = table.getHeaderGroups,
       muiTableHeadProps = table.options.muiTableHeadProps;
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
@@ -6358,6 +2613,8 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }) : muiTableHeadProps;
   return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React__default.createElement(MRT_TableHeadRow, {
+      currentHoveredColumn: currentHoveredColumn,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       headerGroup: headerGroup,
       key: headerGroup.id,
       table: table
@@ -6365,544 +2622,6 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }));
 };
 
-/**
- * react-virtual
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * virtual-core
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-var props = ["bottom", "height", "left", "right", "top", "width"];
-
-var rectChanged = function rectChanged(a, b) {
-  if (a === void 0) {
-    a = {};
-  }
-
-  if (b === void 0) {
-    b = {};
-  }
-
-  return props.some(function (prop) {
-    return a[prop] !== b[prop];
-  });
-};
-
-var observedNodes = /*#__PURE__*/new Map();
-var rafId;
-
-var run = function run() {
-  var changedStates = [];
-  observedNodes.forEach(function (state, node) {
-    var newRect = node.getBoundingClientRect();
-
-    if (rectChanged(newRect, state.rect)) {
-      state.rect = newRect;
-      changedStates.push(state);
-    }
-  });
-  changedStates.forEach(function (state) {
-    state.callbacks.forEach(function (cb) {
-      return cb(state.rect);
-    });
-  });
-  rafId = window.requestAnimationFrame(run);
-};
-
-function observeRect(node, cb) {
-  return {
-    observe: function observe() {
-      var wasEmpty = observedNodes.size === 0;
-
-      if (observedNodes.has(node)) {
-        observedNodes.get(node).callbacks.push(cb);
-      } else {
-        observedNodes.set(node, {
-          rect: undefined,
-          hasRectChanged: false,
-          callbacks: [cb]
-        });
-      }
-
-      if (wasEmpty) run();
-    },
-    unobserve: function unobserve() {
-      var state = observedNodes.get(node);
-
-      if (state) {
-        // Remove the callback
-        var index = state.callbacks.indexOf(cb);
-        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-        if (!observedNodes.size) cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-
-function memo(getDeps, fn, opts) {
-  let deps = [];
-  let result;
-  return () => {
-    let depTime;
-    if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
-    const newDeps = getDeps();
-    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
-
-    if (!depsChanged) {
-      return result;
-    }
-
-    deps = newDeps;
-    let resultTime;
-    if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
-    result = fn(...newDeps);
-    opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
-
-    if (opts.key && opts.debug != null && opts.debug()) {
-      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
-      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
-      const resultFpsPercentage = resultEndTime / 16;
-
-      const pad = (str, num) => {
-        str = String(str);
-
-        while (str.length < num) {
-          str = ' ' + str;
-        }
-
-        return str;
-      };
-
-      console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
-    }
-
-    return result;
-  };
-}
-
-//
-const defaultKeyExtractor = index => index;
-const defaultRangeExtractor = range => {
-  const start = Math.max(range.startIndex - range.overscan, 0);
-  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
-  const arr = [];
-
-  for (let i = start; i <= end; i++) {
-    arr.push(i);
-  }
-
-  return arr;
-};
-const observeElementRect = (instance, cb) => {
-  const observer = observeRect(instance.scrollElement, rect => {
-    cb(rect);
-  });
-
-  if (!instance.scrollElement) {
-    return;
-  }
-
-  cb(instance.scrollElement.getBoundingClientRect());
-  observer.observe();
-  return () => {
-    observer.unobserve();
-  };
-};
-const observeElementOffset = (instance, cb) => {
-  const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
-
-  if (!instance.scrollElement) {
-    return;
-  }
-
-  onScroll();
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true
-  });
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll);
-  };
-};
-const measureElement = (element, instance) => {
-  return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
-};
-const elementScroll = (offset, canSmooth, instance) => {
-  var _instance$scrollEleme2;
-  (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
-    behavior: canSmooth ? 'smooth' : undefined
-  });
-};
-class Virtualizer {
-  constructor(_opts) {
-    var _this = this;
-
-    this.unsubs = [];
-    this.scrollElement = null;
-    this.measurementsCache = [];
-    this.itemMeasurementsCache = {};
-    this.pendingMeasuredCacheIndexes = [];
-
-    this.setOptions = opts => {
-      Object.entries(opts).forEach(_ref => {
-        let [key, value] = _ref;
-        if (typeof value === 'undefined') delete opts[key];
-      });
-      this.options = {
-        debug: false,
-        initialOffset: 0,
-        overscan: 1,
-        paddingStart: 0,
-        paddingEnd: 0,
-        scrollPaddingStart: 0,
-        scrollPaddingEnd: 0,
-        horizontal: false,
-        getItemKey: defaultKeyExtractor,
-        rangeExtractor: defaultRangeExtractor,
-        enableSmoothScroll: true,
-        onChange: () => {},
-        measureElement,
-        initialRect: {
-          width: 0,
-          height: 0
-        },
-        ...opts
-      };
-    };
-
-    this.notify = () => {
-      var _this$options$onChang, _this$options;
-
-      (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
-    };
-
-    this.cleanup = () => {
-      this.unsubs.filter(Boolean).forEach(d => d());
-      this.unsubs = [];
-    };
-
-    this._didMount = () => {
-      return () => {
-        this.cleanup();
-      };
-    };
-
-    this._willUpdate = () => {
-      const scrollElement = this.options.getScrollElement();
-
-      if (this.scrollElement !== scrollElement) {
-        this.cleanup();
-        this.scrollElement = scrollElement;
-        this.unsubs.push(this.options.observeElementRect(this, rect => {
-          this.scrollRect = rect;
-          this.notify();
-        }));
-        this.unsubs.push(this.options.observeElementOffset(this, offset => {
-          this.scrollOffset = offset;
-          this.notify();
-        }));
-      }
-    };
-
-    this.getSize = () => {
-      return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
-    };
-
-    this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
-      const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
-      this.pendingMeasuredCacheIndexes = [];
-      const measurements = this.measurementsCache.slice(0, min);
-
-      for (let i = min; i < count; i++) {
-        const key = getItemKey(i);
-        const measuredSize = measurementsCache[key];
-        const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
-        const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
-        const end = start + size;
-        measurements[i] = {
-          index: i,
-          start,
-          size,
-          end,
-          key
-        };
-      }
-
-      this.measurementsCache = measurements;
-      return measurements;
-    }, {
-      key:  'getMeasurements',
-      debug: () => this.options.debug
-    });
-    this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
-      return calculateRange({
-        measurements,
-        outerSize,
-        scrollOffset
-      });
-    }, {
-      key:  'calculateRange',
-      debug: () => this.options.debug
-    });
-    this.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
-      return rangeExtractor({ ...range,
-        overscan,
-        count: count
-      });
-    }, {
-      key:  'getIndexes'
-    });
-    this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
-      const virtualItems = [];
-
-      for (let k = 0, len = indexes.length; k < len; k++) {
-        const i = indexes[k];
-        const measurement = measurements[i];
-        const item = { ...measurement,
-          measureElement: measurableItem => {
-            if (measurableItem) {
-              const measuredItemSize = measureElement(measurableItem, this);
-
-              if (measuredItemSize !== item.size) {
-                if (item.start < this.scrollOffset) {
-                  if ( this.options.debug) console.info('correction', measuredItemSize - item.size);
-
-                  if (!this.destinationOffset) {
-                    this._scrollToOffset(this.scrollOffset + (measuredItemSize - item.size), false);
-                  }
-                }
-
-                this.pendingMeasuredCacheIndexes.push(i);
-                this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
-                  [item.key]: measuredItemSize
-                };
-                this.notify();
-              }
-            }
-          }
-        };
-        virtualItems.push(item);
-      }
-
-      return virtualItems;
-    }, {
-      key:  'getIndexes'
-    });
-
-    this.scrollToOffset = function (toOffset, _temp) {
-      let {
-        align
-      } = _temp === void 0 ? {
-        align: 'start'
-      } : _temp;
-
-      const attempt = () => {
-        const offset = _this.scrollOffset;
-
-        const size = _this.getSize();
-
-        if (align === 'auto') {
-          if (toOffset <= offset) {
-            align = 'start';
-          } else if (toOffset >= offset + size) {
-            align = 'end';
-          } else {
-            align = 'start';
-          }
-        }
-
-        if (align === 'start') {
-          _this._scrollToOffset(toOffset, true);
-        } else if (align === 'end') {
-          _this._scrollToOffset(toOffset - size, true);
-        } else if (align === 'center') {
-          _this._scrollToOffset(toOffset - size / 2, true);
-        }
-      };
-
-      attempt();
-      requestAnimationFrame(() => {
-        attempt();
-      });
-    };
-
-    this.scrollToIndex = function (index, _temp2) {
-      let {
-        align,
-        ...rest
-      } = _temp2 === void 0 ? {
-        align: 'auto'
-      } : _temp2;
-
-      const measurements = _this.getMeasurements();
-
-      const offset = _this.scrollOffset;
-
-      const size = _this.getSize();
-
-      const {
-        count
-      } = _this.options;
-      const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
-
-      if (!measurement) {
-        return;
-      }
-
-      if (align === 'auto') {
-        if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
-          align = 'end';
-        } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
-          align = 'start';
-        } else {
-          return;
-        }
-      }
-
-      const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-
-      _this.scrollToOffset(toOffset, {
-        align,
-        ...rest
-      });
-    };
-
-    this.getTotalSize = () => {
-      var _this$getMeasurements;
-
-      return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
-    };
-
-    this._scrollToOffset = (offset, canSmooth) => {
-      clearTimeout(this.scrollCheckFrame);
-      this.destinationOffset = offset;
-      this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, this);
-      let scrollCheckFrame;
-
-      const check = () => {
-        let lastOffset = this.scrollOffset;
-        this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
-          if (this.scrollCheckFrame !== scrollCheckFrame) {
-            return;
-          }
-
-          if (this.scrollOffset === lastOffset) {
-            this.destinationOffset = undefined;
-            return;
-          }
-
-          lastOffset = this.scrollOffset;
-          check();
-        }, 100);
-      };
-
-      check();
-    };
-
-    this.measure = () => {
-      this.itemMeasurementsCache = {};
-      this.notify();
-    };
-
-    this.setOptions(_opts);
-    this.scrollRect = this.options.initialRect;
-    this.scrollOffset = this.options.initialOffset;
-  }
-
-}
-
-const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
-  while (low <= high) {
-    const middle = (low + high) / 2 | 0;
-    const currentValue = getCurrentValue(middle);
-
-    if (currentValue < value) {
-      low = middle + 1;
-    } else if (currentValue > value) {
-      high = middle - 1;
-    } else {
-      return middle;
-    }
-  }
-
-  if (low > 0) {
-    return low - 1;
-  } else {
-    return 0;
-  }
-};
-
-function calculateRange(_ref2) {
-  let {
-    measurements,
-    outerSize,
-    scrollOffset
-  } = _ref2;
-  const count = measurements.length - 1;
-
-  const getOffset = index => measurements[index].start;
-
-  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
-  let endIndex = startIndex;
-
-  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
-    endIndex++;
-  }
-
-  return {
-    startIndex,
-    endIndex
-  };
-}
-
-const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
-function useVirtualizerBase(options) {
-  const rerender = React.useReducer(() => ({}), {})[1];
-  const resolvedOptions = { ...options,
-    onChange: instance => {
-      rerender();
-      options.onChange == null ? void 0 : options.onChange(instance);
-    }
-  };
-  const [instance] = React.useState(() => new Virtualizer(resolvedOptions));
-  instance.setOptions(resolvedOptions);
-  React.useEffect(() => {
-    return instance._didMount();
-  }, []);
-  useIsomorphicLayoutEffect$1(() => {
-    return instance._willUpdate();
-  });
-  return instance;
-}
-
-function useVirtualizer(options) {
-  return useVirtualizerBase({
-    observeElementRect: observeElementRect,
-    observeElementOffset: observeElementOffset,
-    scrollToFn: elementScroll,
-    ...options
-  });
-}
-
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var cell = _ref.cell,
       table = _ref.table;
@@ -7059,23 +2778,21 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
       rowIndex = _ref.rowIndex,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       table = _ref.table;
   var getState = table.getState,
       _table$options = table.options,
       editingMode = _table$options.editingMode,
       enableClickToCopy = _table$options.enableClickToCopy,
-      enableColumnOrdering = _table$options.enableColumnOrdering,
       enableEditing = _table$options.enableEditing,
       enableRowNumbers = _table$options.enableRowNumbers,
       muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
       rowNumberMode = _table$options.rowNumberMode,
       tableId = _table$options.tableId,
-      setColumnOrder = table.setColumnOrder,
       setCurrentEditingCell = table.setCurrentEditingCell;
 
   var _getState = getState(),
-      columnOrder = _getState.columnOrder,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
       density = _getState.density,
@@ -7086,16 +2803,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       row = cell.row;
   var columnDef = column.columnDef;
   var columnDefType = columnDef.columnDefType;
-
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
-
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
     table: table
@@ -7139,10 +2846,14 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
+  var handleDragEnter = function handleDragEnter(_e) {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return React__default.createElement(material.TableCell, Object.assign({
-    onDoubleClick: handleDoubleClick
+    onDoubleClick: handleDoubleClick,
+    onDragEnter: handleDragEnter
   }, tableCellProps, {
-    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       var _columnDef$minSize;
 
@@ -7230,6 +2941,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 
   var row = _ref.row,
       rowIndex = _ref.rowIndex,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       table = _ref.table;
   var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
       _table$options = table.options,
@@ -7258,6 +2970,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
       rowIndex: rowIndex,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   })), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
@@ -7267,7 +2980,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var table = _ref.table,
+  var setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
+      table = _ref.table,
       tableContainerRef = _ref.tableContainerRef;
   var getRowModel = table.getRowModel,
       getPrePaginationRowModel = table.getPrePaginationRowModel,
@@ -7308,23 +3022,19 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 
     return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
   }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
-  var rowVirtualizer = enableRowVirtualization ? useVirtualizer(_extends({
-    count: rows.length,
-    estimateSize: function estimateSize() {
-      return density === 'compact' ? 25 : 50;
-    },
-    getScrollElement: function getScrollElement() {
-      return tableContainerRef.current;
-    },
-    overscan: density === 'compact' ? 30 : 10
+  var rowVirtualizer = enableRowVirtualization ? reactVirtual.useVirtual(_extends({
+    // estimateSize: () => (density === 'compact' ? 25 : 50),
+    overscan: density === 'compact' ? 30 : 10,
+    parentRef: tableContainerRef,
+    size: rows.length
   }, virtualizerProps)) : {};
-  var virtualRows = enableRowVirtualization ? rowVirtualizer.getVirtualItems() : [];
+  var virtualRows = enableRowVirtualization ? rowVirtualizer.virtualItems : [];
   var paddingTop = 0;
   var paddingBottom = 0;
 
   if (enableRowVirtualization) {
     paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
-    paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+    paddingBottom = virtualRows.length > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
   }
 
   return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
@@ -7337,6 +3047,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       key: row.id,
       row: row,
       rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   }), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
@@ -7454,6 +3165,11 @@ var MRT_Table = function MRT_Table(_ref) {
   var tableProps = muiTableProps instanceof Function ? muiTableProps({
     table: table
   }) : muiTableProps;
+
+  var _useState = React.useState(null),
+      currentHoveredColumn = _useState[0],
+      setCurrentHoveredColumn = _useState[1];
+
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
@@ -7461,8 +3177,11 @@ var MRT_Table = function MRT_Table(_ref) {
       tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React__default.createElement(MRT_TableHead, {
+    currentHoveredColumn: currentHoveredColumn,
+    setCurrentHoveredColumn: setCurrentHoveredColumn,
     table: table
   }), React__default.createElement(MRT_TableBody, {
+    setCurrentHoveredColumn: setCurrentHoveredColumn,
     tableContainerRef: tableContainerRef,
     table: table
   }), enableTableFooter && React__default.createElement(MRT_TableFooter, {
@@ -7470,7 +3189,7 @@ var MRT_Table = function MRT_Table(_ref) {
   }));
 };
 
-var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var table = _ref.table;
   var getState = table.getState,
@@ -7490,7 +3209,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
     table: table
   }) : muiTableContainerProps;
-  useIsomorphicLayoutEffect$2(function () {
+  useIsomorphicLayoutEffect(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
 
     var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + tableId + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
@@ -7498,8 +3217,9 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
   var tableContainerRef = React__default.useRef(null);
-  return React__default.createElement(material.TableContainer, Object.assign({}, tableContainerProps, {
-    ref: tableContainerRef,
+  return React__default.createElement(material.TableContainer, Object.assign({
+    ref: tableContainerRef
+  }, tableContainerProps, {
     sx: _extends({
       maxWidth: '100%',
       maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
@@ -7537,9 +3257,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
     table: table
   }) : muiTablePaperProps;
-  return React__default.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, React__default.createElement(material.Paper, Object.assign({
+  return React__default.createElement(material.Paper, Object.assign({
     elevation: 2
   }, tablePaperProps, {
     sx: _extends({
@@ -7559,7 +3277,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     table: table
   }), enableToolbarBottom && React__default.createElement(MRT_ToolbarBottom, {
     table: table
-  })));
+  }));
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {