@elliemae/ds-datagrids 1.61.0 → 2.0.0-alpha.12

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

@@ -1,7 +1,17 @@
+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 _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React, { useMemo, useRef, useEffect } from 'react';
+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';
@@ -12,157 +22,118 @@ import ExpandedRow from './ExpandedRow.js';
 import ExpandedRowExtra from './ExpandedRowExtra.js';
 import { RowSizes } from '../../rowSizes.js';
 import { useExpandGridState } from './useExpandGridState.js';
-import '@elliemae/ds-separator';
-import 'styled-components';
-import '@elliemae/ds-shared/defer-render-hoc';
-import '@elliemae/ds-shared/useDataGrid';
-import '../pagination/PaginationPlugin.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@elliemae/ds-shared/FocusGroup/FocusGrid';
-import '../pagination/helper.js';
-import '../pagination/usePaginationState.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '../../components/NoResults.js';
-import '@elliemae/ds-system';
-import '../../components/BodyCell.js';
-import 'prop-types';
-import '@elliemae/ds-shared/createDataInstance/utils';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../../index-afbbe9c8.js';
-import '../../components/renderers/defaultClassedRenderers.js';
-import '@elliemae/ds-classnames';
-import '../../blockNames.js';
-import '../../components/renderers/renderRowsLoader.js';
-import '../../components/RowsLoader.js';
-import '@elliemae/ds-spinner';
-import '../../components/TableBody.js';
-import '../../components/tableContext.js';
-import '../../components/Table.js';
-import '../../components/TableHeader.js';
-import '../../components/HeaderCell.js';
-import '../column-sizing/ColumnSizingPlugin.js';
-import '../column-sizing/useStylesheetHelpers.js';
-import 'stylesheet-helpers';
-import '../column-sizing/getColumnNameFromProperty.js';
-import '../../utilities/getScrollbarSize.js';
-import '../column-sizing/useColumnSizeService.js';
-import '../column-sizing/utils.js';
-import '../column-sizing/ext-points/getTableProps.js';
-import '../column-sizing/ext-points/decorateColumn.js';
-import '../column-sizing/columnMeasurerTransformer.js';
-
-var _excluded = ["isExpanded"];
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var getExpandedRowSizeBySubrows = function getExpandedRowSizeBySubrows(_ref) {
-  var totalAmount = _ref.totalAmount,
-      amountVisible = _ref.amountVisible,
-      isShowingAll = _ref.isShowingAll,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 36 : _ref$size;
+const getExpandedRowSizeBySubrows = _ref => {
+  let {
+    totalAmount,
+    amountVisible,
+    isShowingAll,
+    size = 36
+  } = _ref;
   return isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
 };
 
-var ExpandedRows = {
+const ExpandedRows = {
   SingleColumn: ExpandedRow,
   Master: ExpandedRowExtra
 };
 
-var createExpandedRow = function createExpandedRow(type) {
-  return ExpandedRows[type] || ExpandedRows.Master;
-};
+const createExpandedRow = type => ExpandedRows[type] || ExpandedRows.Master;
 
-var isExpandableSingleColumn = function isExpandableSingleColumn(columns) {
-  return columns.some(function (column) {
-    return column.expandableColumn;
-  });
-};
+const isExpandableSingleColumn = columns => columns.some(column => column.expandableColumn);
 
-var ExpandablePlugin = createInstancePlugin('expandable', {
+const ExpandablePlugin = createInstancePlugin('expandable', {
   registerStateHook: useExpandGridState,
-  decorateGrid: function decorateGrid(grid) {
-    var _grid$getInstance = grid.getInstance(),
-        decoratedColumns = _grid$getInstance.decoratedColumns,
-        columns = _grid$getInstance.columns;
-
-    var detailColumns = useMemo(function () {
-      return decoratedColumns.map(function (column) {
-        return _objectSpread(_objectSpread({}, column), {}, {
-          customRenderer: column.detailCustomRenderer
-        });
-      }).filter(function (col) {
-        return !col.expandableColumn;
-      });
-    }, [columns]);
+
+  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: detailColumns
+      detailColumns
     };
   },
-  decorateColumns: function decorateColumns(columns, grid) {
+
+  decorateColumns(columns, grid) {
     if (isExpandableSingleColumn(columns)) return columns; // get first column from user
 
-    var firstColumnIndex = columns.findIndex(function (column) {
-      return column.isUserColumn;
-    });
-    var firstColumn = columns[firstColumnIndex];
+    const firstColumnIndex = columns.findIndex(column => column.isUserColumn);
+    const firstColumn = columns[firstColumnIndex];
     firstColumn.formatExpandable = true;
-    return [].concat(_toConsumableArray(columns.slice(0, firstColumnIndex)), [appendCellFormatter(function (value, _ref2) {
-      var isExpanded = _ref2.isExpanded,
-          rowData = _ref2.rowData;
-
-      var _grid$getInstance2 = grid.getInstance(),
-          toggleExpand = _grid$getInstance2.actions.toggleExpand;
+    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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DSButton, {
-        buttonType: "text",
-        className: "expandable-arrow",
-        icon: isExpanded ? /*#__PURE__*/React.createElement(ArrowheadDown, null) : /*#__PURE__*/React.createElement(ArrowheadRight, null),
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          toggleExpand(rowData);
-        },
-        size: "s"
-      }), value);
-    }, firstColumn)], _toConsumableArray(columns.slice(firstColumnIndex + 1)));
+      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: function getBodyProps(bodyProps, grid) {
-    var _grid$getInstance3 = grid.getInstance(),
-        rows = _grid$getInstance3.composedRows,
-        _grid$getInstance3$pr = _grid$getInstance3.props,
-        rowKey = _grid$getInstance3$pr.rowKey,
-        getChildrenRows = _grid$getInstance3$pr.getChildrenRows,
-        _grid$getInstance3$pr2 = _grid$getInstance3$pr.rowSize,
-        rowSize = _grid$getInstance3$pr2 === void 0 ? 'normal' : _grid$getInstance3$pr2,
-        _grid$getInstance3$pr3 = _grid$getInstance3$pr.subrowSize,
-        subrowSize = _grid$getInstance3$pr3 === void 0 ? 'normal' : _grid$getInstance3$pr3,
-        getExpandedRowMinSize = _grid$getInstance3$pr.getExpandedRowMinSize,
-        getExpandedRowSize = _grid$getInstance3$pr.getExpandedRowSize,
-        expandableSubrowsVisible = _grid$getInstance3$pr.expandableSubrowsVisible,
-        expandedRows = _grid$getInstance3.state.expandedRows;
-
-    var rowSizePx = RowSizes[rowSize];
-    var subrowSizePx = RowSizes[subrowSize];
-    var listRef = useRef();
-    useEffect(function () {
+
+  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
 
-    var getItemSize = function getItemSize(index) {
-      var rowData = rows[index];
-      var key = rowData[rowKey];
-      var children = getChildrenRows({
-        rowData: rowData
+    const getItemSize = index => {
+      const rowData = rows[index];
+      const key = rowData[rowKey];
+      const children = getChildrenRows({
+        rowData
       });
-      var expandedSize = getExpandedRowSize ? getExpandedRowSize(index, {
-        rowData: rowData
+      const expandedSize = getExpandedRowSize ? getExpandedRowSize(index, {
+        rowData
       }) // https://jira.elliemae.io/browse/PUI-1659
       : getExpandedRowSizeBySubrows({
         totalAmount: children.length,
@@ -170,7 +141,7 @@ var ExpandablePlugin = createInstancePlugin('expandable', {
         isShowingAll: children.length < expandableSubrowsVisible || expandedRows[key] && expandedRows[key].showAllRows,
         size: subrowSizePx
       });
-      var expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index); // eslint-disable-next-line no-nested-ternary
+      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index); // eslint-disable-next-line no-nested-ternary
 
       return expandedRows[key] ? expandedMinSize > expandedSize ? expandedMinSize : expandedSize : rowSizePx;
     };
@@ -184,30 +155,34 @@ var ExpandablePlugin = createInstancePlugin('expandable', {
       }
     });
   },
-  decorateRenderers: function decorateRenderers(renderers, grid) {
-    var Row = renderers.body.row;
-    var Cell = renderers.body.cell; // eslint-disable-next-line react/display-name
 
-    renderers.body.row = useMemo(function () {
+  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
-      var expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';
-      var ExpandedRowComponent = createExpandedRow(expandedRowType); // eslint-disable-next-line react/display-name
+      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';
+      const ExpandedRowComponent = createExpandedRow(expandedRowType); // eslint-disable-next-line react/display-name
 
-      return function (_ref3) {
-        var isExpanded = _ref3.isExpanded,
+      return _ref3 => {
+        let {
+          isExpanded
+        } = _ref3,
             rowProps = _objectWithoutProperties(_ref3, _excluded);
 
         if (isExpanded) {
-          var _grid$getInstance4 = grid.getInstance(),
-              _grid$getInstance4$pr = _grid$getInstance4.props,
-              detailColumns = _grid$getInstance4$pr.detailColumns,
-              getChildrenRows = _grid$getInstance4$pr.getChildrenRows,
-              renderRowDetails = _grid$getInstance4$pr.renderRowDetails,
-              composedRows = _grid$getInstance4.composedRows; // https://jira.elliemae.io/browse/PUI-1667
-
-
-          var rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
-          return /*#__PURE__*/React.createElement(ExpandedRowComponent, {
+          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,
@@ -215,36 +190,42 @@ var ExpandablePlugin = createInstancePlugin('expandable', {
             rowComponent: Row,
             rowData: rowData,
             rowProps: _objectSpread({
-              rowData: rowData,
-              isExpanded: isExpanded
+              rowData,
+              isExpanded
             }, rowProps),
             rows: getChildrenRows({
-              rowData: rowData
+              rowData
             })
-          }, rowProps.children);
+          }, void 0, rowProps.children);
         }
 
-        return /*#__PURE__*/React.createElement(Row, rowProps);
+        return /*#__PURE__*/jsx(Row, _objectSpread({}, rowProps));
       };
     }, []);
     return renderers;
   },
-  getRowProps: function getRowProps(rowProps, grid, _ref4) {
-    var rowData = _ref4.rowData;
-
-    var _grid$getInstance5 = grid.getInstance(),
-        rowKey = _grid$getInstance5.props.rowKey,
-        expandedRows = _grid$getInstance5.state.expandedRows;
 
-    var key = rowData[rowKey];
-    var isExpanded = !!expandedRows[key];
+  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: isExpanded,
+      isExpanded,
       showAllRows: expandedRows[key] && expandedRows[key].showAllRows
     });
   }
+
 });
 
 export { ExpandablePlugin };
-//# sourceMappingURL=ExpandablePlugin.js.map

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

@@ -1,6 +1,14 @@
+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 React from 'react';
+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 'react';
 import DSSeparator from '@elliemae/ds-separator';
 import DSButton from '@elliemae/ds-button';
 import styled from 'styled-components';
@@ -9,67 +17,37 @@ import deferComponentRender from '@elliemae/ds-shared/defer-render-hoc';
 import useDataGrid from '@elliemae/ds-shared/useDataGrid';
 import { PaginationPlugin } from '../pagination/PaginationPlugin.js';
 import BodyCell from '../../components/BodyCell.js';
-import { d as defaultRenderers } from '../../index-afbbe9c8.js';
+import { defaultRenderers } from '../../components/renderers/index.js';
 import TableBody from '../../components/TableBody.js';
 import Table from '../../components/Table.js';
 import { ColumnSizingPlugin } from '../column-sizing/ColumnSizingPlugin.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@elliemae/ds-shared/FocusGroup/FocusGrid';
-import '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
-import '../pagination/helper.js';
-import '../pagination/usePaginationState.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '../../components/NoResults.js';
-import '@elliemae/ds-system';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import 'prop-types';
-import '@elliemae/ds-shared/createDataInstance/utils';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../../components/renderers/defaultClassedRenderers.js';
-import '@elliemae/ds-classnames';
-import '../../blockNames.js';
-import '../../components/renderers/renderRowsLoader.js';
-import '../../components/RowsLoader.js';
-import '@elliemae/ds-spinner';
-import '../../components/tableContext.js';
-import '../../components/TableHeader.js';
-import '../../components/HeaderCell.js';
-import '../column-sizing/useStylesheetHelpers.js';
-import 'stylesheet-helpers';
-import '../column-sizing/getColumnNameFromProperty.js';
-import '../../utilities/getScrollbarSize.js';
-import '../column-sizing/useColumnSizeService.js';
-import '../column-sizing/utils.js';
-import '../column-sizing/ext-points/getTableProps.js';
-import '../column-sizing/ext-points/decorateColumn.js';
-import '../column-sizing/columnMeasurerTransformer.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["instanceRef"],
-    _excluded2 = ["showAllRows"];
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var DetailGrid = deferComponentRender(function (_ref) {
-  var parentGrid = _ref.parentGrid,
-      parentRowData = _ref.parentRowData,
-      rows = _ref.rows;
+const DetailGrid = deferComponentRender(_ref => {
+  let {
+    parentGrid,
+    parentRowData,
+    rows
+  } = _ref;
 
-  var _parentGrid$props = parentGrid.props;
-      _parentGrid$props.instanceRef;
-      var parentProps = _objectWithoutProperties(_parentGrid$props, _excluded);
+  const _parentGrid$props = parentGrid.props,
+        parentProps = _objectWithoutProperties(_parentGrid$props, _excluded);
 
-  var grid = useDataGrid(_objectSpread(_objectSpread({
+  const grid = useDataGrid(_objectSpread(_objectSpread({
     uuid: parentGrid.getInstance().uuid
   }, parentProps), {}, {
-    columns: parentGrid.getInstance().decoratedColumns.filter(function (col) {
-      return !col.expandableColumn;
-    }).map(function (c) {
-      return _objectSpread(_objectSpread({}, c), {}, {
-        expandableColumn: false
-      });
-    }),
-    rows: rows,
+    columns: parentGrid.getInstance().decoratedColumns.filter(col => !col.expandableColumn).map(c => _objectSpread(_objectSpread({}, c), {}, {
+      expandableColumn: false
+    })),
+    rows,
     plugins: [ColumnSizingPlugin, PaginationPlugin],
     renderers: defaultRenderers,
     bindColumnsSizeTo: parentGrid.uuid,
@@ -79,81 +57,87 @@ var DetailGrid = deferComponentRender(function (_ref) {
       perPage: rows.length,
       conditionalPagination: true
     },
-    parentRowData: parentRowData
+    parentRowData
+  }));
+  return /*#__PURE__*/jsx(Table, _objectSpread(_objectSpread({}, grid), {}, {
+    children: _TableBody || (_TableBody = /*#__PURE__*/_jsx(TableBody, {}))
   }));
-  return /*#__PURE__*/React.createElement(Table, grid, /*#__PURE__*/React.createElement(TableBody, null));
 }, null);
-var DetailsWrapper = /*#__PURE__*/styled.span.withConfig({
+const DetailsWrapper = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1goa4zy-0"
-})(["flex:1;width:", "px;"], function (props) {
-  return props.width;
-});
-var DetailGridWrapper = /*#__PURE__*/styled.div.withConfig({
+})(["flex:1;width:", "px;"], props => props.width);
+const DetailGridWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1goa4zy-1"
-})(["display:flex;height:calc(100% - ", "px);width:", "px;margin:12px 0;"], function (props) {
-  return props.allRowsVisible ? 18 : 60;
-}, function (props) {
-  return props.expandableGridDetailWidth;
-});
+})(["display:flex;height:calc(100% - ", "px);width:", "px;margin:12px 0;"], props => props.allRowsVisible ? 18 : 60, props => props.expandableGridDetailWidth);
 
 function ExpandedRow(_ref2) {
-  var parentGrid = _ref2.parentGrid,
-      detailColumns = _ref2.detailColumns,
-      rowData = _ref2.rowData,
-      rows = _ref2.rows,
-      rowProps = _ref2.rowProps,
-      CellComponent = _ref2.cellComponent,
-      RowComponent = _ref2.rowComponent;
-
-  var _parentGrid$getInstan = parentGrid.getInstance(),
-      decoratedColumns = _parentGrid$getInstan.decoratedColumns,
-      toggleShowAllRows = _parentGrid$getInstan.actions.toggleShowAllRows,
-      expandedRows = _parentGrid$getInstan.state.expandedRows,
-      _parentGrid$getInstan2 = _parentGrid$getInstan.props,
-      rowKey = _parentGrid$getInstan2.rowKey,
-      _parentGrid$getInstan3 = _parentGrid$getInstan2.showMoreRowsText,
-      showMoreRowsText = _parentGrid$getInstan3 === void 0 ? 'SHOW ALL ROWS' : _parentGrid$getInstan3,
-      _parentGrid$getInstan4 = _parentGrid$getInstan2.showLessRowsText,
-      showLessRowsText = _parentGrid$getInstan4 === void 0 ? 'SHOW LESS ROWS' : _parentGrid$getInstan4,
-      expandableSubrowsVisible = _parentGrid$getInstan2.expandableSubrowsVisible,
-      expandableGridDetailWidth = _parentGrid$getInstan.columnSizeService.expandableGridDetailWidth;
-
-  var showAllRows = rowProps.showAllRows,
-      restRowProps = _objectWithoutProperties(rowProps, _excluded2);
-
-  return /*#__PURE__*/React.createElement(RowComponent, restRowProps, /*#__PURE__*/React.createElement(BodyCell, {
-    column: decoratedColumns[0],
-    columnIndex: 0,
-    component: CellComponent,
-    grid: parentGrid,
-    rowProps: _objectSpread({
-      rowData: rowData
-    }, rowProps)
-  }), /*#__PURE__*/React.createElement(DetailsWrapper, {
-    width: expandableGridDetailWidth
-  }, /*#__PURE__*/React.createElement(DetailGridWrapper, {
-    allRowsVisible: rows.length < expandableSubrowsVisible || get(expandedRows, [rowKey, 'showAllRows']),
-    expandableGridDetailWidth: expandableGridDetailWidth
-  }, /*#__PURE__*/React.createElement(DSSeparator, {
-    dashed: true,
-    orientation: "vertical"
-  }), /*#__PURE__*/React.createElement(DetailGrid, {
-    detailColumns: detailColumns,
-    parentGrid: parentGrid.getInstance(),
-    parentRowData: rowData,
-    rows: showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)
-  })), rows.length > expandableSubrowsVisible && /*#__PURE__*/React.createElement(DSButton, {
-    buttonType: "text",
-    labelText: showAllRows ? showLessRowsText : showMoreRowsText,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      toggleShowAllRows(rowData);
+  let {
+    parentGrid,
+    detailColumns,
+    rowData,
+    rows,
+    rowProps,
+    cellComponent: CellComponent,
+    rowComponent: RowComponent
+  } = _ref2;
+  const {
+    decoratedColumns,
+    actions: {
+      toggleShowAllRows
     },
-    style: {
-      marginBottom: '10px'
+    state: {
+      expandedRows
+    },
+    props: {
+      rowKey,
+      showMoreRowsText = 'SHOW ALL ROWS',
+      showLessRowsText = 'SHOW LESS ROWS',
+      expandableSubrowsVisible
+    },
+    columnSizeService: {
+      expandableGridDetailWidth
     }
-  })));
+  } = parentGrid.getInstance();
+
+  const {
+    showAllRows
+  } = rowProps,
+        restRowProps = _objectWithoutProperties(rowProps, _excluded2);
+
+  return /*#__PURE__*/jsxs(RowComponent, _objectSpread(_objectSpread({}, restRowProps), {}, {
+    children: [/*#__PURE__*/_jsx(BodyCell, {
+      column: decoratedColumns[0],
+      columnIndex: 0,
+      component: CellComponent,
+      grid: parentGrid,
+      rowProps: _objectSpread({
+        rowData
+      }, rowProps)
+    }), /*#__PURE__*/_jsx(DetailsWrapper, {
+      width: expandableGridDetailWidth
+    }, void 0, /*#__PURE__*/_jsx(DetailGridWrapper, {
+      allRowsVisible: rows.length < expandableSubrowsVisible || get(expandedRows, [rowKey, 'showAllRows']),
+      expandableGridDetailWidth: expandableGridDetailWidth
+    }, void 0, _DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
+      dashed: true,
+      orientation: "vertical"
+    })), /*#__PURE__*/_jsx(DetailGrid, {
+      detailColumns: detailColumns,
+      parentGrid: parentGrid.getInstance(),
+      parentRowData: rowData,
+      rows: showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)
+    })), rows.length > expandableSubrowsVisible && /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      labelText: showAllRows ? showLessRowsText : showMoreRowsText,
+      onClick: e => {
+        e.stopPropagation();
+        toggleShowAllRows(rowData);
+      },
+      style: {
+        marginBottom: '10px'
+      }
+    }))]
+  }));
 }
 
 export { ExpandedRow as default };
-//# sourceMappingURL=ExpandedRow.js.map