material-react-table 0.8.10 → 0.8.13

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

@@ -87,6 +87,7 @@ var MRT_DefaultLocalization_EN = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
+  resetOrder: 'Reset order',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
@@ -495,1770 +496,1060 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }));
 };
 
-var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
-  var column = _ref.column,
-      tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      PushPinIcon = _tableInstance$option.icons.PushPinIcon,
-      localization = _tableInstance$option.localization;
+/**
+ * Create the React Context
+ */ const DndContext = React.createContext({
+    dragDropManager: undefined
+});
 
-  var handlePinColumn = function handlePinColumn(pinDirection) {
-    column.pin(pinDirection);
-  };
+// Inlined version of the `symbol-observable` polyfill
+var $$observable = (function () {
+  return typeof Symbol === 'function' && Symbol.observable || '@@observable';
+})();
 
-  return React__default.createElement(material.Box, {
-    sx: {
-      mr: '8px'
-    }
-  }, column.getIsPinned() ? React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.unpin
-  }, React__default.createElement(material.IconButton, {
-    onClick: function onClick() {
-      return handlePinColumn(false);
-    },
-    size: "small"
-  }, React__default.createElement(PushPinIcon, null))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.pinToLeft
-  }, React__default.createElement(material.IconButton, {
-    onClick: function onClick() {
-      return handlePinColumn('left');
-    },
-    size: "small"
-  }, React__default.createElement(PushPinIcon, {
-    style: {
-      transform: 'rotate(90deg)'
-    }
-  }))), React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.pinToRight
-  }, React__default.createElement(material.IconButton, {
-    onClick: function onClick() {
-      return handlePinColumn('right');
-    },
-    size: "small"
-  }, React__default.createElement(PushPinIcon, {
-    style: {
-      transform: 'rotate(-90deg)'
-    }
-  })))));
+/**
+ * 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 MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
-  var _column$columns2;
+var ActionTypes = {
+  INIT: "@@redux/INIT" + randomString(),
+  REPLACE: "@@redux/REPLACE" + randomString(),
+  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
+    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
+  }
+};
 
-  var column = _ref.column,
-      isSubMenu = _ref.isSubMenu,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
+/**
+ * @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;
 
-  var _getState = getState(),
-      columnVisibility = _getState.columnVisibility;
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
 
-  var switchChecked = column.columnDefType !== 'group' && column.getIsVisible() || column.columnDefType === 'group' && column.getLeafColumns().some(function (col) {
-    return col.getIsVisible();
-  });
+  return Object.getPrototypeOf(obj) === proto;
+}
 
-  var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
-    if (column.columnDefType === 'group') {
-      var _column$columns;
+// 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;
 
-      column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.forEach == null ? void 0 : _column$columns.forEach(function (childColumn) {
-        childColumn.toggleVisibility(!switchChecked);
-      });
-    } else {
-      column.toggleVisibility();
-    }
+  switch (type) {
+    case 'boolean':
+    case 'string':
+    case 'number':
+    case 'symbol':
+    case 'function':
+      {
+        return type;
+      }
+  }
 
-    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
-      column: column,
-      columnVisibility: columnVisibility,
-      tableInstance: tableInstance
-    });
-  };
+  if (Array.isArray(val)) return 'array';
+  if (isDate(val)) return 'date';
+  if (isError(val)) return 'error';
+  var constructorName = ctorName(val);
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
-    sx: {
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      my: 0,
-      pl: (column.depth + 0.5) * 2 + "rem",
-      py: '6px'
-    }
-  }, !isSubMenu && column.getCanPin() && React__default.createElement(MRT_ColumnPinningButtons, {
-    column: column,
-    tableInstance: tableInstance
-  }), React__default.createElement(material.FormControlLabel, {
-    componentsProps: {
-      typography: {
-        sx: {
-          marginBottom: 0
-        }
-      }
-    },
-    checked: switchChecked,
-    control: React__default.createElement(material.Switch, null),
-    disabled: isSubMenu && switchChecked || !column.getCanHide(),
-    label: column.columnDef.header,
-    onChange: function onChange() {
-      return handleToggleColumnHidden(column);
-    }
-  })), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
-    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
-      key: i + "-" + c.id,
-      column: c,
-      isSubMenu: isSubMenu,
-      tableInstance: tableInstance
-    });
-  }));
-};
+  switch (constructorName) {
+    case 'Symbol':
+    case 'Promise':
+    case 'WeakMap':
+    case 'WeakSet':
+    case 'Map':
+    case 'Set':
+      return constructorName;
+  } // other
 
-var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
-  var anchorEl = _ref.anchorEl,
-      isSubMenu = _ref.isSubMenu,
-      setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getAllColumns = tableInstance.getAllColumns,
-      getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
-      getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
-      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
-      getState = tableInstance.getState,
-      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
-      getAllLeafColumns = tableInstance.getAllLeafColumns,
-      _tableInstance$option = tableInstance.options,
-      localization = _tableInstance$option.localization,
-      enablePinning = _tableInstance$option.enablePinning;
 
-  var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+  return type.slice(8, -1).toLowerCase().replace(/\s/g, '');
+}
 
-  var hideAllColumns = function hideAllColumns() {
-    getAllLeafColumns().filter(function (col) {
-      return col.columnDef.enableHiding !== false;
-    }).forEach(function (col) {
-      return col.toggleVisibility(false);
-    });
-  };
+function ctorName(val) {
+  return typeof val.constructor === 'function' ? val.constructor.name : null;
+}
 
-  var allDisplayColumns = React.useMemo(function () {
-    return getAllColumns().filter(function (col) {
-      return col.columnDefType === 'display';
-    });
-  }, [getAllColumns()]);
-  var allDataColumns = React.useMemo(function () {
-    var dataColumns = getAllColumns().filter(function (col) {
-      return col.columnDefType !== 'display';
-    });
-    return getIsSomeColumnsPinned() ? [].concat(dataColumns.filter(function (c) {
-      return c.getIsPinned() === 'left';
-    }), [null], dataColumns.filter(function (c) {
-      return c.getIsPinned() === false;
-    }), [null], dataColumns.filter(function (c) {
-      return c.getIsPinned() === 'right';
-    })) : dataColumns;
-  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
-  return React__default.createElement(material.Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: isDensePadding
-    }
-  }, React__default.createElement(material.Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: isSubMenu ? 'center' : 'space-between',
-      p: '0.5rem',
-      pt: 0
-    }
-  }, !isSubMenu && React__default.createElement(material.Button, {
-    disabled: !getIsSomeColumnsVisible(),
-    onClick: hideAllColumns
-  }, localization.hideAll), !isSubMenu && enablePinning && React__default.createElement(material.Button, {
-    disabled: !getIsSomeColumnsPinned(),
-    onClick: function onClick() {
-      return tableInstance.resetColumnPinning(true);
-    }
-  }, localization.unpinAll), React__default.createElement(material.Button, {
-    disabled: getIsAllColumnsVisible(),
-    onClick: function onClick() {
-      return toggleAllColumnsVisible(true);
-    }
-  }, localization.showAll)), React__default.createElement(material.Divider, null), allDisplayColumns.map(function (column, index) {
-    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
-      column: column,
-      isSubMenu: isSubMenu,
-      key: index + "-" + column.id,
-      tableInstance: tableInstance
-    });
-  }), React__default.createElement(material.Divider, null), allDataColumns.map(function (column, index) {
-    return column ? React__default.createElement(MRT_ShowHideColumnsMenuItems, {
-      column: column,
-      isSubMenu: isSubMenu,
-      key: index + "-" + column.id,
-      tableInstance: tableInstance
-    }) : React__default.createElement(material.Divider, {
-      key: index + "-divider"
-    });
-  }));
-};
+function isError(val) {
+  return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';
+}
 
-var commonMenuItemStyles$1 = {
-  py: '6px',
-  my: 0,
-  justifyContent: 'space-between',
-  alignItems: 'center'
-};
-var commonListItemStyles = {
-  display: 'flex',
-  alignItems: 'center'
-};
-var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
+function isDate(val) {
+  if (val instanceof Date) return true;
+  return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';
+}
 
-  var anchorEl = _ref.anchorEl,
-      header = _ref.header,
-      setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
-      setColumnOrder = tableInstance.setColumnOrder,
-      _tableInstance$option = tableInstance.options,
-      enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      enableColumnResizing = _tableInstance$option.enableColumnResizing,
-      enableGrouping = _tableInstance$option.enableGrouping,
-      enableHiding = _tableInstance$option.enableHiding,
-      enablePinning = _tableInstance$option.enablePinning,
-      enableSorting = _tableInstance$option.enableSorting,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      ArrowRightIcon = _tableInstance$option2.ArrowRightIcon,
-      ClearAllIcon = _tableInstance$option2.ClearAllIcon,
-      ViewColumnIcon = _tableInstance$option2.ViewColumnIcon,
-      DynamicFeedIcon = _tableInstance$option2.DynamicFeedIcon,
-      FilterListIcon = _tableInstance$option2.FilterListIcon,
-      FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
-      PushPinIcon = _tableInstance$option2.PushPinIcon,
-      SortIcon = _tableInstance$option2.SortIcon,
-      RestartAltIcon = _tableInstance$option2.RestartAltIcon,
-      VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
-      idPrefix = _tableInstance$option.idPrefix,
-      localization = _tableInstance$option.localization,
-      setShowFilters = tableInstance.setShowFilters;
-  var column = header.column;
-  var columnDef = column.columnDef;
-
-  var _getState = getState(),
-      columnSizing = _getState.columnSizing,
-      columnVisibility = _getState.columnVisibility,
-      isDensePadding = _getState.isDensePadding;
+function kindOf(val) {
+  var typeOfVal = typeof val;
 
-  var _useState = React.useState(null),
-      filterMenuAnchorEl = _useState[0],
-      setFilterMenuAnchorEl = _useState[1];
+  {
+    typeOfVal = miniKindOf(val);
+  }
 
-  var _useState2 = React.useState(null),
-      showHideColumnsMenuAnchorEl = _useState2[0],
-      setShowHideColumnsMenuAnchorEl = _useState2[1];
+  return typeOfVal;
+}
 
-  var handleClearSort = function handleClearSort() {
-    column.clearSorting();
-    setAnchorEl(null);
-  };
+/**
+ * @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'`
+ *
+ */
 
