@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/plugins/filterable/filtering-helper/filterRowsByQuery.js

@@ -0,0 +1,65 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.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.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { isFunction } from '@elliemae/ds-utilities';
+import strategiesOperators from './strategiesOperators.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; }
+
+const getRuleStrategyOperator = rule => rule.strategy || strategiesOperators(rule.operator);
+
+const executeFilterStrategy = (rule, row) => {
+  const {
+    value,
+    field,
+    transform,
+    transformRowValue
+  } = rule;
+  if (field === 'all') return Object.values(row).some(colValue => strategiesOperators('contains')(colValue, value));
+  const rowValue = row[field];
+  const transformedValue = isFunction(transform) ? transform(value) : value;
+  const transformedRowValue = isFunction(transformRowValue) ? transformRowValue(rowValue) : rowValue;
+  const filterStrategy = getRuleStrategyOperator(rule);
+  return filterStrategy(transformedRowValue, transformedValue);
+};
+
+const filterByRules = function (rules) {
+  let condition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'AND';
+  return row => condition === 'AND' ? rules.reduce((isFiltered, rule) => rule.rules && rule.rules.length ? isFiltered && filterByRules(rule.rules, rule.condition)(row) : isFiltered && executeFilterStrategy(rule, row), true) : rules.some(rule => rule.rules && rule.rules.length ? filterByRules(rule.rules, rule.condition)(row) : executeFilterStrategy(rule, row));
+};
+
+function filterRowsByQueryGroup(rows, query, composedRows) {
+  if (query && query.rules && query.rules.length === 0) return rows;
+  const newRows = [];
+  const parentMap = {};
+  composedRows.forEach(parentRow => {
+    if (parentRow.isGroup) {
+      newRows.push(_objectSpread(_objectSpread({}, parentRow), {}, {
+        _filtered: true
+      }));
+    } else if (!parentRow.isGroup && filterByRules(query.rules, query.condition)(parentRow.data)) {
+      newRows.push(_objectSpread(_objectSpread({}, parentRow), {}, {
+        _filtered: true
+      }));
+      parentMap[parentRow.parentNode.id] = true;
+    }
+  });
+  return newRows.filter(r => {
+    if (r.isGroup && !parentMap[r.id]) return false;
+    return true;
+  });
+}
+function filterRowsByQuery(rows, query) {
+  return rows.filter(filterByRules(query.rules, query.condition));
+}
+
+export { filterRowsByQuery as default, filterRowsByQueryGroup };

package/esm/plugins/filterable/filtering-helper/strategiesOperators.js

@@ -0,0 +1,17 @@
+import compare from 'comparejs';
+
+var strategiesOperators = (op => ({
+  range: (rowValue, _ref) => {
+    let {
+      start,
+      end
+    } = _ref;
+    return start <= rowValue && end >= rowValue;
+  },
+  equal: (value1, value2) => compare.id(value1, value2),
+  greaterThan: compare.gt,
+  lessThan: compare.lt,
+  contains: (rowValue, value) => String(rowValue).toLowerCase().indexOf(String(value).toLowerCase()) !== -1
+})[op] || compare.id);
+
+export { strategiesOperators as default };

package/esm/plugins/filterable/helper.js

