/**
 * Bundle of @devexpress/dx-react-grid
 * Generated: 2017-11-10
 * Version: 1.0.0-beta.1
 * License: https://js.devexpress.com/Licensing
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Action, DragDropContext, DragSource, DropTarget, Getter, PluginContainer, PluginHost, Template, TemplateConnector, TemplatePlaceholder, TemplateRenderer, Watcher } from '@devexpress/dx-react-core';
import { TABLE_DATA_TYPE, TABLE_REORDERING_TYPE, addRow, addedRowsByIds, cancelAddedRows, cancelChanges, cancelDeletedRows, cancelGroupingChange, cellValueGetter, changeAddedRow, changeColumnOrder, changeDraftTableColumnWidths, changeRow, changeTableColumnWidths, changedRowsByIds, columnChooserItems, computedCreateRowChange, customGroupedRows, customGroupingRowIdGetter, deleteRows, draftGrouping, draftGroupingChange, draftOrder, evalAnimations, expandedGroupRows, filterActiveAnimations, filteredRows, getAnimations, getAvailableSelection, getAvailableToSelect, getColumnFilterConfig, getColumnSortingDirection, getGroupCellTargetIndex, getMessagesFormatter, getRowChange, getTableRowColumnsWithColSpan, getTableTargetColumnIndex, groupByColumn, groupRowChecker, groupRowLevelKeyGetter, groupedRows, groupingPanelItems, isAddedTableRow, isDataTableCell, isDataTableRow, isDetailRowExpanded, isDetailTableRow, isDetailToggleTableCell, isEditCommandsTableCell, isEditTableCell, isEditTableRow, isFilterTableCell, isFilterTableRow, isGroupIndentTableCell, isGroupTableCell, isGroupTableRow, isHeaderStubTableCell, isHeadingEditCommandsTableCell, isHeadingTableCell, isHeadingTableRow, isNoDataTableRow, isSelectAllTableCell, isSelectTableCell, orderedColumns, pageCount, paginatedRows, rowCount, rowIdGetter, rowsWithPageHeaders, setColumnFilter, setColumnSorting, setCurrentPage, setDetailRowExpanded, setPageSize, setRowsSelection, sortedRows, startEditRows, stopEditRows, tableColumnsWithDataRows, tableColumnsWithDetail, tableColumnsWithEditing, tableColumnsWithGrouping, tableColumnsWithSelection, tableColumnsWithWidths, tableHeaderRowsWithFilter, tableHeaderRowsWithReordering, tableRowsWithDataRows, tableRowsWithEditing, tableRowsWithExpandedDetail, tableRowsWithGrouping, tableRowsWithHeading, toggleColumn, toggleExpandedGroups, visibleTableColumns } from '@devexpress/dx-grid-core';
import { findDOMNode } from 'react-dom';

var asyncGenerator = function () {
  function AwaitValue(value) {
    this.value = value;
  }

  function AsyncGenerator(gen) {
    var front, back;

    function send(key, arg) {
      return new Promise(function (resolve, reject) {
        var request = {
          key: key,
          arg: arg,
          resolve: resolve,
          reject: reject,
          next: null
        };

        if (back) {
          back = back.next = request;
        } else {
          front = back = request;
          resume(key, arg);
        }
      });
    }

    function resume(key, arg) {
      try {
        var result = gen[key](arg);
        var value = result.value;

        if (value instanceof AwaitValue) {
          Promise.resolve(value.value).then(function (arg) {
            resume("next", arg);
          }, function (arg) {
            resume("throw", arg);
          });
        } else {
          settle(result.done ? "return" : "normal", result.value);
        }
      } catch (err) {
        settle("throw", err);
      }
    }

    function settle(type, value) {
      switch (type) {
        case "return":
          front.resolve({
            value: value,
            done: true
          });
          break;

        case "throw":
          front.reject(value);
          break;

        default:
          front.resolve({
            value: value,
            done: false
          });
          break;
      }

      front = front.next;

      if (front) {
        resume(front.key, front.arg);
      } else {
        back = null;
      }
    }

    this._invoke = send;

    if (typeof gen.return !== "function") {
      this.return = undefined;
    }
  }

  if (typeof Symbol === "function" && Symbol.asyncIterator) {
    AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
      return this;
    };
  }

  AsyncGenerator.prototype.next = function (arg) {
    return this._invoke("next", arg);
  };

  AsyncGenerator.prototype.throw = function (arg) {
    return this._invoke("throw", arg);
  };

  AsyncGenerator.prototype.return = function (arg) {
    return this._invoke("return", arg);
  };

  return {
    wrap: function (fn) {
      return function () {
        return new AsyncGenerator(fn.apply(this, arguments));
      };
    },
    await: function (value) {
      return new AwaitValue(value);
    }
  };
}();





var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();





var defineProperty = function (obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
};

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};



var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};









var objectWithoutProperties = function (obj, keys) {
  var target = {};

  for (var i in obj) {
    if (keys.indexOf(i) >= 0) continue;
    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
    target[i] = obj[i];
  }

  return target;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};





var slicedToArray = function () {
  function sliceIterator(arr, i) {
    var _arr = [];
    var _n = true;
    var _d = false;
    var _e = undefined;

    try {
      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
        _arr.push(_s.value);

        if (i && _arr.length === i) break;
      }
    } catch (err) {
      _d = true;
      _e = err;
    } finally {
      try {
        if (!_n && _i["return"]) _i["return"]();
      } finally {
        if (_d) throw _e;
      }
    }

    return _arr;
  }

  return function (arr, i) {
    if (Array.isArray(arr)) {
      return arr;
    } else if (Symbol.iterator in Object(arr)) {
      return sliceIterator(arr, i);
    } else {
      throw new TypeError("Invalid attempt to destructure non-iterable instance");
    }
  };
}();













var toConsumableArray = function (arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  } else {
    return Array.from(arr);
  }
};

var GridCore = function (_React$PureComponent) {
  inherits(GridCore, _React$PureComponent);

  function GridCore() {
    classCallCheck(this, GridCore);
    return possibleConstructorReturn(this, (GridCore.__proto__ || Object.getPrototypeOf(GridCore)).apply(this, arguments));
  }

  createClass(GridCore, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          rows = _props.rows,
          columns = _props.columns,
          getRowId = _props.getRowId,
          getCellValue = _props.getCellValue,
          rootTemplate = _props.rootTemplate,
          headerPlaceholderTemplate = _props.headerPlaceholderTemplate,
          footerPlaceholderTemplate = _props.footerPlaceholderTemplate;


      return React.createElement(
        PluginContainer,
        null,
        React.createElement(Getter, { name: 'rows', value: rows }),
        React.createElement(Getter, { name: 'getRowId', value: rowIdGetter(getRowId, rows) }),
        React.createElement(Getter, { name: 'columns', value: columns }),
        React.createElement(Getter, { name: 'getCellValue', value: cellValueGetter(getCellValue, columns) }),
        React.createElement(Template, { name: 'header' }),
        React.createElement(Template, { name: 'body' }),
        React.createElement(Template, { name: 'footer' }),
        React.createElement(
          Template,
          { name: 'root' },
          function () {
            return rootTemplate({
              headerTemplate: function headerTemplate() {
                return React.createElement(
                  TemplatePlaceholder,
                  { name: 'header' },
                  function (content) {
                    return headerPlaceholderTemplate ? headerPlaceholderTemplate({ children: content }) : content;
                  }
                );
              },
              bodyTemplate: function bodyTemplate() {
                return React.createElement(TemplatePlaceholder, { name: 'body' });
              },
              footerTemplate: function footerTemplate() {
                return React.createElement(
                  TemplatePlaceholder,
                  { name: 'footer' },
                  function (content) {
                    return footerPlaceholderTemplate ? footerPlaceholderTemplate({ children: content }) : content;
                  }
                );
              }
            });
          }
        )
      );
    }
  }]);
  return GridCore;
}(React.PureComponent);

GridCore.propTypes = {
  rows: PropTypes.array.isRequired,
  getRowId: PropTypes.func,
  getCellValue: PropTypes.func,
  columns: PropTypes.array.isRequired,
  rootTemplate: PropTypes.func.isRequired,
  headerPlaceholderTemplate: PropTypes.func,
  footerPlaceholderTemplate: PropTypes.func
};

GridCore.defaultProps = {
  getRowId: null,
  getCellValue: null,
  headerPlaceholderTemplate: null,
  footerPlaceholderTemplate: null
};

var Grid = function Grid(_ref) {
  var rows = _ref.rows,
      columns = _ref.columns,
      getRowId = _ref.getRowId,
      getCellValue = _ref.getCellValue,
      rootTemplate = _ref.rootTemplate,
      headerPlaceholderTemplate = _ref.headerPlaceholderTemplate,
      footerPlaceholderTemplate = _ref.footerPlaceholderTemplate,
      children = _ref.children;
  return React.createElement(
    PluginHost,
    null,
    React.createElement(GridCore, {
      rows: rows,
      columns: columns,
      getRowId: getRowId,
      getCellValue: getCellValue,
      rootTemplate: rootTemplate,
      headerPlaceholderTemplate: headerPlaceholderTemplate,
      footerPlaceholderTemplate: footerPlaceholderTemplate
    }),
    children
  );
};

Grid.propTypes = {
  rows: PropTypes.array.isRequired,
  getRowId: PropTypes.func,
  getCellValue: PropTypes.func,
  columns: PropTypes.array.isRequired,
  rootTemplate: PropTypes.func.isRequired,
  headerPlaceholderTemplate: PropTypes.func,
  footerPlaceholderTemplate: PropTypes.func,
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};

Grid.defaultProps = {
  getRowId: null,
  getCellValue: null,
  headerPlaceholderTemplate: null,
  footerPlaceholderTemplate: null,
  children: null
};

var ColumnChooser = function (_React$PureComponent) {
  inherits(ColumnChooser, _React$PureComponent);

  function ColumnChooser(props) {
    classCallCheck(this, ColumnChooser);

    var _this = possibleConstructorReturn(this, (ColumnChooser.__proto__ || Object.getPrototypeOf(ColumnChooser)).call(this, props));

    var onHiddenColumnsChange = props.onHiddenColumnsChange;


    _this.handleColumnToggle = function (columnName) {
      if (!onHiddenColumnsChange) return;

      var hiddenColumns = _this.props.hiddenColumns;

      var nextHiddenColumnNames = toggleColumn(hiddenColumns, columnName);
      onHiddenColumnsChange(nextHiddenColumnNames);
    };
    return _this;
  }

  createClass(ColumnChooser, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          columns = _props.columns,
          hiddenColumns = _props.hiddenColumns,
          containerTemplate = _props.containerTemplate,
          itemTemplate = _props.itemTemplate;

      var items = columnChooserItems(columns, hiddenColumns);
      var handleItemToggle = function handleItemToggle(item) {
        return _this2.handleColumnToggle(item.column.name);
      };

      return React.createElement(
        TemplateRenderer,
        {
          template: containerTemplate,
          params: {
            items: items,
            onItemToggle: handleItemToggle
          }
        },
        items.map(function (item) {
          return React.createElement(TemplateRenderer, {
            key: item.column.name,
            template: itemTemplate,
            params: {
              item: item,
              onToggle: function onToggle() {
                return handleItemToggle(item);
              }
            }
          });
        })
      );
    }
  }]);
  return ColumnChooser;
}(React.PureComponent);

ColumnChooser.propTypes = {
  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
  hiddenColumns: PropTypes.arrayOf(PropTypes.string),
  onHiddenColumnsChange: PropTypes.func,
  containerTemplate: PropTypes.func.isRequired,
  itemTemplate: PropTypes.func.isRequired
};

ColumnChooser.defaultProps = {
  hiddenColumns: [],
  onHiddenColumnsChange: undefined
};

var FilteringState = function (_React$PureComponent) {
  inherits(FilteringState, _React$PureComponent);

  function FilteringState(props) {
    classCallCheck(this, FilteringState);

    var _this = possibleConstructorReturn(this, (FilteringState.__proto__ || Object.getPrototypeOf(FilteringState)).call(this, props));

    _this.state = {
      filters: props.defaultFilters || []
    };

    _this.setColumnFilter = function (filters, _ref) {
      var columnName = _ref.columnName,
          config = _ref.config;
      var onFiltersChange = _this.props.onFiltersChange;

      var nextFilters = setColumnFilter(filters, { columnName: columnName, config: config });
      _this.setState({ filters: nextFilters });
      if (onFiltersChange) {
        onFiltersChange(nextFilters);
      }
    };
    return _this;
  }

  createClass(FilteringState, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var filters = this.props.filters || this.state.filters;

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'FilteringState'
        },
        React.createElement(Action, {
          name: 'setColumnFilter',
          action: function action(_ref2) {
            var columnName = _ref2.columnName,
                config = _ref2.config;
            return _this2.setColumnFilter(filters, { columnName: columnName, config: config });
          }
        }),
        React.createElement(Getter, { name: 'filters', value: filters })
      );
    }
  }]);
  return FilteringState;
}(React.PureComponent);

FilteringState.propTypes = {
  filters: PropTypes.array,
  defaultFilters: PropTypes.array,
  onFiltersChange: PropTypes.func
};

FilteringState.defaultProps = {
  filters: undefined,
  defaultFilters: undefined,
  onFiltersChange: undefined
};

var pluginDependencies = [{ pluginName: 'FilteringState' }];

var LocalFiltering = function (_React$PureComponent) {
  inherits(LocalFiltering, _React$PureComponent);

  function LocalFiltering() {
    classCallCheck(this, LocalFiltering);
    return possibleConstructorReturn(this, (LocalFiltering.__proto__ || Object.getPrototypeOf(LocalFiltering)).apply(this, arguments));
  }

  createClass(LocalFiltering, [{
    key: 'render',
    value: function render() {
      var getColumnPredicate = this.props.getColumnPredicate;


      var rowsComputed = function rowsComputed(_ref) {
        var rows = _ref.rows,
            filters = _ref.filters,
            getCellValue = _ref.getCellValue,
            isGroupRow = _ref.isGroupRow,
            getRowLevelKey = _ref.getRowLevelKey;
        return filteredRows(rows, filters, getCellValue, getColumnPredicate, isGroupRow, getRowLevelKey);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'LocalFiltering',
          dependencies: pluginDependencies
        },
        React.createElement(Getter, { name: 'rows', computed: rowsComputed })
      );
    }
  }]);
  return LocalFiltering;
}(React.PureComponent);

LocalFiltering.propTypes = {
  getColumnPredicate: PropTypes.func
};

LocalFiltering.defaultProps = {
  getColumnPredicate: undefined
};

var EditingState = function (_React$PureComponent) {
  inherits(EditingState, _React$PureComponent);

  function EditingState(props) {
    classCallCheck(this, EditingState);

    var _this = possibleConstructorReturn(this, (EditingState.__proto__ || Object.getPrototypeOf(EditingState)).call(this, props));

    _this.state = {
      editingRows: props.defaultEditingRows || [],
      addedRows: props.defaultAddedRows || [],
      changedRows: props.defaultChangedRows || {},
      deletedRows: props.defaultDeletedRows || []
    };

    _this.reduceEditingRows = function (reducer) {
      return function (editingRows, payload) {
        var onEditingRowsChange = _this.props.onEditingRowsChange;

        var nextEditingRows = reducer(editingRows, payload);
        _this.setState({ editingRows: nextEditingRows });
        if (onEditingRowsChange) {
          onEditingRowsChange(nextEditingRows);
        }
      };
    };
    _this.reduceChangedRows = function (reducer) {
      return function (changedRows, payload) {
        var onChangedRowsChange = _this.props.onChangedRowsChange;

        var nextChangedRows = reducer(changedRows, payload);
        _this.setState({ changedRows: nextChangedRows });
        if (onChangedRowsChange) {
          onChangedRowsChange(nextChangedRows);
        }
      };
    };
    _this.reduceAddedRows = function (reducer) {
      return function (addedRows, payload) {
        var onAddedRowsChange = _this.props.onAddedRowsChange;

        var nextAddedRows = reducer(addedRows, payload);
        _this.setState({ addedRows: nextAddedRows });
        if (onAddedRowsChange) {
          onAddedRowsChange(nextAddedRows);
        }
      };
    };
    _this.reduceDeletedRows = function (reducer) {
      return function (deletedRows, payload) {
        var onDeletedRowsChange = _this.props.onDeletedRowsChange;

        var nextDeletedRows = reducer(deletedRows, payload);
        _this.setState({ deletedRows: nextDeletedRows });
        if (onDeletedRowsChange) {
          onDeletedRowsChange(nextDeletedRows);
        }
      };
    };

    _this.startEditRows = _this.reduceEditingRows(startEditRows);
    _this.stopEditRows = _this.reduceEditingRows(stopEditRows);

    _this.changeRow = _this.reduceChangedRows(changeRow);
    _this.cancelChangedRows = _this.reduceChangedRows(cancelChanges);

    _this.addRow = _this.reduceAddedRows(addRow);
    _this.changeAddedRow = _this.reduceAddedRows(changeAddedRow);
    _this.cancelAddedRows = _this.reduceAddedRows(cancelAddedRows);

    _this.deleteRows = _this.reduceDeletedRows(deleteRows);
    _this.cancelDeletedRows = _this.reduceDeletedRows(cancelDeletedRows);

    _this.commitAddedRows = function (addedRows, _ref) {
      var rowIds = _ref.rowIds;

      var toCommit = addedRowsByIds(addedRows, rowIds);
      var changeSet = { added: toCommit };
      _this.commitChanges(changeSet);
      _this.cancelAddedRows(addedRows, { rowIds: rowIds });
    };
    _this.commitChangedRows = function (changedRows, _ref2) {
      var rowIds = _ref2.rowIds;

      var toCommit = changedRowsByIds(changedRows, rowIds);
      var changeSet = { changed: toCommit };
      _this.commitChanges(changeSet);
      _this.cancelChangedRows(changedRows, { rowIds: rowIds });
    };
    _this.commitDeletedRows = function (deletedRows, _ref3) {
      var rowIds = _ref3.rowIds;

      var changeSet = { deleted: rowIds };
      _this.commitChanges(changeSet);
      _this.cancelDeletedRows(deletedRows, { rowIds: rowIds });
    };

    _this.commitChanges = function (changeSet) {
      var onCommitChanges = _this.props.onCommitChanges;

      if (onCommitChanges) {
        onCommitChanges(changeSet);
      }
    };

    _this.createRowChangeComputed = function (_ref4) {
      var columns = _ref4.columns;
      return computedCreateRowChange(columns);
    };
    return _this;
  }

  createClass(EditingState, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var editingRows = this.props.editingRows || this.state.editingRows;
      var changedRows = this.props.changedRows || this.state.changedRows;
      var addedRows = this.props.addedRows || this.state.addedRows;
      var deletedRows = this.props.deletedRows || this.state.deletedRows;
      var createRowChange = this.props.createRowChange;


      return React.createElement(
        PluginContainer,
        {
          pluginName: 'EditingState'
        },
        React.createElement(Action, {
          name: 'startEditRows',
          action: function action(_ref5) {
            var rowIds = _ref5.rowIds;
            return _this2.startEditRows(editingRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'stopEditRows',
          action: function action(_ref6) {
            var rowIds = _ref6.rowIds;
            return _this2.stopEditRows(editingRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'addRow',
          action: function action() {
            return _this2.addRow(addedRows, { row: {} });
          }
        }),
        React.createElement(Action, {
          name: 'changeAddedRow',
          action: function action(_ref7) {
            var rowId = _ref7.rowId,
                change = _ref7.change;
            return _this2.changeAddedRow(addedRows, { rowId: rowId, change: change });
          }
        }),
        React.createElement(Action, {
          name: 'cancelAddedRows',
          action: function action(_ref8) {
            var rowIds = _ref8.rowIds;
            return _this2.cancelAddedRows(addedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'commitAddedRows',
          action: function action(_ref9) {
            var rowIds = _ref9.rowIds;
            return _this2.commitAddedRows(addedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'changeRow',
          action: function action(_ref10) {
            var rowId = _ref10.rowId,
                change = _ref10.change;
            return _this2.changeRow(changedRows, { rowId: rowId, change: change });
          }
        }),
        React.createElement(Action, {
          name: 'cancelChangedRows',
          action: function action(_ref11) {
            var rowIds = _ref11.rowIds;
            return _this2.cancelChangedRows(changedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'commitChangedRows',
          action: function action(_ref12) {
            var rowIds = _ref12.rowIds;
            return _this2.commitChangedRows(changedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'deleteRows',
          action: function action(_ref13) {
            var rowIds = _ref13.rowIds;
            return _this2.deleteRows(deletedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'cancelDeletedRows',
          action: function action(_ref14) {
            var rowIds = _ref14.rowIds;
            return _this2.cancelDeletedRows(deletedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Action, {
          name: 'commitDeletedRows',
          action: function action(_ref15) {
            var rowIds = _ref15.rowIds;
            return _this2.commitDeletedRows(deletedRows, { rowIds: rowIds });
          }
        }),
        React.createElement(Getter, { name: 'editingRows', value: editingRows }),
        React.createElement(Getter, { name: 'changedRows', value: changedRows }),
        React.createElement(Getter, { name: 'addedRows', value: addedRows }),
        React.createElement(Getter, { name: 'deletedRows', value: deletedRows }),
        React.createElement(Getter, {
          name: 'createRowChange',
          computed: createRowChange ? function () {
            return createRowChange;
          } : this.createRowChangeComputed
        })
      );
    }
  }]);
  return EditingState;
}(React.PureComponent);

EditingState.propTypes = {
  editingRows: PropTypes.array,
  defaultEditingRows: PropTypes.array,
  onEditingRowsChange: PropTypes.func,

  addedRows: PropTypes.array,
  defaultAddedRows: PropTypes.array,
  onAddedRowsChange: PropTypes.func,

  changedRows: PropTypes.object,
  defaultChangedRows: PropTypes.object,
  onChangedRowsChange: PropTypes.func,
  createRowChange: PropTypes.func,

  deletedRows: PropTypes.array,
  defaultDeletedRows: PropTypes.array,
  onDeletedRowsChange: PropTypes.func,

  onCommitChanges: PropTypes.func.isRequired
};

EditingState.defaultProps = {
  editingRows: undefined,
  defaultEditingRows: undefined,
  onEditingRowsChange: undefined,

  addedRows: undefined,
  defaultAddedRows: undefined,
  onAddedRowsChange: undefined,

  deletedRows: undefined,
  defaultDeletedRows: undefined,
  onDeletedRowsChange: undefined,

  changedRows: undefined,
  defaultChangedRows: undefined,
  onChangedRowsChange: undefined,
  createRowChange: undefined
};

var PagingState = function (_React$PureComponent) {
  inherits(PagingState, _React$PureComponent);

  function PagingState(props) {
    classCallCheck(this, PagingState);

    var _this = possibleConstructorReturn(this, (PagingState.__proto__ || Object.getPrototypeOf(PagingState)).call(this, props));

    _this.state = {
      currentPage: props.defaultCurrentPage,
      pageSize: props.defaultPageSize
    };

    _this.setCurrentPage = function (page) {
      var onCurrentPageChange = _this.props.onCurrentPageChange;

      var currentPage = setCurrentPage(_this.state.currentPage, page);
      _this.setState({ currentPage: currentPage });
      if (onCurrentPageChange) {
        onCurrentPageChange(currentPage);
      }
    };

    _this.setPageSize = function (size) {
      var onPageSizeChange = _this.props.onPageSizeChange;

      var pageSize = setPageSize(_this.state.pageSize, size);
      _this.setState({ pageSize: pageSize });
      if (onPageSizeChange) {
        onPageSizeChange(pageSize);
      }
    };
    return _this;
  }

  createClass(PagingState, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          _props$pageSize = _props.pageSize,
          pageSize = _props$pageSize === undefined ? this.state.pageSize : _props$pageSize,
          _props$currentPage = _props.currentPage,
          currentPage = _props$currentPage === undefined ? this.state.currentPage : _props$currentPage,
          totalCount = _props.totalCount;


      return React.createElement(
        PluginContainer,
        {
          pluginName: 'PagingState'
        },
        React.createElement(Action, { name: 'setCurrentPage', action: function action(page) {
            return _this2.setCurrentPage(page);
          } }),
        React.createElement(Action, { name: 'setPageSize', action: function action(size) {
            return _this2.setPageSize(size);
          } }),
        React.createElement(Getter, { name: 'currentPage', value: currentPage }),
        React.createElement(Getter, { name: 'pageSize', value: pageSize }),
        React.createElement(Getter, { name: 'totalCount', value: totalCount })
      );
    }
  }]);
  return PagingState;
}(React.PureComponent);

PagingState.propTypes = {
  pageSize: PropTypes.number,
  defaultPageSize: PropTypes.number,
  onPageSizeChange: PropTypes.func,
  currentPage: PropTypes.number,
  defaultCurrentPage: PropTypes.number,
  onCurrentPageChange: PropTypes.func,
  totalCount: PropTypes.number
};

PagingState.defaultProps = {
  pageSize: undefined,
  defaultPageSize: 10,
  onPageSizeChange: undefined,
  currentPage: undefined,
  defaultCurrentPage: 0,
  onCurrentPageChange: undefined,
  totalCount: 0
};

var pluginDependencies$1 = [{ pluginName: 'PagingState' }];

var rowsWithHeadersComputed = function rowsWithHeadersComputed(_ref) {
  var rows = _ref.rows,
      pageSize = _ref.pageSize,
      getRowLevelKey = _ref.getRowLevelKey;
  return rowsWithPageHeaders(rows, pageSize, getRowLevelKey);
};
var totalCountComputed = function totalCountComputed(_ref2) {
  var rows = _ref2.rows;
  return rowCount(rows);
};
var paginatedRowsComputed = function paginatedRowsComputed(_ref3) {
  var rows = _ref3.rows,
      pageSize = _ref3.pageSize,
      currentPage = _ref3.currentPage;
  return paginatedRows(rows, pageSize, currentPage);
};

// eslint-disable-next-line react/prefer-stateless-function
var LocalPaging = function (_React$PureComponent) {
  inherits(LocalPaging, _React$PureComponent);

  function LocalPaging() {
    classCallCheck(this, LocalPaging);
    return possibleConstructorReturn(this, (LocalPaging.__proto__ || Object.getPrototypeOf(LocalPaging)).apply(this, arguments));
  }

  createClass(LocalPaging, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        PluginContainer,
        {
          pluginName: 'LocalPaging',
          dependencies: pluginDependencies$1
        },
        React.createElement(Getter, { name: 'rows', computed: rowsWithHeadersComputed }),
        React.createElement(Getter, { name: 'totalCount', computed: totalCountComputed }),
        React.createElement(Watcher, {
          watch: function watch(getter) {
            return [getter('totalCount'), getter('currentPage'), getter('pageSize')];
          },
          onChange: function onChange(action, totalCount, currentPage, pageSize) {
            var totalPages = pageCount(totalCount, pageSize);
            if (totalPages - 1 < currentPage) {
              action('setCurrentPage')(Math.max(totalPages - 1, 0));
            }
          }
        }),
        React.createElement(Getter, { name: 'rows', computed: paginatedRowsComputed })
      );
    }
  }]);
  return LocalPaging;
}(React.PureComponent);

var dependencies = [{ pluginName: 'SortingState', optional: true }];

var adjustSortIndex = function adjustSortIndex(sortIndex, grouping, sorting) {
  return Math.max(grouping.slice(0, sortIndex).reduce(function (acc, columnGrouping) {
    var columnSortingIndex = sorting.findIndex(function (columnSorting) {
      return columnSorting.columnName === columnGrouping.columnName;
    });
    return columnSortingIndex === -1 ? acc - 1 : acc;
  }, sortIndex), 0);
};

var GroupingState = function (_React$PureComponent) {
  inherits(GroupingState, _React$PureComponent);

  function GroupingState(props) {
    classCallCheck(this, GroupingState);

    var _this = possibleConstructorReturn(this, (GroupingState.__proto__ || Object.getPrototypeOf(GroupingState)).call(this, props));

    _this.state = {
      grouping: props.defaultGrouping,
      groupingChange: null,
      expandedGroups: props.defaultExpandedGroups
    };

    _this.groupByColumn = _this.groupByColumn.bind(_this);
    _this.toggleGroupExpanded = _this.applyReducer.bind(_this, toggleExpandedGroups);
    _this.draftGroupingChange = _this.applyReducer.bind(_this, draftGroupingChange);
    _this.cancelGroupingChange = _this.applyReducer.bind(_this, cancelGroupingChange);
    _this.setColumnSorting = _this.setColumnSorting.bind(_this);
    return _this;
  }

  createClass(GroupingState, [{
    key: 'getState',
    value: function getState() {
      return _extends({}, this.state, {
        grouping: this.props.grouping || this.state.grouping,
        expandedGroups: this.props.expandedGroups || this.state.expandedGroups
      });
    }
  }, {
    key: 'setColumnSorting',
    value: function setColumnSorting$$1(_ref, _ref2, _ref3) {
      var sorting = _ref2.sorting;
      var _setColumnSorting = _ref3.setColumnSorting;
      var columnName = _ref.columnName,
          keepOther = _ref.keepOther,
          restParams = objectWithoutProperties(_ref, ['columnName', 'keepOther']);

      var _getState = this.getState(),
          grouping = _getState.grouping;

      var groupingIndex = grouping.findIndex(function (columnGrouping) {
        return columnGrouping.columnName === columnName;
      });
      if (groupingIndex === -1) {
        _setColumnSorting(_extends({
          columnName: columnName,
          keepOther: keepOther || grouping.map(function (columnGrouping) {
            return columnGrouping.columnName;
          })
        }, restParams));
        return false;
      }

      var sortIndex = adjustSortIndex(groupingIndex, grouping, sorting);
      _setColumnSorting(_extends({
        columnName: columnName,
        keepOther: true,
        sortIndex: sortIndex
      }, restParams));
      return false;
    }
  }, {
    key: 'groupByColumn',
    value: function groupByColumn$$1(_ref4, _ref5, _ref6) {
      var columnName = _ref4.columnName,
          groupIndex = _ref4.groupIndex;
      var sorting = _ref5.sorting;
      var setColumnSorting$$1 = _ref6.setColumnSorting;
      var prevGrouping = this.state.grouping;

      var _applyReducer = this.applyReducer(groupByColumn, { columnName: columnName, groupIndex: groupIndex }),
          grouping = _applyReducer.grouping;

      if (!sorting) return;

      var columnSortingIndex = sorting.findIndex(function (columnSorting) {
        return columnSorting.columnName === columnName;
      });
      var prevGroupingIndex = prevGrouping.findIndex(function (columnGrouping) {
        return columnGrouping.columnName === columnName;
      });
      var groupingIndex = grouping.findIndex(function (columnGrouping) {
        return columnGrouping.columnName === columnName;
      });

      if (columnSortingIndex === -1 || prevGroupingIndex === prevGrouping.length - 1 && groupingIndex === -1) return;

      var sortIndex = adjustSortIndex(groupingIndex === -1 ? grouping.length : groupingIndex, grouping, sorting);

      if (columnSortingIndex === sortIndex) return;

      setColumnSorting$$1(_extends({
        keepOther: true,
        sortIndex: sortIndex
      }, sorting[columnSortingIndex]));
    }
  }, {
    key: 'applyReducer',
    value: function applyReducer(reduce, payload) {
      var prevState = this.getState();
      var statePart = reduce(prevState, payload);
      this.setState(statePart);
      var state = _extends({}, prevState, statePart);

      var grouping = state.grouping;
      var onGroupingChange = this.props.onGroupingChange;

      if (onGroupingChange && grouping !== prevState.grouping) {
        onGroupingChange(grouping);
      }

      var expandedGroups = state.expandedGroups;
      var onExpandedGroupsChange = this.props.onExpandedGroupsChange;

      if (onExpandedGroupsChange && expandedGroups !== prevState.expandedGroups) {
        onExpandedGroupsChange(expandedGroups);
      }

      return state;
    }
  }, {
    key: 'render',
    value: function render() {
      var _getState2 = this.getState(),
          grouping = _getState2.grouping,
          groupingChange = _getState2.groupingChange,
          expandedGroups = _getState2.expandedGroups;

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'GroupingState',
          dependencies: dependencies
        },
        React.createElement(Getter, { name: 'grouping', value: grouping }),
        React.createElement(Getter, { name: 'draftGrouping', value: draftGrouping(grouping, groupingChange) }),
        React.createElement(Getter, { name: 'expandedGroups', value: new Set(expandedGroups) }),
        React.createElement(Action, { name: 'groupByColumn', action: this.groupByColumn }),
        React.createElement(Action, { name: 'toggleGroupExpanded', action: this.toggleGroupExpanded }),
        React.createElement(Action, { name: 'draftGroupingChange', action: this.draftGroupingChange }),
        React.createElement(Action, { name: 'cancelGroupingChange', action: this.cancelGroupingChange }),
        React.createElement(Action, { name: 'setColumnSorting', action: this.setColumnSorting })
      );
    }
  }]);
  return GroupingState;
}(React.PureComponent);

GroupingState.propTypes = {
  grouping: PropTypes.array,
  defaultGrouping: PropTypes.array,
  onGroupingChange: PropTypes.func,
  expandedGroups: PropTypes.array,
  defaultExpandedGroups: PropTypes.array,
  onExpandedGroupsChange: PropTypes.func
};

GroupingState.defaultProps = {
  grouping: undefined,
  defaultGrouping: [],
  onGroupingChange: undefined,
  expandedGroups: undefined,
  defaultExpandedGroups: [],
  onExpandedGroupsChange: undefined
};

var pluginDependencies$2 = [{ pluginName: 'GroupingState' }];

var expandedGroupedRowsComputed = function expandedGroupedRowsComputed(_ref) {
  var rows = _ref.rows,
      grouping = _ref.grouping,
      expandedGroups = _ref.expandedGroups;
  return expandedGroupRows(rows, grouping, expandedGroups);
};

var LocalGrouping = function (_React$PureComponent) {
  inherits(LocalGrouping, _React$PureComponent);

  function LocalGrouping() {
    classCallCheck(this, LocalGrouping);
    return possibleConstructorReturn(this, (LocalGrouping.__proto__ || Object.getPrototypeOf(LocalGrouping)).apply(this, arguments));
  }

  createClass(LocalGrouping, [{
    key: 'render',
    value: function render() {
      var getColumnIdentity = this.props.getColumnIdentity;


      var groupedRowsComputed = function groupedRowsComputed(_ref2) {
        var rows = _ref2.rows,
            grouping = _ref2.grouping,
            getCellValue = _ref2.getCellValue;
        return groupedRows(rows, grouping, getCellValue, getColumnIdentity);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'LocalGrouping',
          dependencies: pluginDependencies$2
        },
        React.createElement(Getter, { name: 'isGroupRow', value: groupRowChecker }),
        React.createElement(Getter, { name: 'getRowLevelKey', value: groupRowLevelKeyGetter }),
        React.createElement(Getter, { name: 'rows', computed: groupedRowsComputed }),
        React.createElement(Getter, { name: 'rows', computed: expandedGroupedRowsComputed })
      );
    }
  }]);
  return LocalGrouping;
}(React.PureComponent);

LocalGrouping.propTypes = {
  getColumnIdentity: PropTypes.func
};

LocalGrouping.defaultProps = {
  getColumnIdentity: undefined
};

var pluginDependencies$3 = [{ pluginName: 'GroupingState' }];

var expandedGroupedRowsComputed$1 = function expandedGroupedRowsComputed(_ref) {
  var rows = _ref.rows,
      grouping = _ref.grouping,
      expandedGroups = _ref.expandedGroups;
  return expandedGroupRows(rows, grouping, expandedGroups);
};
var getRowIdComputed = function getRowIdComputed(_ref2) {
  var getRowId = _ref2.getRowId,
      rows = _ref2.rows;
  return customGroupingRowIdGetter(getRowId, rows);
};

var CustomGrouping = function (_React$PureComponent) {
  inherits(CustomGrouping, _React$PureComponent);

  function CustomGrouping() {
    classCallCheck(this, CustomGrouping);
    return possibleConstructorReturn(this, (CustomGrouping.__proto__ || Object.getPrototypeOf(CustomGrouping)).apply(this, arguments));
  }

  createClass(CustomGrouping, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          getChildGroups = _props.getChildGroups,
          appliedGrouping = _props.grouping,
          appliedExpandedGroups = _props.expandedGroups;

      var groupedRowsComputed = function groupedRowsComputed(_ref3) {
        var rows = _ref3.rows,
            grouping = _ref3.grouping;
        return customGroupedRows(rows, grouping, getChildGroups);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'CustomGrouping',
          dependencies: pluginDependencies$3
        },
        appliedGrouping && React.createElement(Getter, { name: 'grouping', value: appliedGrouping }),
        appliedExpandedGroups && React.createElement(Getter, { name: 'expandedGroups', value: new Set(appliedExpandedGroups) }),
        React.createElement(Getter, { name: 'isGroupRow', value: groupRowChecker }),
        React.createElement(Getter, { name: 'getRowLevelKey', value: groupRowLevelKeyGetter }),
        React.createElement(Getter, { name: 'rows', computed: groupedRowsComputed }),
        React.createElement(Getter, { name: 'getRowId', computed: getRowIdComputed }),
        React.createElement(Getter, { name: 'rows', computed: expandedGroupedRowsComputed$1 })
      );
    }
  }]);
  return CustomGrouping;
}(React.PureComponent);

CustomGrouping.propTypes = {
  getChildGroups: PropTypes.func.isRequired,
  grouping: PropTypes.array,
  expandedGroups: PropTypes.array
};

CustomGrouping.defaultProps = {
  grouping: undefined,
  expandedGroups: undefined
};

var availableToSelectComputed = function availableToSelectComputed(_ref) {
  var rows = _ref.rows,
      getRowId = _ref.getRowId,
      isGroupRow = _ref.isGroupRow;
  return getAvailableToSelect(rows, getRowId, isGroupRow);
};

var SelectionState = function (_React$PureComponent) {
  inherits(SelectionState, _React$PureComponent);

  function SelectionState(props) {
    classCallCheck(this, SelectionState);

    var _this = possibleConstructorReturn(this, (SelectionState.__proto__ || Object.getPrototypeOf(SelectionState)).call(this, props));

    _this.state = {
      selection: props.defaultSelection || []
    };

    _this.changeSelection = function (selection) {
      var onSelectionChange = _this.props.onSelectionChange;

      _this.setState({ selection: selection });
      if (onSelectionChange) {
        onSelectionChange(selection);
      }
    };
    return _this;
  }

  createClass(SelectionState, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var selection = this.props.selection || this.state.selection;

      var selectionComputed = function selectionComputed(_ref2) {
        var availableToSelect = _ref2.availableToSelect;
        return getAvailableSelection(selection, availableToSelect);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'SelectionState'
        },
        React.createElement(Action, {
          name: 'setRowsSelection',
          action: function action(_ref3) {
            var rowIds = _ref3.rowIds,
                selected = _ref3.selected;

            _this2.changeSelection(setRowsSelection(selection, { rowIds: rowIds, selected: selected }));
          }
        }),
        React.createElement(Getter, { name: 'availableToSelect', computed: availableToSelectComputed }),
        React.createElement(Getter, { name: 'selection', computed: selectionComputed })
      );
    }
  }]);
  return SelectionState;
}(React.PureComponent);

SelectionState.propTypes = {
  selection: PropTypes.array,
  defaultSelection: PropTypes.array,
  onSelectionChange: PropTypes.func
};

SelectionState.defaultProps = {
  selection: undefined,
  defaultSelection: undefined,
  onSelectionChange: undefined
};

var SortingState = function (_React$PureComponent) {
  inherits(SortingState, _React$PureComponent);

  function SortingState(props) {
    classCallCheck(this, SortingState);

    var _this = possibleConstructorReturn(this, (SortingState.__proto__ || Object.getPrototypeOf(SortingState)).call(this, props));

    _this.state = {
      sorting: props.defaultSorting
    };

    _this.setColumnSorting = _this.applyReducer.bind(_this, setColumnSorting);
    return _this;
  }

  createClass(SortingState, [{
    key: 'getState',
    value: function getState() {
      return {
        sorting: this.props.sorting || this.state.sorting
      };
    }
  }, {
    key: 'applyReducer',
    value: function applyReducer(reduce, payload) {
      var prevState = this.getState();
      var statePart = reduce(prevState, payload);
      this.setState(statePart);
      var state = _extends({}, prevState, statePart);

      var sorting = state.sorting;
      var onSortingChange = this.props.onSortingChange;

      if (onSortingChange && sorting !== prevState.sorting) {
        onSortingChange(sorting);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _getState = this.getState(),
          sorting = _getState.sorting;

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'SortingState'
        },
        React.createElement(Getter, { name: 'sorting', value: sorting }),
        React.createElement(Action, { name: 'setColumnSorting', action: this.setColumnSorting })
      );
    }
  }]);
  return SortingState;
}(React.PureComponent);

SortingState.propTypes = {
  sorting: PropTypes.array,
  defaultSorting: PropTypes.array,
  onSortingChange: PropTypes.func
};

SortingState.defaultProps = {
  sorting: undefined,
  defaultSorting: [],
  onSortingChange: undefined
};

var pluginDependencies$4 = [{ pluginName: 'SortingState' }];

var LocalSorting = function (_React$PureComponent) {
  inherits(LocalSorting, _React$PureComponent);

  function LocalSorting() {
    classCallCheck(this, LocalSorting);
    return possibleConstructorReturn(this, (LocalSorting.__proto__ || Object.getPrototypeOf(LocalSorting)).apply(this, arguments));
  }

  createClass(LocalSorting, [{
    key: 'render',
    value: function render() {
      var getColumnCompare = this.props.getColumnCompare;

      var rowsComputed = function rowsComputed(_ref) {
        var rows = _ref.rows,
            sorting = _ref.sorting,
            getCellValue = _ref.getCellValue,
            isGroupRow = _ref.isGroupRow,
            getRowLevelKey = _ref.getRowLevelKey;
        return sortedRows(rows, sorting, getCellValue, getColumnCompare, isGroupRow, getRowLevelKey);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'LocalSorting',
          dependencies: pluginDependencies$4
        },
        React.createElement(Getter, { name: 'rows', computed: rowsComputed })
      );
    }
  }]);
  return LocalSorting;
}(React.PureComponent);

LocalSorting.propTypes = {
  getColumnCompare: PropTypes.func
};

LocalSorting.defaultProps = {
  getColumnCompare: undefined
};

var getContainerTemplateArgs = function getContainerTemplateArgs(_ref, _ref2) {
  var payload = _ref.payload,
      clientOffset = _ref.clientOffset,
      columnTemplate = _ref.columnTemplate;
  var columns = _ref2.columns;
  return {
    clientOffset: clientOffset,
    columns: payload.filter(function (item) {
      return item.type === 'column';
    }).map(function (item) {
      return columns.find(function (column) {
        return column.name === item.columnName;
      });
    }),
    columnTemplate: columnTemplate
  };
};

var DragDropContext$1 = function (_React$PureComponent) {
  inherits(DragDropContext$$1, _React$PureComponent);

  function DragDropContext$$1(props) {
    classCallCheck(this, DragDropContext$$1);

    var _this = possibleConstructorReturn(this, (DragDropContext$$1.__proto__ || Object.getPrototypeOf(DragDropContext$$1)).call(this, props));

    _this.state = {
      payload: null,
      clientOffset: null
    };

    _this.change = function (_ref3) {
      var payload = _ref3.payload,
          clientOffset = _ref3.clientOffset;
      return _this.setState({ payload: payload, clientOffset: clientOffset });
    };
    return _this;
  }

  createClass(DragDropContext$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          containerTemplate = _props.containerTemplate,
          columnTemplate = _props.columnTemplate;
      var _state = this.state,
          payload = _state.payload,
          clientOffset = _state.clientOffset;


      return React.createElement(
        PluginContainer,
        {
          pluginName: 'DragDropContext'
        },
        React.createElement(
          Template,
          { name: 'root' },
          React.createElement(
            'div',
            null,
            React.createElement(
              DragDropContext,
              {
                onChange: this.change
              },
              React.createElement(TemplatePlaceholder, null)
            ),
            payload && React.createElement(
              TemplateConnector,
              null,
              function (getters) {
                return React.createElement(TemplateRenderer, {
                  template: containerTemplate,
                  params: getContainerTemplateArgs({ payload: payload, clientOffset: clientOffset, columnTemplate: columnTemplate }, getters)
                });
              }
            )
          )
        )
      );
    }
  }]);
  return DragDropContext$$1;
}(React.PureComponent);

DragDropContext$1.propTypes = {
  containerTemplate: PropTypes.func.isRequired,
  columnTemplate: PropTypes.func.isRequired
};

var pluginDependencies$5 = [{ pluginName: 'TableView' }];

var tableHeaderRowsComputed = function tableHeaderRowsComputed(_ref) {
  var tableHeaderRows = _ref.tableHeaderRows;
  return tableHeaderRowsWithReordering(tableHeaderRows);
};

var TableColumnReordering = function (_React$PureComponent) {
  inherits(TableColumnReordering, _React$PureComponent);

  function TableColumnReordering(props) {
    classCallCheck(this, TableColumnReordering);

    var _this = possibleConstructorReturn(this, (TableColumnReordering.__proto__ || Object.getPrototypeOf(TableColumnReordering)).call(this, props));

    _this.state = {
      order: props.defaultOrder || props.order,
      sourceColumnIndex: -1,
      targetColumnIndex: -1
    };

    _this.onOver = _this.handleOver.bind(_this);
    _this.onLeave = _this.handleLeave.bind(_this);
    _this.onDrop = _this.handleDrop.bind(_this);
    return _this;
  }

  createClass(TableColumnReordering, [{
    key: 'getState',
    value: function getState() {
      var state = this.state;
      var _props$order = this.props.order,
          order = _props$order === undefined ? state.order : _props$order;

      return _extends({}, state, { order: order });
    }
  }, {
    key: 'getDraftOrder',
    value: function getDraftOrder() {
      var _getState = this.getState(),
          order = _getState.order,
          sourceColumnIndex = _getState.sourceColumnIndex,
          targetColumnIndex = _getState.targetColumnIndex;

      return draftOrder(order, sourceColumnIndex, targetColumnIndex);
    }
  }, {
    key: 'getAvailableColumns',
    value: function getAvailableColumns() {
      var _this2 = this;

      return this.getDraftOrder().filter(function (columnName) {
        return !!_this2.cellDimensionGetters[columnName];
      });
    }
  }, {
    key: 'getCellDimensions',
    value: function getCellDimensions() {
      var _this3 = this;

      return this.getAvailableColumns().map(function (columnName) {
        return _this3.cellDimensionGetters[columnName]();
      });
    }
  }, {
    key: 'storeCellDimensionsGetter',
    value: function storeCellDimensionsGetter(tableColumn, data) {
      if (tableColumn.type === TABLE_DATA_TYPE) {
        this.cellDimensionGetters[tableColumn.column.name] = data;
      }
    }
  }, {
    key: 'handleOver',
    value: function handleOver(_ref2) {
      var payload = _ref2.payload,
          x = _ref2.clientOffset.x;

      var sourceColumnName = payload[0].columnName;
      var availableColumns = this.getAvailableColumns();
      var relativeSourceColumnIndex = availableColumns.indexOf(sourceColumnName);

      if (relativeSourceColumnIndex === -1) return;

      var cellDimensions = this.getCellDimensions();
      var overlappedColumns = cellDimensions.filter(function (_ref3) {
        var left = _ref3.left,
            right = _ref3.right;
        return left <= x && x <= right;
      });

      if (overlappedColumns.length > 1) return;

      var relativeTargetIndex = getTableTargetColumnIndex(cellDimensions, relativeSourceColumnIndex, x);

      if (relativeTargetIndex === -1) return;

      var _getState2 = this.getState(),
          prevSourceColumnIndex = _getState2.sourceColumnIndex,
          prevTargetColumnIndex = _getState2.targetColumnIndex;

      var draftOrder$$1 = this.getDraftOrder();
      var targetColumnIndex = draftOrder$$1.indexOf(availableColumns[relativeTargetIndex]);

      if (targetColumnIndex === prevTargetColumnIndex) return;

      var sourceColumnIndex = prevSourceColumnIndex === -1 ? draftOrder$$1.indexOf(sourceColumnName) : prevSourceColumnIndex;

      this.setState({
        sourceColumnIndex: sourceColumnIndex,
        targetColumnIndex: targetColumnIndex
      });
    }
  }, {
    key: 'handleLeave',
    value: function handleLeave() {
      this.setState({
        sourceColumnIndex: -1,
        targetColumnIndex: -1
      });
    }
  }, {
    key: 'handleDrop',
    value: function handleDrop() {
      var _getState3 = this.getState(),
          sourceColumnIndex = _getState3.sourceColumnIndex,
          targetColumnIndex = _getState3.targetColumnIndex,
          order = _getState3.order;

      var onOrderChange = this.props.onOrderChange;

      var nextOrder = changeColumnOrder(order, {
        sourceColumnName: order[sourceColumnIndex],
        targetColumnName: order[targetColumnIndex]
      });

      this.setState({
        order: nextOrder,
        sourceColumnIndex: -1,
        targetColumnIndex: -1
      });

      if (onOrderChange) {
        onOrderChange(nextOrder);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props = this.props,
          tableContainerTemplate = _props.tableContainerTemplate,
          reorderingRowTemplate = _props.reorderingRowTemplate,
          reorderingCellTemplate = _props.reorderingCellTemplate;

      var columnsComputed = function columnsComputed(_ref4) {
        var tableColumns = _ref4.tableColumns;
        return orderedColumns(tableColumns, _this4.getDraftOrder());
      };

      this.cellDimensionGetters = {};

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableColumnReordering',
          dependencies: pluginDependencies$5
        },
        React.createElement(Getter, { name: 'tableColumns', computed: columnsComputed }),
        React.createElement(Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed }),
        React.createElement(
          Template,
          { name: 'tableView' },
          function (params) {
            return React.createElement(
              TemplateRenderer,
              {
                template: tableContainerTemplate,
                params: _extends({}, params, {
                  onOver: _this4.onOver,
                  onLeave: _this4.onLeave,
                  onDrop: _this4.onDrop
                })
              },
              React.createElement(TemplatePlaceholder, null)
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref5) {
              var tableRow = _ref5.tableRow;
              return tableRow.type === TABLE_REORDERING_TYPE;
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: reorderingRowTemplate,
              params: params
            });
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref6) {
              var tableRow = _ref6.tableRow;
              return tableRow.type === TABLE_REORDERING_TYPE;
            }
          },
          function (params) {
            var cellDimensionsGetter = function cellDimensionsGetter(fn) {
              return _this4.storeCellDimensionsGetter(params.tableColumn, fn);
            };
            return React.createElement(TemplateRenderer, {
              template: reorderingCellTemplate,
              params: _extends({}, params, {
                getCellDimensions: cellDimensionsGetter
              })
            });
          }
        )
      );
    }
  }]);
  return TableColumnReordering;
}(React.PureComponent);

TableColumnReordering.propTypes = {
  order: PropTypes.arrayOf(PropTypes.string),
  defaultOrder: PropTypes.arrayOf(PropTypes.string),
  onOrderChange: PropTypes.func,
  tableContainerTemplate: PropTypes.func.isRequired,
  reorderingRowTemplate: PropTypes.func.isRequired,
  reorderingCellTemplate: PropTypes.func.isRequired
};

TableColumnReordering.defaultProps = {
  order: undefined,
  defaultOrder: undefined,
  onOrderChange: undefined
};

var getTableLayoutTemplateArgs = function getTableLayoutTemplateArgs(_ref, _ref2) {
  var rowTemplate = _ref.rowTemplate,
      cellTemplate = _ref.cellTemplate;
  var tableHeaderRows = _ref2.tableHeaderRows,
      tableBodyRows = _ref2.tableBodyRows,
      tableColumns = _ref2.tableColumns;
  return {
    headerRows: tableHeaderRows,
    bodyRows: tableBodyRows,
    columns: tableColumns,
    rowTemplate: rowTemplate,
    cellTemplate: cellTemplate
  };
};

var getDataTableCellTemplateArgs = function getDataTableCellTemplateArgs(params, _ref3) {
  var getCellValue = _ref3.getCellValue;
  return _extends({}, params, {
    row: params.tableRow.row,
    column: params.tableColumn.column,
    value: getCellValue(params.tableRow.row, params.tableColumn.column.name)
  });
};

var getValueFormatterArgs = function getValueFormatterArgs(params) {
  return {
    row: params.row,
    column: params.column,
    value: params.value
  };
};

var getDataTableRowTemplateArgs = function getDataTableRowTemplateArgs(params) {
  return _extends({}, params, {
    row: params.tableRow.row
  });
};

var tableHeaderRows = [];
var tableBodyRowsComputed = function tableBodyRowsComputed(_ref4) {
  var rows = _ref4.rows,
      getRowId = _ref4.getRowId;
  return tableRowsWithDataRows(rows, getRowId);
};
var tableColumnsComputed = function tableColumnsComputed(_ref5) {
  var columns = _ref5.columns;
  return tableColumnsWithDataRows(columns);
};

var cellTemplate = function cellTemplate(params) {
  return React.createElement(TemplatePlaceholder, { name: 'tableViewCell', params: params });
};
var rowTemplate = function rowTemplate(params) {
  return React.createElement(TemplatePlaceholder, { name: 'tableViewRow', params: params });
};

var TableView = function (_React$PureComponent) {
  inherits(TableView, _React$PureComponent);

  function TableView() {
    classCallCheck(this, TableView);
    return possibleConstructorReturn(this, (TableView.__proto__ || Object.getPrototypeOf(TableView)).apply(this, arguments));
  }

  createClass(TableView, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          tableLayoutTemplate = _props.tableLayoutTemplate,
          tableCellTemplate = _props.tableCellTemplate,
          tableRowTemplate = _props.tableRowTemplate,
          tableNoDataRowTemplate = _props.tableNoDataRowTemplate,
          tableNoDataCellTemplate = _props.tableNoDataCellTemplate,
          tableStubCellTemplate = _props.tableStubCellTemplate,
          tableStubHeaderCellTemplate = _props.tableStubHeaderCellTemplate,
          messages = _props.messages;


      var getMessage = getMessagesFormatter(messages);

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableView',
          dependencies: [{ pluginName: 'DataTypeProvider', optional: true }]
        },
        React.createElement(Getter, { name: 'tableHeaderRows', value: tableHeaderRows }),
        React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
        React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
        React.createElement(
          Template,
          { name: 'body' },
          React.createElement(TemplatePlaceholder, { name: 'tableView' })
        ),
        React.createElement(
          Template,
          { name: 'tableView' },
          React.createElement(
            TemplateConnector,
            null,
            function (getters, actions) {
              return React.createElement(TemplateRenderer, {
                template: tableLayoutTemplate,
                params: getTableLayoutTemplateArgs({ rowTemplate: rowTemplate, cellTemplate: cellTemplate }, getters, actions)
              });
            }
          )
        ),
        React.createElement(
          Template,
          { name: 'tableViewCell' },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (_ref6) {
                var headerRows = _ref6.tableHeaderRows;
                return isHeaderStubTableCell(params.tableRow, headerRows) ? React.createElement(TemplateRenderer, {
                  template: tableStubHeaderCellTemplate,
                  params: params
                }) : React.createElement(TemplateRenderer, {
                  template: tableStubCellTemplate,
                  params: params
                });
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref7) {
              var tableRow = _ref7.tableRow,
                  tableColumn = _ref7.tableColumn;
              return isDataTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters) {
                var templateArgs = getDataTableCellTemplateArgs(params, getters);
                return React.createElement(
                  TemplatePlaceholder,
                  {
                    name: 'valueFormatter',
                    params: getValueFormatterArgs(templateArgs)
                  },
                  function (content) {
                    return React.createElement(
                      TemplateRenderer,
                      {
                        template: tableCellTemplate,
                        params: templateArgs
                      },
                      content
                    );
                  }
                );
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref8) {
              var tableRow = _ref8.tableRow;
              return isNoDataTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: tableNoDataCellTemplate,
              params: _extends({
                getMessage: getMessage
              }, params)
            });
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref9) {
              var tableRow = _ref9.tableRow;
              return isDataTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function () {
                return React.createElement(TemplateRenderer, {
                  template: tableRowTemplate,
                  params: getDataTableRowTemplateArgs(params)
                });
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref10) {
              var tableRow = _ref10.tableRow;
              return isNoDataTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: tableNoDataRowTemplate,
              params: params
            });
          }
        )
      );
    }
  }]);
  return TableView;
}(React.PureComponent);

TableView.propTypes = {
  tableLayoutTemplate: PropTypes.func.isRequired,
  tableCellTemplate: PropTypes.func.isRequired,
  tableRowTemplate: PropTypes.func.isRequired,
  tableNoDataCellTemplate: PropTypes.func.isRequired,
  tableNoDataRowTemplate: PropTypes.func.isRequired,
  tableStubCellTemplate: PropTypes.func.isRequired,
  tableStubHeaderCellTemplate: PropTypes.func.isRequired,
  messages: PropTypes.object
};

TableView.defaultProps = {
  messages: {}
};

var getSelectTableCellTemplateArgs = function getSelectTableCellTemplateArgs(params, _ref, _ref2) {
  var selection = _ref.selection;
  var setRowsSelection$$1 = _ref2.setRowsSelection;
  return _extends({}, params, {
    row: params.tableRow.row,
    selected: selection.indexOf(params.tableRow.rowId) > -1,
    changeSelected: function changeSelected() {
      return setRowsSelection$$1({ rowIds: [params.tableRow.rowId] });
    }
  });
};

var getSelectAllTableCellTemplateArgs = function getSelectAllTableCellTemplateArgs(params, _ref3, _ref4) {
  var availableToSelect = _ref3.availableToSelect,
      selection = _ref3.selection;
  var setRowsSelection$$1 = _ref4.setRowsSelection;
  return _extends({}, params, {
    selectionAvailable: !!availableToSelect.length,
    allSelected: selection.length === availableToSelect.length && selection.length !== 0,
    someSelected: selection.length !== availableToSelect.length && selection.length !== 0,
    toggleAll: function toggleAll() {
      return setRowsSelection$$1({ rowIds: availableToSelect });
    }
  });
};

var getSelectTableRowTemplateArgs = function getSelectTableRowTemplateArgs(_ref5, _ref6, _ref7) {
  var selection = _ref6.selection;
  var setRowsSelection$$1 = _ref7.setRowsSelection;
  var selectByRowClick = _ref5.selectByRowClick,
      highlightSelected = _ref5.highlightSelected,
      restParams = objectWithoutProperties(_ref5, ['selectByRowClick', 'highlightSelected']);
  var rowId = restParams.tableRow.rowId;

  return _extends({}, restParams, {
    selectByRowClick: selectByRowClick,
    selected: highlightSelected && selection.indexOf(rowId) > -1,
    changeSelected: function changeSelected() {
      return setRowsSelection$$1({ rowIds: [rowId] });
    }
  });
};

var pluginDependencies$6 = [{ pluginName: 'SelectionState' }, { pluginName: 'TableView' }];

var TableSelection = function (_React$PureComponent) {
  inherits(TableSelection, _React$PureComponent);

  function TableSelection() {
    classCallCheck(this, TableSelection);
    return possibleConstructorReturn(this, (TableSelection.__proto__ || Object.getPrototypeOf(TableSelection)).apply(this, arguments));
  }

  createClass(TableSelection, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          highlightSelected = _props.highlightSelected,
          showSelectionColumn = _props.showSelectionColumn,
          showSelectAll = _props.showSelectAll,
          selectionColumnWidth = _props.selectionColumnWidth,
          selectAllCellTemplate = _props.selectAllCellTemplate,
          selectCellTemplate = _props.selectCellTemplate,
          selectRowTemplate = _props.selectRowTemplate,
          selectByRowClick = _props.selectByRowClick;


      var tableColumnsComputed = function tableColumnsComputed(_ref8) {
        var tableColumns = _ref8.tableColumns;
        return tableColumnsWithSelection(tableColumns, selectionColumnWidth);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableSelection',
          dependencies: pluginDependencies$6
        },
        showSelectionColumn && React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
        showSelectionColumn && showSelectAll && React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref9) {
              var tableRow = _ref9.tableRow,
                  tableColumn = _ref9.tableColumn;
              return isSelectAllTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: selectAllCellTemplate,
                  params: getSelectAllTableCellTemplateArgs(params, getters, actions)
                });
              }
            );
          }
        ),
        showSelectionColumn && React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref10) {
              var tableRow = _ref10.tableRow,
                  tableColumn = _ref10.tableColumn;
              return isSelectTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: selectCellTemplate,
                  params: getSelectTableCellTemplateArgs(params, getters, actions)
                });
              }
            );
          }
        ),
        (highlightSelected || selectByRowClick) && React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref11) {
              var tableRow = _ref11.tableRow;
              return isDataTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: selectRowTemplate,
                  params: getSelectTableRowTemplateArgs(_extends({
                    selectByRowClick: selectByRowClick,
                    highlightSelected: highlightSelected
                  }, params), getters, actions)
                });
              }
            );
          }
        )
      );
    }
  }]);
  return TableSelection;
}(React.PureComponent);

TableSelection.propTypes = {
  selectAllCellTemplate: PropTypes.func.isRequired,
  selectCellTemplate: PropTypes.func.isRequired,
  selectRowTemplate: PropTypes.func.isRequired,
  highlightSelected: PropTypes.bool,
  selectByRowClick: PropTypes.bool,
  showSelectAll: PropTypes.bool,
  showSelectionColumn: PropTypes.bool,
  selectionColumnWidth: PropTypes.number.isRequired
};

TableSelection.defaultProps = {
  highlightSelected: false,
  selectByRowClick: false,
  showSelectAll: true,
  showSelectionColumn: true
};

var RowDetailState = function (_React$PureComponent) {
  inherits(RowDetailState, _React$PureComponent);

  function RowDetailState(props) {
    classCallCheck(this, RowDetailState);

    var _this = possibleConstructorReturn(this, (RowDetailState.__proto__ || Object.getPrototypeOf(RowDetailState)).call(this, props));

    _this.state = {
      expandedRows: props.defaultExpandedRows || []
    };

    _this.setDetailRowExpanded = function (_ref) {
      var rowId = _ref.rowId;

      var prevExpandedDetails = _this.props.expandedRows || _this.state.expandedRows;
      var expandedRows = setDetailRowExpanded(prevExpandedDetails, { rowId: rowId });
      var onExpandedRowsChange = _this.props.onExpandedRowsChange;

      _this.setState({ expandedRows: expandedRows });
      if (onExpandedRowsChange) {
        onExpandedRowsChange(expandedRows);
      }
    };
    return _this;
  }

  createClass(RowDetailState, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var expandedRows = this.props.expandedRows || this.state.expandedRows;
      return React.createElement(
        PluginContainer,
        {
          pluginName: 'RowDetailState'
        },
        React.createElement(Action, {
          name: 'setDetailRowExpanded',
          action: function action(_ref2) {
            var rowId = _ref2.rowId;
            return _this2.setDetailRowExpanded({ rowId: rowId });
          }
        }),
        React.createElement(Getter, { name: 'expandedRows', value: expandedRows })
      );
    }
  }]);
  return RowDetailState;
}(React.PureComponent);

RowDetailState.propTypes = {
  expandedRows: PropTypes.array,
  defaultExpandedRows: PropTypes.array,
  onExpandedRowsChange: PropTypes.func
};

RowDetailState.defaultProps = {
  expandedRows: undefined,
  defaultExpandedRows: undefined,
  onExpandedRowsChange: undefined
};

var getDetailToggleTableCellTemplateArgs = function getDetailToggleTableCellTemplateArgs(params, _ref, _ref2) {
  var expandedRows = _ref.expandedRows;
  var setDetailRowExpanded$$1 = _ref2.setDetailRowExpanded;
  return _extends({}, params, {
    row: params.tableRow.row,
    expanded: isDetailRowExpanded(expandedRows, params.tableRow.rowId),
    toggleExpanded: function toggleExpanded() {
      return setDetailRowExpanded$$1({ rowId: params.tableRow.rowId });
    }
  });
};

var getDetailTableCellTemplateArgs = function getDetailTableCellTemplateArgs(_ref3) {
  var _template = _ref3.template,
      params = objectWithoutProperties(_ref3, ['template']);
  return _extends({}, params, {
    row: params.tableRow.row,
    template: function template() {
      return _template({ row: params.tableRow.row });
    }
  });
};

var getDetailTableRowTemplateArgs = function getDetailTableRowTemplateArgs(params) {
  return _extends({}, params, {
    row: params.tableRow.row
  });
};

var pluginDependencies$7 = [{ pluginName: 'TableView' }];

var TableRowDetail = function (_React$PureComponent) {
  inherits(TableRowDetail, _React$PureComponent);

  function TableRowDetail() {
    classCallCheck(this, TableRowDetail);
    return possibleConstructorReturn(this, (TableRowDetail.__proto__ || Object.getPrototypeOf(TableRowDetail)).apply(this, arguments));
  }

  createClass(TableRowDetail, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          rowHeight = _props.rowHeight,
          template = _props.template,
          detailToggleCellTemplate = _props.detailToggleCellTemplate,
          detailCellTemplate = _props.detailCellTemplate,
          detailRowTemplate = _props.detailRowTemplate,
          detailToggleCellWidth = _props.detailToggleCellWidth;


      var tableColumnsComputed = function tableColumnsComputed(_ref4) {
        var tableColumns = _ref4.tableColumns;
        return tableColumnsWithDetail(tableColumns, detailToggleCellWidth);
      };
      var tableBodyRowsComputed = function tableBodyRowsComputed(_ref5) {
        var tableBodyRows = _ref5.tableBodyRows,
            expandedRows = _ref5.expandedRows;
        return tableRowsWithExpandedDetail(tableBodyRows, expandedRows, rowHeight);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableRowDetail',
          dependencies: pluginDependencies$7
        },
        React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
        React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref6) {
              var tableRow = _ref6.tableRow,
                  tableColumn = _ref6.tableColumn;
              return isDetailToggleTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: detailToggleCellTemplate,
                  params: getDetailToggleTableCellTemplateArgs(params, getters, actions)
                });
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref7) {
              var tableRow = _ref7.tableRow;
              return isDetailTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: detailCellTemplate,
              params: getDetailTableCellTemplateArgs(_extends({ template: template }, params))
            });
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref8) {
              var tableRow = _ref8.tableRow;
              return isDetailTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function () {
                return React.createElement(TemplateRenderer, {
                  template: detailRowTemplate,
                  params: getDetailTableRowTemplateArgs(params)
                });
              }
            );
          }
        )
      );
    }
  }]);
  return TableRowDetail;
}(React.PureComponent);

TableRowDetail.propTypes = {
  template: PropTypes.func,
  detailToggleCellTemplate: PropTypes.func.isRequired,
  detailCellTemplate: PropTypes.func.isRequired,
  detailRowTemplate: PropTypes.func.isRequired,
  detailToggleCellWidth: PropTypes.number.isRequired,
  rowHeight: PropTypes.number
};

TableRowDetail.defaultProps = {
  template: undefined,
  rowHeight: undefined
};

var getGroupIndentTableCellTemplateArgs = function getGroupIndentTableCellTemplateArgs(_ref) {
  var params = _ref.params;
  return _extends({}, params, {
    row: params.tableRow.row,
    column: params.tableColumn.column
  });
};

var getGroupTableCellTemplateArgs = function getGroupTableCellTemplateArgs(params, _ref2, _ref3) {
  var expandedGroups = _ref2.expandedGroups;
  var _toggleGroupExpanded = _ref3.toggleGroupExpanded;
  var compoundKey = params.tableRow.row.compoundKey;

  return _extends({}, params, {
    row: params.tableRow.row,
    column: params.tableColumn.column,
    isExpanded: expandedGroups.has(compoundKey),
    toggleGroupExpanded: function toggleGroupExpanded() {
      return _toggleGroupExpanded({ groupKey: compoundKey });
    }
  });
};

var getValueFormatterArgs$1 = function getValueFormatterArgs(params) {
  return {
    column: params.column,
    value: params.row.value
  };
};

var getGroupTableRowTemplateArgs = function getGroupTableRowTemplateArgs(params) {
  return _extends({}, params, {
    row: params.tableRow.row
  });
};

var pluginDependencies$8 = [{ pluginName: 'GroupingState' }, { pluginName: 'TableView' }, { pluginName: 'DataTypeProvider', optional: true }];

var tableBodyRowsComputed$1 = function tableBodyRowsComputed(_ref4) {
  var tableBodyRows = _ref4.tableBodyRows,
      isGroupRow = _ref4.isGroupRow;
  return tableRowsWithGrouping(tableBodyRows, isGroupRow);
};

var createShowWhenGrouped = function createShowWhenGrouped(columns) {
  var cache = columns.reduce(function (acc, column) {
    acc[column.name] = column.showWhenGrouped;
    return acc;
  }, {});

  return function (columnName) {
    return cache[columnName] || false;
  };
};

var TableGroupRow = function (_React$PureComponent) {
  inherits(TableGroupRow, _React$PureComponent);

  function TableGroupRow() {
    classCallCheck(this, TableGroupRow);
    return possibleConstructorReturn(this, (TableGroupRow.__proto__ || Object.getPrototypeOf(TableGroupRow)).apply(this, arguments));
  }

  createClass(TableGroupRow, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          groupCellTemplate = _props.groupCellTemplate,
          groupRowTemplate = _props.groupRowTemplate,
          groupIndentCellTemplate = _props.groupIndentCellTemplate,
          groupIndentColumnWidth = _props.groupIndentColumnWidth,
          showColumnWhenGrouped = _props.showColumnWhenGrouped;


      var tableColumnsComputed = function tableColumnsComputed(_ref5) {
        var columns = _ref5.columns,
            tableColumns = _ref5.tableColumns,
            grouping = _ref5.grouping,
            draftGrouping$$1 = _ref5.draftGrouping;
        return tableColumnsWithGrouping(tableColumns, grouping, draftGrouping$$1, groupIndentColumnWidth, showColumnWhenGrouped || createShowWhenGrouped(columns));
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableGroupRow',
          dependencies: pluginDependencies$8
        },
        React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
        React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed$1 }),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref6) {
              var tableRow = _ref6.tableRow,
                  tableColumn = _ref6.tableColumn;
              return isGroupTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                var templateArgs = getGroupTableCellTemplateArgs(params, getters, actions);
                return React.createElement(
                  TemplatePlaceholder,
                  {
                    name: 'valueFormatter',
                    params: getValueFormatterArgs$1(templateArgs)
                  },
                  function (content) {
                    return React.createElement(
                      TemplateRenderer,
                      {
                        template: groupCellTemplate,
                        params: templateArgs
                      },
                      content
                    );
                  }
                );
              }
            );
          }
        ),
        groupIndentCellTemplate && React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref7) {
              var tableRow = _ref7.tableRow,
                  tableColumn = _ref7.tableColumn;
              return isGroupIndentTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: groupIndentCellTemplate,
              params: getGroupIndentTableCellTemplateArgs({ params: params })
            });
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref8) {
              var tableRow = _ref8.tableRow;
              return isGroupTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: groupRowTemplate,
              params: getGroupTableRowTemplateArgs(params)
            });
          }
        )
      );
    }
  }]);
  return TableGroupRow;
}(React.PureComponent);

TableGroupRow.propTypes = {
  groupCellTemplate: PropTypes.func.isRequired,
  groupRowTemplate: PropTypes.func.isRequired,
  groupIndentCellTemplate: PropTypes.func,
  groupIndentColumnWidth: PropTypes.number.isRequired,
  showColumnWhenGrouped: PropTypes.func
};

TableGroupRow.defaultProps = {
  groupIndentCellTemplate: null,
  showColumnWhenGrouped: undefined
};

var getHeaderTableCellTemplateArgs = function getHeaderTableCellTemplateArgs(_ref, _ref2, _ref3) {
  var sorting = _ref2.sorting,
      columns = _ref2.columns,
      grouping = _ref2.grouping;
  var setColumnSorting$$1 = _ref3.setColumnSorting,
      _groupByColumn = _ref3.groupByColumn,
      changeTableColumnWidths$$1 = _ref3.changeTableColumnWidths,
      changeDraftTableColumnWidths$$1 = _ref3.changeDraftTableColumnWidths;
  var allowSorting = _ref.allowSorting,
      allowDragging = _ref.allowDragging,
      allowGroupingByClick = _ref.allowGroupingByClick,
      allowResizing = _ref.allowResizing,
      getMessage = _ref.getMessage,
      params = objectWithoutProperties(_ref, ['allowSorting', 'allowDragging', 'allowGroupingByClick', 'allowResizing', 'getMessage']);
  var column = params.tableColumn.column;

  var groupingSupported = grouping !== undefined && grouping.length < columns.length - 1;

  var result = _extends({}, params, {
    getMessage: getMessage,
    allowSorting: allowSorting && sorting !== undefined,
    allowGroupingByClick: allowGroupingByClick && groupingSupported,
    allowDragging: allowDragging && (!grouping || groupingSupported),
    allowResizing: allowResizing,
    column: params.tableColumn.column,
    changeSortingDirection: function changeSortingDirection(_ref4) {
      var keepOther = _ref4.keepOther,
          cancel = _ref4.cancel;
      return setColumnSorting$$1({ columnName: column.name, keepOther: keepOther, cancel: cancel });
    },
    groupByColumn: function groupByColumn$$1() {
      return _groupByColumn({ columnName: column.name });
    },
    changeColumnWidth: function changeColumnWidth(_ref5) {
      var shift = _ref5.shift;
      return changeTableColumnWidths$$1({ shifts: defineProperty({}, column.name, shift) });
    },
    changeDraftColumnWidth: function changeDraftColumnWidth(_ref6) {
      var shift = _ref6.shift;
      return changeDraftTableColumnWidths$$1({ shifts: defineProperty({}, column.name, shift) });
    }
  });

  if (result.allowSorting) {
    result.sortingDirection = getColumnSortingDirection(sorting, column.name);
  }

  if (result.allowDragging) {
    result.dragPayload = [{ type: 'column', columnName: column.name }];
  }

  return result;
};

var tableHeaderRowsComputed$1 = function tableHeaderRowsComputed(_ref7) {
  var tableHeaderRows = _ref7.tableHeaderRows;
  return tableRowsWithHeading(tableHeaderRows);
};

var TableHeaderRow = function (_React$PureComponent) {
  inherits(TableHeaderRow, _React$PureComponent);

  function TableHeaderRow() {
    classCallCheck(this, TableHeaderRow);
    return possibleConstructorReturn(this, (TableHeaderRow.__proto__ || Object.getPrototypeOf(TableHeaderRow)).apply(this, arguments));
  }

  createClass(TableHeaderRow, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          allowSorting = _props.allowSorting,
          allowGroupingByClick = _props.allowGroupingByClick,
          allowDragging = _props.allowDragging,
          allowResizing = _props.allowResizing,
          headerCellTemplate = _props.headerCellTemplate,
          headerRowTemplate = _props.headerRowTemplate,
          messages = _props.messages;

      var getMessage = getMessagesFormatter(messages);

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableHeaderRow',
          dependencies: [{ pluginName: 'TableView' }, { pluginName: 'SortingState', optional: !allowSorting }, { pluginName: 'GroupingState', optional: !allowGroupingByClick }, { pluginName: 'DragDropContext', optional: !allowDragging }, { pluginName: 'TableColumnResizing', optional: !allowResizing }]
        },
        React.createElement(Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed$1 }),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref8) {
              var tableRow = _ref8.tableRow,
                  tableColumn = _ref8.tableColumn;
              return isHeadingTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: headerCellTemplate,
                  params: getHeaderTableCellTemplateArgs(_extends({
                    allowDragging: allowDragging,
                    allowGroupingByClick: allowGroupingByClick,
                    allowSorting: allowSorting,
                    allowResizing: allowResizing,
                    getMessage: getMessage
                  }, params), getters, actions)
                });
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref9) {
              var tableRow = _ref9.tableRow;
              return isHeadingTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: headerRowTemplate,
              params: params
            });
          }
        )
      );
    }
  }]);
  return TableHeaderRow;
}(React.PureComponent);

TableHeaderRow.propTypes = {
  allowSorting: PropTypes.bool,
  allowGroupingByClick: PropTypes.bool,
  allowDragging: PropTypes.bool,
  allowResizing: PropTypes.bool,
  headerCellTemplate: PropTypes.func.isRequired,
  headerRowTemplate: PropTypes.func.isRequired,
  messages: PropTypes.object
};

TableHeaderRow.defaultProps = {
  allowSorting: false,
  allowGroupingByClick: false,
  allowDragging: false,
  allowResizing: false,
  messages: null
};

var getFilterTableCellTemplateArgs = function getFilterTableCellTemplateArgs(params, _ref, _ref2) {
  var filters = _ref.filters;
  var setColumnFilter$$1 = _ref2.setColumnFilter;
  return _extends({}, params, {
    column: params.tableColumn.column,
    filter: getColumnFilterConfig(filters, params.tableColumn.column.name),
    setFilter: function setFilter(config) {
      return setColumnFilter$$1({ columnName: params.tableColumn.column.name, config: config });
    }
  });
};

var getValueEditorArgs = function getValueEditorArgs(params) {
  return {
    column: params.column,
    value: params.filter ? params.filter.value : null,
    onValueChange: function onValueChange(newValue) {
      return params.setFilter(newValue ? { value: newValue } : null);
    }
  };
};

var pluginDependencies$9 = [{ pluginName: 'FilteringState' }, { pluginName: 'TableView' }, { pluginName: 'DataTypeProvider', optional: true }];

var TableFilterRow = function (_React$PureComponent) {
  inherits(TableFilterRow, _React$PureComponent);

  function TableFilterRow() {
    classCallCheck(this, TableFilterRow);
    return possibleConstructorReturn(this, (TableFilterRow.__proto__ || Object.getPrototypeOf(TableFilterRow)).apply(this, arguments));
  }

  createClass(TableFilterRow, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          rowHeight = _props.rowHeight,
          filterCellTemplate = _props.filterCellTemplate,
          filterRowTemplate = _props.filterRowTemplate,
          messages = _props.messages;


      var getMessage = getMessagesFormatter(messages);

      var tableHeaderRowsComputed = function tableHeaderRowsComputed(_ref3) {
        var tableHeaderRows = _ref3.tableHeaderRows;
        return tableHeaderRowsWithFilter(tableHeaderRows, rowHeight);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableFilterRow',
          dependencies: pluginDependencies$9
        },
        React.createElement(Getter, { name: 'tableHeaderRows', computed: tableHeaderRowsComputed }),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref4) {
              var tableRow = _ref4.tableRow,
                  tableColumn = _ref4.tableColumn;
              return isFilterTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                var templateArgs = getFilterTableCellTemplateArgs(_extends({ getMessage: getMessage }, params), getters, actions);
                return React.createElement(
                  TemplatePlaceholder,
                  {
                    name: 'valueEditor',
                    params: getValueEditorArgs(templateArgs)
                  },
                  function (content) {
                    return React.createElement(
                      TemplateRenderer,
                      {
                        template: filterCellTemplate,
                        params: templateArgs
                      },
                      content
                    );
                  }
                );
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref5) {
              var tableRow = _ref5.tableRow;
              return isFilterTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(TemplateRenderer, {
              template: filterRowTemplate,
              params: params
            });
          }
        )
      );
    }
  }]);
  return TableFilterRow;
}(React.PureComponent);

TableFilterRow.propTypes = {
  rowHeight: PropTypes.any,
  messages: PropTypes.object,
  filterCellTemplate: PropTypes.func.isRequired,
  filterRowTemplate: PropTypes.func.isRequired
};

TableFilterRow.defaultProps = {
  rowHeight: undefined,
  messages: {}
};

var getEditTableCellTemplateArgs = function getEditTableCellTemplateArgs(params, getters, _ref) {
  var changeRow$$1 = _ref.changeRow,
      changeAddedRow$$1 = _ref.changeAddedRow;
  var getCellValue = getters.getCellValue,
      createRowChange = getters.createRowChange;

  var isNew = isAddedTableRow(params.tableRow);
  var _params$tableRow = params.tableRow,
      rowId = _params$tableRow.rowId,
      row = _params$tableRow.row;
  var column = params.tableColumn.column;

  var changedRow = isNew ? row : _extends({}, row, getRowChange(getters.changedRows, rowId));
  return _extends({}, params, {
    row: row,
    column: column,
    value: getCellValue(changedRow, column.name),
    onValueChange: function onValueChange(newValue) {
      var changeArgs = {
        rowId: rowId,
        change: createRowChange(changedRow, column.name, newValue)
      };
      if (isNew) {
        changeAddedRow$$1(changeArgs);
      } else {
        changeRow$$1(changeArgs);
      }
    }
  });
};

var getValueEditorArgs$1 = function getValueEditorArgs(params) {
  return {
    column: params.column,
    row: params.row,
    value: params.value,
    onValueChange: params.onValueChange
  };
};

var getEditTableRowTemplateArgs = function getEditTableRowTemplateArgs(params) {
  return _extends({}, params, {
    row: params.tableRow.row
  });
};

var pluginDependencies$10 = [{ pluginName: 'EditingState' }, { pluginName: 'TableView' }, { pluginName: 'DataTypeProvider', optional: true }];

var TableEditRow = function (_React$PureComponent) {
  inherits(TableEditRow, _React$PureComponent);

  function TableEditRow() {
    classCallCheck(this, TableEditRow);
    return possibleConstructorReturn(this, (TableEditRow.__proto__ || Object.getPrototypeOf(TableEditRow)).apply(this, arguments));
  }

  createClass(TableEditRow, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          editCellTemplate = _props.editCellTemplate,
          editRowTemplate = _props.editRowTemplate,
          rowHeight = _props.rowHeight;


      var tableBodyRowsComputed = function tableBodyRowsComputed(_ref2) {
        var tableBodyRows = _ref2.tableBodyRows,
            editingRows = _ref2.editingRows,
            addedRows = _ref2.addedRows;
        return tableRowsWithEditing(tableBodyRows, editingRows, addedRows, rowHeight);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableEditRow',
          dependencies: pluginDependencies$10
        },
        React.createElement(Getter, { name: 'tableBodyRows', computed: tableBodyRowsComputed }),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref3) {
              var tableRow = _ref3.tableRow,
                  tableColumn = _ref3.tableColumn;
              return isEditTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                var templateArgs = getEditTableCellTemplateArgs(params, getters, actions);
                return React.createElement(
                  TemplatePlaceholder,
                  {
                    name: 'valueEditor',
                    params: getValueEditorArgs$1(templateArgs)
                  },
                  function (content) {
                    return React.createElement(
                      TemplateRenderer,
                      {
                        template: editCellTemplate,
                        params: templateArgs
                      },
                      content
                    );
                  }
                );
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewRow',
            predicate: function predicate(_ref4) {
              var tableRow = _ref4.tableRow;
              return isEditTableRow(tableRow) || isAddedTableRow(tableRow);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function () {
                return React.createElement(TemplateRenderer, {
                  template: editRowTemplate,
                  params: getEditTableRowTemplateArgs(params)
                });
              }
            );
          }
        )
      );
    }
  }]);
  return TableEditRow;
}(React.PureComponent);

TableEditRow.propTypes = {
  rowHeight: PropTypes.any,
  editCellTemplate: PropTypes.func.isRequired,
  editRowTemplate: PropTypes.func.isRequired
};

TableEditRow.defaultProps = {
  rowHeight: undefined
};

var getHeadingEditCommandsTableCellTemplateArgs = function getHeadingEditCommandsTableCellTemplateArgs(params, getters, _ref) {
  var _addRow = _ref.addRow;
  return _extends({}, params, {
    addRow: function addRow$$1() {
      return _addRow();
    }
  });
};

var getEditCommandsTableCellTemplateArgs = function getEditCommandsTableCellTemplateArgs(params, getters, _ref2) {
  var startEditRows$$1 = _ref2.startEditRows,
      stopEditRows$$1 = _ref2.stopEditRows,
      cancelChangedRows = _ref2.cancelChangedRows,
      commitChangedRows = _ref2.commitChangedRows,
      deleteRows$$1 = _ref2.deleteRows,
      commitDeletedRows = _ref2.commitDeletedRows,
      cancelAddedRows$$1 = _ref2.cancelAddedRows,
      commitAddedRows = _ref2.commitAddedRows;

  var isEdit = isEditTableRow(params.tableRow);
  var isNew = isAddedTableRow(params.tableRow);
  var rowIds = [params.tableRow.rowId];

  return _extends({}, params, {
    row: params.tableRow.row,
    isEditing: isEdit || isNew,
    startEditing: function startEditing() {
      return startEditRows$$1({ rowIds: [params.tableRow.rowId] });
    },
    deleteRow: function deleteRow() {
      deleteRows$$1({ rowIds: rowIds });
      commitDeletedRows({ rowIds: rowIds });
    },
    cancelEditing: function cancelEditing() {
      if (isNew) {
        cancelAddedRows$$1({ rowIds: rowIds });
      } else {
        stopEditRows$$1({ rowIds: rowIds });
        cancelChangedRows({ rowIds: rowIds });
      }
    },
    commitChanges: function commitChanges() {
      if (isNew) {
        commitAddedRows({ rowIds: rowIds });
      } else {
        stopEditRows$$1({ rowIds: rowIds });
        commitChangedRows({ rowIds: rowIds });
      }
    }
  });
};

var pluginDependencies$11 = [{ pluginName: 'EditingState' }, { pluginName: 'TableView' }];

var TableEditColumn = function (_React$PureComponent) {
  inherits(TableEditColumn, _React$PureComponent);

  function TableEditColumn() {
    classCallCheck(this, TableEditColumn);
    return possibleConstructorReturn(this, (TableEditColumn.__proto__ || Object.getPrototypeOf(TableEditColumn)).apply(this, arguments));
  }

  createClass(TableEditColumn, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          cellTemplate = _props.cellTemplate,
          headingCellTemplate = _props.headingCellTemplate,
          commandTemplate = _props.commandTemplate,
          allowAdding = _props.allowAdding,
          allowEditing = _props.allowEditing,
          allowDeleting = _props.allowDeleting,
          width = _props.width,
          messages = _props.messages;

      var getMessage = getMessagesFormatter(messages);
      var tableColumnsComputed = function tableColumnsComputed(_ref3) {
        var tableColumns = _ref3.tableColumns;
        return tableColumnsWithEditing(tableColumns, width);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableEditColumn',
          dependencies: pluginDependencies$11
        },
        React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref4) {
              var tableRow = _ref4.tableRow,
                  tableColumn = _ref4.tableColumn;
              return isHeadingEditCommandsTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: headingCellTemplate,
                  params: getHeadingEditCommandsTableCellTemplateArgs(_extends({
                    allowAdding: allowAdding, commandTemplate: commandTemplate, getMessage: getMessage }, params), getters, actions)
                });
              }
            );
          }
        ),
        React.createElement(
          Template,
          {
            name: 'tableViewCell',
            predicate: function predicate(_ref5) {
              var tableRow = _ref5.tableRow,
                  tableColumn = _ref5.tableColumn;
              return isEditCommandsTableCell(tableRow, tableColumn);
            }
          },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: cellTemplate,
                  params: getEditCommandsTableCellTemplateArgs(_extends({
                    allowEditing: allowEditing,
                    allowDeleting: allowDeleting,
                    commandTemplate: commandTemplate,
                    getMessage: getMessage
                  }, params), getters, actions)
                });
              }
            );
          }
        )
      );
    }
  }]);
  return TableEditColumn;
}(React.PureComponent);
TableEditColumn.propTypes = {
  cellTemplate: PropTypes.func.isRequired,
  headingCellTemplate: PropTypes.func.isRequired,
  commandTemplate: PropTypes.func.isRequired,
  allowAdding: PropTypes.bool,
  allowEditing: PropTypes.bool,
  allowDeleting: PropTypes.bool,
  width: PropTypes.number,
  messages: PropTypes.object
};
TableEditColumn.defaultProps = {
  allowAdding: false,
  allowEditing: false,
  allowDeleting: false,
  width: 140,
  messages: {}
};

var pluginDependencies$12 = [{ pluginName: 'TableView' }];

var TableColumnResizing = function (_React$PureComponent) {
  inherits(TableColumnResizing, _React$PureComponent);

  function TableColumnResizing(props) {
    classCallCheck(this, TableColumnResizing);

    var _this = possibleConstructorReturn(this, (TableColumnResizing.__proto__ || Object.getPrototypeOf(TableColumnResizing)).call(this, props));

    _this.state = {
      columnWidths: props.defaultColumnWidths,
      draftColumnWidths: {}
    };

    _this.getState = function () {
      var state = _this.state;
      var columnWidths = _this.props.columnWidths;


      return _extends({}, state, {
        columnWidths: columnWidths || state.columnWidths
      });
    };

    _this.changeTableColumnWidthsAction = function (payload) {
      var nextState = changeTableColumnWidths(_this.getState(), payload);

      _this.setState(nextState);

      var onColumnWidthsChange = _this.props.onColumnWidthsChange;

      if (onColumnWidthsChange) {
        onColumnWidthsChange(nextState.columnWidths);
      }
    };

    _this.changeDraftTableColumnWidthsAction = function (payload) {
      return _this.setState(changeDraftTableColumnWidths(_this.getState(), payload));
    };
    return _this;
  }

  createClass(TableColumnResizing, [{
    key: 'render',
    value: function render() {
      var _getState = this.getState(),
          columnWidths = _getState.columnWidths,
          draftColumnWidths = _getState.draftColumnWidths;

      var tableColumnsComputed = function tableColumnsComputed(_ref) {
        var tableColumns = _ref.tableColumns;
        return tableColumnsWithWidths(tableColumns, columnWidths, draftColumnWidths);
      };

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableColumnResizing',
          dependencies: pluginDependencies$12
        },
        React.createElement(Getter, { name: 'tableColumns', computed: tableColumnsComputed }),
        React.createElement(Action, { name: 'changeTableColumnWidths', action: this.changeTableColumnWidthsAction }),
        React.createElement(Action, {
          name: 'changeDraftTableColumnWidths',
          action: this.changeDraftTableColumnWidthsAction
        })
      );
    }
  }]);
  return TableColumnResizing;
}(React.PureComponent);

TableColumnResizing.propTypes = {
  defaultColumnWidths: PropTypes.objectOf(PropTypes.number),
  columnWidths: PropTypes.objectOf(PropTypes.number),
  onColumnWidthsChange: PropTypes.func
};

TableColumnResizing.defaultProps = {
  defaultColumnWidths: {},
  columnWidths: undefined,
  onColumnWidthsChange: undefined
};

var pluginDependencies$13 = [{ pluginName: 'PagingState' }];

var getPagerTemplateArgs = function getPagerTemplateArgs(_ref, _ref2, _ref3) {
  var allowedPageSizes = _ref.allowedPageSizes,
      getMessage = _ref.getMessage;
  var currentPage = _ref2.currentPage,
      pageSize = _ref2.pageSize,
      totalCount = _ref2.totalCount;
  var setCurrentPage$$1 = _ref3.setCurrentPage,
      setPageSize$$1 = _ref3.setPageSize;
  return {
    currentPage: currentPage,
    totalPages: pageCount(totalCount, pageSize),
    pageSize: pageSize,
    totalCount: totalCount,
    allowedPageSizes: allowedPageSizes,
    getMessage: getMessage,
    onCurrentPageChange: setCurrentPage$$1,
    onPageSizeChange: setPageSize$$1
  };
};

var PagingPanel = function (_React$PureComponent) {
  inherits(PagingPanel, _React$PureComponent);

  function PagingPanel() {
    classCallCheck(this, PagingPanel);
    return possibleConstructorReturn(this, (PagingPanel.__proto__ || Object.getPrototypeOf(PagingPanel)).apply(this, arguments));
  }

  createClass(PagingPanel, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          pagerTemplate = _props.pagerTemplate,
          allowedPageSizes = _props.allowedPageSizes,
          messages = _props.messages;

      var getMessage = getMessagesFormatter(messages);

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'PagingPanel',
          dependencies: pluginDependencies$13
        },
        React.createElement(
          Template,
          { name: 'footer' },
          React.createElement(
            'div',
            null,
            React.createElement(TemplatePlaceholder, null),
            React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: pagerTemplate,
                  params: getPagerTemplateArgs({ allowedPageSizes: allowedPageSizes, getMessage: getMessage }, getters, actions)
                });
              }
            )
          )
        )
      );
    }
  }]);
  return PagingPanel;
}(React.PureComponent);

PagingPanel.propTypes = {
  allowedPageSizes: PropTypes.arrayOf(PropTypes.number),
  pagerTemplate: PropTypes.func.isRequired,
  messages: PropTypes.object
};

PagingPanel.defaultProps = {
  allowedPageSizes: [],
  messages: {}
};

var getGroupPanelTemplateArgs = function getGroupPanelTemplateArgs(_ref, _ref2, _ref3) {
  var allowDragging = _ref.allowDragging,
      allowSorting = _ref.allowSorting,
      allowUngroupingByClick = _ref.allowUngroupingByClick,
      getMessage = _ref.getMessage;
  var columns = _ref2.columns,
      draftGrouping$$1 = _ref2.draftGrouping,
      sorting = _ref2.sorting;
  var groupByColumn$$1 = _ref3.groupByColumn,
      setColumnSorting$$1 = _ref3.setColumnSorting,
      _draftGroupingChange = _ref3.draftGroupingChange,
      _cancelGroupingChange = _ref3.cancelGroupingChange;
  return {
    allowSorting: allowSorting,
    allowDragging: allowDragging,
    allowUngroupingByClick: allowUngroupingByClick,
    sorting: sorting,
    groupByColumn: groupByColumn$$1,
    getMessage: getMessage,
    groupingPanelItems: groupingPanelItems(columns, draftGrouping$$1),
    changeSortingDirection: function changeSortingDirection(_ref4) {
      var columnName = _ref4.columnName,
          keepOther = _ref4.keepOther,
          cancel = _ref4.cancel;
      return setColumnSorting$$1({ columnName: columnName, keepOther: keepOther, cancel: cancel });
    },
    draftGroupingChange: function draftGroupingChange$$1(groupingChange) {
      return _draftGroupingChange(groupingChange);
    },
    cancelGroupingChange: function cancelGroupingChange$$1() {
      return _cancelGroupingChange();
    }
  };
};

var GroupingPanel = function (_React$PureComponent) {
  inherits(GroupingPanel, _React$PureComponent);

  function GroupingPanel() {
    classCallCheck(this, GroupingPanel);
    return possibleConstructorReturn(this, (GroupingPanel.__proto__ || Object.getPrototypeOf(GroupingPanel)).apply(this, arguments));
  }

  createClass(GroupingPanel, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          groupPanelTemplate = _props.groupPanelTemplate,
          allowSorting = _props.allowSorting,
          allowDragging = _props.allowDragging,
          allowUngroupingByClick = _props.allowUngroupingByClick,
          messages = _props.messages;


      var getMessage = getMessagesFormatter(messages);

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'GroupingPanel',
          dependencies: [{ pluginName: 'GroupingState' }, { pluginName: 'SortingState', optional: !allowSorting }]
        },
        React.createElement(
          Template,
          { name: 'header' },
          React.createElement(
            'div',
            null,
            React.createElement(
              TemplateConnector,
              null,
              function (getters, actions) {
                return React.createElement(TemplateRenderer, {
                  template: groupPanelTemplate,
                  params: getGroupPanelTemplateArgs({
                    allowDragging: allowDragging, allowSorting: allowSorting, allowUngroupingByClick: allowUngroupingByClick, getMessage: getMessage
                  }, getters, actions)
                });
              }
            ),
            React.createElement(TemplatePlaceholder, null)
          )
        )
      );
    }
  }]);
  return GroupingPanel;
}(React.PureComponent);

GroupingPanel.propTypes = {
  allowSorting: PropTypes.bool,
  allowDragging: PropTypes.bool,
  allowUngroupingByClick: PropTypes.bool,
  groupPanelTemplate: PropTypes.func.isRequired,
  messages: PropTypes.object
};

GroupingPanel.defaultProps = {
  allowSorting: false,
  allowDragging: false,
  allowUngroupingByClick: false,
  messages: {}
};

// eslint-disable-next-line react/prefer-stateless-function
var DataTypeProvider = function (_React$PureComponent) {
  inherits(DataTypeProvider, _React$PureComponent);

  function DataTypeProvider() {
    classCallCheck(this, DataTypeProvider);
    return possibleConstructorReturn(this, (DataTypeProvider.__proto__ || Object.getPrototypeOf(DataTypeProvider)).apply(this, arguments));
  }

  createClass(DataTypeProvider, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          formatterTemplate = _props.formatterTemplate,
          editorTemplate = _props.editorTemplate,
          type = _props.type;

      return React.createElement(
        PluginContainer,
        { name: 'DataTypeProvider' },
        formatterTemplate ? React.createElement(
          Template,
          {
            name: 'valueFormatter',
            predicate: function predicate(_ref) {
              var column = _ref.column;
              return column.dataType === type;
            }
          },
          function (params) {
            return formatterTemplate(params);
          }
        ) : null,
        editorTemplate ? React.createElement(
          Template,
          {
            name: 'valueEditor',
            predicate: function predicate(_ref2) {
              var column = _ref2.column;
              return column.dataType === type;
            }
          },
          function (params) {
            return editorTemplate(params);
          }
        ) : null
      );
    }
  }]);
  return DataTypeProvider;
}(React.PureComponent);

DataTypeProvider.propTypes = {
  type: PropTypes.string,
  formatterTemplate: PropTypes.func,
  editorTemplate: PropTypes.func
};

DataTypeProvider.defaultProps = {
  type: undefined,
  formatterTemplate: undefined,
  editorTemplate: undefined
};

var pluginDependencies$14 = [{ pluginName: 'TableView' }];

var TableColumnVisibility = function (_React$PureComponent) {
  inherits(TableColumnVisibility, _React$PureComponent);

  function TableColumnVisibility() {
    classCallCheck(this, TableColumnVisibility);
    return possibleConstructorReturn(this, (TableColumnVisibility.__proto__ || Object.getPrototypeOf(TableColumnVisibility)).apply(this, arguments));
  }

  createClass(TableColumnVisibility, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          hiddenColumns = _props.hiddenColumns,
          emptyMessageTemplate = _props.emptyMessageTemplate,
          messages = _props.messages;

      var visibleTableColumnsComputed = function visibleTableColumnsComputed(_ref) {
        var tableColumns = _ref.tableColumns;
        return visibleTableColumns(tableColumns, hiddenColumns);
      };

      var getMessage = getMessagesFormatter(messages);

      return React.createElement(
        PluginContainer,
        {
          pluginName: 'TableColumnVisibility',
          dependencies: pluginDependencies$14
        },
        React.createElement(Getter, { name: 'tableColumns', computed: visibleTableColumnsComputed }),
        React.createElement(
          Template,
          { name: 'tableView' },
          function (params) {
            return React.createElement(
              TemplateConnector,
              null,
              function (_ref2) {
                var tableColumns = _ref2.tableColumns;
                return tableColumns.length ? React.createElement(TemplatePlaceholder, null) : React.createElement(TemplateRenderer, {
                  template: emptyMessageTemplate,
                  params: _extends({ getMessage: getMessage }, params)
                });
              }
            );
          }
        )
      );
    }
  }]);
  return TableColumnVisibility;
}(React.PureComponent);

TableColumnVisibility.propTypes = {
  hiddenColumns: PropTypes.arrayOf(PropTypes.string),
  emptyMessageTemplate: PropTypes.func.isRequired,
  messages: PropTypes.object
};

TableColumnVisibility.defaultProps = {
  hiddenColumns: [],
  messages: {}
};

/* globals requestAnimationFrame */

