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

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

@@ -0,0 +1,156 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsClassnames = require('@elliemae/ds-classnames');
+var DSButton = require('@elliemae/ds-button');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var blockNames = require('../../blockNames.js');
+var rowSizes = require('../../rowSizes.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
+
+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__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = "".concat(blockNames.dataGridBlockName, "-expandable-column"); // todo: clean this when we move to css-js
+
+const ExpandableColumnWrapper = dsClassnames.aggregatedClasses('div')(blockName);
+const LabelDescriptionWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'label-description-wrapper');
+const Label = dsClassnames.aggregatedClasses('span')(blockName, 'label');
+const Description = dsClassnames.aggregatedClasses('span')(blockName, 'description');
+const ExtraColumnData = dsClassnames.aggregatedClasses('div')(blockName, 'extra-column-data');
+const ExpandableMasterWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-master-wrapper"));
+const ExpandableDetailsWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-details-wrapper"));
+
+function ExpandableColumnCell(_ref) {
+  let {
+    label,
+    description,
+    isExpanded,
+    expandableDetails,
+    extraData,
+    onToggleExpand
+  } = _ref;
+  const ref = React.useRef();
+  return /*#__PURE__*/jsxRuntime.jsxs(ExpandableColumnWrapper, {
+    ref: ref,
+    tabindex: 0,
+    children: [/*#__PURE__*/_jsx__default["default"](ExpandableMasterWrapper, {
+      style: {
+        height: rowSizes.RowSizes.extend
+      }
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "text",
+      className: "expandable-arrow",
+      icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {})),
+      onClick: e => {
+        onToggleExpand(e);
+
+        if (ref && ref.current) {
+          ref.current.focus();
+        }
+      },
+      size: "s"
+    }), /*#__PURE__*/_jsx__default["default"](LabelDescriptionWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](Label, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
+      value: label
+    })), /*#__PURE__*/_jsx__default["default"](Description, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
+      value: description
+    }))), /*#__PURE__*/_jsx__default["default"](ExtraColumnData, {}, void 0, extraData)), isExpanded && /*#__PURE__*/_jsx__default["default"](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__default["default"](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__default["default"](_ref4, _excluded);
+
+  return _objectSpread(_objectSpread({}, rest), {}, {
+    label,
+    property,
+    cell: {
+      formatters: [expandableColumnRenderer({
+        renderRowLabel,
+        renderRowDescription,
+        renderExtraData
+      })]
+    },
+    width: width || '50%',
+    expandableColumn: true,
+    resizable,
+    sortable,
+    searchable
+  });
+}
+
+module.exports = createExpandableColumn;

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

@@ -0,0 +1,243 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var reactWindow = require('react-window');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
+var ExpandedRow = require('./ExpandedRow.js');
+var ExpandedRowExtra = require('./ExpandedRowExtra.js');
+var rowSizes = require('../../rowSizes.js');
+var useExpandGridState = require('./useExpandGridState.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+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__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const 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__default["default"]('expandable', {
+  registerStateHook: useExpandGridState.useExpandGridState,
+
+  decorateGrid(grid) {
+    const {
+      decoratedColumns,
+      columns
+    } = grid.getInstance();
+    const detailColumns = React.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), initColumnDefinition.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+          buttonType: "text",
+          className: "expandable-arrow",
+          icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.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.RowSizes[rowSize];
+    const subrowSizePx = rowSizes.RowSizes[subrowSize];
+    const listRef = React.useRef();
+    React.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 = dsUtilities.isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index); // eslint-disable-next-line no-nested-ternary
+
+      return expandedRows[key] ? expandedMinSize > expandedSize ? expandedMinSize : expandedSize : rowSizePx;
+    };
+
+    return _objectSpread(_objectSpread({}, bodyProps), {}, {
+      className: dsUtilities.cx(bodyProps.className, 'expandable'),
+      listComponent: reactWindow.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 = React.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__default["default"](_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__default["default"](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__*/jsxRuntime.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: dsUtilities.cx(rowProps.className, Object.keys(expandedRows).length > 0 && 'expandable-row', isExpanded && 'expanded'),
+      isExpanded,
+      showAllRows: expandedRows[key] && expandedRows[key].showAllRows
+    });
+  }
+
+});
+
+exports.ExpandablePlugin = ExpandablePlugin;

