@elliemae/ds-datagrids 2.0.0-next.1 → 2.0.0-next.13

package/esm/components/BodyCell.js

@@ -1,10 +1,16 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useContext, useCallback, useEffect } from 'react';
 import { FocusGridContext } from '@elliemae/ds-shared/FocusGroup/FocusGrid';
 import { evaluateTransforms, evaluateFormatters } from '@elliemae/ds-shared/createDataInstance/utils';
-import DSTruncatedTooltipText from '@elliemae/ds-basic/TruncatedTooltipText';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
 import { jsx } from 'react/jsx-runtime';
 
 const _excluded = ["rowData", "rowKey", "isScrolling"];
@@ -13,15 +19,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function BodyCell({
-  component: Component,
-  classProps,
-  rowProps,
-  column,
-  columnIndex,
-  rowIndex,
-  grid
-}) {
+function BodyCell(_ref) {
+  let {
+    component: Component,
+    classProps,
+    rowProps,
+    column,
+    columnIndex,
+    rowIndex,
+    grid
+  } = _ref;
+
   const {
     rowData,
     rowKey,
@@ -69,11 +77,11 @@ function BodyCell({
     value: v
   });
 
-  const value = rowData[`_${evaluatedProperty}`] || rowData[evaluatedProperty];
+  const value = rowData["_".concat(evaluatedProperty)] || rowData[evaluatedProperty];
   const transformed = evaluateTransforms(transforms, value, extraParameters);
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     ref: ref,
-    "data-testid": `column-${property}`,
+    "data-testid": "column-".concat(property),
     tabIndex: -1,
     classProps: classProps
   }, props), cell && cell.props), transformed), {}, {

package/esm/components/BodyList.js

@@ -1,6 +1,13 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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 React from 'react';
 import NoResults from './NoResults.js';
 import { jsx } from 'react/jsx-runtime';

package/esm/components/ColumnVisibilityMenuOption.js

@@ -1,9 +1,15 @@
-function getColumnVisibilityMenuOption({
-  columns,
-  onColumnVisibilityChange,
-  searchable,
-  height
-}) {
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+function getColumnVisibilityMenuOption(_ref) {
+  let {
+    columns,
+    onColumnVisibilityChange,
+    searchable,
+    height
+  } = _ref;
   const {
     items,
     active

package/esm/components/ColumnsOptionsMenuSection.js

@@ -1,36 +1,43 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import 'react';
 import { Menu } from '@elliemae/ds-menu';
 
-const ColumnsOptionsMenuSection = ({
-  columns,
-  onColumnVisibilityChange,
-  searchable = false,
-  height // eslint-disable-next-line react/display-name
+const ColumnsOptionsMenuSection = _ref => {
+  let {
+    columns,
+    onColumnVisibilityChange,
+    searchable = false,
+    height // eslint-disable-next-line react/display-name
 
-}) => () => {
-  const {
-    items,
-    active
-  } = columns.reduce((result, column, index) => ({
-    items: [...result.items, {
-      id: column.property,
-      label: column.label,
-      checked: column.visible,
-      onClick: () => onColumnVisibilityChange(column, index)
-    }],
-    active: typeof column.visible === 'undefined' || column.visible ? [...result.active, column.property] : result.active
-  }), {
-    items: [],
-    active: []
-  });
-  return /*#__PURE__*/_jsx(Menu.SelectionGroup, {
-    active: active,
-    height: height,
-    items: items,
-    multi: true,
-    searchable: searchable
-  });
+  } = _ref;
+  return () => {
+    const {
+      items,
+      active
+    } = columns.reduce((result, column, index) => ({
+      items: [...result.items, {
+        id: column.property,
+        label: column.label,
+        checked: column.visible,
+        onClick: () => onColumnVisibilityChange(column, index)
+      }],
+      active: typeof column.visible === 'undefined' || column.visible ? [...result.active, column.property] : result.active
+    }), {
+      items: [],
+      active: []
+    });
+    return /*#__PURE__*/_jsx(Menu.SelectionGroup, {
+      active: active,
+      height: height,
+      items: items,
+      multi: true,
+      searchable: searchable
+    });
+  };
 };
 
 export { ColumnsOptionsMenuSection as default };

package/esm/components/EmptyState.js

@@ -1,9 +1,9 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import { Grid } from '@elliemae/ds-basic/Grid';
-import WarningTriangle from '@elliemae/ds-icons/WarningTriangle';
+import { Grid } from '@elliemae/ds-grid';
+import { WarningTriangle } from '@elliemae/ds-icons';
 import { toMobile, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 import styled from 'styled-components';
 
 var _Icon;
@@ -22,17 +22,20 @@ const SecondaryMessage = /*#__PURE__*/styled.p.withConfig({
 const Button = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-1ddwbs7-4"
 })(["margin-top:", ";justify-self:center;width:fit-content;"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m));
-const EmptyState = ({
-  primaryMessage = 'No Results Found',
-  secondaryMessage,
-  buttonLabel,
-  onButtonClick = () => {}
-}) => /*#__PURE__*/_jsx(EmptyStateWrapper, {}, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
-  size: "xxl"
-})), primaryMessage && /*#__PURE__*/_jsx(PrimaryMessage, {}, void 0, primaryMessage), secondaryMessage && /*#__PURE__*/_jsx(SecondaryMessage, {}, void 0, secondaryMessage), buttonLabel && /*#__PURE__*/_jsx(Button, {
-  buttonType: "secondary",
-  labelText: buttonLabel,
-  onClick: onButtonClick
-}));
+const EmptyState = _ref => {
+  let {
+    primaryMessage = 'No Results Found',
+    secondaryMessage,
+    buttonLabel,
+    onButtonClick = () => {}
+  } = _ref;
+  return /*#__PURE__*/_jsx(EmptyStateWrapper, {}, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
+    size: "xxl"
+  })), primaryMessage && /*#__PURE__*/_jsx(PrimaryMessage, {}, void 0, primaryMessage), secondaryMessage && /*#__PURE__*/_jsx(SecondaryMessage, {}, void 0, secondaryMessage), buttonLabel && /*#__PURE__*/_jsx(Button, {
+    buttonType: "secondary",
+    labelText: buttonLabel,
+    onClick: onButtonClick
+  }));
+};
 
 export { EmptyState };