@@ -0,0 +1,106 @@
+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.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { uniqBy, property, get, isFunction, groupBy } from '@elliemae/ds-utilities';
+
+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 getFilterLabel = (column, value) => column.filterLabels ? column.filterLabels[value] || value : value;
+const getFilterLabels = (column, rows) => uniqBy(rows, property(column.searchBy || column.property)).map(row => {
+  const value = get(row, column.searchBy || column.property);
+  if (value === undefined) return {};
+  const rowColumnValue = String(get(row, column.searchBy || column.property));
+
+  if (isFunction(column.valueTransformation)) {
+    const nextValue = column.valueTransformation(rowColumnValue);
+    return {
+      id: nextValue,
+      label: nextValue
+    };
+  }
+
+  const label = getFilterLabel(column, rowColumnValue);
+  return {
+    id: rowColumnValue || label,
+    label
+  };
+}).filter(row => row.id).filter(row => {
+  if (row.id.startsWith) return !row.id.startsWith('grouped-by');
+  return true;
+});
+const getFilterLabelsGroup = (column, rows) => {
+  let flat = [];
+  rows.forEach(r => {
+    if (r.children) {
+      flat = [...flat, ...r.children];
+    }
+  });
+  return getFilterLabels(column, flat);
+};
+function getFilterValue(filter, column) {
+  const {
+    value
+  } = filter;
+  if (!column) return value;
+  const {
+    filterOptions,
+    filterLabels
+  } = column;
+
+  if (filterOptions) {
+    const foundOption = column.filterOptions.filter(option => option.id === value)[0];
+    if (foundOption) return foundOption.label;
+    return value;
+  }
+
+  if (filterLabels) {
+    return filterLabels[value];
+  }
+
+  return value;
+}
+function buildFilterArray(newFilter, filters) {
+  // if (newFilter.type && newFilter.type === 'date') return [...filters.slice(1), newFilter]
+  return uniqBy([...filters, newFilter], v => [v.group, v.value].join());
+}
+const groupFilters = filters => filters.filter(filter => !filter.fixed);
+
+function parseFilterToRule(filter) {
+  return _objectSpread(_objectSpread({}, filter), {}, {
+    value: filter.filterParams || filter.value,
+    field: filter.group
+  });
+}
+
+function parseFiltersToQuery(filters) {
+  const groupedFilters = groupBy(groupFilters(filters), filter => filter.group);
+  return Object.keys(groupedFilters).reduce((queryResult, field) => {
+    const filter = groupedFilters[field];
+
+    if (Array.isArray(filter) && filter.length > 1) {
+      // create query group with 'OR' condition
+      queryResult.rules.push({
+        condition: 'OR',
+        rules: filter.map(parseFilterToRule)
+      });
+    } else {
+      queryResult.rules.push(parseFilterToRule(filter[0]));
+    }
+
+    return queryResult;
+  }, {
+    condition: 'AND',
+    rules: []
+  });
+}
+
+export { buildFilterArray, getFilterLabel, getFilterLabels, getFilterLabelsGroup, getFilterValue, groupFilters, parseFiltersToQuery };

package/esm/plugins/filterable/index.js

@@ -0,0 +1 @@
+export { FilterablePlugin } from './FilterablePlugin.js';

package/esm/plugins/filterable/useFilterableState.js

@@ -0,0 +1,109 @@
+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 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect, useMemo } from 'react';
+import { v4 } from 'uuid';
+import { parseFiltersToQuery, getFilterValue, buildFilterArray } from './helper.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; }
+
+const noop = () => null;
+
+function useFilterableState(grid) {
+  const {
+    filters: filtersProp,
+    onAddFilter = noop,
+    onRemoveFilter = noop,
+    onRemoveAllFilters = noop,
+    onFiltersChange = noop
+  } = grid.props;
+  const [filters, setFilters] = useState(filtersProp || []);
+  useEffect(() => {
+    if (filtersProp && filtersProp !== filters) {
+      setFilters(filtersProp);
+    }
+  }, [filtersProp]);
+  const queryFromFilters = useMemo(() => parseFiltersToQuery(filters || []), [filters]);
+
+  const handleFiltersChange = nextFilters => {
+    const {
+      refs: {
+        body
+      }
+    } = grid.getInstance();
+    body.current.scrollTop = 0;
+    setFilters(nextFilters);
+    grid.observeRows(rows => onFiltersChange(nextFilters, queryFromFilters, rows));
+  };
+
+  const addFilter = (filter, column) => {
+    let hasBeenCalled = false;
+
+    const trimmedFilter = _objectSpread(_objectSpread({}, filter), {}, {
+      value: String(filter.value).trim()
+    });
+    /* eslint-disable indent */
+
+
+    const parsedFilter = !filter.group ? _objectSpread(_objectSpread({}, trimmedFilter), {}, {
+      value: String(filter.value).trim(),
+      group: 'all',
+      label: 'All',
+      id: v4()
+    }) : _objectSpread(_objectSpread({}, trimmedFilter), {}, {
+      value: String(filter.value).trim(),
+      id: v4(),
+      label: column && column.filterLabel || trimmedFilter.label,
+      originalProperty: column.originalProperty || column.property,
+      customValue: getFilterValue(trimmedFilter, column)
+    });
+    /* eslint-enable indent */
+
+    setFilters(prevFilters => {
+      // This was setted for an issue that was recalling this function on the handleFiltersChange
+      if (hasBeenCalled) {
+        return;
+      }
+
+      hasBeenCalled = true;
+      const nextFilters = buildFilterArray(parsedFilter, prevFilters);
+      handleFiltersChange(nextFilters);
+      onAddFilter(parsedFilter, nextFilters, column);
+    });
+  };
+
+  const removeFilter = _ref => {
+    let {
+      group,
+      pill,
+      nextFilters
+    } = _ref;
+    onRemoveFilter(group, pill.value, nextFilters);
+    handleFiltersChange(nextFilters);
+  };
+
+  const removeAllFilters = () => {
+    onRemoveAllFilters();
+    handleFiltersChange([]);
+  };
+
+  return {
+    actions: {
+      addFilter,
+      removeFilter,
+      removeAllFilters
+    },
+    state: {
+      query: queryFromFilters,
+      filters
+    }
+  };
+}
+
+export { useFilterableState };