-  var handleSortAsc = function handleSortAsc() {
-    column.toggleSorting(false);
-    setAnchorEl(null);
-  };
+function createStore(reducer, preloadedState, enhancer) {
+  var _ref2;
 
-  var handleSortDesc = function handleSortDesc() {
-    column.toggleSorting(true);
-    setAnchorEl(null);
-  };
+  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.');
+  }
 
-  var handleResetColumnSize = function handleResetColumnSize() {
-    column.resetSize();
-    setAnchorEl(null);
-  };
+  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
+    enhancer = preloadedState;
+    preloadedState = undefined;
+  }
 
-  var handleHideColumn = function handleHideColumn() {
-    column.toggleVisibility(false);
-    setAnchorEl(null);
-  };
+  if (typeof enhancer !== 'undefined') {
+    if (typeof enhancer !== 'function') {
+      throw new Error( "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
+    }
 
-  var handlePinColumn = function handlePinColumn(pinDirection) {
-    column.pin(pinDirection);
-    setAnchorEl(null);
-  };
+    return enhancer(createStore)(reducer, preloadedState);
+  }
 
-  var handleGroupByColumn = function handleGroupByColumn() {
-    column.toggleGrouping();
-    setColumnOrder(function (old) {
-      return ['mrt-expand'].concat(old);
-    });
-    setAnchorEl(null);
-  };
+  if (typeof reducer !== 'function') {
+    throw new Error( "Expected the root reducer to be a function. Instead, received: '" + kindOf(reducer) + "'");
+  }
 
-  var handleClearFilter = function handleClearFilter() {
-    column.setFilterValue('');
-    setAnchorEl(null);
-  };
+  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.
+   */
 
-  var handleFilterByColumn = function handleFilterByColumn() {
-    setShowFilters(true);
-    setTimeout(function () {
-      var _document$getElementB, _header$muiTableHeadC, _header$muiTableHeadC2;
+  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.
+   */
 
-      return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + idPrefix + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
-    }, 200);
-    setAnchorEl(null);
-  };
 
-  var handleShowAllColumns = function handleShowAllColumns() {
-    toggleAllColumnsVisible(true);
-    setAnchorEl(null);
-  };
+  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.');
+    }
 
-  var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
-    event.stopPropagation();
-    setFilterMenuAnchorEl(event.currentTarget);
-  };
+    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.
+   */
 
-  var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
-    event.stopPropagation();
-    setShowHideColumnsMenuAnchorEl(event.currentTarget);
-  };
 