package/esm/components/HeaderCell.js

@@ -1,21 +1,27 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import 'react';
 import { evaluateTransforms, evaluateFormatters } from '@elliemae/ds-shared/createDataInstance/utils';
-import DSTruncatedTooltipText from '@elliemae/ds-basic/TruncatedTooltipText';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
 import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function HeaderCell({
-  column,
-  columnIndex,
-  component: Component,
-  classProps,
-  grid
-}) {
+function HeaderCell(_ref) {
+  let {
+    column,
+    columnIndex,
+    component: Component,
+    classProps,
+    grid
+  } = _ref;
   const {
     property,
     header = {},
@@ -50,7 +56,7 @@ function HeaderCell({
     classProps: classProps
   }, props), header && header.props), transformedProps), {}, {
     children: transformedProps.children || formattedValue
-  }), `${evaluatedProperty}-header`);
+  }), "".concat(evaluatedProperty, "-header"));
 }
 
 export { HeaderCell as default };

package/esm/components/List.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { jsx } from 'react/jsx-runtime';

package/esm/components/ListItem.js

@@ -1,4 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.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 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/esm/components/NoResults.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';

package/esm/components/RowsLoader.js

@@ -1,11 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSSpinner from '@elliemae/ds-basic/Spinner';
+import DSSpinner from '@elliemae/ds-spinner';
 import { SpinnerContainer } from './renderers/defaultClassedRenderers.js';
 
-function RowsLoader({
-  size = 'm'
-}) {
+function RowsLoader(_ref) {
+  let {
+    size = 'm'
+  } = _ref;
   return /*#__PURE__*/_jsx(SpinnerContainer, {}, void 0, /*#__PURE__*/_jsx(DSSpinner, {
     size: size
   }));

package/esm/components/Table.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useEffect, useCallback } from 'react';

package/esm/components/TableBody.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React, { useContext } from 'react';

package/esm/components/TableHeader.js

@@ -1,3 +1,8 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useContext } from 'react';
 import { TableContext } from './tableContext.js';

package/esm/components/footer/addOptionalFooterComponents.js

@@ -3,10 +3,11 @@ import 'react';
 import { Pagination } from '../../plugins/pagination/components/Pagination.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-const addOptionalFooterComponents = ({
-  grid,
-  rows
-}) => {
+const addOptionalFooterComponents = _ref => {
+  let {
+    grid,
+    rows
+  } = _ref;
   const {
     props: {
       maxPerPage,

package/esm/components/header/PrimaryControls.js

@@ -1,24 +1,30 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSSearchBox from '@elliemae/ds-basic/form/SearchBox';
+import { DSSearchBox } from '@elliemae/ds-form';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 
 const blockName = 'data-grid';
 const Container = aggregatedClasses('div')(blockName, 'controls');
 const SearchContainer = aggregatedClasses('div')(blockName, 'search-container');
 
-const PrimaryControls = ({
-  onAddFilter = () => null
-}) => /*#__PURE__*/_jsx(Container, {}, void 0, /*#__PURE__*/_jsx(SearchContainer, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
-  onSearch: ({
-    property,
-    value
-  }) => onAddFilter({
-    filterId: property,
-    label: 'All',
-    value
-  }),
-  placeholder: "Search all"
-})));
+const PrimaryControls = _ref => {
+  let {
+    onAddFilter = () => null
+  } = _ref;
+  return /*#__PURE__*/_jsx(Container, {}, void 0, /*#__PURE__*/_jsx(SearchContainer, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
+    onSearch: _ref2 => {
+      let {
+        property,
+        value
+      } = _ref2;
+      return onAddFilter({
+        filterId: property,
+        label: 'All',
+        value
+      });
+    },
+    placeholder: "Search all"
+  })));
+};
 
 export { PrimaryControls as default };