package/esm/plugins/grouping-by/GroupingByPlugin.js

@@ -0,0 +1,32 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { groupBy } from 'lodash';
+
+const groupedByData = (groupedBy, composedRows) => {
+  const grouped = groupBy(composedRows, groupedBy);
+  return Object.keys(grouped).map((c, key) => ({
+    id: "grouped-by-".concat(groupedBy, "-").concat(key),
+    key: groupedBy,
+    value: c,
+    children: grouped[c],
+    _isGroup: true,
+    isGroup: true
+  }));
+};
+
+const GroupingByPlugin = createInstancePlugin('groupedByRows', {
+  decorateGrid(grid) {
+    const {
+      composedRows,
+      props: {
+        groupedBy
+      }
+    } = grid.getInstance();
+    grid.composedRows = groupedBy ? groupedByData(groupedBy, composedRows) : composedRows;
+    return grid;
+  }
+
+});
+
+export { GroupingByPlugin };

package/esm/plugins/grouping-grid/GroupingPlugin.js

@@ -0,0 +1,138 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { useMemo } from 'react';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { VariableSizeList } from 'react-window';
+import { walkTreeStrategy } from './walkStrategy.js';
+import { RowSizes } from '../../rowSizes.js';
+import { dataGridBlockName } from '../../blockNames.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const _excluded = ["isExpanded"];
+
+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 blockName = "".concat(dataGridBlockName, "-group-row-header");
+const GroupRowHeaderWrapper = aggregatedClasses('div')(blockName);
+const GroupRowHeaderTitle = aggregatedClasses('div')(blockName, 'title');
+const GroupingPlugin = createInstancePlugin('groupedRows', {
+  decorateGrid(grid) {
+    const {
+      columns,
+      composedRows
+    } = grid.getInstance(); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+    const detailColumns = useMemo(() => columns.map(column => _objectSpread(_objectSpread({}, column), {}, {
+      customRenderer: column.detailCustomRenderer
+    })).filter(col => !col.expandableColumn), [columns]);
+    const flatRows = [];
+    walkTreeStrategy({
+      data: composedRows,
+      cb: n => flatRows.push(n)
+    });
+    return {
+      detailColumns,
+      composedRows: flatRows
+    };
+  },
+
+  getBodyProps(bodyProps, grid) {
+    const {
+      composedRows: rows
+    } = grid.getInstance(); // implementation of expandable row single column with aggregation
+
+    const getItemSize = index => {
+      const rowData = rows[index];
+      if (!rowData) return RowSizes.normal;
+      return rowData._isGroup || rowData.isGroup ? RowSizes.compact : RowSizes.normal;
+    }; // eslint-disable-next-line no-unused-vars
+
+
+    const getListHeight = () => {
+      const size = rows.reduce((h, r) => {
+        const rowHeight = r._isGroup || r.isGroup ? RowSizes.compact : RowSizes.normal;
+        return h + rowHeight;
+      }, 0);
+      return size;
+    };
+
+    return _objectSpread(_objectSpread({}, bodyProps), {}, {
+      getListHeight,
+      listComponent: VariableSizeList,
+      listProps: {
+        itemSize: getItemSize
+      }
+    });
+  },
+
+  composeRows: (rows, grid) => {
+    const {
+      composedRows,
+      props: {
+        rowKey
+      }
+    } = grid.getInstance();
+
+    if (Array.isArray(rows)) {
+      const filterIds = rows.map(r => r.data[rowKey]);
+      return composedRows.filter(c => filterIds.includes(c.data[rowKey])).map(r => _objectSpread(_objectSpread({}, r.data), {}, {
+        children: Array.isArray(r.data.children) ? r.data.children.filter(c => filterIds.includes(c[rowKey])) : r.data.children,
+        _isGroup: r.isGroup
+      })).filter(g => g.children === undefined || g.children.length > 0);
+    }
+
+    return _objectSpread(_objectSpread({}, rows), {}, {
+      allRows: rows.allRows.map(r => _objectSpread(_objectSpread({}, r.data), {}, {
+        _isGroup: r.isGroup
+      })),
+      rows: rows.rows.map(r => _objectSpread(_objectSpread({}, r.data), {}, {
+        _isGroup: r.isGroup
+      }))
+    });
+  },
+
+  decorateRenderers(renderers, grid) {
+    const Row = renderers.body.row; // eslint-disable-next-line react-hooks/rules-of-hooks
+
+    renderers.body.row = useMemo(() => // eslint-disable-next-line react/display-name
+    // eslint-disable-next-line react/prop-types
+    _ref => {
+      let rowProps = _objectWithoutProperties(_ref, _excluded);
+
+      const {
+        composedRows
+      } = grid.getInstance(); // // https://jira.elliemae.io/browse/PUI-1667
+
+      const node = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
+      const {
+        groupedRowsRenderHeader
+      } = grid.props; // eslint-disable-next-line no-underscore-dangle
+
+      if (node && node._isGroup) {
+        return /*#__PURE__*/jsx(Fragment, {
+          children: /*#__PURE__*/jsx(GroupRowHeaderWrapper, _objectSpread(_objectSpread({}, rowProps), {}, {
+            children: /*#__PURE__*/_jsx(GroupRowHeaderTitle, {}, void 0, groupedRowsRenderHeader ? groupedRowsRenderHeader(node) : 'Group')
+          }))
+        });
+      }
+
+      return /*#__PURE__*/jsx(Row, _objectSpread({}, rowProps));
+    }, []);
+    return renderers;
+  }
+
+});
+
+export { GroupingPlugin };

