@elliemae/ds-datagrids 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/plugins/sortable/SortablePlugin.js

@@ -0,0 +1,82 @@
+import * as sortabular from 'sortabular';
+import { compose, isEmpty, orderBy } from '@elliemae/ds-utilities';
+import { appendHeaderFormatter, mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import sortHeaderFormatter from './sortHeaderFormatter.js';
+import { useSortableState } from './useSortableState.js';
+import { sorterGroups, sorter } from './sorter.js';
+
+const decorateColumn = (column, grid) => {
+  const {
+    props: {
+      isSortableColumnActive = col => col.sortable,
+      groupedRows
+    }
+  } = grid;
+  if (groupedRows) return column;
+  if (!isSortableColumnActive(column)) return column;
+  const formatter = sortHeaderFormatter(sortabular.sort({
+    getSortingColumns: () => grid.getState().sortingColumns || [],
+    onSort: grid.actions.sort,
+    strategy: sortabular.strategies.byProperty
+  }), grid);
+  return compose(appendHeaderFormatter(formatter), mergeClassNameToColumnHeader('with-sortable'))(column);
+};
+
+const composeRows = (rows, grid) => {
+  const {
+    state: {
+      sortingColumns
+    },
+    props: {
+      isDataSorted,
+      groupedRows,
+      groupedBy,
+      sortEmptyLast
+    },
+    rows: rowsData,
+    composedRows,
+    decoratedColumns
+  } = grid.getInstance();
+  const sortingConfig = {
+    columns: decoratedColumns,
+    sortingColumns: !isEmpty(sortingColumns) && sortingColumns,
+    sort: orderBy,
+    emptyLast: sortEmptyLast
+  }; // TODO: 1572 FIX
+
+  if (groupedRows && !groupedBy) {
+    return !isDataSorted ? sorterGroups(sortingConfig)(composedRows, rowsData, groupedBy) : rows;
+  }
+
+  return !isDataSorted ? sorter(sortingConfig)(rows) : rows;
+};
+
+const SortablePlugin = createInstancePlugin('sortable', {
+  registerStateHook: useSortableState,
+  decorateColumn,
+  composeRows,
+
+  registerHotKeys(grid) {
+    return {
+      key: 'ctrl+s',
+      handler: _ref => {
+        let {
+          cellIndex
+        } = _ref;
+        const {
+          actions: {
+            sort
+          },
+          decoratedColumns
+        } = grid.getInstance();
+        const column = decoratedColumns[cellIndex];
+        if (!column) return;
+        sort(column.property);
+      }
+    };
+  }
+
+});
+
+export { SortablePlugin };

package/esm/plugins/sortable/checkIfSortable.js

@@ -0,0 +1,17 @@
+/* eslint-disable no-plusplus */
+
+/* eslint-disable no-loops/no-loops */
+const checkIfSortable = (column, rows) => {
+  for (let index = 0; index < rows.length; index++) {
+    const element = rows[index][column];
+
+    if (!(element === null || element === undefined)) {
+      // PUI-6452
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export { checkIfSortable, checkIfSortable as default };

package/esm/plugins/sortable/index.js

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

package/esm/plugins/sortable/sortHeaderFormatter.js

@@ -0,0 +1,53 @@
+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
+  })) : _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
+    color: iconColor
+  }));
+  return /*#__PURE__*/_jsx(SortHeaderContainer, {
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx("span", {
+    className: "header-value"
+  }, void 0, value), sortState && sortIndicator);
+});
+
+const sortHeaderFormatter = (sortable, grid) => (value, _ref2) => {
+  let {
+    columnIndex,
+    property
+  } = _ref2;
+  const {
+    state: {
+      sortingColumns
+    }
+  } = grid.getInstance();
+  const {
+    onClick,
+    className
+  } = sortable(value, {
+    columnIndex,
+    property
+  });
+  return /*#__PURE__*/_jsx(SortHeader, {
+    className: className,
+    onClick: onClick,
+    sortState: sortingColumns[property] && sortingColumns[property].direction,
+    value: value
+  });
+};
+
+export { sortHeaderFormatter as default };