var TABLE_FLEX_TYPE = 'flex';

var areColumnsChanged = function areColumnsChanged(prevColumns, nextColumns) {
  if (prevColumns.length !== nextColumns.length) return true;
  var prevKeys = prevColumns.map(function (column) {
    return column.key;
  });
  return nextColumns.find(function (column) {
    return prevKeys.indexOf(column.key) === -1;
  }) !== undefined;
};

var TableLayout = function (_React$PureComponent) {
  inherits(TableLayout, _React$PureComponent);

  function TableLayout(props) {
    classCallCheck(this, TableLayout);

    var _this = possibleConstructorReturn(this, (TableLayout.__proto__ || Object.getPrototypeOf(TableLayout)).call(this, props));

    _this.state = {
      animationState: new Map()
    };

    _this.animations = new Map();
    _this.tableNode = null;

    _this.setRef = function (ref) {
      if (ref) _this.tableNode = ref;
    };
    return _this;
  }

  createClass(TableLayout, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var nextColumns = nextProps.columns;
      var columns = this.props.columns;


      if (areColumnsChanged(columns, nextColumns)) return;

      // eslint-disable-next-line react/no-find-dom-node
      var tableWidth = findDOMNode(this).scrollWidth;
      this.animations = getAnimations(columns, nextColumns, tableWidth, this.animations);
      this.processAnimationFrame();
    }
  }, {
    key: 'getColumns',
    value: function getColumns() {
      var columns = this.props.columns;
      var animationState = this.state.animationState;


      var result = columns;

      var isFixedWidth = columns.filter(function (column) {
        return column.width === undefined;
      }).length === 0;
      if (isFixedWidth) {
        result = result.slice();
        result.push({ key: TABLE_FLEX_TYPE, type: TABLE_FLEX_TYPE });
      }

      if (animationState.size) {
        result = result.map(function (column) {
          return animationState.has(column.key) ? _extends({}, column, { animationState: animationState.get(column.key) }) : column;
        });
      }

      return result;
    }
  }, {
    key: 'processAnimationFrame',
    value: function processAnimationFrame() {
      this.animations = filterActiveAnimations(this.animations);

      if (!this.animations.size) {
        if (this.state.animationState.size) {
          this.setState({ animationState: new Map() });
        }
        return;
      }

      var animationState = evalAnimations(this.animations);
      this.setState({ animationState: animationState });

      requestAnimationFrame(this.processAnimationFrame.bind(this));
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          Layout = _props.layoutComponent,
          minColumnWidth = _props.minColumnWidth,
          restProps = objectWithoutProperties(_props, ['layoutComponent', 'minColumnWidth']);

      var columns = this.getColumns();
      var minWidth = columns.map(function (column) {
        return column.width || (column.type === TABLE_FLEX_TYPE ? 0 : minColumnWidth);
      }).reduce(function (acc, width) {
        return acc + width;
      }, 0);

      return React.createElement(Layout, _extends({}, restProps, {
        columns: columns,
        minWidth: minWidth
      }));
    }
  }]);
  return TableLayout;
}(React.PureComponent);