package/esm/plugins/grouping-grid/walkStrategy.js

@@ -0,0 +1,52 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+
+function getPath(parentNode, index, childrenKey) {
+  if (!parentNode) return [index];
+  return [...parentNode.path, childrenKey, index];
+}
+
+function walkTreeStrategy(_ref) {
+  let {
+    data,
+    childrenKey = 'children',
+    level = 0,
+    getId = item => item.id,
+    parentNode,
+    shouldWalkChildren = () => true,
+    cb
+  } = _ref;
+
+  // eslint-disable-next-line no-loops/no-loops,no-plusplus
+  for (let i = 0; i < data.length; i++) {
+    const currLevel = level + 1;
+    const children = data[i][childrenKey];
+    const isGroup = children && !!children.length;
+    const node = {
+      index: i,
+      id: getId(data[i]),
+      data: data[i],
+      path: getPath(parentNode, i, childrenKey),
+      isGroup,
+      nestingLevel: currLevel,
+      parentNode: parentNode || {
+        isGroup: true,
+        data: {
+          children: data
+        }
+      }
+    };
+    cb(node);
+
+    if (shouldWalkChildren(node) && children && children.length) {
+      walkTreeStrategy({
+        data: children,
+        level: currLevel,
+        parentNode: node,
+        shouldWalkChildren,
+        cb
+      });
+    }
+  }
+}
+
+export { walkTreeStrategy };

package/esm/plugins/index.js