package/esm/plugins/sortable/sortTree.js

@@ -0,0 +1,26 @@
+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);
+}
+
+export { sortTree as default };

package/esm/plugins/sortable/sorter.js

@@ -0,0 +1,166 @@
+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];
+      };
+    }
+
+    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);
+  };
+};
+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;
+  };
+};
+
+export { sorter, sorterGroups };

package/esm/plugins/sortable/useSortableState.js

@@ -0,0 +1,71 @@
+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 [sortingColumns, setSortingColumns] = useDerivedStateFromProps(sortingColumnsProp);
+
+  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 => {
+        const nextSortingColumns = sortabular.byColumn({
+          sortingColumns: prevSortingColumns,
+          sortingOrder: {
+            FIRST: 'asc',
+            asc: 'desc',
+            desc: 'asc'
+          },
+          selectedColumn
+        });
+        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
+    },
+    actions: {
+      sort: handleSort
+    }
+  };
+}
+
+export { useSortableState };

package/esm/plugins/toolbar/RowRenderer.js

@@ -0,0 +1,88 @@
+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 ref = useRef();
+    const {
+      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 [hasVerticalScrollBar, setHasVerticalScrollBar] = useState(refs.body.current && refs.body.current.offsetWidth > refs.body.current.clientWidth);
+    useEffect(() => {
+      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'
+      }, [shouldOmit]));
+    }, [style, isRowDragging]);
+    return /*#__PURE__*/_jsx("div", {
+      className: "row-renderer-fixed-height",
+      style: {
+        height: !wrapText ? RowSizes[gridInstance.props.rowSize] : 'auto',
+        position: style ? 'auto' : 'relative' // top: isDragging ? rowStyle.top - RowSizes[gridInstance.props.rowSize] : 'auto',
+
+      }
+    }, void 0, /*#__PURE__*/jsx(Row, _objectSpread(_objectSpread({
+      ref: ref
+    }, props), {}, {
+      style: rowStyle
+    })), 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
+    })));
+  };
+
+  return Wrapped;
+};
+
+export { RowRenderer };

package/esm/plugins/toolbar/ToolbarPlugin.js

@@ -0,0 +1,33 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import { RowRenderer } from './RowRenderer.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const decorateColumns = columns => {
+  const lastColumn = columns[columns.length - 1];
+  return [...columns.slice(0, -1), appendCellFormatter([value => /*#__PURE__*/jsxs(Fragment, {
+    children: [value, /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 34,
+        maxWidth: 34,
+        overflow: 'hidden'
+      }
+    })]
+  })], lastColumn, 'fixedFormatters')];
+};
+
+const decorateRenderers = (renderers, grid) => {
+  const Row = renderers.body.row;
+  renderers.body.row = RowRenderer(Row, grid);
+  return renderers;
+};
+
+const ToolbarPlugin = createInstancePlugin('toolbar', {
+  decorateRenderers,
+  decorateColumns
+});
+
+export { ToolbarPlugin };

package/esm/plugins/toolbar/ToolbarTrigger.js

