@elliemae/ds-datagrids 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/plugins/virtualization/VirtualizationPlugin.js

@@ -1,97 +1,108 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var VirtualizationPlugin_exports = {};
-__export(VirtualizationPlugin_exports, {
-  VirtualizationPlugin: () => VirtualizationPlugin
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_lodash = require("lodash");
-var import_FocusGrid = require("@elliemae/ds-shared/FocusGroup/FocusGrid");
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_ds_utilities2 = require("@elliemae/ds-utilities");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
-var import_VirtualizedBody = require("./VirtualizedBody");
-const VirtualizationPlugin = (0, import_createInstancePlugin.createInstancePlugin)("virtualization", {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var lodash = require('lodash');
+var FocusGridManager = require('@elliemae/ds-shared/FocusGroup/FocusGrid');
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var VirtualizedBody = require('./VirtualizedBody.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var FocusGridManager__default = /*#__PURE__*/_interopDefaultLegacy(FocusGridManager);
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+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__default["default"](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 VirtualizationPlugin = createInstancePlugin__default["default"]('virtualization', {
   decorateRenderers(renderers, grid) {
-    const BodyWrapper = renderers.body.wrapper;
-    renderers.body.wrapper = (0, import_react.useMemo)(() => (props) => {
-      const { listProps = {}, rows } = props;
+    const BodyWrapper = renderers.body.wrapper; // eslint-disable-next-line react/display-name
+
+    renderers.body.wrapper = React.useMemo(() => props => {
+      const {
+        listProps = {},
+        rows
+      } = props;
       const {
         hotKeys,
-        props: { autoHeight, autoScrollToId, expandable, overscanCount, rowSize },
-        refs: { innerBody },
+        props: {
+          autoHeight,
+          autoScrollToId,
+          expandable,
+          overscanCount,
+          rowSize
+        },
+        refs: {
+          innerBody
+        },
         setHasScroll,
-        state: { filters }
+        state: {
+          filters
+        }
       } = grid.getInstance();
-      const listRef = (0, import_react.useRef)();
-      const nextListProps = {
-        ...listProps,
-        ref: (0, import_ds_utilities2.mergeRefs)(listRef, listProps.ref)
-      };
-      return /* @__PURE__ */ import_react.default.createElement(import_FocusGrid.FocusGrid, {
-        hotKeys,
-        keyBindings: ({ defaultBindings }) => ({
-          ...defaultBindings,
-          Home: (0, import_ds_utilities.runAll)((e) => {
-            if (e.ctrlKey) {
-              listRef.current.scrollToItem(0);
-              setTimeout(() => defaultBindings.Home(e), 10);
-            } else {
-              defaultBindings.Home(e);
-            }
-          }),
-          End: (0, import_ds_utilities.runAll)((e) => {
-            if (e.ctrlKey) {
-              listRef.current.scrollToItem(rows.length - 1);
-              setTimeout(() => defaultBindings.End(e), 10);
-            } else {
-              defaultBindings.End(e);
-            }
-          })
-        }),
+      const listRef = React.useRef();
+
+      const nextListProps = _objectSpread(_objectSpread({}, listProps), {}, {
+        ref: dsUtilities.mergeRefs(listRef, listProps.ref)
+      });
+
+      return /*#__PURE__*/_jsx__default["default"](FocusGridManager__default["default"], {
+        hotKeys: hotKeys,
+        keyBindings: _ref => {
+          let {
+            defaultBindings
+          } = _ref;
+          return _objectSpread(_objectSpread({}, defaultBindings), {}, {
+            // todo: this is kind of hacky, since it's virtualized and there's
+            //  the possibility that the firsts or lasts rows aren't rendered
+            Home: dsUtilities.runAll(e => {
+              if (e.ctrlKey) {
+                listRef.current.scrollToItem(0);
+                setTimeout(() => defaultBindings.Home(e), 10);
+              } else {
+                defaultBindings.Home(e);
+              }
+            }),
+            End: dsUtilities.runAll(e => {
+              if (e.ctrlKey) {
+                listRef.current.scrollToItem(rows.length - 1);
+                setTimeout(() => defaultBindings.End(e), 10);
+              } else {
+                defaultBindings.End(e);
+              }
+            })
+          });
+        },
         shouldRefocus: false
-      }, /* @__PURE__ */ import_react.default.createElement(import_VirtualizedBody.VirtualizedBody, {
-        ...props,
-        autoScrollToId,
-        autoHeight,
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(VirtualizedBody, _objectSpread(_objectSpread({}, props), {}, {
+        autoScrollToId: autoScrollToId,
+        autoHeight: autoHeight,
         component: BodyWrapper,
-        expandable,
-        innerBody,
+        expandable: expandable,
+        innerBody: innerBody,
         listProps: nextListProps,
-        overscanCount,
-        rowSize,
-        setHasScroll,
-        filters
-      }));
-    }, [(0, import_lodash.get)(grid.getInstance(), "rows.length")]);
+        overscanCount: overscanCount,
+        rowSize: rowSize,
+        setHasScroll: setHasScroll,
+        filters: filters
+      })));
+    }, [lodash.get(grid.getInstance(), 'rows.length')]);
     return renderers;
   }
+
 });
-module.exports = __toCommonJS(VirtualizationPlugin_exports);
-//# sourceMappingURL=VirtualizationPlugin.js.map
+
+exports.VirtualizationPlugin = VirtualizationPlugin;

package/cjs/plugins/virtualization/VirtualizedBody.js

@@ -1,46 +1,40 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var VirtualizedBody_exports = {};
-__export(VirtualizedBody_exports, {
-  VirtualizedBody: () => VirtualizedBody,
-  default: () => VirtualizedBody_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_prop_types = __toESM(require("prop-types"));
-var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_NoResults = require("../../components/NoResults");
-var import_VirtualizedBodyRow = require("./VirtualizedBodyRow");
-var import_rowSizes = require("../../rowSizes");
-var import_helper = require("./helper");
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var NoResults = require('../../components/NoResults.js');
+var VirtualizedBodyRow = require('./VirtualizedBodyRow.js');
+var rowSizes = require('../../rowSizes.js');
+var helper = require('./helper.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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__default["default"](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 wrapperSafari = {};
-const wrapperGeneric = { overflowY: "auto", overflowX: "visible" };
-const VirtualizedBody = (props) => {
+const wrapperGeneric = {
+  overflowY: 'auto',
+  overflowX: 'visible'
+};
+
+const VirtualizedBody = props => {
   const {
     autoScrollToId,
     columns,
@@ -58,37 +52,50 @@ const VirtualizedBody = (props) => {
     rowRenderer,
     rowSize,
     setHasScroll,
-    filters
+    filters // hack to reset the scrollTop to 0 if filters change
+
   } = props;
-  const rowHeight = defaultRowHeight || import_rowSizes.RowSizes[rowSize];
-  const [scrollTop, setScrollTop] = (0, import_react.useState)(0);
-  const [visibleHeight, setVisibleHeight] = (0, import_react.useState)(0);
-  const [hasScrollBar, setHasScrollBar] = (0, import_react.useState)(false);
-  const rowStyleCache = (0, import_react.useRef)({});
-  const [renderedIndexes, setRenderedIndexes] = (0, import_react.useState)([0, 30]);
+  const rowHeight = defaultRowHeight || rowSizes.RowSizes[rowSize];
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [visibleHeight, setVisibleHeight] = React.useState(0);
+  const [hasScrollBar, setHasScrollBar] = React.useState(false);
+  const rowStyleCache = React.useRef({});
+  const [renderedIndexes, setRenderedIndexes] = React.useState([0, 30]);
+
   const getCalculatedHeightBetweenIndexes = (start, end) => {
-    const { itemSize = () => rowHeight } = listProps;
+    const {
+      itemSize = () => rowHeight
+    } = listProps;
+
     if (expandable) {
-      return rows.slice(start, end).map((_, idx) => idx).map((idx) => itemSize(idx)).reduce((acc, curr) => acc + curr, 0);
+      return rows.slice(start, end).map((_, idx) => idx).map(idx => itemSize(idx)).reduce((acc, curr) => acc + curr, 0);
     }
+
     return (end - start) * rowHeight;
   };
+
   const generateRowPositionMap = () => rows.map((row, idx) => getCalculatedHeightBetweenIndexes(0, idx));
-  const rowPositionMap = (0, import_react.useRef)(generateRowPositionMap());
-  const [virtualizedBodyRef, setVirtualizedBodyRef] = (0, import_react.useState)(null);
-  const handlerRef = (0, import_react.useRef)();
-  const autoScrollTo = (0, import_react.useCallback)((scrollHeight) => {
-    const { itemSize = () => rowHeight } = listProps;
-    const idx = rows.findIndex((item) => item[rowKey] === autoScrollToId);
+
+  const rowPositionMap = React.useRef(generateRowPositionMap());
+  const [virtualizedBodyRef, setVirtualizedBodyRef] = React.useState(null);
+  const handlerRef = React.useRef();
+  const autoScrollTo = React.useCallback(scrollHeight => {
+    const {
+      itemSize = () => rowHeight
+    } = listProps;
+    const idx = rows.findIndex(item => item[rowKey] === autoScrollToId);
     let val = rowPositionMap.current[idx] || 0;
     const lastPositionIdx = rowPositionMap.current.length - 1;
     let lastPosition = 0;
+
     if (lastPositionIdx > -1) {
       lastPosition = rowPositionMap.current[lastPositionIdx] - scrollHeight + itemSize(lastPositionIdx);
     }
+
     if (lastPosition < val) {
       val = lastPosition;
     }
+
     if (virtualizedBodyRef) {
       if (idx > -1) {
         setScrollTop(val);
@@ -96,164 +103,173 @@ const VirtualizedBody = (props) => {
       }
     }
   }, [rows, virtualizedBodyRef]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     autoScrollTo(visibleHeight);
   }, [autoScrollToId, visibleHeight]);
-  const handler = (0, import_react.useCallback)((0, import_ds_utilities.debounce)(({ target }) => {
+  const handler = React.useCallback(dsUtilities.debounce(_ref => {
+    let {
+      target
+    } = _ref;
+    // Update coordinates
     setScrollTop(target.scrollTop || 0);
   }, 100), [setScrollTop]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     setScrollTop(0);
   }, [filters]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     handlerRef.current = handler;
   }, [handler]);
-  (0, import_react.useLayoutEffect)(() => {
+  React.useLayoutEffect(() => {
     let top = Math.ceil(scrollTop / rowHeight);
     let bot = Math.ceil((scrollTop + visibleHeight) / rowHeight);
+
     if (expandable) {
+      // updateMapperFirst
       rowPositionMap.current = generateRowPositionMap();
-      top = rowPositionMap.current.findIndex((item) => item > scrollTop);
-      bot = rowPositionMap.current.findIndex((item) => item > scrollTop + visibleHeight);
-      if (bot === -1)
-        bot = rowPositionMap.current.length;
+      top = rowPositionMap.current.findIndex(item => item > scrollTop);
+      bot = rowPositionMap.current.findIndex(item => item > scrollTop + visibleHeight);
+      if (bot === -1) bot = rowPositionMap.current.length;
     }
+
     let upperBound = top - 1 - overscanCount;
     let lowerBound = bot - 1 + overscanCount;
+
     if (upperBound < 0) {
       upperBound = 0;
     }
+
     if (lowerBound - upperBound < overscanCount) {
       lowerBound = upperBound + overscanCount;
     }
+
     if (lowerBound > rows.length) {
       lowerBound = rows.length;
     }
+
     setHasScrollBar(visibleHeight < getHeight());
     setHasScroll(visibleHeight < getHeight());
     setRenderedIndexes([upperBound, lowerBound]);
   }, [visibleHeight, scrollTop, rows]);
-  (0, import_react.useLayoutEffect)(() => {
+  React.useLayoutEffect(() => {
     if (virtualizedBodyRef) {
-      const parsedVisibleHeight = parseFloat(window.getComputedStyle(virtualizedBodyRef, null).getPropertyValue("height"));
-      if (!(0, import_ds_utilities.isNaN)(parsedVisibleHeight)) {
+      const parsedVisibleHeight = parseFloat(window.getComputedStyle(virtualizedBodyRef, null).getPropertyValue('height')); // eslint-disable-next-line no-restricted-globals
+
+      if (!dsUtilities.isNaN(parsedVisibleHeight)) {
         setVisibleHeight(parsedVisibleHeight);
         autoScrollTo(parsedVisibleHeight);
       }
     }
   }, [rows, virtualizedBodyRef]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (virtualizedBodyRef) {
-      const eventListener = (event) => handlerRef.current(event);
-      virtualizedBodyRef.addEventListener("scroll", eventListener);
+      const eventListener = event => handlerRef.current(event);
+
+      virtualizedBodyRef.addEventListener('scroll', eventListener);
       return () => {
-        virtualizedBodyRef.removeEventListener("scroll", eventListener);
+        virtualizedBodyRef.removeEventListener('scroll', eventListener);
       };
     }
+
     return () => null;
   }, [virtualizedBodyRef]);
+
   const getHeight = () => {
     let returnHeight = 0;
+
     if (expandable) {
       returnHeight = getCalculatedHeightBetweenIndexes(0, rows.length) + 8;
     } else {
       returnHeight = rows.length * rowHeight + 8;
-    }
+    } // if (visibleHeight > returnHeight) {
+    //   return visibleHeight;
+    // }
+
+
     if (virtualizedBodyRef && virtualizedBodyRef.scrollHeight > virtualizedBodyRef.clientHeight) {
       return returnHeight + 10;
     }
+
     return returnHeight;
   };
+
   const getRowStyle = (row, index, specificRowHeight) => {
-    const { itemSize } = listProps;
+    const {
+      itemSize
+    } = listProps;
+
     if (!expandable && rowStyleCache.current[index]) {
       return rowStyleCache.current[index];
     }
+
     rowStyleCache.current[index] = {
       height: itemSize ? itemSize(index) : specificRowHeight,
       left: 0,
       right: 0,
       top: getCalculatedHeightBetweenIndexes(0, index),
-      position: "absolute"
+      position: 'absolute'
     };
     return rowStyleCache.current[index];
   };
-  const generateRenderedRows = () => rows.slice(renderedIndexes[0], renderedIndexes[1] + 1).map((_, index) => /* @__PURE__ */ import_react.default.createElement(import_VirtualizedBodyRow.VirtualizedBodyRow, {
+
+  const generateRenderedRows = () => rows.slice(renderedIndexes[0], renderedIndexes[1] + 1).map((_, index) => /*#__PURE__*/_jsx__default["default"](VirtualizedBodyRow, {
     data: {
       rows,
       columns,
       rowKey,
-      renderer: { rowRenderer }
+      renderer: {
+        rowRenderer
+      }
     },
     index: renderedIndexes[0] + index,
-    key: rows[renderedIndexes[0] + index][rowKey],
     style: getRowStyle(rows[renderedIndexes[0] + index], renderedIndexes[0] + index, rowHeight)
-  }));
-  const wrapperStyle = {
-    height: "100%",
-    ...import_helper.isSafari ? wrapperSafari : wrapperGeneric
-  };
+  }, rows[renderedIndexes[0] + index][rowKey]));
+
+  const wrapperStyle = _objectSpread({
+    height: '100%'
+  }, helper.isSafari ? wrapperSafari : wrapperGeneric);
+
   const bodyStyle = {
     height: getHeight(),
-    willChange: "transform",
-    backfaceVisibility: "hidden"
+    willChange: 'transform',
+    backfaceVisibility: 'hidden'
   };
-  return /* @__PURE__ */ import_react.default.createElement(Component, {
-    ...props,
-    innerRef
-  }, !isPlaceholderActive ? /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "virtualized-body-wrapper",
-    style: wrapperStyle,
-    ref: (elem) => {
-      if (elem) {
-        if (import_helper.isSafari) {
-          setVirtualizedBodyRef(elem.parentElement);
-          elem.parentElement.scrollTop = scrollTop;
-          (0, import_ds_utilities.mergeRefs)(listProps.outerRef)(elem.parentElement);
-        } else {
-          setVirtualizedBodyRef(elem);
-          (0, import_ds_utilities.mergeRefs)(listProps.outerRef)(elem);
+  return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+    innerRef: innerRef,
+    children: !isPlaceholderActive ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "virtualized-body-wrapper",
+      style: wrapperStyle,
+      ref: elem => {
+        if (elem) {
+          if (helper.isSafari) {
+            setVirtualizedBodyRef(elem.parentElement); // eslint-disable-next-line no-param-reassign
+
+            elem.parentElement.scrollTop = scrollTop;
+            dsUtilities.mergeRefs(listProps.outerRef)(elem.parentElement);
+          } else {
+            setVirtualizedBodyRef(elem);
+            dsUtilities.mergeRefs(listProps.outerRef)(elem);
+          }
         }
-      }
-    }
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    "data-testid": "virtualized-body",
-    className: `virtualized-body${hasScrollBar ? " with-scrollbar" : ""}`,
-    style: bodyStyle,
-    ref: (r) => {
-      (0, import_ds_utilities.mergeRefs)(innerBody)(r);
-    }
-  }, generateRenderedRows())) : /* @__PURE__ */ import_react.default.createElement(import_NoResults.NoResults, {
-    innerRef,
-    rowRenderer
-  }, noResultsPlaceholder));
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-testid": "virtualized-body",
+        className: "virtualized-body".concat(hasScrollBar ? ' with-scrollbar' : ''),
+        style: bodyStyle,
+        ref: r => {
+          dsUtilities.mergeRefs(innerBody)(r);
+        },
+        children: generateRenderedRows()
+      })
+    }) : /*#__PURE__*/_jsx__default["default"](NoResults, {
+      innerRef: innerRef,
+      rowRenderer: rowRenderer
+    }, void 0, noResultsPlaceholder)
+  }));
 };
+
 VirtualizedBody.defaultProps = {
   rows: [],
   overscanCount: 10
 };
-VirtualizedBody.propTypes = {
-  autoScrollToId: import_prop_types.default.number,
-  columns: import_prop_types.default.arrayOf(import_prop_types.default.shape({})),
-  component: import_prop_types.default.element,
-  expandable: import_prop_types.default.bool,
-  filters: import_prop_types.default.any,
-  innerRef: import_prop_types.default.any,
-  innerBody: import_prop_types.default.any,
-  isPlaceholderActive: import_prop_types.default.bool,
-  listProps: import_prop_types.default.shape({
-    itemSize: import_prop_types.default.func,
-    outerRef: import_prop_types.default.any
-  }),
-  noResultsPlaceholder: import_prop_types.default.oneOf([import_prop_types.default.string, import_prop_types.default.element]),
-  overscanCount: import_prop_types.default.number,
-  rows: import_prop_types.default.arrayOf(import_prop_types.default.shape({})),
-  rowHeight: import_prop_types.default.number,
-  rowKey: import_prop_types.default.string,
-  rowRenderer: import_prop_types.default.element,
-  rowSize: import_prop_types.default.any,
-  setHasScroll: import_prop_types.default.func
-};
-var VirtualizedBody_default = VirtualizedBody;
-module.exports = __toCommonJS(VirtualizedBody_exports);
-//# sourceMappingURL=VirtualizedBody.js.map
+
+module.exports = VirtualizedBody;