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

package/esm/plugins/editable/EditablePlugin.js

@@ -0,0 +1,115 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useDerivedStateFromProps, toggleInObject } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { makeEditableConfig, addEditableToCell } from './decorateEditable.js';
+
+const registerStateHook = grid => {
+  const {
+    rowKey = 'id',
+    editingRows: editingRowsProp,
+    onColumnRowEdited,
+    onColumnRowEdit
+  } = grid.props;
+  const [editingRows, setEditingRows] = useDerivedStateFromProps(editingRowsProp || {});
+
+  const activateEdit = editParams => {
+    const {
+      shouldRefocus
+    } = grid.getInstance();
+    const {
+      rowData,
+      columnIndex
+    } = editParams;
+    shouldRefocus.current = {
+      forced: true,
+      value: false
+    };
+    setEditingRows(prevEditingRows => {
+      onColumnRowEdit(editParams);
+      return toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);
+    });
+  };
+
+  const editValue = _ref => {
+    let {
+      value,
+      rowData,
+      property,
+      rowIndex
+    } = _ref;
+    setEditingRows({});
+    onColumnRowEdited({
+      value,
+      rowData,
+      property,
+      rowIndex
+    });
+  };
+
+  return {
+    state: {
+      editingRows
+    },
+    actions: {
+      activateEdit,
+      editValue
+    }
+  };
+};
+
+const decorateColumn = (column, grid) => {
+  const {
+    props: {
+      isColumnEditable = col => col.editable,
+      customHandlers
+    }
+  } = grid;
+  const editableConfig = makeEditableConfig(grid);
+  return isColumnEditable(column) ? addEditableToCell({
+    column,
+    config: editableConfig,
+    handlers: customHandlers
+  }, grid) : column;
+};
+
+const EditablePlugin = createInstancePlugin('editable', {
+  registerStateHook,
+  decorateColumn,
+
+  registerHotKeys(grid) {
+    return {
+      key: 'enter',
+      handler: _ref2 => {
+        let {
+          rowIndex,
+          cellIndex
+        } = _ref2;
+        const {
+          composedRows,
+          decoratedColumns,
+          actions: {
+            activateEdit
+          },
+          props: {
+            isColumnEditable
+          }
+        } = grid.getInstance();
+        if (!isColumnEditable(decoratedColumns[cellIndex])) return;
+        const rows = composedRows.rows || composedRows;
+        const row = rows[rowIndex];
+        if (!row) return;
+        activateEdit({
+          rowData: row,
+          columnIndex: cellIndex
+        });
+      },
+      options: {
+        keydown: false,
+        keyup: true
+      }
+    };
+  }
+
+});
+
+export { EditablePlugin };

package/esm/plugins/editable/decorateEditable.js

@@ -0,0 +1,92 @@
+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 'react';
+import * as edit from 'react-edit';
+import { EditPencil } from '@elliemae/ds-icons';
+import { cx } from '@elliemae/ds-utilities';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import getEditorComponent from './getEditorComponent.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _EditPencil, _span;
+
+const _excluded = ["columnIndex", "rowData", "column"];
+
+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 makeEditableConfig = grid => edit.edit({
+  isEditing: _ref => {
+    let {
+      columnIndex,
+      rowData,
+      column = {}
+    } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    const {
+      state: {
+        editingRows
+      },
+      props: {
+        rowKey
+      }
+    } = grid.getInstance();
+    let isCustomEditing;
+
+    if (typeof column.isEditing === 'function') {
+      isCustomEditing = column.isEditing(_objectSpread({
+        columnIndex,
+        rowData,
+        column
+      }, rest));
+    }
+
+    return editingRows[rowData[rowKey]] === columnIndex || column.alwaysEditing || isCustomEditing;
+  },
+  onActivate: () => null,
+  onValue: function () {
+    return grid.getInstance().actions.editValue(...arguments);
+  }
+});
+
+const addEditableToCell = (_ref2, grid) => {
+  let {
+    column,
+    config,
+    handlers
+  } = _ref2;
+  column.cell.transforms.push(config(getEditorComponent(column.customEditor, handlers)));
+  column.cell.props.className = cx(column.cell.props.className, "editable".concat(column.customEditor ? ' customEditor' : ''));
+  return appendCellFormatter([(value, extraParams) => /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: e => {
+        e.stopPropagation();
+        grid.getInstance().actions.activateEdit(extraParams);
+      },
+      onKeyUp: e => {
+        e.stopPropagation();
+
+        if (e.keyCode === 33) {
+          grid.getInstance().actions.activateEdit(extraParams);
+        }
+      },
+      role: "gridcell",
+      tabIndex: 0
+    }, void 0, value, _EditPencil || (_EditPencil = /*#__PURE__*/_jsx(EditPencil, {
+      className: "edit-pencil"
+    })), _span || (_span = /*#__PURE__*/_jsx("span", {
+      className: "edit-separator"
+    }, void 0, " ")))
+  })], column);
+};
+
+export { addEditableToCell, makeEditableConfig };