@@ -0,0 +1,74 @@
+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 { useState } from 'react';
+import styled from 'styled-components';
+import DSButton from '@elliemae/ds-button';
+import { MoreOptionsVert } from '@elliemae/ds-icons';
+
+var _MoreOptionsVert;
+
+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 ToolbarBtns = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pm75g5-0"
+})(["& > .em-ds-toolbar{box-shadow:none;}"]);
+const ToolbarWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pm75g5-1"
+})(["display:flex;align-items:center;height:", ";margin-left:-4px;margin-right:", ";padding-right:4px;pointer-events:all;background:white;", " &:hover{box-shadow:-1px 0px 1px 0px rgba(0,0,0,0.2),1px 0px 2px 0px rgba(0,0,0,0.2);& > .toolbar-trigger{border:none;}}"], props => props.rowSize === 'normal' ? '36px' : '28px', props => props.hasScrollBar ? '0' : '-10px', props => props.showShadow ? "box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2),\n  1px 0px 2px 0px rgba(0, 0, 0, 0.2);" : '');
+const ToolbarPosition = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pm75g5-2"
+})(["position:absolute;z-index:10;display:flex;justify-content:flex-end;align-items:center;width:0;pointer-events:none;top:0;height:", ";margin-top:", ";"], props => props.rowRef.current ? "".concat(props.rowRef.current.offsetHeight, "px") : '36px', props => props.rowSize === 'normal' ? '0' : '0'); // eslint-disable-next-line react/prop-types
+
+const ToolbarTrigger = _ref => {
+  let {
+    grid,
+    rowData,
+    hasScrollBar,
+    rowRef
+  } = _ref;
+  const {
+    props: {
+      renderToolbar,
+      rowSize
+    } // eslint-disable-next-line react/prop-types
+
+  } = grid.getInstance();
+  const [show, setShow] = useState(false);
+  /* eslint-disable indent */
+
+  const toolbar = show ? renderToolbar(_objectSpread(_objectSpread({}, rowData), {}, {
+    size: rowSize,
+    isToolbarShown: show,
+    setToolbarShow: setShow
+  })) : null;
+  /* eslint-enable indent */
+
+  return /*#__PURE__*/_jsx(ToolbarPosition, {
+    rowSize: rowSize,
+    rowRef: rowRef
+  }, void 0, /*#__PURE__*/_jsx(ToolbarWrapper, {
+    onMouseEnter: () => setShow(true),
+    onMouseLeave: () => setShow(false),
+    showShadow: show,
+    rowSize: rowSize,
+    hasScrollBar: hasScrollBar
+  }, void 0, show && /*#__PURE__*/_jsx(ToolbarBtns, {}, void 0, toolbar), /*#__PURE__*/_jsx(DSButton, {
+    buttonType: "text",
+    className: "toolbar-trigger",
+    "data-testid": "toolbar-trigger",
+    icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {})) // eslint-disable-next-line react/prop-types
+    ,
+    index: rowData.index,
+    onClick: () => setShow(true),
+    tabIndex: -1
+  })));
+};
+
+export { ToolbarTrigger, ToolbarTrigger as default };

package/esm/plugins/toolbar/index.js

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

package/esm/plugins/virtualization/AutoHeightList.js

@@ -0,0 +1,52 @@
+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 { forwardRef, useRef } from 'react';
+import { FixedSizeList } from 'react-window';
+import { useWindowScrollerList, mergeRefs, cx } from '@elliemae/ds-utilities';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["itemCount", "className", "innerRef", "itemData", "itemKey", "itemSize", "outerRef", "component"];
+
+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 AutoHeightList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    itemCount,
+    className,
+    innerRef,
+    itemData,
+    itemKey,
+    itemSize,
+    outerRef,
+    component: ListComponent = FixedSizeList
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const listRef = useRef();
+  const outerListRef = useRef();
+  useWindowScrollerList({
+    listInstance: listRef,
+    outerListRef
+  });
+  return /*#__PURE__*/jsx(ListComponent, _objectSpread(_objectSpread({}, otherProps), {}, {
+    ref: mergeRefs(ref, listRef),
+    className: cx(className, 'window-scroller-override'),
+    height: window.innerHeight,
+    innerRef: innerRef,
+    itemCount: itemCount,
+    itemData: itemData,
+    itemKey: itemKey,
+    itemSize: itemSize,
+    outerRef: mergeRefs(outerListRef, outerRef),
+    overscanCount: 10,
+    useIsScrolling: true
+  }));
+});
+
+export { AutoHeightList as default };