TableLayout.propTypes = {
  columns: PropTypes.array.isRequired,
  minColumnWidth: PropTypes.number.isRequired,
  layoutComponent: PropTypes.func.isRequired
};

var ColumnGroup = function (_React$PureComponent) {
  inherits(ColumnGroup, _React$PureComponent);

  function ColumnGroup() {
    classCallCheck(this, ColumnGroup);
    return possibleConstructorReturn(this, (ColumnGroup.__proto__ || Object.getPrototypeOf(ColumnGroup)).apply(this, arguments));
  }

  createClass(ColumnGroup, [{
    key: 'render',
    value: function render() {
      var columns = this.props.columns;


      return React.createElement(
        'colgroup',
        null,
        columns.map(function (column) {
          return React.createElement('col', {
            key: column.key,
            style: column.width !== undefined ? { width: column.width + 'px' } : null
          });
        })
      );
    }
  }]);
  return ColumnGroup;
}(React.PureComponent);

ColumnGroup.propTypes = {
  columns: PropTypes.array.isRequired
};

var getColumnStyle = function getColumnStyle(_ref) {
  var column = _ref.column;
  return column.animationState;
};

var getRowStyle = function getRowStyle(_ref2) {
  var row = _ref2.row;
  return row.height !== undefined ? { height: row.height + 'px' } : undefined;
};

