@elliemae/ds-datagrids 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/plugins/sortable/sortHeaderFormatter.js

@@ -1,37 +1,53 @@
-import * as React from "react";
-import React2 from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { ArrowheadDown, ArrowheadUp } from "@elliemae/ds-icons";
-const blockName = "data-grid-sort-header";
-const SortHeaderContainer = aggregatedClasses("div")(blockName);
-const iconColor = ["brand-primary", 800];
-const SortHeader = React2.memo(({ value, onClick, sortState }) => {
-  const sortIndicator = sortState === "asc" ? /* @__PURE__ */ React2.createElement(ArrowheadUp, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { ArrowheadUp, ArrowheadDown } from '@elliemae/ds-icons';
+
+var _ArrowheadUp, _ArrowheadDown;
+const blockName = 'data-grid-sort-header';
+const SortHeaderContainer = aggregatedClasses('div')(blockName);
+const iconColor = ['brand-primary', 800];
+const SortHeader = /*#__PURE__*/React.memo(_ref => {
+  let {
+    value,
+    onClick,
+    sortState
+  } = _ref;
+  const sortIndicator = sortState === 'asc' ? _ArrowheadUp || (_ArrowheadUp = /*#__PURE__*/_jsx(ArrowheadUp, {
     color: iconColor
-  }) : /* @__PURE__ */ React2.createElement(ArrowheadDown, {
+  })) : _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
     color: iconColor
-  });
-  return /* @__PURE__ */ React2.createElement(SortHeaderContainer, {
-    onClick
-  }, /* @__PURE__ */ React2.createElement("span", {
+  }));
+  return /*#__PURE__*/_jsx(SortHeaderContainer, {
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx("span", {
     className: "header-value"
-  }, value), sortState && sortIndicator);
+  }, void 0, value), sortState && sortIndicator);
 });