package/cjs/plugins/expandable-grid/ExpandedRow.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('react');
+var DSSeparator = require('@elliemae/ds-separator');
+var DSButton = require('@elliemae/ds-button');
+var styled = require('styled-components');
+var dsUtilities = require('@elliemae/ds-utilities');
+var deferComponentRender = require('@elliemae/ds-shared/defer-render-hoc');
+var useDataGrid = require('@elliemae/ds-shared/useDataGrid');
+var PaginationPlugin = require('../pagination/PaginationPlugin.js');
+var BodyCell = require('../../components/BodyCell.js');
+var index = require('../../components/renderers/index.js');
+var TableBody = require('../../components/TableBody.js');
+var Table = require('../../components/Table.js');
+var ColumnSizingPlugin = require('../column-sizing/ColumnSizingPlugin.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var deferComponentRender__default = /*#__PURE__*/_interopDefaultLegacy(deferComponentRender);
+var useDataGrid__default = /*#__PURE__*/_interopDefaultLegacy(useDataGrid);
+
+var _TableBody, _DSSeparator;
+
+const _excluded = ["instanceRef"],
+      _excluded2 = ["showAllRows"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DetailGrid = deferComponentRender__default["default"](_ref => {
+  let {
+    parentGrid,
+    parentRowData,
+    rows
+  } = _ref;
+
+  const _parentGrid$props = parentGrid.props,
+        parentProps = _objectWithoutProperties__default["default"](_parentGrid$props, _excluded);
+
+  const grid = useDataGrid__default["default"](_objectSpread(_objectSpread({
+    uuid: parentGrid.getInstance().uuid
+  }, parentProps), {}, {
+    columns: parentGrid.getInstance().decoratedColumns.filter(col => !col.expandableColumn).map(c => _objectSpread(_objectSpread({}, c), {}, {
+      expandableColumn: false
+    })),
+    rows,
+    plugins: [ColumnSizingPlugin.ColumnSizingPlugin, PaginationPlugin.PaginationPlugin],
+    renderers: index.defaultRenderers,
+    bindColumnsSizeTo: parentGrid.uuid,
+    numRowsVisible: 'all',
+    paginated: true,
+    pagination: {
+      perPage: rows.length,
+      conditionalPagination: true
+    },
+    parentRowData
+  }));
+  return /*#__PURE__*/jsxRuntime.jsx(Table, _objectSpread(_objectSpread({}, grid), {}, {
+    children: _TableBody || (_TableBody = /*#__PURE__*/_jsx__default["default"](TableBody, {}))
+  }));
+}, null);
+const DetailsWrapper = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1goa4zy-0"
+})(["flex:1;width:", "px;"], props => props.width);
+const DetailGridWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1goa4zy-1"
+})(["display:flex;height:calc(100% - ", "px);width:", "px;margin:12px 0;"], props => props.allRowsVisible ? 18 : 60, props => props.expandableGridDetailWidth);
+
+function ExpandedRow(_ref2) {
+  let {
+    parentGrid,
+    detailColumns,
+    rowData,
+    rows,
+    rowProps,
+    cellComponent: CellComponent,
+    rowComponent: RowComponent
+  } = _ref2;
+  const {
+    decoratedColumns,
+    actions: {
+      toggleShowAllRows
+    },
+    state: {
+      expandedRows
+    },
+    props: {
+      rowKey,
+      showMoreRowsText = 'SHOW ALL ROWS',
+      showLessRowsText = 'SHOW LESS ROWS',
+      expandableSubrowsVisible
+    },
+    columnSizeService: {
+      expandableGridDetailWidth
+    }
+  } = parentGrid.getInstance();
+
+  const {
+    showAllRows
+  } = rowProps,
+        restRowProps = _objectWithoutProperties__default["default"](rowProps, _excluded2);
+
+  return /*#__PURE__*/jsxRuntime.jsxs(RowComponent, _objectSpread(_objectSpread({}, restRowProps), {}, {
+    children: [/*#__PURE__*/_jsx__default["default"](BodyCell, {
+      column: decoratedColumns[0],
+      columnIndex: 0,
+      component: CellComponent,
+      grid: parentGrid,
+      rowProps: _objectSpread({
+        rowData
+      }, rowProps)
+    }), /*#__PURE__*/_jsx__default["default"](DetailsWrapper, {
+      width: expandableGridDetailWidth
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DetailGridWrapper, {
+      allRowsVisible: rows.length < expandableSubrowsVisible || dsUtilities.get(expandedRows, [rowKey, 'showAllRows']),
+      expandableGridDetailWidth: expandableGridDetailWidth
+    }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+      dashed: true,
+      orientation: "vertical"
+    })), /*#__PURE__*/_jsx__default["default"](DetailGrid, {
+      detailColumns: detailColumns,
+      parentGrid: parentGrid.getInstance(),
+      parentRowData: rowData,
+      rows: showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)
+    })), rows.length > expandableSubrowsVisible && /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "text",
+      labelText: showAllRows ? showLessRowsText : showMoreRowsText,
+      onClick: e => {
+        e.stopPropagation();
+        toggleShowAllRows(rowData);
+      },
+      style: {
+        marginBottom: '10px'
+      }
+    }))]
+  }));
+}
+
+module.exports = ExpandedRow;

package/cjs/plugins/expandable-grid/ExpandedRowExtra.js

@@ -0,0 +1,54 @@
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var DSSeparator = require('@elliemae/ds-separator');
+var dsClassnames = require('@elliemae/ds-classnames');
+var blockNames = require('../../blockNames.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+var _DSSeparator;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = "".concat(blockNames.dataGridBlockName, "-expanded-row");
+const DetailsWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-details-wrapper"), null, () => ({
+  'ie-flex-basis-auto': true
+}));
+
+function ExpandedRowExtra(_ref) {
+  let {
+    children,
+    rowData,
+    rowProps,
+    rowComponent: RowComponent,
+    renderRowDetails = () => null
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsxs(RowComponent, _objectSpread(_objectSpread({}, rowProps), {}, {
+    className: dsUtilities.cx(rowProps.className, 'expanded-detail-row'),
+    children: [/*#__PURE__*/_jsx__default["default"](RowComponent, {
+      className: "master-row-expanded"
+    }, void 0, children), _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+      dashed: true,
+      margin: "xs"
+    })), /*#__PURE__*/_jsx__default["default"](DetailsWrapper, {}, void 0, renderRowDetails({
+      rowData
+    }))]
+  }));
+}
+
+module.exports = ExpandedRowExtra;

package/cjs/plugins/expandable-grid/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ExpandablePlugin = require('./ExpandablePlugin.js');
+var ExpandableColumn = require('./ExpandableColumn.js');
+
+
+
+exports.ExpandablePlugin = ExpandablePlugin.ExpandablePlugin;
+exports.ExpandableColumn = ExpandableColumn;