var RowLayout = function (_React$PureComponent) {
  inherits(RowLayout, _React$PureComponent);

  function RowLayout() {
    classCallCheck(this, RowLayout);
    return possibleConstructorReturn(this, (RowLayout.__proto__ || Object.getPrototypeOf(RowLayout)).apply(this, arguments));
  }

  createClass(RowLayout, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          row = _props.row,
          columns = _props.columns,
          rowTemplate = _props.rowTemplate,
          cellTemplate = _props.cellTemplate;


      return React.createElement(
        TemplateRenderer,
        {
          template: rowTemplate,
          params: {
            tableRow: row,
            style: getRowStyle({ row: row })
          }
        },
        getTableRowColumnsWithColSpan(columns, row.colSpanStart).map(function (column) {
          return React.createElement(TemplateRenderer, {
            key: column.key,
            template: cellTemplate,
            params: _extends({
              tableRow: row,
              tableColumn: column,
              style: getColumnStyle({ column: column })
            }, column.colSpan ? { colSpan: column.colSpan } : null)
          });
        })
      );
    }
  }]);
  return RowLayout;
}(React.PureComponent);

RowLayout.propTypes = {
  row: PropTypes.object.isRequired,
  columns: PropTypes.array.isRequired,
  rowTemplate: PropTypes.func.isRequired,
  cellTemplate: PropTypes.func.isRequired
};