-const sortHeaderFormatter = (sortable, grid) => (value, { columnIndex, property }) => {
+
+const sortHeaderFormatter = (sortable, grid) => (value, _ref2) => {
+  let {
+    columnIndex,
+    property
+  } = _ref2;
   const {
-    state: { sortingColumns }
+    state: {
+      sortingColumns
+    }
   } = grid.getInstance();
-  const { onClick, className } = sortable(value, { columnIndex, property });
-  return /* @__PURE__ */ React2.createElement(SortHeader, {
-    className,
+  const {
     onClick,
+    className
+  } = sortable(value, {
+    columnIndex,
+    property
+  });
+  return /*#__PURE__*/_jsx(SortHeader, {
+    className: className,
+    onClick: onClick,
     sortState: sortingColumns[property] && sortingColumns[property].direction,
-    value
+    value: value
   });
 };
-var sortHeaderFormatter_default = sortHeaderFormatter;
-export {
-  sortHeaderFormatter_default as default,
-  sortHeaderFormatter
-};
-//# sourceMappingURL=sortHeaderFormatter.js.map
+
+export { sortHeaderFormatter as default };

package/esm/plugins/sortable/sortTree.js

@@ -1,15 +1,26 @@
-import * as React from "react";
-import * as sort from "sortabular";
-const deepSorting = (sortConfig, rows = []) => sort.sorter(sortConfig)(rows.map((row) => row.children && row.children.length ? {
-  ...row,
-  children: deepSorting(sortConfig, row.children)
-} : row));
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import * as sortabular from 'sortabular';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const deepSorting = function (sortConfig) {
+  let rows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return sortabular.sorter(sortConfig)(rows.map(row => row.children && row.children.length ? _objectSpread(_objectSpread({}, row), {}, {
+    children: deepSorting(sortConfig, row.children)
+  }) : row));
+};
+
 function sortTree(sortConfig) {
-  return (rows) => deepSorting(sortConfig, rows);
+  return rows => deepSorting(sortConfig, rows);
 }
-var sortTree_default = sortTree;
-export {
-  sortTree_default as default,
-  sortTree
-};
-//# sourceMappingURL=sortTree.js.map
+
+export { sortTree as default };

package/esm/plugins/sortable/sorter.js

@@ -1,115 +1,166 @@
-import * as React from "react";
-import { get } from "@elliemae/ds-utilities";
-import moment from "moment";
-const sorter = ({ columns, sortingColumns, sort, emptyLast } = {}) => (data) => {
-  if (!columns) {
-    throw new Error('sort.sorter - Missing "columns" argument!');
-  }
-  if (!sort) {
-    throw new Error('sort.sorter - Missing "sort" argument!');
-  }
-  if (!sortingColumns) {
-    return data;
-  }
-  const columnIndexList = new Array(sortingColumns.length);
-  const orderList = new Array(sortingColumns.length);
-  let actualSortFunction = sort;
-  if (emptyLast) {
-    actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
-      const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
-      const keys = Object.keys(sortingColumns);
-      const withData = sortedData.filter((r) => keys.some((key) => !!r[key]));
-      const withoutData = sortedData.filter((r) => keys.some((key) => !r[key]));
-      return [...withData, ...withoutData];
-    };
-  }
-  Object.keys(sortingColumns).forEach((sortingColumnKey) => {
-    const realColumn = columns.find((column) => column.property === sortingColumnKey);
-    if (!realColumn)
-      return;
-    const columnSorter = realColumn.sort || function resolveValue(row) {
-      const { property, sortBy } = realColumn;
-      const value = row[sortBy || property];
-      const resolvedValue = get(row, `_${property}`, value);
-      if (realColumn.type === "DateTime") {
-        return moment(resolvedValue);
-      }
-      return typeof resolvedValue === "string" ? resolvedValue.toLowerCase() : resolvedValue;
-    };
-    const sortingColumn = sortingColumns[sortingColumnKey];
-    columnIndexList[sortingColumn.position] = columnSorter;
-    orderList[sortingColumn.position] = sortingColumn.direction;
-  });
-  return actualSortFunction(data, columnIndexList, orderList);
-};
-const sorterGroups = ({ columns, sortingColumns, sort, emptyLast } = {}) => (data, rowsData) => {
-  if (!columns) {
-    throw new Error('sort.sorter - Missing "columns" argument!');
-  }
-  if (!sort) {
-    throw new Error('sort.sorter - Missing "sort" argument!');
-  }
-  if (!sortingColumns) {
-    return data;
-  }
-  const columnIndexList = new Array(sortingColumns.length);
-  const orderList = new Array(sortingColumns.length);
-  let actualSortFunction = sort;
-  if (emptyLast) {
-    actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
-      const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
-      const keys = Object.keys(sortingColumns);
-      const withData = sortedData.filter((r) => keys.some((key) => !!r[key]));
-      const withoutData = sortedData.filter((r) => keys.some((key) => !r[key]));
-      return [...withData, ...withoutData];
-    };
-  }
-  Object.keys(sortingColumns).forEach((sortingColumnKey) => {
-    const realColumn = columns.find((column) => column.property === sortingColumnKey);
-    if (!realColumn)
-      return;
-    const columnSorter = realColumn.sort || function resolveValue(row) {
-      const { property, sortBy } = realColumn;
-      const value = row[sortBy || property];
-      const resolvedValue = get(row, `_${property}`, value);
-      if (realColumn.type === "DateTime") {
-        return moment(resolvedValue);
-      }
-      return typeof resolvedValue === "string" ? resolvedValue.toLowerCase() : resolvedValue;
-    };
-    const sortingColumn = sortingColumns[sortingColumnKey];
-    columnIndexList[sortingColumn.position] = columnSorter;
-    orderList[sortingColumn.position] = sortingColumn.direction;
-  });
-  const groups = {};
-  const preserveData = {};
-  data.forEach((c) => {
-    preserveData[c.id] = { ...c };
-  });
-  rowsData.forEach((group) => {
-    groups[group.id] = {
-      children: actualSortFunction(group.children.map((c) => ({
-        parentNode: preserveData[c.id].parentNode,
-        data: c,
-        ...c
-      })), columnIndexList, orderList)
-    };
-  });
-  const sorted = actualSortFunction(data.map((r) => ({
-    ...r.data,
-    ...r
-  })), columnIndexList, orderList);
-  let ssortGlobal = [];
-  sorted.filter((s) => !s.isGroup).forEach((sr) => {
-    if (groups[sr.parentNode.id]) {
-      ssortGlobal = [...ssortGlobal, preserveData[sr.parentNode.id], ...groups[sr.parentNode.id].children];
-      delete groups[sr.parentNode.id];
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { get } from '@elliemae/ds-utilities';
+import moment from 'moment';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const sorter = function () {
+  let {
+    columns,
+    sortingColumns,
+    sort,
+    emptyLast
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return data => {
+    if (!columns) {
+      throw new Error('sort.sorter - Missing "columns" argument!');
+    }
+
+    if (!sort) {
+      throw new Error('sort.sorter - Missing "sort" argument!');
+    }
+
+    if (!sortingColumns) {
+      return data;
+    }
+
+    const columnIndexList = new Array(sortingColumns.length);
+    const orderList = new Array(sortingColumns.length);
+    let actualSortFunction = sort;
+
+    if (emptyLast) {
+      actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
+        const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
+        const keys = Object.keys(sortingColumns);
+        const withData = sortedData.filter(r => keys.some(key => !!r[key]));
+        const withoutData = sortedData.filter(r => keys.some(key => !r[key]));
+        return [...withData, ...withoutData];
+      };
     }
-  });
-  return ssortGlobal;
+
+    Object.keys(sortingColumns).forEach(sortingColumnKey => {
+      const realColumn = columns.find(column => column.property === sortingColumnKey);
+      if (!realColumn) return;
+
+      const columnSorter = realColumn.sort || function resolveValue(row) {
+        const {
+          property,
+          sortBy
+        } = realColumn;
+        const value = row[sortBy || property]; // Pick resolved value by convention
+
+        const resolvedValue = get(row, "_".concat(property), value);
+
+        if (realColumn.type === 'DateTime') {
+          return moment(resolvedValue);
+        }
+
+        return typeof resolvedValue === 'string' ? resolvedValue.toLowerCase() : resolvedValue;
+      };
+
+      const sortingColumn = sortingColumns[sortingColumnKey];
+      columnIndexList[sortingColumn.position] = columnSorter;
+      orderList[sortingColumn.position] = sortingColumn.direction;
+    });
+    return actualSortFunction(data, columnIndexList, orderList);
+  };
 };
-export {
-  sorter,
-  sorterGroups
+const sorterGroups = function () {
+  let {
+    columns,
+    sortingColumns,
+    sort,
+    emptyLast
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (data, rowsData) => {
+    if (!columns) {
+      throw new Error('sort.sorter - Missing "columns" argument!');
+    }
+
+    if (!sort) {
+      throw new Error('sort.sorter - Missing "sort" argument!');
+    }
+
+    if (!sortingColumns) {
+      return data;
+    }
+
+    const columnIndexList = new Array(sortingColumns.length);
+    const orderList = new Array(sortingColumns.length);
+    let actualSortFunction = sort;
+
+    if (emptyLast) {
+      actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
+        const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
+        const keys = Object.keys(sortingColumns);
+        const withData = sortedData.filter(r => keys.some(key => !!r[key]));
+        const withoutData = sortedData.filter(r => keys.some(key => !r[key]));
+        return [...withData, ...withoutData];
+      };
+    }
+
+    Object.keys(sortingColumns).forEach(sortingColumnKey => {
+      const realColumn = columns.find(column => column.property === sortingColumnKey);
+      if (!realColumn) return;
+
+      const columnSorter = realColumn.sort || function resolveValue(row) {
+        const {
+          property,
+          sortBy
+        } = realColumn;
+        const value = row[sortBy || property]; // Pick resolved value by convention
+
+        const resolvedValue = get(row, "_".concat(property), value);
+
+        if (realColumn.type === 'DateTime') {
+          return moment(resolvedValue);
+        }
+
+        return typeof resolvedValue === 'string' ? resolvedValue.toLowerCase() : resolvedValue;
+      };
+
+      const sortingColumn = sortingColumns[sortingColumnKey];
+      columnIndexList[sortingColumn.position] = columnSorter;
+      orderList[sortingColumn.position] = sortingColumn.direction;
+    });
+    const groups = {};
+    const preserveData = {};
+    data.forEach(c => {
+      preserveData[c.id] = _objectSpread({}, c);
+    });
+    rowsData.forEach(group => {
+      groups[group.id] = {
+        children: actualSortFunction(group.children.map(c => _objectSpread({
+          parentNode: preserveData[c.id].parentNode,
+          data: c
+        }, c)), columnIndexList, orderList) // sort internally
+
+      };
+    });
+    const sorted = actualSortFunction(data.map(r => _objectSpread(_objectSpread({}, r.data), r)), columnIndexList, orderList); // sort global
+
+    let ssortGlobal = [];
+    sorted.filter(s => !s.isGroup).forEach(sr => {
+      if (groups[sr.parentNode.id]) {
+        ssortGlobal = [...ssortGlobal, preserveData[sr.parentNode.id], ...groups[sr.parentNode.id].children];
+        delete groups[sr.parentNode.id];
+      }
+    });
+    return ssortGlobal;
+  };
 };
-//# sourceMappingURL=sorter.js.map
+
+export { sorter, sorterGroups };

package/esm/plugins/sortable/useSortableState.js

@@ -1,44 +1,71 @@
-import * as React from "react";
-import * as sortabular from "sortabular/dist/index.js";
-import { useDerivedStateFromProps } from "@elliemae/ds-utilities";
-import { checkIfSortable } from "./checkIfSortable";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import * as sortabular from 'sortabular/dist/index.js';
+import useDerivedStateFromProps from '@elliemae/ds-utilities/hooks/useDerivedStateFromProps';
+import { checkIfSortable } from './checkIfSortable.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function useSortableState(grid) {
-  const { onSort, sortingColumns: sortingColumnsProp, pagination } = grid.props;
+  const {
+    onSort,
+    sortingColumns: sortingColumnsProp,
+    pagination
+  } = grid.props;
   const [sortingColumns, setSortingColumns] = useDerivedStateFromProps(sortingColumnsProp);
-  const handleSort = (selectedColumn) => {
-    const { composedRows = {}, props } = grid.getInstance();
-    const { allRows, rows } = composedRows;
+
+  const handleSort = selectedColumn => {
+    // support for pagination
+    const {
+      composedRows = {},
+      props
+    } = grid.getInstance();
+    const {
+      allRows,
+      rows
+    } = composedRows;
     const serverSidePagination = pagination && composedRows.amount !== (composedRows.rows && composedRows.rows.length);
+
     if (props.serverSideData || serverSidePagination || checkIfSortable(selectedColumn, allRows || rows || composedRows)) {
-      setSortingColumns((prevSortingColumns) => {
+      setSortingColumns(prevSortingColumns => {
         const nextSortingColumns = sortabular.byColumn({
           sortingColumns: prevSortingColumns,
           sortingOrder: {
-            FIRST: "asc",
-            asc: "desc",
-            desc: "asc"
+            FIRST: 'asc',
+            asc: 'desc',
+            desc: 'asc'
           },
           selectedColumn
         });
-        const { columns } = grid.getInstance();
-        let columnSorted = columns.find((col) => col.property === selectedColumn);
-        columnSorted = {
-          ...columnSorted,
+        const {
+          columns
+        } = grid.getInstance();
+        let columnSorted = columns.find(col => col.property === selectedColumn);
+        columnSorted = _objectSpread(_objectSpread({}, columnSorted), {}, {
           originalProperty: columnSorted.property
-        };
+        });
         onSort(nextSortingColumns, selectedColumn, columnSorted);
         return nextSortingColumns;
       });
     }
   };
+
   return {
-    state: { sortingColumns },
+    state: {
+      sortingColumns
+    },
     actions: {
       sort: handleSort
     }
   };
 }
-export {
-  useSortableState
-};
-//# sourceMappingURL=useSortableState.js.map
+
+export { useSortableState };

package/esm/plugins/toolbar/RowRenderer.js

@@ -1,67 +1,88 @@
-import * as React from "react";
-import React2, { useEffect, useRef, useState } from "react";
-import PropTypes from "prop-types";
-import { isEmpty } from "lodash";
-import { omit } from "@elliemae/ds-utilities";
-import { ToolbarTrigger } from "./ToolbarTrigger";
-import { RowSizes } from "../../rowSizes";
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useEffect } from 'react';
+import { isEmpty } from 'lodash';
+import { omit } from '@elliemae/ds-utilities';
+import { ToolbarTrigger } from './ToolbarTrigger.js';
+import { RowSizes } from '../../rowSizes.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const RowRenderer = (Row, grid) => {
-  const Wrapped = (props) => {
+  const Wrapped = props => {
     const ref = useRef();
-    const { rowData = {}, index, rowIndex, style } = props;
     const {
-      props: { wrapText }
+      rowData = {},
+      index,
+      rowIndex,
+      style
+    } = props;
+    const {
+      props: {
+        wrapText
+      }
     } = grid.getInstance();
     const [popStyle, setPopStyle] = useState({});
     const [rowStyle, setRowStyle] = useState(style);
     const gridInstance = grid.getInstance();
-    const { refs, isRowDragging } = gridInstance;
+    const {
+      refs,
+      isRowDragging
+    } = gridInstance;
     const [hasVerticalScrollBar, setHasVerticalScrollBar] = useState(refs.body.current && refs.body.current.offsetWidth > refs.body.current.clientWidth);
     useEffect(() => {
-      const shouldOmit = isRowDragging ? ["top"] : [];
-      setPopStyle({
-        ...popStyle,
-        ...{ top: style && !isRowDragging ? style.top : "0" }
-      });
+      const shouldOmit = isRowDragging ? ['top'] : [];
+      setPopStyle(_objectSpread(_objectSpread({}, popStyle), {
+        top: style && !isRowDragging ? style.top : '0'
+      }));
+
       if (style) {
+        // style defined means it has virtualization
         setHasVerticalScrollBar(true);
       } else {
         setHasVerticalScrollBar(false);
       }
+
       setRowStyle(omit(style || {
-        height: !wrapText ? RowSizes[gridInstance.props.rowSize] : "auto",
-        position: "relative"
+        height: !wrapText ? RowSizes[gridInstance.props.rowSize] : 'auto',
+        position: 'relative'
       }, [shouldOmit]));
     }, [style, isRowDragging]);
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /*#__PURE__*/_jsx("div", {
       className: "row-renderer-fixed-height",
       style: {
-        height: !wrapText ? RowSizes[gridInstance.props.rowSize] : "auto",
-        position: style ? "auto" : "relative"
+        height: !wrapText ? RowSizes[gridInstance.props.rowSize] : 'auto',
+        position: style ? 'auto' : 'relative' // top: isDragging ? rowStyle.top - RowSizes[gridInstance.props.rowSize] : 'auto',
+
       }
-    }, /* @__PURE__ */ React2.createElement(Row, {
-      ref,
-      ...props,
+    }, void 0, /*#__PURE__*/jsx(Row, _objectSpread(_objectSpread({
+      ref: ref
+    }, props), {}, {
       style: rowStyle
-    }), isEmpty(rowData) && !rowData.index && !rowData.rowIndex ? null : /* @__PURE__ */ React2.createElement("div", {
-      className: `toolbar-trigger-container ${style ? "move" : "stay"}`,
-      style: { ...popStyle }
-    }, /* @__PURE__ */ React2.createElement(ToolbarTrigger, {
-      grid,
-      rowData: { rowData, index, rowIndex },
+    })), isEmpty(rowData) && !rowData.index && !rowData.rowIndex ? null : /*#__PURE__*/_jsx("div", {
+      className: "toolbar-trigger-container ".concat(style ? 'move' : 'stay'),
+      style: _objectSpread({}, popStyle)
+    }, void 0, /*#__PURE__*/_jsx(ToolbarTrigger, {
+      grid: grid,
+      rowData: {
+        rowData,
+        index,
+        rowIndex
+      },
       hasScrollBar: hasVerticalScrollBar,
       rowRef: ref
     })));
   };
-  Wrapped.propTypes = {
-    rowData: PropTypes.any,
-    index: PropTypes.number,
-    rowIndex: PropTypes.number,
-    style: PropTypes.any
-  };
+
   return Wrapped;
 };
-export {
-  RowRenderer
-};
-//# sourceMappingURL=RowRenderer.js.map
+
+export { RowRenderer };