package/esm/plugins/editable/getEditorComponent.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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import ComboBox from './EditableComponents/ComboBox.js';
+import TextBox from './EditableComponents/TextBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["type"];
+
+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 components = {
+  DSComboBox: ComboBox,
+  DSTextBox: TextBox
+};
+
+const getEditorComponent = function () {
+  let editorComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let handlers = arguments.length > 1 ? arguments[1] : undefined;
+  return _ref => {
+    let {
+      value,
+      onValue,
+      extraParameters
+    } = _ref;
+
+    if (typeof editorComponent === 'function') {
+      return editorComponent(_objectSpread({
+        value,
+        onValue,
+        customHandlers: handlers
+      }, extraParameters));
+    }
+
+    const {
+      type = 'DSTextBox'
+    } = editorComponent,
+          restEditorProps = _objectWithoutProperties(editorComponent, _excluded);
+
+    const Component = components[type];
+
+    if (type === 'DSComboBox') {
+      var _restEditorProps$opti;
+
+      // TODO: remove this whole condition when combobox v3 is out and fully working without "maxOptions" parameter
+      const maxOptions = (restEditorProps === null || restEditorProps === void 0 ? void 0 : (_restEditorProps$opti = restEditorProps.options) === null || _restEditorProps$opti === void 0 ? void 0 : _restEditorProps$opti.length) || 100;
+      return /*#__PURE__*/_jsx("div", {
+        style: {
+          zIndex: 0
+        }
+      }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({
+        autoFocus: true,
+        onValue: onValue,
+        value: value,
+        maxOptions: maxOptions
+      }, restEditorProps)));
+    }
+
+    return /*#__PURE__*/jsx(Component, _objectSpread({
+      autoFocus: true,
+      onValue: onValue,
+      value: value
+    }, restEditorProps));
+  };
+};
+
+export { getEditorComponent as default };

package/esm/plugins/editable/index.js

@@ -0,0 +1,3 @@
+export { EditablePlugin } from './EditablePlugin.js';
+export { default as ComboBox } from './EditableComponents/ComboBox.js';
+export { default as TextBox } from './EditableComponents/TextBox.js';

package/esm/plugins/expandable-grid/ExpandableColumn.js