var OVERSCAN = 3;

var STUB_TYPE = 'stub';
var VISIBLE_TYPE = 'visible';
var OVERSCAN_TYPE = 'overscan';

var STARTING_KEY = 'starting';
var ENDING_KEY = 'ending';

var getVisibleRows = function getVisibleRows(rows, viewportTop, viewportHeight, getRowHeight) {
  var result = [];

  var bottom = viewportTop + viewportHeight;
  var position = 0;

  var _loop = function _loop(_i) {
    var row = rows[_i];
    var last = result[result.length - 1];

    var height = getRowHeight(row);
    var nextPosition = position + height;
    if (viewportTop <= position && position < bottom && viewportTop < nextPosition && nextPosition <= bottom || viewportTop > position && nextPosition > bottom) {
      if (last && last.type === STUB_TYPE) {
        rows.slice(Math.max(0, _i - OVERSCAN), _i).forEach(function (overscanRow) {
          var overscanRowSize = getRowHeight(overscanRow);
          last.height -= overscanRowSize;
          result.push({ type: OVERSCAN_TYPE, height: overscanRowSize, row: overscanRow });
        });
      }
      result.push({ type: VISIBLE_TYPE, height: height, row: row });
    } else if (last && last.type === STUB_TYPE) {
      last.height += height;
    } else if (_i > 0) {
      rows.slice(_i, _i + OVERSCAN).forEach(function (overscanRow) {
        var overscanRowSize = getRowHeight(overscanRow);
        result.push({ type: OVERSCAN_TYPE, height: overscanRowSize, row: overscanRow });
      });
      _i += OVERSCAN - 1;
      if (_i < rows.length) {
        result.push({ type: STUB_TYPE, key: ENDING_KEY, height: 0 });
      }
    } else {
      result.push({ type: STUB_TYPE, key: STARTING_KEY, height: height });
    }
    position = nextPosition;
    i = _i;
  };

  for (var i = 0; i < rows.length; i += 1) {
    _loop(i);
  }

  return result;
};