package/esm/components/header/addOptionalHeaderComponents.js

@@ -3,9 +3,10 @@ import 'react';
 import DSFilterBar from '@elliemae/ds-filterbar';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-const addOptionalHeaderComponents = ({
-  grid
-}) => {
+const addOptionalHeaderComponents = _ref => {
+  let {
+    grid
+  } = _ref;
   const {
     props: {
       showFilterBar,

package/esm/components/renderers/defaultClassedRenderers.js

@@ -1,34 +1,46 @@
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { dataGridBlockName, headerBlockName, bodyBlockName } from '../../blockNames.js';
 
-const NoResultsContainer = aggregatedClasses('div')(`${dataGridBlockName}-no-results`);
-const SpinnerContainer = aggregatedClasses('div')(`${dataGridBlockName}-spinner`);
-const DatagridWrapper = aggregatedClasses('div')(`${dataGridBlockName}-wrapper`, null, ({
-  fluidHeight
-}) => ({
-  fluid: fluidHeight
-}));
+const NoResultsContainer = aggregatedClasses('div')("".concat(dataGridBlockName, "-no-results"));
+const SpinnerContainer = aggregatedClasses('div')("".concat(dataGridBlockName, "-spinner"));
+const DatagridWrapper = aggregatedClasses('div')("".concat(dataGridBlockName, "-wrapper"), null, _ref => {
+  let {
+    fluidHeight
+  } = _ref;
+  return {
+    fluid: fluidHeight
+  };
+});
 const TableWrapper = aggregatedClasses('div')(dataGridBlockName);
 const HeaderWrapper = aggregatedClasses('div')(headerBlockName);
 const HeaderRow = aggregatedClasses('div')(headerBlockName, 'row');
-const HeaderCell = aggregatedClasses('div')(headerBlockName, 'cell', ({
-  wrapText
-}) => ({
-  wrapText
-}));
-const BodyWrapper = aggregatedClasses('div')(bodyBlockName, null, ({
-  grouped
-}) => ({
-  'ie-flex-basis-auto': true,
-  'is-grouped': grouped
-}));
+const HeaderCell = aggregatedClasses('div')(headerBlockName, 'cell', _ref2 => {
+  let {
+    wrapText
+  } = _ref2;
+  return {
+    wrapText
+  };
+});
+const BodyWrapper = aggregatedClasses('div')(bodyBlockName, null, _ref3 => {
+  let {
+    grouped
+  } = _ref3;
+  return {
+    'ie-flex-basis-auto': true,
+    'is-grouped': grouped
+  };
+});
 const BodyRow = aggregatedClasses('div', {
   'data-testid': 'datagrid-row'
 })(bodyBlockName, 'row');
-const BodyCell = aggregatedClasses('div')(bodyBlockName, 'cell', ({
-  wrapText
-}) => ({
-  wrapText
-}));
+const BodyCell = aggregatedClasses('div')(bodyBlockName, 'cell', _ref4 => {
+  let {
+    wrapText
+  } = _ref4;
+  return {
+    wrapText
+  };
+});
 
 export { BodyCell, BodyRow, BodyWrapper, DatagridWrapper, HeaderCell, HeaderRow, HeaderWrapper, NoResultsContainer, SpinnerContainer, TableWrapper };

package/esm/plugins/body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js

@@ -1,8 +1,13 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useMemo, useRef, useEffect } from 'react';
-import { mergeRefs } from '@elliemae/ds-utilities/system';
+import { mergeRefs } from '@elliemae/ds-utilities';
 import { ScrollSync, ScrollSyncPane } from '@elliemae/ds-shared/ScrollSync';
 import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
 import { getScrollbarWidth } from '../../utilities/getScrollbarSize.js';
@@ -15,13 +20,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 getScrollbarWidth(2);
 
-const HeaderSyncHoc = Component => props => /*#__PURE__*/_jsx(ScrollSyncPane, {}, void 0, ({
-  registerPane
-}) => /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
-  innerRef: mergeRefs(props.innerRef, registerPane)
-})));
+const HeaderSyncHoc = Component => props => /*#__PURE__*/_jsx(ScrollSyncPane, {}, void 0, _ref => {
+  let {
+    registerPane
+  } = _ref;
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+    innerRef: mergeRefs(props.innerRef, registerPane)
+  }));
+});
 