@@ -0,0 +1,146 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef } from 'react';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DSButton from '@elliemae/ds-button';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import { dataGridBlockName } from '../../blockNames.js';
+import { RowSizes } from '../../rowSizes.js';
+import { jsxs } from 'react/jsx-runtime';
+
+const _excluded = ["property", "label", "renderRowLabel", "renderRowDescription", "renderExtraData", "width", "resizable", "sortable", "searchable", "customRenderer"];
+
+var _ArrowheadDown, _ArrowheadRight;
+
+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, "-expandable-column"); // todo: clean this when we move to css-js
+
+const ExpandableColumnWrapper = aggregatedClasses('div')(blockName);
+const LabelDescriptionWrapper = aggregatedClasses('div')(blockName, 'label-description-wrapper');
+const Label = aggregatedClasses('span')(blockName, 'label');
+const Description = aggregatedClasses('span')(blockName, 'description');
+const ExtraColumnData = aggregatedClasses('div')(blockName, 'extra-column-data');
+const ExpandableMasterWrapper = aggregatedClasses('div')("".concat(blockName, "-master-wrapper"));
+const ExpandableDetailsWrapper = aggregatedClasses('div')("".concat(blockName, "-details-wrapper"));
+
+function ExpandableColumnCell(_ref) {
+  let {
+    label,
+    description,
+    isExpanded,
+    expandableDetails,
+    extraData,
+    onToggleExpand
+  } = _ref;
+  const ref = useRef();
+  return /*#__PURE__*/jsxs(ExpandableColumnWrapper, {
+    ref: ref,
+    tabindex: 0,
+    children: [/*#__PURE__*/_jsx(ExpandableMasterWrapper, {
+      style: {
+        height: RowSizes.extend
+      }
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      className: "expandable-arrow",
+      icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {})),
+      onClick: e => {
+        onToggleExpand(e);
+
+        if (ref && ref.current) {
+          ref.current.focus();
+        }
+      },
+      size: "s"
+    }), /*#__PURE__*/_jsx(LabelDescriptionWrapper, {}, void 0, /*#__PURE__*/_jsx(Label, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: label
+    })), /*#__PURE__*/_jsx(Description, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: description
+    }))), /*#__PURE__*/_jsx(ExtraColumnData, {}, void 0, extraData)), isExpanded && /*#__PURE__*/_jsx(ExpandableDetailsWrapper, {}, void 0, expandableDetails)]
+  });
+}
+
+const expandableColumnRenderer = _ref2 => {
+  let {
+    renderRowLabel,
+    renderRowDescription,
+    renderExtraData
+  } = _ref2;
+  return (value, _ref3, grid) => {
+    let {
+      rowData,
+      isExpanded
+    } = _ref3;
+    const {
+      props: {
+        renderExpandedDetails
+      },
+      actions: {
+        toggleExpand
+      }
+    } = grid.getInstance();
+    const expandableDetails = renderExpandedDetails({
+      rowData
+    });
+    return /*#__PURE__*/_jsx(ExpandableColumnCell, {
+      description: renderRowDescription({
+        rowData
+      }),
+      expandableDetails: expandableDetails,
+      extraData: renderExtraData({
+        rowData
+      }),
+      isExpanded: isExpanded,
+      label: renderRowLabel({
+        rowData
+      }),
+      onToggleExpand: () => toggleExpand(rowData)
+    });
+  };
+};
+
+const noop = () => null;
+
+function createExpandableColumn(_ref4) {
+  let {
+    property,
+    label,
+    renderRowLabel = () => '----',
+    renderRowDescription = noop,
+    renderExtraData = noop,
+    width,
+    resizable,
+    sortable,
+    searchable,
+    customRenderer
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
+  return _objectSpread(_objectSpread({}, rest), {}, {
+    label,
+    property,
+    cell: {
+      formatters: [expandableColumnRenderer({
+        renderRowLabel,
+        renderRowDescription,
+        renderExtraData
+      })]
+    },
+    width: width || '50%',
+    expandableColumn: true,
+    resizable,
+    sortable,
+    searchable
+  });
+}
+
+export { createExpandableColumn as default };

package/esm/plugins/expandable-grid/ExpandablePlugin.js

@@ -0,0 +1,231 @@
+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 '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.filter.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/web.dom-collections.iterator.js';
+import { useMemo, useRef, useEffect } from 'react';
+import { cx, isFunction } from '@elliemae/ds-utilities';
+import { VariableSizeList } from 'react-window';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import ExpandedRow from './ExpandedRow.js';
+import ExpandedRowExtra from './ExpandedRowExtra.js';
+import { RowSizes } from '../../rowSizes.js';
+import { useExpandGridState } from './useExpandGridState.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const _excluded = ["isExpanded"];
+
+var _ArrowheadDown, _ArrowheadRight;
+
+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 getExpandedRowSizeBySubrows = _ref => {
+  let {
+    totalAmount,
+    amountVisible,
+    isShowingAll,
+    size = 36
+  } = _ref;
+  return isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
+};
+
+const ExpandedRows = {
+  SingleColumn: ExpandedRow,
+  Master: ExpandedRowExtra
+};
+
+const createExpandedRow = type => ExpandedRows[type] || ExpandedRows.Master;
+
+const isExpandableSingleColumn = columns => columns.some(column => column.expandableColumn);
+
+const ExpandablePlugin = createInstancePlugin('expandable', {
+  registerStateHook: useExpandGridState,
+
+  decorateGrid(grid) {
+    const {
+      decoratedColumns,
+      columns
+    } = grid.getInstance();
+    const detailColumns = useMemo(() => decoratedColumns.map(column => _objectSpread(_objectSpread({}, column), {}, {
+      customRenderer: column.detailCustomRenderer
+    })).filter(col => !col.expandableColumn), [columns]);
+    return {
+      detailColumns
+    };
+  },
+
+  decorateColumns(columns, grid) {
+    if (isExpandableSingleColumn(columns)) return columns; // get first column from user
+
+    const firstColumnIndex = columns.findIndex(column => column.isUserColumn);
+    const firstColumn = columns[firstColumnIndex];
+    firstColumn.formatExpandable = true;
+    return [...columns.slice(0, firstColumnIndex), appendCellFormatter((value, _ref2) => {
+      let {
+        isExpanded,
+        rowData
+      } = _ref2;
+      const {
+        actions: {
+          toggleExpand
+        }
+      } = grid.getInstance();
+      /*
+       * should return only 2 elements ../custom-cell-renderer/addCustomRendererToCell.js
+       * getRenderer it's checking that length to apply the custom render to value only
+       */
+
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(DSButton, {
+          buttonType: "text",
+          className: "expandable-arrow",
+          icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {})),
+          onClick: e => {
+            e.stopPropagation();
+            toggleExpand(rowData);
+          },
+          size: "s"
+        }), value]
+      });
+    }, firstColumn), ...columns.slice(firstColumnIndex + 1)];
+  },
+
+  getBodyProps(bodyProps, grid) {
+    const {
+      composedRows: rows,
+      props: {
+        rowKey,
+        getChildrenRows,
+        rowSize = 'normal',
+        subrowSize = 'normal',
+        getExpandedRowMinSize,
+        getExpandedRowSize,
+        expandableSubrowsVisible
+      },
+      state: {
+        expandedRows
+      }
+    } = grid.getInstance();
+    const rowSizePx = RowSizes[rowSize];
+    const subrowSizePx = RowSizes[subrowSize];
+    const listRef = useRef();
+    useEffect(() => {
+      if (listRef.current) listRef.current.resetAfterIndex(0, true);
+    }); // implementation of expandable row single column with aggregation
+
+    const getItemSize = index => {
+      const rowData = rows[index];
+      const key = rowData[rowKey];
+      const children = getChildrenRows({
+        rowData
+      });
+      const expandedSize = getExpandedRowSize ? getExpandedRowSize(index, {
+        rowData
+      }) // https://jira.elliemae.io/browse/PUI-1659
+      : getExpandedRowSizeBySubrows({
+        totalAmount: children.length,
+        amountVisible: children.length > expandableSubrowsVisible ? expandableSubrowsVisible : children.length,
+        isShowingAll: children.length < expandableSubrowsVisible || expandedRows[key] && expandedRows[key].showAllRows,
+        size: subrowSizePx
+      });
+      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index); // eslint-disable-next-line no-nested-ternary
+
+      return expandedRows[key] ? expandedMinSize > expandedSize ? expandedMinSize : expandedSize : rowSizePx;
+    };
+
+    return _objectSpread(_objectSpread({}, bodyProps), {}, {
+      className: cx(bodyProps.className, 'expandable'),
+      listComponent: VariableSizeList,
+      listProps: {
+        ref: listRef,
+        itemSize: getItemSize
+      }
+    });
+  },
+
+  decorateRenderers(renderers, grid) {
+    const Row = renderers.body.row;
+    const Cell = renderers.body.cell; // eslint-disable-next-line react/display-name
+
+    renderers.body.row = useMemo(() => {
+      // todo: the expandable grid should be created from another specific grid component
+      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';
+      const ExpandedRowComponent = createExpandedRow(expandedRowType); // eslint-disable-next-line react/display-name
+
+      return _ref3 => {
+        let {
+          isExpanded
+        } = _ref3,
+            rowProps = _objectWithoutProperties(_ref3, _excluded);
+
+        if (isExpanded) {
+          const {
+            props: {
+              detailColumns,
+              getChildrenRows,
+              renderRowDetails
+            },
+            composedRows
+          } = grid.getInstance(); // https://jira.elliemae.io/browse/PUI-1667
+
+          const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
+          return /*#__PURE__*/_jsx(ExpandedRowComponent, {
+            cellComponent: Cell,
+            detailColumns: detailColumns,
+            parentGrid: grid,
+            renderRowDetails: renderRowDetails,
+            rowComponent: Row,
+            rowData: rowData,
+            rowProps: _objectSpread({
+              rowData,
+              isExpanded
+            }, rowProps),
+            rows: getChildrenRows({
+              rowData
+            })
+          }, void 0, rowProps.children);
+        }
+
+        return /*#__PURE__*/jsx(Row, _objectSpread({}, rowProps));
+      };
+    }, []);
+    return renderers;
+  },
+
+  getRowProps(rowProps, grid, _ref4) {
+    let {
+      rowData
+    } = _ref4;
+    const {
+      props: {
+        rowKey
+      },
+      state: {
+        expandedRows
+      }
+    } = grid.getInstance();
+    const key = rowData[rowKey];
+    const isExpanded = !!expandedRows[key];
+    return _objectSpread(_objectSpread({}, rowProps), {}, {
+      className: cx(rowProps.className, Object.keys(expandedRows).length > 0 && 'expandable-row', isExpanded && 'expanded'),
+      isExpanded,
+      showAllRows: expandedRows[key] && expandedRows[key].showAllRows
+    });
+  }
+
+});
+
+export { ExpandablePlugin };