var getRowPosition = function getRowPosition(visibleRows, index) {
  return visibleRows.slice(0, index).reduce(function (acc, row) {
    return acc + row.height;
  }, 0);
};

var firstVisibleRowOffset = function firstVisibleRowOffset(prevVisibleRows, visibleRows) {
  var firstVisibleRowIndex = visibleRows.findIndex(function (row) {
    return row.type === VISIBLE_TYPE;
  });
  if (firstVisibleRowIndex === -1) return 0;

  var firstVisibleRow = visibleRows[firstVisibleRowIndex].row;
  var prevIndex = prevVisibleRows.findIndex(function (row) {
    return row.row === firstVisibleRow;
  });
  if (prevIndex === -1) return 0;

  var position = getRowPosition(visibleRows, firstVisibleRowIndex);
  var prevPosition = getRowPosition(prevVisibleRows, prevIndex);
  return position - prevPosition;
};

var VirtualTableLayout = function (_React$PureComponent) {
  inherits(VirtualTableLayout, _React$PureComponent);

  function VirtualTableLayout(props) {
    classCallCheck(this, VirtualTableLayout);

    var _this = possibleConstructorReturn(this, (VirtualTableLayout.__proto__ || Object.getPrototypeOf(VirtualTableLayout)).call(this, props));

    _this.state = {
      visibleBodyRows: []
    };

    _this.rowRefs = new Map();
    _this.rowHeights = new Map();
    _this.viewportTop = 0;
    _this.updateViewport = _this.updateViewport.bind(_this);
    _this.registerRowRef = _this.registerRowRef.bind(_this);
    _this.getRowHeight = _this.getRowHeight.bind(_this);

    _this.state.visibleBodyRows = _this.getVisibleRows();
    return _this;
  }

  createClass(VirtualTableLayout, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.storeRowHeights();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (this.props.headerRows !== nextProps.headerRows || this.props.rows !== nextProps.rows) {
        var prevRowHeight = this.rowHeights;

        this.rowHeights = [].concat(toConsumableArray(nextProps.headerRows), toConsumableArray(nextProps.rows)).reduce(function (acc, row) {
          var rowHeight = prevRowHeight.get(row.key);
          if (rowHeight !== undefined) {
            acc.set(row.key, rowHeight);
          }
          return acc;
        }, new Map());
        this.setState({
          visibleBodyRows: this.getVisibleRows(nextProps, this.viewportTop)
        });
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.storeRowHeights();
    }
  }, {
    key: 'getRowHeight',
    value: function getRowHeight(row) {
      var storedHeight = this.rowHeights.get(row.key);
      if (storedHeight !== undefined) return storedHeight;
      if (row.height) return row.height;
      return this.props.estimatedRowHeight;
    }
  }, {
    key: 'getVisibleRows',
    value: function getVisibleRows$$1() {
      var _this2 = this;

      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
          rows = _ref.rows,
          headerRows = _ref.headerRows,
          height = _ref.height;

      var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.viewportTop;

      var headHeight = headerRows.reduce(function (acc, row) {
        return acc + _this2.getRowHeight(row);
      }, 0);
      return getVisibleRows(rows, top, height - headHeight, this.getRowHeight);
    }
  }, {
    key: 'storeRowHeights',
    value: function storeRowHeights() {
      var _this3 = this;

      var rowsWithChangedHeights = Array.from(this.rowRefs.entries())
      // eslint-disable-next-line react/no-find-dom-node
      .map(function (_ref2) {
        var _ref3 = slicedToArray(_ref2, 2),
            row = _ref3[0],
            ref = _ref3[1];

        return [row, findDOMNode(ref).getBoundingClientRect().height];
      }).filter(function (_ref4) {
        var _ref5 = slicedToArray(_ref4, 2),
            row = _ref5[0],
            height = _ref5[1];

        return height !== _this3.getRowHeight(row);
      });

      if (rowsWithChangedHeights.length) {
        var rowHeights = this.rowHeights;

        rowsWithChangedHeights.forEach(function (_ref6) {
          var _ref7 = slicedToArray(_ref6, 2),
              row = _ref7[0],
              height = _ref7[1];

          return rowHeights.set(row.key, height);
        });

        var prevVisibleBodyRows = this.state.visibleBodyRows;

        var visibleBodyRows = this.getVisibleRows();

        this.setState({
          visibleBodyRows: visibleBodyRows
        });

        var scrollOffset = firstVisibleRowOffset(prevVisibleBodyRows, visibleBodyRows);
        if (scrollOffset !== 0) {
          // eslint-disable-next-line react/no-find-dom-node
          findDOMNode(this).scrollTop += scrollOffset;
        }
      }
    }
  }, {
    key: 'registerRowRef',
    value: function registerRowRef(row, ref) {
      if (ref === null) {
        this.rowRefs.delete(row);
      } else {
        this.rowRefs.set(row, ref);
      }
    }
  }, {
    key: 'updateViewport',
    value: function updateViewport(e) {
      var node = e.target;

      // NOTE: prevent iOS to flicker in bounces
      if (node.scrollTop < 0 || node.scrollLeft < 0 || node.scrollLeft + node.clientWidth > node.scrollWidth || node.scrollTop + node.clientHeight > node.scrollHeight) {
        return;
      }

      if (this.viewportTop !== node.scrollTop) {
        this.viewportTop = node.scrollTop;
        this.setState({
          visibleBodyRows: this.getVisibleRows()
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this4 = this;

      var _props = this.props,
          headerRows = _props.headerRows,
          columns = _props.columns,
          minWidth = _props.minWidth,
          height = _props.height,
          containerTemplate = _props.containerTemplate,
          headTableTemplate = _props.headTableTemplate,
          tableTemplate = _props.tableTemplate,
          headTemplate = _props.headTemplate,
          bodyTemplate = _props.bodyTemplate,
          rowTemplate = _props.rowTemplate,
          cellTemplate = _props.cellTemplate;
      var visibleBodyRows = this.state.visibleBodyRows;


      return React.createElement(
        TemplateRenderer,
        {
          template: containerTemplate,
          params: {
            style: { height: height + 'px' },
            onScroll: this.updateViewport
          }
        },
        !!headerRows.length && React.createElement(
          TemplateRenderer,
          {
            template: headTableTemplate,
            params: { style: { minWidth: minWidth + 'px' } }
          },
          React.createElement(ColumnGroup, { columns: columns }),
          React.createElement(
            TemplateRenderer,
            {
              template: headTemplate
            },
            headerRows.map(function (row) {
              return React.createElement(RowLayout, {
                key: row.key,
                ref: function ref(_ref8) {
                  return _this4.registerRowRef(row, _ref8);
                },
                row: row,
                columns: columns,
                rowTemplate: rowTemplate,
                cellTemplate: cellTemplate
              });
            })
          )
        ),
        React.createElement(
          TemplateRenderer,
          {
            template: tableTemplate,
            params: { style: { minWidth: minWidth + 'px' } }
          },
          React.createElement(ColumnGroup, { columns: columns }),
          React.createElement(
            TemplateRenderer,
            {
              template: bodyTemplate
            },
            visibleBodyRows.map(function (visibleRow) {
              if (visibleRow.type === 'stub') {
                return React.createElement('tr', { key: visibleRow.key, style: { height: visibleRow.height + 'px' } });
              }
              var row = visibleRow.row;

              return React.createElement(RowLayout, {
                key: row.key,
                ref: function ref(_ref9) {
                  return _this4.registerRowRef(row, _ref9);
                },
                row: row,
                columns: columns,
                rowTemplate: rowTemplate,
                cellTemplate: cellTemplate
              });
            })
          )
        )
      );
    }
  }]);
  return VirtualTableLayout;
}(React.PureComponent);

VirtualTableLayout.propTypes = {
  minWidth: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  headerRows: PropTypes.array,
  rows: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired,
  cellTemplate: PropTypes.func.isRequired,
  rowTemplate: PropTypes.func.isRequired,
  bodyTemplate: PropTypes.func.isRequired,
  headTemplate: PropTypes.func,
  tableTemplate: PropTypes.func.isRequired,
  headTableTemplate: PropTypes.func,
  containerTemplate: PropTypes.func.isRequired,
  estimatedRowHeight: PropTypes.number.isRequired
};

VirtualTableLayout.defaultProps = {
  headerRows: [],
  headTemplate: function headTemplate() {
    return null;
  },
  headTableTemplate: function headTableTemplate() {
    return null;
  }
};

var RowsBlockLayout = function (_React$PureComponent) {
  inherits(RowsBlockLayout, _React$PureComponent);

  function RowsBlockLayout() {
    classCallCheck(this, RowsBlockLayout);
    return possibleConstructorReturn(this, (RowsBlockLayout.__proto__ || Object.getPrototypeOf(RowsBlockLayout)).apply(this, arguments));
  }

  createClass(RowsBlockLayout, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          rows = _props.rows,
          columns = _props.columns,
          blockTemplate = _props.blockTemplate,
          rowTemplate = _props.rowTemplate,
          cellTemplate = _props.cellTemplate;


      return React.createElement(
        TemplateRenderer,
        {
          template: blockTemplate
        },
        rows.map(function (row) {
          return React.createElement(RowLayout, {
            key: row.key,
            row: row,
            columns: columns,
            rowTemplate: rowTemplate,
            cellTemplate: cellTemplate
          });
        })
      );
    }
  }]);
  return RowsBlockLayout;
}(React.PureComponent);