-  return React__default.createElement(material.Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: isDensePadding
-    }
-  }, enableSorting && column.getCanSort() && [React__default.createElement(material.MenuItem, {
-    disabled: !column.getIsSorted(),
-    key: 0,
-    onClick: handleClearSort,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), localization.clearSort)), React__default.createElement(material.MenuItem, {
-    disabled: column.getIsSorted() === 'asc',
-    key: 1,
-    onClick: handleSortAsc,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
-    divider: enableColumnFilters || enableGrouping || enableHiding,
-    key: 2,
-    disabled: column.getIsSorted() === 'desc',
-    onClick: handleSortDesc,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, {
-    style: {
-      transform: 'rotate(180deg) scaleX(-1)'
+  function subscribe(listener) {
+    if (typeof listener !== 'function') {
+      throw new Error( "Expected the listener to be a function. Instead, received: '" + kindOf(listener) + "'");
     }
-  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React__default.createElement(material.MenuItem, {
-    disabled: !column.getFilterValue(),
-    key: 0,
-    onClick: handleClearFilter,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListOffIcon, null)), localization.clearFilter)), React__default.createElement(material.MenuItem, {
-    divider: enableGrouping || enableHiding,
-    key: 1,
-    onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), !columnDef.filterSelectOptions && React__default.createElement(material.IconButton, {
-    onClick: handleOpenFilterModeMenu,
-    onMouseEnter: handleOpenFilterModeMenu,
-    size: "small",
-    sx: {
-      p: 0
+
+    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.');
     }
-  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterOptionMenu, {
-    anchorEl: filterMenuAnchorEl,
-    header: header,
-    key: 2,
-    onSelect: handleFilterByColumn,
-    setAnchorEl: setFilterMenuAnchorEl,
-    tableInstance: tableInstance
-  })], enableGrouping && column.getCanGroup() && [React__default.createElement(material.MenuItem, {
-    divider: enablePinning,
-    key: 0,
-    onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
-    disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
-    key: 0,
-    onClick: function onClick() {
-      return handlePinColumn('left');
-    },
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
-    style: {
-      transform: 'rotate(90deg)'
+
+    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.");
     }
-  })), localization.pinToLeft)), React__default.createElement(material.MenuItem, {
-    disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
-    key: 1,
-    onClick: function onClick() {
-      return handlePinColumn('right');
-    },
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
-    style: {
-      transform: 'rotate(-90deg)'
+
+    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.');
     }
-  })), localization.pinToRight)), React__default.createElement(material.MenuItem, {
-    disabled: !column.getIsPinned(),
-    divider: enableHiding,
-    key: 2,
-    onClick: function onClick() {
-      return handlePinColumn(false);
-    },
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React__default.createElement(material.MenuItem, {
-    disabled: !column.getCanResize() || !columnSizing[column.id],
-    key: 0,
-    onClick: handleResetColumnSize,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React__default.createElement(material.MenuItem, {
-    disabled: columnDef.enableHiding === false,
-    key: 0,
-    onClick: handleHideColumn,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
-    disabled: !Object.values(columnVisibility).filter(function (visible) {
-      return !visible;
-    }).length,
-    key: 1,
-    onClick: handleShowAllColumns,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React__default.createElement(material.IconButton, {
-    onClick: handleOpenShowHideColumnsMenu,
-    onMouseEnter: handleOpenShowHideColumnsMenu,
-    size: "small",
-    sx: {
-      p: 0
+
+    if (isDispatching) {
+      throw new Error( 'Reducers may not dispatch actions.');
     }
-  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
-    anchorEl: showHideColumnsMenuAnchorEl,
-    isSubMenu: true,
-    key: 2,
-    setAnchorEl: setShowHideColumnsMenuAnchorEl,
-    tableInstance: tableInstance
-  })]);
-};
 
-var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
-  var anchorEl = _ref.anchorEl,
-      handleEdit = _ref.handleEdit,
-      row = _ref.row,
-      setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      EditIcon = _tableInstance$option.icons.EditIcon,
-      enableEditing = _tableInstance$option.enableEditing,
-      localization = _tableInstance$option.localization,
-      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems;
+    try {
+      isDispatching = true;
+      currentState = currentReducer(currentState, action);
+    } finally {
+      isDispatching = false;
+    }
 
-  var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+    var listeners = currentListeners = nextListeners;
 
-  return React__default.createElement(material.Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: isDensePadding
-    }
-  }, enableEditing && React__default.createElement(material.MenuItem, {
-    onClick: handleEdit,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
-    row: row,
-    tableInstance: tableInstance,
-    closeMenu: function closeMenu() {
-      return setAnchorEl(null);
+    for (var i = 0; i < listeners.length; i++) {
+      var listener = listeners[i];
+      listener();
     }
-  }));
-};
 
-var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
-  var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      CancelIcon = _tableInstance$option2.CancelIcon,
-      SaveIcon = _tableInstance$option2.SaveIcon,
-      localization = _tableInstance$option.localization,
-      onEditSubmit = _tableInstance$option.onEditSubmit,
-      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+    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}
+   */
 
-  var _getState = getState(),
-      currentEditingRow = _getState.currentEditingRow;
 
-  var handleCancel = function handleCancel() {
-    var _row$original;
+  function replaceReducer(nextReducer) {
+    if (typeof nextReducer !== 'function') {
+      throw new Error( "Expected the nextReducer to be a function. Instead, received: '" + kindOf(nextReducer));
+    }
 
-    row._valuesCache = (_row$original = row.original) != null ? _row$original : {};
-    setCurrentEditingRow(null);
-  };
+    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.
 
-  var handleSave = function handleSave() {
-    onEditSubmit == null ? void 0 : onEditSubmit({
-      row: currentEditingRow != null ? currentEditingRow : row,
-      tableInstance: tableInstance
+    dispatch({
+      type: ActionTypes.REPLACE
     });
-    setCurrentEditingRow(null);
-  };
+  }
+  /**
+   * 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
+   */
 
-  return React__default.createElement(material.Box, {
-    sx: {
-      display: 'flex',
-      gap: '0.75rem'
-    }
-  }, React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.cancel
-  }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.cancel,
-    onClick: handleCancel
-  }, React__default.createElement(CancelIcon, null))), React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.save
-  }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.save,
-    color: "info",
-    onClick: handleSave
-  }, React__default.createElement(SaveIcon, null))));
-};
-
-var commonIconButtonStyles = {
-  height: '2rem',
-  ml: '10px',
-  opacity: 0.5,
-  transition: 'opacity 0.2s',
-  width: '2rem',
-  '&:hover': {
-    opacity: 1
-  }
-};
-var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
-  var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableEditing = _tableInstance$option.enableEditing,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      EditIcon = _tableInstance$option2.EditIcon,
-      MoreHorizIcon = _tableInstance$option2.MoreHorizIcon,
-      localization = _tableInstance$option.localization,
-      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems,
-      renderRowActions = _tableInstance$option.renderRowActions,
-      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
-
-  var _getState = getState(),
-      currentEditingRow = _getState.currentEditingRow;
-
-  var _useState = React.useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
-  };
-
-  var handleStartEditMode = function handleStartEditMode() {
-    setCurrentEditingRow(_extends({}, row));
-    setAnchorEl(null);
-  };
-
-  return React__default.createElement(React__default.Fragment, null, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions({
-    row: row,
-    tableInstance: tableInstance
-  })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
-    row: row,
-    tableInstance: tableInstance
-  }) : !renderRowActionMenuItems && enableEditing ? React__default.createElement(material.Tooltip, {
-    placement: "right",
-    arrow: true,
-    title: localization.edit
-  }, React__default.createElement(material.IconButton, {
-    sx: commonIconButtonStyles,
-    onClick: handleStartEditMode
-  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    title: localization.rowActions
-  }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.rowActions,
-    onClick: handleOpenRowActionMenu,
-    size: "small",
-    sx: commonIconButtonStyles
-  }, React__default.createElement(MoreHorizIcon, null))), React__default.createElement(MRT_RowActionMenu, {
-    anchorEl: anchorEl,
-    handleEdit: handleStartEditMode,
-    row: row,
-    setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
-  })) : null);
-};
 
-var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
-  var row = _ref.row,
-      selectAll = _ref.selectAll,
-      tableInstance = _ref.tableInstance;
-  var getRowModel = tableInstance.getRowModel,
-      getSelectedRowModel = tableInstance.getSelectedRowModel,
-      getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      localization = _tableInstance$option.localization,
-      muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
-      onSelectChange = _tableInstance$option.onSelectChange,
-      onSelectAllChange = _tableInstance$option.onSelectAllChange;
+  function observable() {
+    var _ref;
 
-  var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+    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) + "'");
+        }
 
-  var handleSelectChange = function handleSelectChange(event) {
-    if (selectAll) {
-      tableInstance.getToggleAllRowsSelectedHandler()(event);
-      onSelectAllChange == null ? void 0 : onSelectAllChange({
-        event: event,
-        selectedRows: event.target.checked ? getRowModel().flatRows : [],
-        tableInstance: tableInstance
-      });
-    } else if (row) {
-      row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onSelectChange == null ? void 0 : onSelectChange({
-        event: event,
-        row: row,
-        selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
-          return selectedRow.id !== row.id;
-        }),
-        tableInstance: tableInstance
-      });
-    }
-  };
+        function observeState() {
+          if (observer.next) {
+            observer.next(getState());
+          }
+        }
 
-  var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
-    isSelectAll: !!selectAll,
-    row: row,
-    tableInstance: tableInstance
-  }) : 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 ? tableInstance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
-    indeterminate: selectAll ? tableInstance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
-    inputProps: {
-      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
-    },
-    onChange: handleSelectChange,
-    size: isDensePadding ? 'small' : 'medium'
-  }, checkboxProps, {
-    sx: _extends({
-      height: isDensePadding ? '1.75rem' : '2.25rem',
-      width: isDensePadding ? '1.75rem' : '2.25rem'
-    }, checkboxProps == null ? void 0 : checkboxProps.sx)
-  })));
-};
+        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.
 
-/**
- * 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';
-})();
+  dispatch({
+    type: ActionTypes.INIT
+  });
+  return _ref2 = {
+    dispatch: dispatch,
+    subscribe: subscribe,
+    getState: getState,
+    replaceReducer: replaceReducer
+  }, _ref2[$$observable] = observable, _ref2;
+}
 
 /**
- * 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.
+ * Prints a warning in the console if it exists.
+ *
+ * @param {String} message The warning message.
+ * @returns {void}
  */
-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();
+function warning(message) {
+  /* eslint-disable no-console */
+  if (typeof console !== 'undefined' && typeof console.error === 'function') {
+    console.error(message);
   }
-};
+  /* eslint-enable no-console */
 
-/**
- * @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);
-  }
+  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
 
-  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;
+/*
+ * 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.
+ */
 
-  switch (type) {
-    case 'boolean':
-    case 'string':
-    case 'number':
-    case 'symbol':
-    case 'function':
-      {
-        return type;
-      }
-  }
+function isCrushed() {}
 
-  if (Array.isArray(val)) return 'array';
-  if (isDate(val)) return 'date';
-  if (isError(val)) return 'error';
-  var constructorName = ctorName(val);
+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.');
+}
 