@@ -0,0 +1,19 @@
+export { BodyHeaderScrollSyncPlugin } from './body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js';
+export { DndColumnsPlugin } from './column-dnd/DndColumnsPlugin.js';
+export { ColumnSizingPlugin } from './column-sizing/ColumnSizingPlugin.js';
+export { CustomRendererPlugin } from './custom-cell-renderer/CustomRendererPlugin.js';
+export { EditablePlugin } from './editable/EditablePlugin.js';
+export { default as ComboBox } from './editable/EditableComponents/ComboBox.js';
+export { default as TextBox } from './editable/EditableComponents/TextBox.js';
+export { ExpandablePlugin } from './expandable-grid/ExpandablePlugin.js';
+export { default as ExpandableColumn } from './expandable-grid/ExpandableColumn.js';
+export { FilterablePlugin } from './filterable/FilterablePlugin.js';
+export { InfiniteScrollPlugin } from './infinite-scrolling/InfiniteScrollPlugin.js';
+export { PaginationPlugin } from './pagination/PaginationPlugin.js';
+export { ResizablePlugin } from './resizable/ResizablePlugin.js';
+export { DndRowsPlugin } from './row-dnd/DndRowsPlugin.js';
+export { SelectablePlugin } from './selectable/SelectablePlugin.js';
+export { SortablePlugin } from './sortable/SortablePlugin.js';
+export { ToolbarPlugin } from './toolbar/ToolbarPlugin.js';
+export { ExportDataPlugin, getColumnValue, getExportedData, getVisibleRowData } from './export-data/ExportDataPlugin.js';
+export { VirtualizationPlugin } from './virtualization/VirtualizationPlugin.js';

package/esm/plugins/infinite-scrolling/InfiniteScrollPlugin.js

@@ -0,0 +1,114 @@
+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 '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 { useRef, useState, useEffect } from 'react';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+
+const _excluded = ["children"];
+
+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 registerStateHook = grid => {
+  const {
+    props: {
+      getData,
+      onInfiniteScrolling = () => null
+    },
+    actions: {
+      updateRows
+    }
+  } = grid;
+  const loading = useRef(false);
+
+  const addMoreData = function () {
+    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    loading.current = false;
+    updateRows(prevRows => prevRows.concat(data || []));
+  };
+
+  const doLoadData = async currentRows => {
+    loading.current = true;
+    return Promise.resolve(getData(currentRows)).then(addMoreData);
+  };
+
+  const loadMoreData = currentRows => {
+    onInfiniteScrolling(currentRows);
+    if (loading.current || !getData) return;
+    doLoadData(currentRows);
+  };
+
+  return {
+    actions: {
+      loadMoreData
+    }
+  };
+};
+
+const getBodyProps = (_ref, grid) => {
+  let props = _objectWithoutProperties(_ref, _excluded);
+
+  const {
+    loadMoreData
+  } = grid.getInstance().actions;
+  const [bodyNode, setBodyRef] = useState();
+  const prevScroll = useRef();
+  prevScroll.current = 0;
+
+  const handleBodyScroll = (event, s) => {
+    const {
+      target
+    } = event;
+    const {
+      scrollHeight,
+      scrollTop,
+      offsetHeight,
+      scrollLeft
+    } = target;
+    const {
+      composedRows
+    } = grid.getInstance(); // prevent horizontal scroll triggering infinite scrolling callbacks
+
+    if (prevScroll.current !== scrollLeft) {
+      prevScroll.current = scrollLeft;
+      return;
+    } // todo: clean this. Better approach using another component for the infinite scroll
+
+
+    if (bodyNode !== target) return;
+
+    if (scrollTop + offsetHeight >= scrollHeight - 1) {
+      loadMoreData(composedRows);
+    }
+  };
+
+  useEffect(() => {
+    if (bodyNode) {
+      bodyNode.addEventListener('scroll', handleBodyScroll);
+    }
+
+    return () => {
+      if (bodyNode) {
+        bodyNode.removeEventListener('scroll', handleBodyScroll);
+      }
+    };
+  }, [bodyNode]);
+  return _objectSpread(_objectSpread({}, props), {}, {
+    listProps: {
+      outerRef: setBodyRef
+    }
+  });
+};
+
+const InfiniteScrollPlugin = createInstancePlugin('infinite-scroll', {
+  registerStateHook,
+  getBodyProps
+});
+
+export { InfiniteScrollPlugin };

package/esm/plugins/infinite-scrolling/index.js

@@ -0,0 +1 @@
+export { InfiniteScrollPlugin } from './InfiniteScrollPlugin.js';