RowsBlockLayout.propTypes = {
  rows: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired,
  blockTemplate: PropTypes.func.isRequired,
  rowTemplate: PropTypes.func.isRequired,
  cellTemplate: PropTypes.func.isRequired
};

var StaticTableLayout = function (_React$PureComponent) {
  inherits(StaticTableLayout, _React$PureComponent);

  function StaticTableLayout() {
    classCallCheck(this, StaticTableLayout);
    return possibleConstructorReturn(this, (StaticTableLayout.__proto__ || Object.getPrototypeOf(StaticTableLayout)).apply(this, arguments));
  }

  createClass(StaticTableLayout, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          headerRows = _props.headerRows,
          rows = _props.rows,
          columns = _props.columns,
          minWidth = _props.minWidth,
          containerTemplate = _props.containerTemplate,
          tableTemplate = _props.tableTemplate,
          headTemplate = _props.headTemplate,
          bodyTemplate = _props.bodyTemplate,
          rowTemplate = _props.rowTemplate,
          cellTemplate = _props.cellTemplate;


      return React.createElement(
        TemplateRenderer,
        {
          template: containerTemplate
        },
        React.createElement(
          TemplateRenderer,
          {
            template: tableTemplate,
            params: {
              style: {
                minWidth: minWidth + 'px'
              }
            }
          },
          React.createElement(ColumnGroup, { columns: columns }),
          !!headerRows.length && React.createElement(RowsBlockLayout, {
            key: 'head',
            rows: headerRows,
            columns: columns,
            blockTemplate: headTemplate,
            rowTemplate: rowTemplate,
            cellTemplate: cellTemplate
          }),
          React.createElement(RowsBlockLayout, {
            key: 'body',
            rows: rows,
            columns: columns,
            blockTemplate: bodyTemplate,
            rowTemplate: rowTemplate,
            cellTemplate: cellTemplate
          })
        )
      );
    }
  }]);
  return StaticTableLayout;
}(React.PureComponent);