-const BodySyncHoc = (Component, notPaginated, grid) => _ref => {
+const BodySyncHoc = (Component, notPaginated, grid) => _ref2 => {
   let {
     children,
     classProps,
@@ -44,14 +52,14 @@ const BodySyncHoc = (Component, notPaginated, grid) => _ref => {
     useDragHandle,
     className,
     listComponent
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   const t = useRef();
 
   const repositionToolbarBasedOnBodyScrollPosition = SCROLLBAR_WIDTH => () => {
-    grid.refs.body.current.style.setProperty('--toolbar-scroll', `${grid.refs.body.current.offsetWidth + grid.refs.body.current.scrollLeft - 15}px`);
-    grid.refs.body.current.style.setProperty('--toolbar-scroll-paginated', `${grid.refs.body.current.offsetWidth + grid.refs.body.current.scrollLeft - 19}px`);
+    grid.refs.body.current.style.setProperty('--toolbar-scroll', "".concat(grid.refs.body.current.offsetWidth + grid.refs.body.current.scrollLeft - 15, "px"));
+    grid.refs.body.current.style.setProperty('--toolbar-scroll-paginated', "".concat(grid.refs.body.current.offsetWidth + grid.refs.body.current.scrollLeft - 19, "px"));
   };
 
   useEffect(() => {
@@ -65,39 +73,42 @@ const BodySyncHoc = (Component, notPaginated, grid) => _ref => {
   });
   return /*#__PURE__*/_jsx(ScrollSyncPane, {
     notPaginated: notPaginated
-  }, void 0, ({
-    registerPane
-  }) => /*#__PURE__*/jsx(Component, _objectSpread({
-    ref: t,
-    classProps: classProps,
-    className: className,
-    listComponent: listComponent,
-    columns: columns,
-    getContainer: getContainer,
-    helperClass: helperClass,
-    innerBodyRef: innerBodyRef // innerRef={innerRef}
-    ,
-    isPlaceholderActive: isPlaceholderActive,
-    listProps: listProps,
-    lockAxis: lockAxis,
-    noResultsPlaceholder: noResultsPlaceholder,
-    numRowsVisible: numRowsVisible,
-    onSortEnd: onSortEnd,
-    onSortOver: onSortOver,
-    onSortStart: onSortStart,
-    rowKey: rowKey,
-    rowRenderer: rowRenderer,
-    rows: rows,
-    useDragHandle: useDragHandle,
-    innerRef: mergeRefs(innerRef, registerPane, t)
-  }, rest)));
+  }, void 0, _ref3 => {
+    let {
+      registerPane
+    } = _ref3;
+    return /*#__PURE__*/jsx(Component, _objectSpread({
+      ref: t,
+      classProps: classProps,
+      className: className,
+      listComponent: listComponent,
+      columns: columns,
+      getContainer: getContainer,
+      helperClass: helperClass,
+      innerBodyRef: innerBodyRef // innerRef={innerRef}
+      ,
+      isPlaceholderActive: isPlaceholderActive,
+      listProps: listProps,
+      lockAxis: lockAxis,
+      noResultsPlaceholder: noResultsPlaceholder,
+      numRowsVisible: numRowsVisible,
+      onSortEnd: onSortEnd,
+      onSortOver: onSortOver,
+      onSortStart: onSortStart,
+      rowKey: rowKey,
+      rowRenderer: rowRenderer,
+      rows: rows,
+      useDragHandle: useDragHandle,
+      innerRef: mergeRefs(innerRef, registerPane, t)
+    }, rest));
+  });
 };
 
 const TableSyncHoc = Component => props => /*#__PURE__*/_jsx(ScrollSync, {
   proportional: false,
   onScroll: e => {
-    e.target.style.setProperty('--toolbar-scroll', `${e.target.offsetWidth + e.target.scrollLeft - 15}px`);
-    e.target.style.setProperty('--toolbar-scroll-paginated', `${e.target.offsetWidth + e.target.scrollLeft - 19}px`);
+    e.target.style.setProperty('--toolbar-scroll', "".concat(e.target.offsetWidth + e.target.scrollLeft - 15, "px"));
+    e.target.style.setProperty('--toolbar-scroll-paginated', "".concat(e.target.offsetWidth + e.target.scrollLeft - 19, "px"));
   }
 }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));