-  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, '');
+/**
+ * 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 ctorName(val) {
-  return typeof val.constructor === 'function' ? val.constructor.name : null;
+function isProduction() {
+    return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
 }
 
-function isError(val) {
-  return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';
+// 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);
 }
-
-function isDate(val) {
-  if (val instanceof Date) return true;
-  return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';
+/**
+ * drop-in replacement for _.without
+ */ function without(items, item) {
+    return items.filter((i)=>i !== item
+    );
 }
-
-function kindOf(val) {
-  var typeOfVal = typeof val;
-
-  {
-    typeOfVal = miniKindOf(val);
-  }
-
-  return typeOfVal;
+/**
+ * drop-in replacement for _.isString
+ * @param input
+ */ function isObject(input) {
+    return typeof input === 'object';
 }
-
 /**
- * @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;
+ * 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
+    );
+}
 
-  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.');
-  }
+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';
 
-  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
-    enhancer = preloadedState;
-    preloadedState = undefined;
-  }
+function setClientOffset(clientOffset, sourceClientOffset) {
+    return {
+        type: INIT_COORDS,
+        payload: {
+            sourceClientOffset: sourceClientOffset || null,
+            clientOffset: clientOffset || null
+        }
+    };
+}
 
-  if (typeof enhancer !== 'undefined') {
-    if (typeof enhancer !== 'function') {
-      throw new Error( "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
+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;
+}
 
-    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();
+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;
     }
-  }
-  /**
-   * 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 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;
+}
 
-    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 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 subscribe(listener) {
-    if (typeof listener !== 'function') {
-      throw new Error( "Expected the listener to be a function. Instead, received: '" + kindOf(listener) + "'");
+function matchesType(targetType, draggedItemType) {
+    if (draggedItemType === null) {
+        return targetType === null;
     }
+    return Array.isArray(targetType) ? targetType.some((t)=>t === draggedItemType
+    ) : targetType === draggedItemType;
+}
 
-    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.');
+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);
+    });
+}
 
-    var isSubscribed = true;
-    ensureCanMutateNextListeners();
-    nextListeners.push(listener);
-    return function unsubscribe() {
-      if (!isSubscribed) {
+function createPublishDragSource(manager) {
+    return function publishDragSource() {
+        const monitor = manager.getMonitor();
+        if (monitor.isDragging()) {
+            return {
+                type: PUBLISH_DRAG_SOURCE
+            };
+        }
         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.");
-    }
+function createDragDropActions(manager) {
+    return {
+        beginDrag: createBeginDrag(manager),
+        publishDragSource: createPublishDragSource(manager),
+        hover: createHover(manager),
+        drop: createDrop(manager),
+        endDrag: createEndDrag(manager)
+    };
+}
 
-    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.');
+class DragDropManagerImpl {
+    receiveBackend(backend) {
+        this.backend = backend;
     }
-
-    if (isDispatching) {
-      throw new Error( 'Reducers may not dispatch actions.');
-    }
-
-    try {
-      isDispatching = true;
-      currentState = currentReducer(currentState, action);
-    } finally {
-      isDispatching = false;
+    getMonitor() {
+        return this.monitor;
     }
-
-    var listeners = currentListeners = nextListeners;
-
-    for (var i = 0; i < listeners.length; i++) {
-      var listener = listeners[i];
-      listener();
+    getBackend() {
+        return this.backend;
     }
-
-    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));
+    getRegistry() {
+        return this.monitor.registry;
     }
-
-    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());
-          }
+    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);
+                }
+            };
         }
-
-        observeState();
-        var unsubscribe = outerSubscribe(observeState);
-        return {
-          unsubscribe: unsubscribe
+        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;
+                }
+            }
         };
-      }
-    }, _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;
+        this.store = store;
+        this.monitor = monitor;
+        store.subscribe(this.handleRefCountChange);
+    }
 }
 
 /**
- * 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
-
+ * 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
+    };
 }
-
-/*
- * 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.');
+/**
+ * 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
+    };
 }
-
 /**
- * Use invariant() to assert state which your program assumes to be true.
+ * 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.
  *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
+ * Returns null if no item is being dragged.
  *
- * 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;
+ * @param state The offset state to compute from
+ */ function getSourceClientOffset(state) {
+    const { clientOffset , initialClientOffset , initialSourceClientOffset  } = state;
+    if (!clientOffset || !initialClientOffset || !initialSourceClientOffset) {
+        return null;
     }
-}
-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);
+    return subtract(add(clientOffset, initialSourceClientOffset), initialClientOffset);
 }
 /**
- * drop-in replacement for _.without
- */ function without(items, item) {
-    return items.filter((i)=>i !== item
-    );
+ * 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;
 /**
- * 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
-    );
+ * 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;
 }
 
-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
+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 ResetCoordinatesAction = {
-    type: INIT_COORDS,
-    payload: {
-        clientOffset: null,
-        sourceClientOffset: null
+        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);
     }
-};
-function createBeginDrag(manager) {
-    return function beginDrag(sourceIds = [], options = {
-        publishSource: true
+    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
     }) {
-        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;
+        // undefined on initial render
+        if (!targetId) {
+            return false;
         }
-        // Get the source client offset
-        let sourceClientOffset = null;
-        if (clientOffset) {
-            if (!getSourceClientOffset) {
-                throw new Error('getSourceClientOffset must be defined');
-            }
-            verifyGetSourceClientOffsetIsFunction(getSourceClientOffset);
-            sourceClientOffset = getSourceClientOffset(sourceId);
+        const { shallow  } = options;
+        if (!this.isDragging()) {
+            return false;
         }
-        // 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;
+        const targetType = this.registry.getTargetType(targetId);
+        const draggedItemType = this.getItemType();
+        if (draggedItemType && !matchesType(targetType, draggedItemType)) {
+            return false;
         }
-        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;
+        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;
         }
     }
-    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;
+    getItemType() {
+        return this.store.getState().dragOperation.itemType;
     }
-    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]);
-        });
+    getItem() {
+        return this.store.getState().dragOperation.item;
     }
-    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();
+    getSourceId() {
+        return this.store.getState().dragOperation.sourceId;
     }
-    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;
+    getTargetIds() {
+        return this.store.getState().dragOperation.targetIds;
     }
-    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.');
+    getDropResult() {
+        return this.store.getState().dragOperation.dropResult;
     }
-}
-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);
-        }
+    didDrop() {
+        return this.store.getState().dragOperation.didDrop;
     }
-}
-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;
+    isSourcePublic() {
+        return Boolean(this.store.getState().dragOperation.isSourcePublic);
     }
-    getMonitor() {
-        return this.monitor;
+    getInitialClientOffset() {
+        return this.store.getState().dragOffset.initialClientOffset;
     }
-    getBackend() {
-        return this.backend;
+    getInitialSourceClientOffset() {
+        return this.store.getState().dragOffset.initialSourceClientOffset;
     }
-    getRegistry() {
-        return this.monitor.registry;
+    getClientOffset() {
+        return this.store.getState().dragOffset.clientOffset;
     }
-    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;
-        }, {});
+    getSourceClientOffset() {
+        return getSourceClientOffset(this.store.getState().dragOffset);
     }
-    dispatch(action) {
-        this.store.dispatch(action);
+    getDifferenceFromInitialOffset() {
+        return getDifferenceFromInitialOffset(this.store.getState().dragOffset);
     }
-    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;
-                }
-            }
-        };
+    constructor(store, registry){
         this.store = store;
-        this.monitor = monitor;
-        store.subscribe(this.handleRefCountChange);
+        this.registry = registry;
     }
 }
 
-/**
- * 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();
-        }
+// 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
@@ -3883,103 +3174,900 @@ function useDropTargetConnector(options) {
     return connector;
 }
 
-function useDropTargetMonitor() {
-    const manager = useDragDropManager();
-    return React.useMemo(()=>new DropTargetMonitorImpl(manager)
-    , [
-        manager
-    ]);
-}
+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,
+      tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      PushPinIcon = _tableInstance$option.icons.PushPinIcon,
+      localization = _tableInstance$option.localization;
+
+  var handlePinColumn = function handlePinColumn(pinDirection) {
+    column.pin(pinDirection);
+  };
+
+  return React__default.createElement(material.Box, {
+    sx: {
+      mr: '4px'
+    }
+  }, column.getIsPinned() ? React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.unpin
+  }, React__default.createElement(material.IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(false);
+    },
+    size: "small"
+  }, React__default.createElement(PushPinIcon, null))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.pinToLeft
+  }, React__default.createElement(material.IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn('left');
+    },
+    size: "small"
+  }, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: 'rotate(90deg)'
+    }
+  }))), React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.pinToRight
+  }, React__default.createElement(material.IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn('right');
+    },
+    size: "small"
+  }, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: 'rotate(-90deg)'
+    }
+  })))));
+};
+
+var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
+      localization = _tableInstance$option.localization;
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: localization.grab
+  }, React__default.createElement(material.IconButton, {
+    disableRipple: true,
+    ref: ref,
+    size: "small",
+    sx: {
+      cursor: 'grab',
+      m: 0,
+      opacity: 0.5,
+      p: '2px',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 1
+      },
+      '&:active': {
+        cursor: 'grabbing'
+      }
+    }
+  }, React__default.createElement(DragHandleIcon, null)));
+});
+
+var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
+  var _column$columns2;
+
+  var allColumns = _ref.allColumns,
+      column = _ref.column,
+      isSubMenu = _ref.isSubMenu,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
+      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      setColumnOrder = tableInstance.setColumnOrder;
+
+  var _getState = getState(),
+      columnOrder = _getState.columnOrder,
+      columnVisibility = _getState.columnVisibility;
+
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
+
+  var reorder = function reorder(movingColumn, receivingColumn) {
+    if (movingColumn.getCanPin()) {
+      movingColumn.pin(receivingColumn.getIsPinned());
+    }
+
+    columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
+    setColumnOrder([].concat(columnOrder));
+  };
+
+  var _useDrop = useDrop({
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorder(movingColumn, column);
+    }
+  }),
+      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();
+  });
+
+  var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
+    if (columnDefType === 'group') {
+      var _column$columns;
+
+      column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.forEach == null ? void 0 : _column$columns.forEach(function (childColumn) {
+        childColumn.toggleVisibility(!switchChecked);
+      });
+    } else {
+      column.toggleVisibility();
+    }
+
+    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
+      column: column,
+      columnVisibility: columnVisibility,
+      tableInstance: tableInstance
+    });
+  };
+
+  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'
+    }
+  }, React__default.createElement(material.Box, {
+    ref: previewRef,
+    sx: {
+      display: 'flex',
+      flexWrap: 'nowrap'
+    }
+  }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
+    return col.columnDefType === 'group';
+  }) && React__default.createElement(MRT_GrabHandleButton, {
+    ref: dragRef,
+    tableInstance: tableInstance
+  }), !isSubMenu && column.getCanPin() && React__default.createElement(MRT_ColumnPinningButtons, {
+    column: column,
+    tableInstance: tableInstance
+  }), React__default.createElement(material.FormControlLabel, {
+    componentsProps: {
+      typography: {
+        sx: {
+          mb: 0,
+          opacity: columnDefType !== 'display' ? 1 : 0.5
+        }
+      }
+    },
+    checked: switchChecked,
+    control: React__default.createElement(material.Switch, null),
+    disabled: isSubMenu && switchChecked || !column.getCanHide(),
+    label: columnDef.header,
+    onChange: function onChange() {
+      return handleToggleColumnHidden(column);
+    },
+    sx: {
+      ml: '4px'
+    }
+  }))), (_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,
+      isSubMenu: isSubMenu,
+      tableInstance: tableInstance
+    });
+  }));
+};
+
+var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
+  var anchorEl = _ref.anchorEl,
+      isSubMenu = _ref.isSubMenu,
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getAllColumns = tableInstance.getAllColumns,
+      getAllLeafColumns = tableInstance.getAllLeafColumns,
+      getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
+      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
+      getState = tableInstance.getState,
+      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
+      _tableInstance$option = tableInstance.options,
+      localization = _tableInstance$option.localization,
+      enablePinning = _tableInstance$option.enablePinning,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding,
+      columnOrder = _getState.columnOrder,
+      columnPinning = _getState.columnPinning;
+
+  var hideAllColumns = function hideAllColumns() {
+    getAllLeafColumns().filter(function (col) {
+      return col.columnDef.enableHiding !== false;
+    }).forEach(function (col) {
+      return col.toggleVisibility(false);
+    });
+  };
+
+  var allColumns = React.useMemo(function () {
+    var columns = getAllColumns();
+
+    if (columnOrder.length > 0 && !columns.some(function (col) {
+      return col.columnDefType === 'group';
+    })) {
+      var _columnOrder$map;
+
+      return (_columnOrder$map = columnOrder.map(function (colId) {
+        return columns.find(function (col) {
+          return col.id === colId;
+        });
+      })) != null ? _columnOrder$map : columns;
+    }
+
+    return columns;
+  }, [getAllColumns(), columnOrder, columnPinning]);
+  return React__default.createElement(material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: isDensePadding
+    }
+  }, React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: isSubMenu ? 'center' : 'space-between',
+      p: '0.5rem',
+      pt: 0
+    }
+  }, !isSubMenu && React__default.createElement(material.Button, {
+    disabled: !getIsSomeColumnsVisible(),
+    onClick: hideAllColumns
+  }, localization.hideAll), !isSubMenu && enableColumnOrdering && React__default.createElement(material.Button, {
+    onClick: function onClick() {
+      return tableInstance.resetColumnOrder();
+    }
+  }, localization.resetOrder), !isSubMenu && enablePinning && React__default.createElement(material.Button, {
+    disabled: !getIsSomeColumnsPinned(),
+    onClick: function onClick() {
+      return tableInstance.resetColumnPinning(true);
+    }
+  }, localization.unpinAll), React__default.createElement(material.Button, {
+    disabled: getIsAllColumnsVisible(),
+    onClick: function onClick() {
+      return toggleAllColumnsVisible(true);
+    }
+  }, localization.showAll)), React__default.createElement(material.Divider, null), allColumns.map(function (column, index) {
+    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
+      allColumns: allColumns,
+      column: column,
+      isSubMenu: isSubMenu,
+      key: index + "-" + column.id,
+      tableInstance: tableInstance
+    });
+  }));
+};
+
+var commonMenuItemStyles$1 = {
+  py: '6px',
+  my: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+var commonListItemStyles = {
+  display: 'flex',
+  alignItems: 'center'
+};
+var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
+
+  var anchorEl = _ref.anchorEl,
+      header = _ref.header,
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
+      setColumnOrder = tableInstance.setColumnOrder,
+      _tableInstance$option = tableInstance.options,
+      enableColumnFilters = _tableInstance$option.enableColumnFilters,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
+      enableGrouping = _tableInstance$option.enableGrouping,
+      enableHiding = _tableInstance$option.enableHiding,
+      enablePinning = _tableInstance$option.enablePinning,
+      enableSorting = _tableInstance$option.enableSorting,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      ArrowRightIcon = _tableInstance$option2.ArrowRightIcon,
+      ClearAllIcon = _tableInstance$option2.ClearAllIcon,
+      ViewColumnIcon = _tableInstance$option2.ViewColumnIcon,
+      DynamicFeedIcon = _tableInstance$option2.DynamicFeedIcon,
+      FilterListIcon = _tableInstance$option2.FilterListIcon,
+      FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
+      PushPinIcon = _tableInstance$option2.PushPinIcon,
+      SortIcon = _tableInstance$option2.SortIcon,
+      RestartAltIcon = _tableInstance$option2.RestartAltIcon,
+      VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      setShowFilters = tableInstance.setShowFilters;
+  var column = header.column;
+  var columnDef = column.columnDef;
+
+  var _getState = getState(),
+      columnSizing = _getState.columnSizing,
+      columnVisibility = _getState.columnVisibility,
+      isDensePadding = _getState.isDensePadding;
+
+  var _useState = React.useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
+
+  var _useState2 = React.useState(null),
+      showHideColumnsMenuAnchorEl = _useState2[0],
+      setShowHideColumnsMenuAnchorEl = _useState2[1];
+
+  var handleClearSort = function handleClearSort() {
+    column.clearSorting();
+    setAnchorEl(null);
+  };
+
+  var handleSortAsc = function handleSortAsc() {
+    column.toggleSorting(false);
+    setAnchorEl(null);
+  };
+
+  var handleSortDesc = function handleSortDesc() {
+    column.toggleSorting(true);
+    setAnchorEl(null);
+  };
+
+  var handleResetColumnSize = function handleResetColumnSize() {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
+  var handleHideColumn = function handleHideColumn() {
+    column.toggleVisibility(false);
+    setAnchorEl(null);
+  };
+
+  var handlePinColumn = function handlePinColumn(pinDirection) {
+    column.pin(pinDirection);
+    setAnchorEl(null);
+  };
+
+  var handleGroupByColumn = function handleGroupByColumn() {
+    column.toggleGrouping();
+    setColumnOrder(function (old) {
+      return ['mrt-expand'].concat(old);
+    });
+    setAnchorEl(null);
+  };
+
+  var handleClearFilter = function handleClearFilter() {
+    column.setFilterValue('');
+    setAnchorEl(null);
+  };
+
+  var handleFilterByColumn = function handleFilterByColumn() {
+    setShowFilters(true);
+    setTimeout(function () {
+      var _document$getElementB, _header$muiTableHeadC, _header$muiTableHeadC2;
+
+      return (_document$getElementB = document.getElementById( // @ts-ignore
+      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + idPrefix + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+    setAnchorEl(null);
+  };
+
+  var handleShowAllColumns = function handleShowAllColumns() {
+    toggleAllColumnsVisible(true);
+    setAnchorEl(null);
+  };
+
+  var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
+  var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
+    event.stopPropagation();
+    setShowHideColumnsMenuAnchorEl(event.currentTarget);
+  };
+
+  return React__default.createElement(material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: isDensePadding
+    }
+  }, enableSorting && column.getCanSort() && [React__default.createElement(material.MenuItem, {
+    disabled: !column.getIsSorted(),
+    key: 0,
+    onClick: handleClearSort,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), localization.clearSort)), React__default.createElement(material.MenuItem, {
+    disabled: column.getIsSorted() === 'asc',
+    key: 1,
+    onClick: handleSortAsc,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
+    divider: enableColumnFilters || enableGrouping || enableHiding,
+    key: 2,
+    disabled: column.getIsSorted() === 'desc',
+    onClick: handleSortDesc,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, {
+    style: {
+      transform: 'rotate(180deg) scaleX(-1)'
+    }
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React__default.createElement(material.MenuItem, {
+    disabled: !column.getFilterValue(),
+    key: 0,
+    onClick: handleClearFilter,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListOffIcon, null)), localization.clearFilter)), React__default.createElement(material.MenuItem, {
+    divider: enableGrouping || enableHiding,
+    key: 1,
+    onClick: handleFilterByColumn,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), !columnDef.filterSelectOptions && React__default.createElement(material.IconButton, {
+    onClick: handleOpenFilterModeMenu,
+    onMouseEnter: handleOpenFilterModeMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterOptionMenu, {
+    anchorEl: filterMenuAnchorEl,
+    header: header,
+    key: 2,
+    onSelect: handleFilterByColumn,
+    setAnchorEl: setFilterMenuAnchorEl,
+    tableInstance: tableInstance
+  })], enableGrouping && column.getCanGroup() && [React__default.createElement(material.MenuItem, {
+    divider: enablePinning,
+    key: 0,
+    onClick: handleGroupByColumn,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
+    disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
+    key: 0,
+    onClick: function onClick() {
+      return handlePinColumn('left');
+    },
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: 'rotate(90deg)'
+    }
+  })), localization.pinToLeft)), React__default.createElement(material.MenuItem, {
+    disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
+    key: 1,
+    onClick: function onClick() {
+      return handlePinColumn('right');
+    },
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: 'rotate(-90deg)'
+    }
+  })), localization.pinToRight)), React__default.createElement(material.MenuItem, {
+    disabled: !column.getIsPinned(),
+    divider: enableHiding,
+    key: 2,
+    onClick: function onClick() {
+      return handlePinColumn(false);
+    },
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React__default.createElement(material.MenuItem, {
+    disabled: !column.getCanResize() || !columnSizing[column.id],
+    key: 0,
+    onClick: handleResetColumnSize,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React__default.createElement(material.MenuItem, {
+    disabled: columnDef.enableHiding === false,
+    key: 0,
+    onClick: handleHideColumn,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
+    disabled: !Object.values(columnVisibility).filter(function (visible) {
+      return !visible;
+    }).length,
+    key: 1,
+    onClick: handleShowAllColumns,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React__default.createElement(material.IconButton, {
+    onClick: handleOpenShowHideColumnsMenu,
+    onMouseEnter: handleOpenShowHideColumnsMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
+    anchorEl: showHideColumnsMenuAnchorEl,
+    isSubMenu: true,
+    key: 2,
+    setAnchorEl: setShowHideColumnsMenuAnchorEl,
+    tableInstance: tableInstance
+  })]);
+};
+
+var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
+  var anchorEl = _ref.anchorEl,
+      handleEdit = _ref.handleEdit,
+      row = _ref.row,
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      EditIcon = _tableInstance$option.icons.EditIcon,
+      enableEditing = _tableInstance$option.enableEditing,
+      localization = _tableInstance$option.localization,
+      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
+  return React__default.createElement(material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: isDensePadding
+    }
+  }, enableEditing && React__default.createElement(material.MenuItem, {
+    onClick: handleEdit,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
+    row: row,
+    tableInstance: tableInstance,
+    closeMenu: function closeMenu() {
+      return setAnchorEl(null);
+    }
+  }));
+};
+
+var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      CancelIcon = _tableInstance$option2.CancelIcon,
+      SaveIcon = _tableInstance$option2.SaveIcon,
+      localization = _tableInstance$option.localization,
+      onEditSubmit = _tableInstance$option.onEditSubmit,
+      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+
+  var _getState = getState(),
+      currentEditingRow = _getState.currentEditingRow;
+
+  var handleCancel = function handleCancel() {
+    var _row$original;
+
+    row._valuesCache = (_row$original = row.original) != null ? _row$original : {};
+    setCurrentEditingRow(null);
+  };
+
+  var handleSave = function handleSave() {
+    onEditSubmit == null ? void 0 : onEditSubmit({
+      row: currentEditingRow != null ? currentEditingRow : row,
+      tableInstance: tableInstance
+    });
+    setCurrentEditingRow(null);
+  };
+
+  return React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.75rem'
+    }
+  }, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.cancel
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": localization.cancel,
+    onClick: handleCancel
+  }, React__default.createElement(CancelIcon, null))), React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.save
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": localization.save,
+    color: "info",
+    onClick: handleSave
+  }, React__default.createElement(SaveIcon, null))));
+};
+
+var commonIconButtonStyles = {
+  height: '2rem',
+  ml: '10px',
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1
+  }
+};
+var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableEditing = _tableInstance$option.enableEditing,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      EditIcon = _tableInstance$option2.EditIcon,
+      MoreHorizIcon = _tableInstance$option2.MoreHorizIcon,
+      localization = _tableInstance$option.localization,
+      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems,
+      renderRowActions = _tableInstance$option.renderRowActions,
+      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+
+  var _getState = getState(),
+      currentEditingRow = _getState.currentEditingRow;
+
+  var _useState = React.useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
 
-/**
- * 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
-    ]);
-}
+  var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
 
-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;
-    }
-}
+  var handleStartEditMode = function handleStartEditMode() {
+    setCurrentEditingRow(_extends({}, row));
+    setAnchorEl(null);
+  };
 
-function useDropTarget(spec, monitor) {
-    const dropTarget = React.useMemo(()=>new DropTargetImpl(spec, monitor)
-    , [
-        monitor
-    ]);
-    React.useEffect(()=>{
-        dropTarget.spec = spec;
-    }, [
-        spec
-    ]);
-    return dropTarget;
-}
+  return React__default.createElement(React__default.Fragment, null, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions({
+    row: row,
+    tableInstance: tableInstance
+  })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
+    row: row,
+    tableInstance: tableInstance
+  }) : !renderRowActionMenuItems && enableEditing ? React__default.createElement(material.Tooltip, {
+    placement: "right",
+    arrow: true,
+    title: localization.edit
+  }, React__default.createElement(material.IconButton, {
+    sx: commonIconButtonStyles,
+    onClick: handleStartEditMode
+  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.rowActions
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": localization.rowActions,
+    onClick: handleOpenRowActionMenu,
+    size: "small",
+    sx: commonIconButtonStyles
+  }, React__default.createElement(MoreHorizIcon, null))), React__default.createElement(MRT_RowActionMenu, {
+    anchorEl: anchorEl,
+    handleEdit: handleStartEditMode,
+    row: row,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  })) : null);
+};
 
-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('|'), 
-    ]);
-}
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  var row = _ref.row,
+      selectAll = _ref.selectAll,
+      tableInstance = _ref.tableInstance;
+  var getRowModel = tableInstance.getRowModel,
+      getSelectedRowModel = tableInstance.getSelectedRowModel,
+      getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      localization = _tableInstance$option.localization,
+      muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
+      onSelectChange = _tableInstance$option.onSelectChange,
+      onSelectAllChange = _tableInstance$option.onSelectAllChange;
 
-/**
- * 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 _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
+  var handleSelectChange = function handleSelectChange(event) {
+    if (selectAll) {
+      tableInstance.getToggleAllRowsSelectedHandler()(event);
+      onSelectAllChange == null ? void 0 : onSelectAllChange({
+        event: event,
+        selectedRows: event.target.checked ? getRowModel().flatRows : [],
+        tableInstance: tableInstance
+      });
+    } else if (row) {
+      row == null ? void 0 : row.getToggleSelectedHandler()(event);
+      onSelectChange == null ? void 0 : onSelectChange({
+        event: event,
+        row: row,
+        selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
+          return selectedRow.id !== row.id;
+        }),
+        tableInstance: tableInstance
+      });
+    }
+  };
+
+  var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
+    isSelectAll: !!selectAll,
+    row: row,
+    tableInstance: tableInstance
+  }) : 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 ? tableInstance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
+    indeterminate: selectAll ? tableInstance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
+    inputProps: {
+      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+    },
+    onChange: handleSelectChange,
+    size: isDensePadding ? 'small' : 'medium'
+  }, checkboxProps, {
+    sx: _extends({
+      height: isDensePadding ? '1.75rem' : '2.25rem',
+      width: isDensePadding ? '1.75rem' : '2.25rem'
+    }, checkboxProps == null ? void 0 : checkboxProps.sx)
+  })));
+};
 
 // cheap lodash replacements
 function memoize(fn) {
@@ -5620,9 +5708,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
-  console.log({
-    textFieldProps: textFieldProps
-  });
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -5800,8 +5885,9 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
       showFilters = _getState.showFilters;
 
   var column = header.column;
+  var columnDef = column.columnDef;
   var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
   return React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -5827,38 +5913,6 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
   }, showFilters && !column.getFilterValue() ? React__default.createElement(FilterAltOffIcon, null) : React__default.createElement(FilterAltIcon, null)));
 };
 
-var MRT_TableHeadCellGrabHandle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
-      localization = _tableInstance$option.localization;
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: localization.grab
-  }, React__default.createElement(material.IconButton, {
-    disableRipple: true,
-    ref: ref,
-    size: "small",
-    sx: {
-      cursor: 'grab',
-      m: 0,
-      opacity: 0.5,
-      p: '2px',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 1
-      },
-      '&:active': {
-        cursor: 'grabbing'
-      }
-    }
-  }, React__default.createElement(DragHandleIcon, null)));
-});
-
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -5868,6 +5922,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
       showFilters = _getState.showFilters;
 
   var column = header.column;
+  var columnDefType = column.columnDefType;
   return React__default.createElement(material.Divider, {
     flexItem: true,
     orientation: "vertical",
@@ -5879,7 +5934,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
         right: '1px',
@@ -5906,7 +5961,8 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
       tableInstance = _ref.tableInstance;
   var localization = tableInstance.options.localization;
   var column = header.column;
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
+  var columnDef = column.columnDef;
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', columnDef.header) : localization.sortedByColumnAsc.replace('{column}', columnDef.header) : localization.unsorted;
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     placement: "top",
@@ -5926,6 +5982,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
       localization = _tableInstance$option.localization,
       muiTableHeadCellColumnActionsButtonProps = _tableInstance$option.muiTableHeadCellColumnActionsButtonProps;
   var column = header.column;
+  var columnDef = column.columnDef;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
@@ -5941,10 +5998,10 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     column: column,
     tableInstance: tableInstance
   }) : muiTableHeadCellColumnActionsButtonProps;
-  var mcTableHeadCellColumnActionsButtonProps = column.columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.columnDef.muiTableHeadCellColumnActionsButtonProps({
+  var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
     column: column,
     tableInstance: tableInstance
-  }) : column.columnDef.muiTableHeadCellColumnActionsButtonProps;
+  }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
 
@@ -5979,7 +6036,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columnDef, _column$columnDef2, _column$columnDef$Hea, _column$columnDef3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _columnDef$Header, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
@@ -6013,10 +6070,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var headerElement = ((_column$columnDef = column.columnDef) == null ? void 0 : _column$columnDef.Header) instanceof Function ? (_column$columnDef2 = column.columnDef) == null ? void 0 : _column$columnDef2.Header == null ? void 0 : _column$columnDef2.Header({
+  var headerElement = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
     header: header,
     tableInstance: tableInstance
-  }) : (_column$columnDef$Hea = (_column$columnDef3 = column.columnDef) == null ? void 0 : _column$columnDef3.Header) != null ? _column$columnDef$Hea : header.renderHeader();
+  }) : (_columnDef$Header = columnDef == null ? void 0 : columnDef.Header) != null ? _columnDef$Header : header.renderHeader();
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
@@ -6047,7 +6104,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
@@ -6089,8 +6146,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       whiteSpace: 'nowrap'
     }
-  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_TableHeadCellGrabHandle, {
-    header: header,
+  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     tableInstance: tableInstance
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
@@ -6117,19 +6173,22 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
 
-  var reorder = function reorder(item, newIndex) {
-    var currentIndex = item.index;
-    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+  var reorder = function reorder(movingHeader, receivingHeader) {
+    if (movingHeader.column.getCanPin()) {
+      movingHeader.column.pin(receivingHeader.column.getIsPinned());
+    }
+
+    columnOrder.splice(receivingHeader.index, 0, columnOrder.splice(movingHeader.index, 1)[0]);
     setColumnOrder([].concat(columnOrder));
   };
 
   var _useDrop = useDrop({
     accept: 'header',
-    drop: function drop(item) {
-      return reorder(item, header.index);
+    drop: function drop(movingHeader) {
+      return reorder(movingHeader, header);
     }
   }),
-      drop = _useDrop[1];
+      dropRef = _useDrop[1];
 
   var _useDrag = useDrag({
     collect: function collect(monitor) {
@@ -6143,15 +6202,15 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
     type: 'header'
   }),
       isDragging = _useDrag[0].isDragging,
-      drag = _useDrag[1],
-      preview = _useDrag[2];
+      dragRef = _useDrag[1],
+      previewRef = _useDrag[2];
 
   return React__default.createElement(MRT_TableHeadCell, {
-    dragRef: drag,
-    dropRef: drop,
+    dragRef: dragRef,
+    dropRef: dropRef,
     header: header,
     isDragging: isDragging,
-    previewRef: preview,
+    previewRef: previewRef,
     tableInstance: tableInstance
   });
 };
@@ -6297,6 +6356,8 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
   var _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
       muiTableBodyCellCopyButtonProps = _tableInstance$option.muiTableBodyCellCopyButtonProps;
+  var column = cell.column;
+  var columnDef = column.columnDef;
 
   var _useState = React.useState(false),
       copied = _useState[0],
@@ -6314,10 +6375,10 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     cell: cell,
     tableInstance: tableInstance
   }) : muiTableBodyCellCopyButtonProps;
-  var mcTableBodyCellCopyButtonProps = cell.column.columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? cell.column.columnDef.muiTableBodyCellCopyButtonProps({
+  var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
     cell: cell,
     tableInstance: tableInstance
-  }) : cell.column.columnDef.muiTableBodyCellCopyButtonProps;
+  }) : columnDef.muiTableBodyCellCopyButtonProps;
 
   var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
 
@@ -6353,7 +6414,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$minSize, _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
+  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
@@ -6378,7 +6439,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var column = cell.column,
       row = cell.row;
-  var columnDef = column.columnDef;
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
     tableInstance: tableInstance
@@ -6391,8 +6453,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
 
   var skeletonWidth = React.useMemo(function () {
-    return column.columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
-  }, [column.columnDefType, column.getSize()]);
+    return columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
+  }, [columnDefType, column.getSize()]);
   var isEditable = (enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false;
   var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
 
@@ -6438,7 +6500,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         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,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
-        p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
+        p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
@@ -6459,7 +6521,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
+  }, muiTableBodyCellSkeletonProps)) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React__default.createElement(MRT_EditCellTextField, {
@@ -6468,13 +6530,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, React__default.createElement(React__default.Fragment, null, (_cell$column$columnDe = (_cell$column$columnDe2 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe2.Cell == null ? void 0 : _cell$column$columnDe2.Cell({
+  }, React__default.createElement(React__default.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$columnDe : cell.renderCell())), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_cell$column$columnDe3 = (_cell$column$columnDe4 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe4.Cell == null ? void 0 : _cell$column$columnDe4.Cell({
+  })) != null ? _columnDef$Cell : cell.renderCell())), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$columnDe3 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
+  })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -6596,7 +6658,8 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
       isDensePadding = _getState.isDensePadding;
 
   var column = footer.column;
-  var columnDef = column.columnDef;
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps({
     column: column,
     tableInstance: tableInstance
@@ -6609,7 +6672,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
   var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps);
 
   return React__default.createElement(material.TableCell, Object.assign({
-    align: column.columnDefType === 'group' ? 'center' : 'left',
+    align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: footer.colSpan,
     variant: "head"
   }, tableCellProps, {
@@ -6639,8 +6702,8 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
       tableInstance = _ref.tableInstance;
   var muiTableFooterRowProps = tableInstance.options.muiTableFooterRowProps; // if no content in row, skip row
 
-  if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (h) {
-    return typeof h.column.columnDef.footer === 'string' && !!h.column.columnDef.footer || h.column.columnDef.Footer;
+  if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (header) {
+    return typeof header.column.columnDef.footer === 'string' && !!header.column.columnDef.footer || header.column.columnDef.Footer;
   }))) return null;
   var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
     footerGroup: footerGroup,
@@ -6831,7 +6894,7 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _initialState$paginat4, _initialState$paginat5, _props$globalFilterFn, _props$state3, _props$state4;
+  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
 
   var _useState = React.useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -6842,9 +6905,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
     return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
   }, [props.idPrefix]);
+  var showActionColumn = props.enableRowActions || props.enableEditing && props.editingMode === 'row';
+  var showExpandColumn = props.enableExpanding || props.enableGrouping;
   var initialState = React.useMemo(function () {
+    var _props$initialState, _initState$columnOrde;
+
+    var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
+    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
+      return c.id;
+    })).filter(Boolean) : [];
+
     if (!props.enablePersistentState || !props.idPrefix) {
-      return props.initialState;
+      return initState;
     }
 
     if (typeof window === 'undefined') {
@@ -6852,7 +6924,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         console.error('The MRT Persistent Table State feature is not supported if using SSR, but you can wrap your <MaterialReactTable /> in a MUI <NoSsr> tags to let it work');
       }
 
-      return props.initialState;
+      return initState;
     }
 
     var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + idPrefix + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + idPrefix + "-table-state") : '{}';
@@ -6861,11 +6933,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       var parsedState = JSON.parse(storedState);
 
       if (parsedState) {
-        return _extends({}, props.initialState, parsedState);
+        return _extends({}, initState, parsedState);
       }
     }
 
-    return props.initialState;
+    return initState;
   }, []);
 
   var _useState2 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
@@ -6892,27 +6964,19 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter = _useState7[0],
       setShowGlobalFilter = _useState7[1];
 
-  var _useState8 = React.useState({
-    pageIndex: (_initialState$paginat = initialState == null ? void 0 : (_initialState$paginat2 = initialState.pagination) == null ? void 0 : _initialState$paginat2.pageIndex) != null ? _initialState$paginat : 0,
-    pageSize: (_initialState$paginat3 = initialState == null ? void 0 : (_initialState$paginat4 = initialState.pagination) == null ? void 0 : _initialState$paginat4.pageSize) != null ? _initialState$paginat3 : 10,
-    pageCount: initialState == null ? void 0 : (_initialState$paginat5 = initialState.pagination) == null ? void 0 : _initialState$paginat5.pageCount
-  }),
-      pagination = _useState8[0],
-      setPagination = _useState8[1];
-
-  var _useState9 = React.useState(function () {
+  var _useState8 = React.useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
 
       return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_OPTION.EQUALS : MRT_FILTER_OPTION.FUZZY, _ref2;
     })));
   }),
-      currentFilterFns = _useState9[0],
-      setCurrentFilterFns = _useState9[1];
+      currentFilterFns = _useState8[0],
+      setCurrentFilterFns = _useState8[1];
 
-  var _useState10 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.FUZZY),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[1];
+  var _useState9 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.FUZZY),
+      currentGlobalFilterFn = _useState9[0],
+      setCurrentGlobalFilterFn = _useState9[1];
 
   var table = React.useMemo(function () {
     return reactTable.createTable();
@@ -6920,7 +6984,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var displayColumns = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [(props.enableRowActions || props.enableEditing && props.editingMode === 'row') && createDisplayColumn(table, {
+    return [showActionColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -6931,7 +6995,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
       size: 60
-    }), (props.enableExpanding || props.enableGrouping) && createDisplayColumn(table, {
+    }), showExpandColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
         var cell = _ref4.cell;
         return React__default.createElement(MRT_ExpandButton, {
@@ -6994,18 +7058,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return _ref7 = {}, _ref7[c.id] = null, _ref7;
       })));
     }) : props.data;
-  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]);
-
-  var _useState11 = React.useState(function () {
-    var _initialState$columnO;
-
-    return ((_initialState$columnO = initialState == null ? void 0 : initialState.columnOrder) != null ? _initialState$columnO : props.enableColumnOrdering) ? getAllLeafColumnDefs(columns).map(function (c) {
-      return c.id;
-    }) : [];
-  }),
-      columnOrder = _useState11[0],
-      setColumnOrder = _useState11[1]; //@ts-ignore
-
+  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
 
   var tableInstance = _extends({}, reactTable.useTableInstance(table, _extends({
     filterFns: defaultFilterFNs,
@@ -7020,13 +7073,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return row == null ? void 0 : row.subRows;
     },
     //@ts-ignore
-    globalFilterFn: currentGlobalFilterFn,
-    onColumnOrderChange: setColumnOrder,
-    onPaginationChange: function onPaginationChange(updater) {
-      return setPagination(function (old) {
-        return reactTable.functionalUpdate(updater, old);
-      });
-    }
+    globalFilterFn: currentGlobalFilterFn
   }, props, {
     //@ts-ignore
     columns: columns,
@@ -7034,15 +7081,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     idPrefix: idPrefix,
     initialState: initialState,
     state: _extends({
-      columnOrder: columnOrder,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
       isDensePadding: isDensePadding,
       isFullScreen: isFullScreen,
-      //@ts-ignore
-      pagination: pagination,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state)