StaticTableLayout.propTypes = {
  headerRows: PropTypes.array,
  rows: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired,
  minWidth: PropTypes.number.isRequired,
  containerTemplate: PropTypes.func.isRequired,
  tableTemplate: PropTypes.func.isRequired,
  headTemplate: PropTypes.func,
  bodyTemplate: PropTypes.func.isRequired,
  rowTemplate: PropTypes.func.isRequired,
  cellTemplate: PropTypes.func.isRequired
};

StaticTableLayout.defaultProps = {
  headerRows: [],
  headTemplate: function headTemplate() {
    return null;
  }
};

var getSortingConfig = function getSortingConfig(sorting, column) {
  var result = {
    sortingSupported: sorting !== undefined
  };

  if (result.sortingSupported) {
    result.sortingDirection = getColumnSortingDirection(sorting, column.name);
  }

  return result;
};

var GroupPanelLayout = function (_React$PureComponent) {
  inherits(GroupPanelLayout, _React$PureComponent);

  function GroupPanelLayout(props) {
    classCallCheck(this, GroupPanelLayout);

    var _this = possibleConstructorReturn(this, (GroupPanelLayout.__proto__ || Object.getPrototypeOf(GroupPanelLayout)).call(this, props));

    _this.state = {
      sourceColumnName: null,
      targetColumnIndex: -1
    };

    _this.onEnter = function (_ref) {
      var payload = _ref.payload;

      _this.setState({
        sourceColumnName: payload[0].columnName
      });
    };
    _this.onOver = function (_ref2) {
      var clientOffset = _ref2.clientOffset;
      var _this$props = _this.props,
          draftGroupingChange$$1 = _this$props.draftGroupingChange,
          groupingPanelItems$$1 = _this$props.groupingPanelItems;
      var _this$state = _this.state,
          sourceColumnName = _this$state.sourceColumnName,
          prevTargetColumnIndex = _this$state.targetColumnIndex;

      var itemGeometries = _this.itemRefs.map(function (element) {
        return element.getBoundingClientRect();
      });
      var sourceColumnIndex = groupingPanelItems$$1.findIndex(function (column) {
        return column.name === sourceColumnName;
      });
      var targetColumnIndex = getGroupCellTargetIndex(itemGeometries, sourceColumnIndex, clientOffset);

      if (prevTargetColumnIndex === targetColumnIndex) return;

      draftGroupingChange$$1({
        columnName: sourceColumnName,
        groupIndex: targetColumnIndex
      });
      _this.setState({ targetColumnIndex: targetColumnIndex });
    };
    _this.onLeave = function () {
      var draftGroupingChange$$1 = _this.props.draftGroupingChange;
      var sourceColumnName = _this.state.sourceColumnName;

      draftGroupingChange$$1({
        columnName: sourceColumnName,
        groupIndex: -1
      });
      _this.setState({
        targetColumnIndex: -1
      });
    };
    _this.onDrop = function () {
      var groupByColumn$$1 = _this.props.groupByColumn;
      var _this$state2 = _this.state,
          sourceColumnName = _this$state2.sourceColumnName,
          targetColumnIndex = _this$state2.targetColumnIndex;

      _this.resetState();
      groupByColumn$$1({
        columnName: sourceColumnName,
        groupIndex: targetColumnIndex
      });
    };
    _this.onDragEnd = function () {
      var _this$state3 = _this.state,
          sourceColumnName = _this$state3.sourceColumnName,
          targetColumnIndex = _this$state3.targetColumnIndex;
      var groupByColumn$$1 = _this.props.groupByColumn;

      if (sourceColumnName && targetColumnIndex === -1) {
        groupByColumn$$1({
          columnName: sourceColumnName
        });
      }
      _this.resetState();
    };
    return _this;
  }

  createClass(GroupPanelLayout, [{
    key: 'getItems',
    value: function getItems() {
      var _this2 = this;

      var _props = this.props,
          allowSorting = _props.allowSorting,
          sorting = _props.sorting,
          changeSortingDirection = _props.changeSortingDirection,
          groupingPanelItems$$1 = _props.groupingPanelItems,
          groupByColumn$$1 = _props.groupByColumn,
          groupPanelItemTemplate = _props.groupPanelItemTemplate,
          allowDragging = _props.allowDragging,
          allowUngroupingByClick = _props.allowUngroupingByClick;


      this.itemRefs = [];
      return groupingPanelItems$$1.map(function (_ref3) {
        var column = _ref3.column,
            draft = _ref3.draft;

        var _getSortingConfig = getSortingConfig(sorting, column),
            sortingSupported = _getSortingConfig.sortingSupported,
            sortingDirection = _getSortingConfig.sortingDirection;

        var item = groupPanelItemTemplate({
          column: column,
          draft: draft,
          allowSorting: allowSorting && sortingSupported,
          sortingDirection: sortingDirection,
          changeSortingDirection: changeSortingDirection,
          groupByColumn: groupByColumn$$1,
          allowUngroupingByClick: allowUngroupingByClick
        });

        return allowDragging ? React.createElement(
          DragSource,
          {
            key: column.name,
            getPayload: function getPayload() {
              return [{ type: 'column', columnName: column.name }];
            },
            onEnd: _this2.onDragEnd
          },
          React.createElement(
            'div',
            {
              ref: function ref(element) {
                return element && _this2.itemRefs.push(element);
              },
              style: { display: 'inline-block' }
            },
            item
          )
        ) : React.createElement(
          'div',
          {
            ref: function ref(element) {
              return element && _this2.itemRefs.push(element);
            },
            key: column.name,
            style: { display: 'inline-block' }
          },
          item
        );
      });
    }
  }, {
    key: 'resetState',
    value: function resetState() {
      var cancelGroupingChange$$1 = this.props.cancelGroupingChange;

      cancelGroupingChange$$1();
      this.setState({
        sourceColumnName: null,
        targetColumnIndex: -1
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
          groupByColumnText = _props2.groupByColumnText,
          panelTemplate = _props2.panelTemplate,
          allowDragging = _props2.allowDragging;


      var items = this.getItems();

      var groupPanel = items.length ? panelTemplate({ items: items }) : React.createElement(
        'span',
        null,
        groupByColumnText
      );

      return allowDragging ? React.createElement(
        DropTarget,
        {
          onEnter: this.onEnter,
          onOver: this.onOver,
          onLeave: this.onLeave,
          onDrop: this.onDrop
        },
        groupPanel
      ) : groupPanel;
    }
  }]);
  return GroupPanelLayout;
}(React.PureComponent);

GroupPanelLayout.propTypes = {
  allowSorting: PropTypes.bool,
  sorting: PropTypes.any,
  changeSortingDirection: PropTypes.func,
  groupingPanelItems: PropTypes.arrayOf(PropTypes.shape({
    column: PropTypes.object,
    draft: PropTypes.bool
  })).isRequired,
  groupByColumn: PropTypes.func,
  groupByColumnText: PropTypes.any,
  allowUngroupingByClick: PropTypes.bool,
  groupPanelItemTemplate: PropTypes.func.isRequired,
  panelTemplate: PropTypes.func.isRequired,
  allowDragging: PropTypes.bool,
  draftGroupingChange: PropTypes.func,
  cancelGroupingChange: PropTypes.func
};

GroupPanelLayout.defaultProps = {
  allowSorting: false,
  sorting: undefined,
  changeSortingDirection: function changeSortingDirection() {},
  groupByColumn: function groupByColumn$$1() {},
  groupByColumnText: undefined,
  allowUngroupingByClick: false,
  allowDragging: false,
  draftGroupingChange: function draftGroupingChange$$1() {},
  cancelGroupingChange: function cancelGroupingChange$$1() {}
};

export { Grid, ColumnChooser, FilteringState, LocalFiltering, EditingState, PagingState, LocalPaging, GroupingState, LocalGrouping, CustomGrouping, SelectionState, SortingState, LocalSorting, DragDropContext$1 as DragDropContext, TableColumnReordering, TableView, TableSelection, RowDetailState, TableRowDetail, TableGroupRow, TableHeaderRow, TableFilterRow, TableEditRow, TableEditColumn, TableColumnResizing, PagingPanel, GroupingPanel, DataTypeProvider, TableColumnVisibility, TableLayout, VirtualTableLayout, StaticTableLayout, GroupPanelLayout };
//# sourceMappingURL=dx-react-grid.es.js.map