/**
 * Bundle of @devexpress/dx-react-grid-material-ui
 * 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 { ColumnChooser, DragDropContext, Grid, GroupPanelLayout, GroupingPanel, PagingPanel, StaticTableLayout, TableColumnReordering, TableColumnResizing, TableColumnVisibility, TableEditColumn, TableEditRow, TableFilterRow, TableGroupRow, TableHeaderRow, TableLayout, TableRowDetail, TableSelection, TableView, VirtualTableLayout } from '@devexpress/dx-react-grid';
import { withStyles } from 'material-ui/styles';
import { Button, Checkbox, Chip, IconButton, Input, Paper, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, Tooltip, Typography } from 'material-ui';
import List, { ListItem, ListItemText } from 'material-ui/List';
import Checkbox$1 from 'material-ui/Checkbox';
import Input$1 from 'material-ui/Input';
import { MenuItem } from 'material-ui/Menu';
import Select from 'material-ui/Select';
import classNames from 'classnames';
import ChevronLeft from 'material-ui-icons/ChevronLeft';
import ChevronRight from 'material-ui-icons/ChevronRight';
import { firstRowOnPage, lastRowOnPage } from '@devexpress/dx-grid-core';
import { DragSource, Draggable, DropTarget, combineTemplates } from '@devexpress/dx-react-core';
import List$1 from 'material-ui-icons/List';
import ExpandMore from 'material-ui-icons/ExpandMore';
import IconButton$1 from 'material-ui/IconButton';
import { TableCell as TableCell$1 } from 'material-ui/Table';
import Toolbar from 'material-ui/Toolbar';
import Typography$1 from 'material-ui/Typography';

var styles$1 = function styles$$1(theme) {
  return {
    headingPanel: {
      paddingLeft: '12px',
      paddingRight: '12px',
      paddingTop: '12px',
      borderBottom: '1px solid ' + theme.palette.text.lightDivider
    },
    footerPanel: {
      padding: '12px'
    }
  };
};

var Root = function Root(_ref) {
  var headerTemplate = _ref.headerTemplate,
      bodyTemplate = _ref.bodyTemplate,
      footerTemplate = _ref.footerTemplate;
  return React.createElement(
    Paper,
    null,
    headerTemplate(),
    bodyTemplate(),
    footerTemplate()
  );
};

Root.propTypes = {
  headerTemplate: PropTypes.func.isRequired,
  bodyTemplate: PropTypes.func.isRequired,
  footerTemplate: PropTypes.func.isRequired
};

var HeaderBase = function HeaderBase(_ref2) {
  var children = _ref2.children,
      classes = _ref2.classes;
  return children && React.createElement(
    'div',
    { className: classes.headingPanel },
    children
  );
};

HeaderBase.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired
};

HeaderBase.defaultProps = {
  children: null
};

var Header = withStyles(styles$1, { name: 'GridLayout' })(HeaderBase);

var FooterBase = function FooterBase(_ref3) {
  var children = _ref3.children,
      classes = _ref3.classes;
  return children && React.createElement(
    'div',
    { className: classes.footerPanel },
    children
  );
};

FooterBase.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired
};

FooterBase.defaultProps = {
  children: null
};

var Footer = withStyles(styles$1, { name: 'GridLayout' })(FooterBase);

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 rootTemplate = function rootTemplate(props) {
  return React.createElement(Root, props);
};
var headerPlaceholderTemplate = function headerPlaceholderTemplate(props) {
  return React.createElement(Header, props);
};
var footerPlaceholderTemplate = function footerPlaceholderTemplate(props) {
  return React.createElement(Footer, props);
};

var Grid$1 = function Grid$$1(_ref) {
  var children = _ref.children,
      props = objectWithoutProperties(_ref, ['children']);
  return React.createElement(
    Grid,
    _extends({
      rootTemplate: rootTemplate,
      headerPlaceholderTemplate: headerPlaceholderTemplate,
      footerPlaceholderTemplate: footerPlaceholderTemplate
    }, props),
    children
  );
};

Grid$1.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};

var ColumnChooserContainer = function ColumnChooserContainer(_ref) {
  var children = _ref.children;
  return React.createElement(
    List,
    { dense: true },
    children
  );
};

ColumnChooserContainer.propTypes = {
  children: PropTypes.arrayOf(PropTypes.node).isRequired
};

var ColumnChooserItem = function ColumnChooserItem(_ref) {
  var _ref$item = _ref.item,
      column = _ref$item.column,
      hidden = _ref$item.hidden,
      onToggle = _ref.onToggle;

  var handleClick = function handleClick() {
    return onToggle();
  };
  return React.createElement(
    ListItem,
    {
      key: column.name,
      button: true,
      onClick: handleClick
    },
    React.createElement(Checkbox$1, {
      checked: !hidden,
      tabIndex: -1,
      disableRipple: true
    }),
    React.createElement(ListItemText, { primary: column.title || column.name })
  );
};

ColumnChooserItem.propTypes = {
  item: PropTypes.shape({
    column: PropTypes.shape({
      name: PropTypes.string
    }),
    hidden: PropTypes.bool
  }).isRequired,
  onToggle: PropTypes.func
};

ColumnChooserItem.defaultProps = {
  onToggle: function onToggle() {}
};

var containerTemplate = function containerTemplate(props) {
  return React.createElement(ColumnChooserContainer, props);
};
var itemTemplate = function itemTemplate(props) {
  return React.createElement(ColumnChooserItem, props);
};

var ColumnChooser$1 = function ColumnChooser$$1(props) {
  return React.createElement(ColumnChooser, _extends({
    containerTemplate: containerTemplate,
    itemTemplate: itemTemplate
  }, props));
};

var styles$2 = function styles$$1(theme) {
  return {
    container: {
      cursor: 'move',
      position: 'fixed',
      zIndex: 1000,
      left: 0,
      top: 0,
      display: 'inline-block'
    },
    column: {
      paddingTop: theme.spacing.unit,
      paddingBottom: theme.spacing.unit,
      paddingLeft: theme.spacing.unit * 2,
      paddingRight: theme.spacing.unit * 2,
      float: 'right'
    }
  };
};

var ContainerBase = function ContainerBase(_ref) {
  var clientOffset = _ref.clientOffset,
      columns = _ref.columns,
      columnTemplate = _ref.columnTemplate,
      classes = _ref.classes;
  return React.createElement(
    Paper,
    {
      className: classes.container,
      style: {
        transform: 'translate(calc(' + clientOffset.x + 'px - 50%), calc(' + clientOffset.y + 'px - 50%))'
      }
    },
    columns.map(function (column) {
      return React.cloneElement(columnTemplate({ column: column }), { key: column.name });
    })
  );
};

ContainerBase.propTypes = {
  clientOffset: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  }).isRequired,
  columns: PropTypes.array.isRequired,
  columnTemplate: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};

var Container = withStyles(styles$2, { name: 'DragDrop' })(ContainerBase);

var ColumnBase = function ColumnBase(_ref2) {
  var column = _ref2.column,
      classes = _ref2.classes;
  return React.createElement(
    Typography,
    {
      className: classes.column,
      type: 'body1',
      component: 'p'
    },
    column.title
  );
};

ColumnBase.propTypes = {
  column: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired
};

var Column = withStyles(styles$2, { name: 'DragDrop' })(ColumnBase);

var containerTemplate$1 = function containerTemplate(props) {
  return React.createElement(Container, props);
};
var columnTemplate = function columnTemplate(props) {
  return React.createElement(Column, props);
};

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

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

  createClass(DragDropContext$$1, [{
    key: 'render',
    value: function render() {
      return React.createElement(DragDropContext, _extends({
        containerTemplate: containerTemplate$1,
        columnTemplate: columnTemplate
      }, this.props));
    }
  }]);
  return DragDropContext$$1;
}(React.PureComponent);

var styles$4 = function styles$$1(theme) {
  return {
    pageSizeSelector: _extends({}, theme.typography.caption, {
      float: 'right',
      paddingRight: theme.spacing.unit * 5
    }),
    label: {
      paddingRight: theme.spacing.unit * 3,
      lineHeight: theme.spacing.unit * 5 + 'px',
      float: 'left'
    },
    pageSizes: {
      display: 'inline-block'
    },
    pageSizeTitle: {
      width: 'auto',
      marginRight: theme.spacing.unit / 2
    },
    inputRoot: {
      paddingTop: theme.spacing.unit * 0.75,
      float: 'right',
      fontSize: theme.spacing.unit * 1.75,
      textAlign: 'right'
    },
    select: {
      padding: '0 ' + theme.spacing.unit * 3.25 + 'px 0 0'
    },
    selectIcon: {
      top: 2
    },
    '@media (max-width: 768px)': {
      label: {
        display: 'none'
      },
      pageSizeSelector: {
        paddingRight: theme.spacing.unit * 2
      }
    }
  };
};

var PageSizeSelectorBase = function PageSizeSelectorBase(_ref) {
  var pageSize = _ref.pageSize,
      onPageSizeChange = _ref.onPageSizeChange,
      allowedPageSizes = _ref.allowedPageSizes,
      getMessage = _ref.getMessage,
      classes = _ref.classes;

  var showAll = getMessage('showAll');
  return React.createElement(
    'div',
    { className: classes.pageSizeSelector },
    React.createElement(
      'span',
      { className: classes.label },
      getMessage('rowsPerPage')
    ),
    React.createElement(
      Select,
      {
        value: pageSize,
        onChange: function onChange(event) {
          return onPageSizeChange(event.target.value);
        },
        classes: {
          select: classes.select,
          icon: classes.selectIcon
        },
        InputClasses: { root: classes.inputRoot },
        input: React.createElement(Input$1, { disableUnderline: true })
      },
      allowedPageSizes.map(function (item) {
        return React.createElement(
          MenuItem,
          { key: item, value: item },
          item !== 0 ? item : showAll
        );
      })
    )
  );
};

PageSizeSelectorBase.propTypes = {
  pageSize: PropTypes.number.isRequired,
  onPageSizeChange: PropTypes.func.isRequired,
  allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
  classes: PropTypes.object.isRequired,
  getMessage: PropTypes.func.isRequired
};

var PageSizeSelector = withStyles(styles$4, { name: 'PageSizeSelector' })(PageSizeSelectorBase);

var styles$5 = function styles$$1(theme) {
  return {
    pagination: {
      float: 'right',
      margin: 0
    },
    rowsLabel: _extends({}, theme.typography.caption, {
      paddingRight: theme.spacing.unit * 5,
      lineHeight: theme.spacing.unit * 5 + 'px'
    }),
    button: {
      minWidth: theme.spacing.unit * 2,
      height: theme.spacing.unit * 5
    },
    activeButton: {
      fontWeight: 'bold'
    },
    arrowButton: {
      width: theme.spacing.unit * 4,
      height: theme.spacing.unit * 4,
      display: 'inline-block',
      verticalAlign: 'middle'
    },
    prev: {
      marginRight: 0
    },
    next: {
      marginLeft: 0
    },
    '@media(max-width: 768px)': {
      button: {
        display: 'none'
      },
      prev: {
        marginRight: theme.spacing.unit
      },
      next: {
        marginLeft: theme.spacing.unit
      },
      rowsLabel: {
        paddingRight: theme.spacing.unit * 2
      }
    }
  };
};

var PageButton = function PageButton(_ref) {
  var _classNames;

  var text = _ref.text,
      isActive = _ref.isActive,
      isDisabled = _ref.isDisabled,
      classes = _ref.classes,
      onClick = _ref.onClick;

  var buttonClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.button, true), defineProperty(_classNames, classes.activeButton, isActive), _classNames));

  return React.createElement(
    Button,
    {
      className: buttonClasses,
      disabled: isDisabled,
      onClick: onClick
    },
    text
  );
};

PageButton.propTypes = {
  text: PropTypes.string.isRequired,
  isActive: PropTypes.bool,
  isDisabled: PropTypes.bool,
  classes: PropTypes.object.isRequired,
  onClick: PropTypes.func
};

PageButton.defaultProps = {
  onClick: function onClick() {},
  isDisabled: false,
  isActive: false
};

var ellipsisSymbol = '\u2026';

var calculateStartPage = function calculateStartPage(currentPage, maxButtonCount, totalPageCount) {
  return Math.max(Math.min(currentPage - Math.floor(maxButtonCount / 2, 10), totalPageCount - maxButtonCount + 1), 1);
};

var renderPageButtons = function renderPageButtons(currentPage, totalPageCount, classes, onCurrentPageChange) {
  var pageButtons = [];
  var maxButtonCount = 3;
  var startPage = 1;
  var endPage = totalPageCount || 1;

  if (maxButtonCount < totalPageCount) {
    startPage = calculateStartPage(currentPage + 1, maxButtonCount, totalPageCount);
    endPage = startPage + maxButtonCount - 1;
  }
  if (startPage > 1) {
    pageButtons.push(React.createElement(PageButton, {
      key: 1,
      text: String(1),
      classes: classes,
      onClick: function onClick() {
        return onCurrentPageChange(0);
      }
    }));

    if (startPage > 2) {
      pageButtons.push(React.createElement(PageButton, {
        key: 'ellipsisStart',
        text: ellipsisSymbol,
        classes: classes,
        isDisabled: true
      }));
    }
  }

  var _loop = function _loop(page) {
    pageButtons.push(React.createElement(PageButton, {
      key: page,
      text: String(page),
      isActive: page === currentPage + 1,
      classes: classes,
      onClick: function onClick() {
        return onCurrentPageChange(page - 1);
      },
      isDisabled: startPage === endPage
    }));
  };

  for (var page = startPage; page <= endPage; page += 1) {
    _loop(page);
  }

  if (endPage < totalPageCount) {
    if (endPage < totalPageCount - 1) {
      pageButtons.push(React.createElement(PageButton, {
        key: 'ellipsisEnd',
        text: ellipsisSymbol,
        classes: classes,
        isDisabled: true
      }));
    }

    pageButtons.push(React.createElement(PageButton, {
      key: totalPageCount,
      text: String(totalPageCount),
      classes: classes,
      onClick: function onClick() {
        return onCurrentPageChange(totalPageCount - 1);
      }
    }));
  }

  return pageButtons;
};

var PaginationBase = function PaginationBase(_ref2) {
  var totalPages = _ref2.totalPages,
      totalCount = _ref2.totalCount,
      pageSize = _ref2.pageSize,
      currentPage = _ref2.currentPage,
      onCurrentPageChange = _ref2.onCurrentPageChange,
      getMessage = _ref2.getMessage,
      classes = _ref2.classes;

  var from = firstRowOnPage(currentPage, pageSize, totalCount);
  var to = lastRowOnPage(currentPage, pageSize, totalCount);

  return React.createElement(
    'div',
    { className: classes.pagination },
    React.createElement(
      'span',
      { className: classes.rowsLabel },
      getMessage('info', { from: from, to: to, count: totalCount })
    ),
    React.createElement(
      IconButton,
      {
        className: classNames(classes.arrowButton, classes.prev),
        disabled: currentPage === 0,
        onClick: function onClick() {
          return currentPage > 0 && onCurrentPageChange(currentPage - 1);
        }
      },
      React.createElement(ChevronLeft, null)
    ),
    renderPageButtons(currentPage, totalPages, classes, onCurrentPageChange),
    React.createElement(
      IconButton,
      {
        className: classNames(classes.arrowButton, classes.next),
        disabled: currentPage === totalPages - 1 || totalCount === 0,
        onClick: function onClick() {
          return currentPage < totalPages - 1 && onCurrentPageChange(currentPage + 1);
        }
      },
      React.createElement(ChevronRight, null)
    )
  );
};

PaginationBase.propTypes = {
  totalPages: PropTypes.number.isRequired,
  currentPage: PropTypes.number.isRequired,
  onCurrentPageChange: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired,
  totalCount: PropTypes.number.isRequired,
  pageSize: PropTypes.number.isRequired,
  getMessage: PropTypes.func.isRequired
};

var Pagination = withStyles(styles$5, { name: 'Pagination' })(PaginationBase);

var styles$3 = {
  pager: {
    overflow: 'hidden'
  }
};

var PagerBase = function PagerBase(_ref) {
  var currentPage = _ref.currentPage,
      allowedPageSizes = _ref.allowedPageSizes,
      totalPages = _ref.totalPages,
      pageSize = _ref.pageSize,
      classes = _ref.classes,
      _onCurrentPageChange = _ref.onCurrentPageChange,
      onPageSizeChange = _ref.onPageSizeChange,
      totalCount = _ref.totalCount,
      getMessage = _ref.getMessage;
  return React.createElement(
    'div',
    { className: classes.pager },
    React.createElement(Pagination, {
      totalPages: totalPages,
      totalCount: totalCount,
      currentPage: currentPage,
      onCurrentPageChange: function onCurrentPageChange(page) {
        return _onCurrentPageChange(page);
      },
      pageSize: pageSize,
      getMessage: getMessage
    }),
    !!allowedPageSizes.length && React.createElement(PageSizeSelector, {
      pageSize: pageSize,
      onPageSizeChange: onPageSizeChange,
      allowedPageSizes: allowedPageSizes,
      getMessage: getMessage
    })
  );
};

PagerBase.propTypes = {
  currentPage: PropTypes.number.isRequired,
  totalPages: PropTypes.number.isRequired,
  allowedPageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
  pageSize: PropTypes.number.isRequired,
  classes: PropTypes.object.isRequired,
  onCurrentPageChange: PropTypes.func.isRequired,
  onPageSizeChange: PropTypes.func.isRequired,
  totalCount: PropTypes.number.isRequired,
  getMessage: PropTypes.func.isRequired
};

var Pager = withStyles(styles$3, { name: 'Pager' })(PagerBase);

var pagerTemplate = function pagerTemplate(props) {
  return React.createElement(Pager, props);
};

var defaultMessages = {
  showAll: 'All',
  rowsPerPage: 'Rows per page:',
  info: function info(_ref) {
    var from = _ref.from,
        to = _ref.to,
        count = _ref.count;
    return '' + from + (from < to ? '-' + to : '') + ' of ' + count;
  }
};

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

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

  createClass(PagingPanel$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['messages']);


      return React.createElement(PagingPanel, _extends({
        pagerTemplate: pagerTemplate,
        messages: _extends({}, defaultMessages, messages)
      }, restProps));
    }
  }]);
  return PagingPanel$$1;
}(React.PureComponent);

PagingPanel$1.propTypes = {
  messages: PropTypes.shape({
    showAll: PropTypes.string,
    rowsPerPage: PropTypes.string,
    info: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
  })
};

PagingPanel$1.defaultProps = {
  messages: {}
};

var styles$6 = function styles$$1(theme) {
  return {
    panel: {
      display: 'flex',
      flexWrap: 'wrap',
      width: '100%'
    },
    groupInfo: {
      padding: theme.spacing.unit * 0.75 + 'px 0',
      marginBottom: theme.spacing.unit * 1.5,
      display: 'inline-block',
      color: theme.typography.title.color
    },
    groupIcon: {
      display: 'inline-block',
      verticalAlign: 'middle'
    }
  };
};

var GroupPanelTextBase = function GroupPanelTextBase(_ref) {
  var classes = _ref.classes,
      allowDragging = _ref.allowDragging,
      allowUngroupingByClick = _ref.allowUngroupingByClick,
      getMessage = _ref.getMessage;

  var message = getMessage('groupByColumn');
  if (message) {
    return React.createElement(
      'span',
      { className: classes.groupInfo },
      message
    );
  }
  if (allowDragging) {
    return React.createElement(
      'span',
      { className: classes.groupInfo },
      'Drag a column header here to group by that column'
    );
  }
  if (allowUngroupingByClick) {
    return React.createElement(
      'span',
      { className: classes.groupInfo },
      'Click \xA0',
      React.createElement(
        'span',
        { className: classes.groupIcon },
        React.createElement(List$1, null)
      ),
      '\xA0 icon in the column header to group by that column'
    );
  }
  return React.createElement(
    'span',
    { className: classes.groupInfo },
    'Grouping is not available'
  );
};

GroupPanelTextBase.propTypes = {
  classes: PropTypes.object.isRequired,
  allowDragging: PropTypes.bool,
  allowUngroupingByClick: PropTypes.bool,
  getMessage: PropTypes.func.isRequired
};

GroupPanelTextBase.defaultProps = {
  allowDragging: false,
  allowUngroupingByClick: false
};

var GroupPanelText = withStyles(styles$6, { name: 'GroupPanel' })(GroupPanelTextBase);

var PanelTemplateBase = function PanelTemplateBase(_ref2) {
  var classes = _ref2.classes,
      items = _ref2.items;
  return React.createElement(
    'div',
    { className: classes.panel },
    items
  );
};

PanelTemplateBase.propTypes = {
  classes: PropTypes.object.isRequired,
  items: PropTypes.arrayOf(PropTypes.node).isRequired
};

var PanelTemplate = withStyles(styles$6, { name: 'GroupPanel' })(PanelTemplateBase);

var panelTemplate = function panelTemplate(props) {
  return React.createElement(PanelTemplate, props);
};

var GroupPanelBase = function GroupPanelBase(_ref3) {
  var getMessage = _ref3.getMessage,
      classes = _ref3.classes,
      restProps = objectWithoutProperties(_ref3, ['getMessage', 'classes']);

  var groupPanelText = React.createElement(GroupPanelText, {
    allowDragging: restProps.allowDragging,
    allowUngroupingByClick: restProps.allowUngroupingByClick,
    getMessage: getMessage
  });
  return React.createElement(
    'div',
    { className: classes.panel },
    React.createElement(GroupPanelLayout, _extends({
      groupByColumnText: groupPanelText,
      panelTemplate: panelTemplate
    }, restProps))
  );
};

GroupPanelBase.propTypes = {
  getMessage: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};

var GroupPanel = withStyles(styles$6, { name: 'GroupPanel' })(GroupPanelBase);

var ENTER_KEY_CODE = 13;
var SPACE_KEY_CODE = 32;

var styles$7 = function styles$$1(theme) {
  return {
    button: {
      marginRight: theme.spacing.unit,
      marginBottom: '12px'
    },
    draftCell: {
      opacity: 0.3
    }
  };
};

var label = function label(allowSorting, sortingDirection, column) {
  var title = column.title || column.name;
  return allowSorting ? React.createElement(
    TableSortLabel,
    {
      active: !!sortingDirection,
      direction: sortingDirection,
      tabIndex: -1
    },
    title
  ) : title;
};

var GroupPanelItemBase = function GroupPanelItemBase(_ref) {
  var _classNames;

  var column = _ref.column,
      draft = _ref.draft,
      groupByColumn = _ref.groupByColumn,
      allowUngroupingByClick = _ref.allowUngroupingByClick,
      allowSorting = _ref.allowSorting,
      sortingDirection = _ref.sortingDirection,
      changeSortingDirection = _ref.changeSortingDirection,
      classes = _ref.classes;

  var chipClassNames = classNames((_classNames = {}, defineProperty(_classNames, classes.button, true), defineProperty(_classNames, classes.draftCell, draft), _classNames));
  var onClick = function onClick(e) {
    if (!allowSorting) return;
    var isActionKeyDown = e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE;
    var isMouseClick = e.keyCode === undefined;
    var cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
    var cancel = isMouseClick && cancelSortingRelatedKey || isActionKeyDown && cancelSortingRelatedKey;

    changeSortingDirection({
      keepOther: cancelSortingRelatedKey,
      cancel: cancel,
      columnName: column.name
    });
  };

  return React.createElement(Chip, _extends({
    label: label(allowSorting, sortingDirection, column),
    className: chipClassNames
  }, allowUngroupingByClick ? { onRequestDelete: function onRequestDelete() {
      return groupByColumn({ columnName: column.name });
    } } : null, {
    onClick: onClick
  }));
};

GroupPanelItemBase.propTypes = {
  column: PropTypes.shape({
    title: PropTypes.string
  }).isRequired,
  draft: PropTypes.bool,
  allowSorting: PropTypes.bool,
  sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
  changeSortingDirection: PropTypes.func,
  groupByColumn: PropTypes.func,
  allowUngroupingByClick: PropTypes.bool,
  classes: PropTypes.object.isRequired
};

GroupPanelItemBase.defaultProps = {
  draft: false,
  allowSorting: false,
  sortingDirection: undefined,
  changeSortingDirection: undefined,
  groupByColumn: undefined,
  allowUngroupingByClick: false
};

var GroupPanelItem = withStyles(styles$7, { name: 'GroupPanelItem' })(GroupPanelItemBase);

var defaultCellTemplate = function defaultCellTemplate(props) {
  return React.createElement(GroupPanelItem, props);
};

var defaultMessages$1 = {
  groupByColumn: ''
};

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

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

  createClass(GroupingPanel$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          groupPanelItemTemplate = _props.groupPanelItemTemplate,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['groupPanelItemTemplate', 'messages']);


      return React.createElement(GroupingPanel, _extends({
        groupPanelTemplate: function groupPanelTemplate(props) {
          return React.createElement(GroupPanel, _extends({
            groupPanelItemTemplate: combineTemplates(groupPanelItemTemplate, defaultCellTemplate)
          }, props));
        },
        messages: _extends({}, defaultMessages$1, messages)
      }, restProps));
    }
  }]);
  return GroupingPanel$$1;
}(React.PureComponent);

GroupingPanel$1.propTypes = {
  allowSorting: PropTypes.bool,
  groupPanelItemTemplate: PropTypes.func,
  messages: PropTypes.shape({
    groupByColumn: PropTypes.string
  })
};

GroupingPanel$1.defaultProps = {
  allowSorting: false,
  groupPanelItemTemplate: undefined,
  messages: {}
};

var styles$8 = function styles$$1(theme) {
  return {
    toggleCell: {
      textAlign: 'center',
      textOverflow: 'initial',
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: theme.spacing.unit
    },
    toggleCellButton: {
      verticalAlign: 'middle',
      display: 'inline-block',
      height: theme.spacing.unit * 5,
      width: theme.spacing.unit * 5
    }
  };
};

var TableDetailToggleCellBase = function TableDetailToggleCellBase(_ref) {
  var style = _ref.style,
      expanded = _ref.expanded,
      classes = _ref.classes,
      toggleExpanded = _ref.toggleExpanded;

  var handleClick = function handleClick() {
    toggleExpanded();
  };
  return React.createElement(
    TableCell,
    {
      className: classes.toggleCell,
      style: style
    },
    React.createElement(
      IconButton$1,
      {
        className: classes.toggleCellButton,
        onClick: handleClick
      },
      expanded ? React.createElement(ExpandMore, null) : React.createElement(ChevronRight, null)
    )
  );
};

TableDetailToggleCellBase.propTypes = {
  style: PropTypes.object,
  expanded: PropTypes.bool,
  classes: PropTypes.object.isRequired,
  toggleExpanded: PropTypes.func
};

TableDetailToggleCellBase.defaultProps = {
  style: null,
  expanded: false,
  toggleExpanded: function toggleExpanded() {}
};

var TableDetailToggleCell = withStyles(styles$8, { name: 'TableDetailToggleCell' })(TableDetailToggleCellBase);

var styles$9 = function styles$$1(theme) {
  return {
    active: {
      backgroundColor: theme.palette.background.contentFrame
    }
  };
};

var TableDetailCellBase = function TableDetailCellBase(_ref) {
  var colSpan = _ref.colSpan,
      style = _ref.style,
      template = _ref.template,
      classes = _ref.classes;
  return React.createElement(
    TableCell,
    {
      style: style,
      colSpan: colSpan,
      className: classes.active
    },
    template()
  );
};

TableDetailCellBase.propTypes = {
  style: PropTypes.object,
  colSpan: PropTypes.number,
  template: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};

TableDetailCellBase.defaultProps = {
  style: null,
  colSpan: 1
};

var TableDetailCell = withStyles(styles$9, { name: 'TableDetailCell' })(TableDetailCellBase);

var TableRow$1 = function TableRow$$1(_ref) {
  var children = _ref.children,
      style = _ref.style;
  return React.createElement(
    TableRow,
    {
      style: style
    },
    children
  );
};

TableRow$1.propTypes = {
  children: PropTypes.node,
  style: PropTypes.object
};

TableRow$1.defaultProps = {
  children: null,
  style: null
};

var defaultDetailToggleCellTemplate = function defaultDetailToggleCellTemplate(props) {
  return React.createElement(TableDetailToggleCell, props);
};
var defaultDetailCellTemplate = function defaultDetailCellTemplate(props) {
  return React.createElement(TableDetailCell, props);
};
var defaultDetailRowTemplate = function defaultDetailRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};

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

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

  createClass(TableRowDetail$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          detailCellTemplate = _props.detailCellTemplate,
          detailRowTemplate = _props.detailRowTemplate,
          detailToggleCellTemplate = _props.detailToggleCellTemplate,
          restProps = objectWithoutProperties(_props, ['detailCellTemplate', 'detailRowTemplate', 'detailToggleCellTemplate']);


      return React.createElement(TableRowDetail, _extends({
        detailToggleCellTemplate: combineTemplates(detailToggleCellTemplate, defaultDetailToggleCellTemplate),
        detailCellTemplate: combineTemplates(detailCellTemplate, defaultDetailCellTemplate),
        detailRowTemplate: combineTemplates(detailRowTemplate, defaultDetailRowTemplate),
        detailToggleCellWidth: 32
      }, restProps));
    }
  }]);
  return TableRowDetail$$1;
}(React.PureComponent);

TableRowDetail$1.propTypes = {
  detailRowTemplate: PropTypes.func,
  detailCellTemplate: PropTypes.func,
  detailToggleCellTemplate: PropTypes.func
};

TableRowDetail$1.defaultProps = {
  detailRowTemplate: undefined,
  detailCellTemplate: undefined,
  detailToggleCellTemplate: undefined
};

var styles$10 = function styles$$1(theme) {
  return {
    cell: {
      cursor: 'pointer',
      paddingLeft: theme.spacing.unit,
      paddingRight: theme.spacing.unit,
      paddingTop: theme.spacing.unit / 2 - 1
    },
    indentCell: {
      padding: 0
    },
    groupButton: {
      verticalAlign: 'middle',
      display: 'inline-block',
      marginRight: theme.spacing.unit,
      height: theme.spacing.unit * 5,
      width: theme.spacing.unit * 5
    },
    columnTitle: {
      verticalAlign: 'middle'
    }
  };
};

var TableGroupCellBase = function TableGroupCellBase(_ref) {
  var style = _ref.style,
      colSpan = _ref.colSpan,
      row = _ref.row,
      column = _ref.column,
      isExpanded = _ref.isExpanded,
      toggleGroupExpanded = _ref.toggleGroupExpanded,
      classes = _ref.classes,
      children = _ref.children;

  var handleClick = function handleClick() {
    return toggleGroupExpanded();
  };

  return React.createElement(
    TableCell$1,
    {
      colSpan: colSpan,
      style: style,
      className: classes.cell,
      onClick: handleClick
    },
    React.createElement(
      IconButton$1,
      {
        className: classes.groupButton
      },
      isExpanded ? React.createElement(ExpandMore, null) : React.createElement(ChevronRight, null)
    ),
    React.createElement(
      'span',
      { className: classes.columnTitle },
      React.createElement(
        'strong',
        null,
        column.title || column.name,
        ': '
      ),
      children || row.value
    )
  );
};

TableGroupCellBase.propTypes = {
  style: PropTypes.object,
  colSpan: PropTypes.number,
  row: PropTypes.object,
  column: PropTypes.object,
  isExpanded: PropTypes.bool,
  toggleGroupExpanded: PropTypes.func,
  classes: PropTypes.object.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};

TableGroupCellBase.defaultProps = {
  style: null,
  colSpan: 1,
  row: {},
  column: {},
  isExpanded: false,
  toggleGroupExpanded: function toggleGroupExpanded() {},
  children: undefined
};

var TableGroupCell = withStyles(styles$10, { name: 'TableGroupCell' })(TableGroupCellBase);

var defaultGroupCellTemplate = function defaultGroupCellTemplate(props) {
  return React.createElement(TableGroupCell, props);
};
var defaultGroupRowTemplate = function defaultGroupRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};

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

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

  createClass(TableGroupRow$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          groupCellTemplate = _props.groupCellTemplate,
          groupRowTemplate = _props.groupRowTemplate,
          restProps = objectWithoutProperties(_props, ['groupCellTemplate', 'groupRowTemplate']);


      return React.createElement(TableGroupRow, _extends({
        groupCellTemplate: combineTemplates(groupCellTemplate, defaultGroupCellTemplate),
        groupRowTemplate: combineTemplates(groupRowTemplate, defaultGroupRowTemplate),
        groupIndentColumnWidth: 32
      }, restProps));
    }
  }]);
  return TableGroupRow$$1;
}(React.PureComponent);

TableGroupRow$1.propTypes = {
  groupRowTemplate: PropTypes.func,
  groupCellTemplate: PropTypes.func
};

TableGroupRow$1.defaultProps = {
  groupRowTemplate: undefined,
  groupCellTemplate: undefined
};

var styles$11 = function styles$$1(theme) {
  return {
    cell: {
      overflow: 'visible',
      paddingRight: 0,
      paddingLeft: theme.spacing.unit
    },
    pointer: {
      cursor: 'pointer'
    }
  };
};

var TableSelectAllCellBase = function TableSelectAllCellBase(_ref) {
  var _classNames;

  var style = _ref.style,
      allSelected = _ref.allSelected,
      someSelected = _ref.someSelected,
      selectionAvailable = _ref.selectionAvailable,
      toggleAll = _ref.toggleAll,
      classes = _ref.classes;

  var cellClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.pointer, selectionAvailable), _classNames));

  return React.createElement(
    TableCell,
    {
      padding: 'checkbox',
      style: style,
      className: cellClasses,
      onClick: function onClick(e) {
        if (!selectionAvailable) return;

        e.stopPropagation();
        toggleAll();
      }
    },
    React.createElement(Checkbox, {
      checked: allSelected,
      indeterminate: someSelected,
      disabled: !selectionAvailable
    })
  );
};

TableSelectAllCellBase.propTypes = {
  style: PropTypes.object,
  allSelected: PropTypes.bool,
  someSelected: PropTypes.bool,
  selectionAvailable: PropTypes.bool,
  toggleAll: PropTypes.func,
  classes: PropTypes.object.isRequired
};

TableSelectAllCellBase.defaultProps = {
  style: null,
  allSelected: false,
  someSelected: false,
  selectionAvailable: false,
  toggleAll: function toggleAll() {}
};

var TableSelectAllCell = withStyles(styles$11, { name: 'TableSelectAllCell' })(TableSelectAllCellBase);

var styles$12 = function styles$$1(theme) {
  return {
    cell: {
      overflow: 'visible',
      paddingRight: 0,
      paddingLeft: theme.spacing.unit * 1.5
    },
    checkbox: {
      marginTop: '-1px',
      marginBottom: '-1px',
      width: theme.spacing.unit * 5,
      height: theme.spacing.unit * 5
    }
  };
};

var TableSelectCellBase = function TableSelectCellBase(_ref) {
  var style = _ref.style,
      selected = _ref.selected,
      changeSelected = _ref.changeSelected,
      classes = _ref.classes;
  return React.createElement(
    TableCell,
    {
      padding: 'checkbox',
      style: style,
      className: classes.cell,
      onClick: function onClick(e) {
        e.stopPropagation();
        changeSelected();
      }
    },
    React.createElement(Checkbox, {
      className: classes.checkbox,
      checked: selected
    })
  );
};

TableSelectCellBase.defaultProps = {
  style: null,
  selected: false,
  changeSelected: function changeSelected() {}
};

TableSelectCellBase.propTypes = {
  style: PropTypes.object,
  selected: PropTypes.bool,
  changeSelected: PropTypes.func,
  classes: PropTypes.object.isRequired
};

var TableSelectCell = withStyles(styles$12, { name: 'TableSelectCell' })(TableSelectCellBase);

var TableSelectRow = function TableSelectRow(_ref) {
  var selected = _ref.selected,
      children = _ref.children,
      style = _ref.style,
      changeSelected = _ref.changeSelected,
      selectByRowClick = _ref.selectByRowClick;
  return React.createElement(
    TableRow,
    {
      style: style,
      selected: selected,
      onClick: function onClick(e) {
        if (!selectByRowClick) return;
        e.stopPropagation();
        changeSelected();
      }
    },
    children
  );
};

TableSelectRow.propTypes = {
  children: PropTypes.node,
  changeSelected: PropTypes.func,
  selected: PropTypes.bool,
  selectByRowClick: PropTypes.bool,
  style: PropTypes.object
};

TableSelectRow.defaultProps = {
  children: null,
  changeSelected: function changeSelected() {},
  selected: false,
  selectByRowClick: false,
  style: null
};

var selectCellTemplate = function selectCellTemplate(props) {
  return React.createElement(TableSelectCell, props);
};
var selectAllCellTemplate = function selectAllCellTemplate(props) {
  return React.createElement(TableSelectAllCell, props);
};
var selectRowTemplate = function selectRowTemplate(props) {
  return React.createElement(TableSelectRow, props);
};

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

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

  createClass(TableSelection$$1, [{
    key: 'render',
    value: function render() {
      return React.createElement(TableSelection, _extends({
        selectCellTemplate: selectCellTemplate,
        selectRowTemplate: selectRowTemplate,
        selectAllCellTemplate: selectAllCellTemplate,
        selectionColumnWidth: 40
      }, this.props));
    }
  }]);
  return TableSelection$$1;
}(React.PureComponent);

var styles$13 = {
  root: {
    overflow: 'auto',
    WebkitOverflowScrolling: 'touch'
  }
};

var TableContainerBase = function TableContainerBase(_ref) {
  var children = _ref.children,
      classes = _ref.classes,
      restProps = objectWithoutProperties(_ref, ['children', 'classes']);
  return React.createElement(
    'div',
    _extends({
      className: classes.root
    }, restProps),
    children
  );
};

TableContainerBase.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  classes: PropTypes.object.isRequired
};

var TableContainer = withStyles(styles$13, { name: 'TableContainer' })(TableContainerBase);

var styles$14 = {
  table: {
    tableLayout: 'fixed'
  },
  headTable: {
    position: 'sticky',
    top: 0,
    zIndex: 1,
    background: 'white',
    overflow: 'visible',
    fallbacks: {
      position: '-webkit-sticky'
    }
  }
};

var TableBase = function TableBase(_ref) {
  var _classNames;

  var children = _ref.children,
      classes = _ref.classes,
      use = _ref.use,
      restProps = objectWithoutProperties(_ref, ['children', 'classes', 'use']);
  return React.createElement(
    Table,
    _extends({
      className: classNames((_classNames = {}, defineProperty(_classNames, classes.table, true), defineProperty(_classNames, classes.headTable, use === 'head'), _classNames))
    }, restProps),
    children
  );
};

TableBase.propTypes = {
  use: PropTypes.oneOf(['head']),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
  classes: PropTypes.object.isRequired
};

TableBase.defaultProps = {
  use: undefined
};

var Table$2 = withStyles(styles$14, { name: 'Table' })(TableBase);

var MINIMAL_COLUMN_WIDTH = 120;

var containerTemplate$2 = function containerTemplate(props) {
  return React.createElement(TableContainer, props);
};
var tableTemplate = function tableTemplate(props) {
  return React.createElement(Table$2, props);
};
var headTemplate = function headTemplate(props) {
  return React.createElement(TableHead, props);
};
var bodyTemplate = function bodyTemplate(props) {
  return React.createElement(TableBody, props);
};

var TableLayout$1 = function TableLayout$$1(_ref) {
  var headerRows = _ref.headerRows,
      bodyRows = _ref.bodyRows,
      columns = _ref.columns,
      cellTemplate = _ref.cellTemplate,
      rowTemplate = _ref.rowTemplate;
  return React.createElement(TableLayout, {
    layoutComponent: StaticTableLayout,
    headerRows: headerRows,
    rows: bodyRows,
    columns: columns,
    minColumnWidth: MINIMAL_COLUMN_WIDTH,
    containerTemplate: containerTemplate$2,
    tableTemplate: tableTemplate,
    headTemplate: headTemplate,
    bodyTemplate: bodyTemplate,
    rowTemplate: rowTemplate,
    cellTemplate: cellTemplate
  });
};

TableLayout$1.propTypes = {
  headerRows: PropTypes.array.isRequired,
  bodyRows: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired,
  cellTemplate: PropTypes.func.isRequired,
  rowTemplate: PropTypes.func.isRequired
};

var styles$15 = function styles$$1(theme) {
  return {
    cell: {
      paddingRight: theme.spacing.unit,
      '& ~ $cell': {
        paddingLeft: theme.spacing.unit
      },
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap'
    },
    cellRightAlign: {
      textAlign: 'right'
    }
  };
};

var TableCellBase = function TableCellBase(_ref) {
  var _classNames;

  var style = _ref.style,
      column = _ref.column,
      value = _ref.value,
      children = _ref.children,
      classes = _ref.classes;
  return React.createElement(
    TableCell,
    {
      style: _extends({}, style),
      className: classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.cellRightAlign, column.align === 'right'), _classNames))
    },
    children || value
  );
};

TableCellBase.propTypes = {
  style: PropTypes.object,
  value: PropTypes.any,
  column: PropTypes.object,
  classes: PropTypes.object.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};

TableCellBase.defaultProps = {
  style: null,
  value: undefined,
  column: {},
  children: undefined
};

var TableCell$2 = withStyles(styles$15, { name: 'TableCell' })(TableCellBase);

var styles$16 = {
  cell: {
    padding: 0
  }
};

var TableStubCellBase = function TableStubCellBase(_ref) {
  var style = _ref.style,
      classes = _ref.classes;
  return React.createElement(TableCell, {
    style: style,
    className: classes.cell
  });
};

TableStubCellBase.propTypes = {
  style: PropTypes.object,
  classes: PropTypes.object.isRequired
};

TableStubCellBase.defaultProps = {
  style: {}
};

var TableStubCell = withStyles(styles$16, { name: 'TableStubCell' })(TableStubCellBase);

var styles$17 = function styles$$1(theme) {
  return {
    cell: {
      textAlign: 'center',
      padding: theme.spacing.unit * 5 + 'px 0'
    }
  };
};

var TableNoDataCellBase = function TableNoDataCellBase(_ref) {
  var style = _ref.style,
      colSpan = _ref.colSpan,
      getMessage = _ref.getMessage,
      classes = _ref.classes;
  return React.createElement(
    TableCell,
    {
      style: style,
      className: classes.cell,
      colSpan: colSpan
    },
    React.createElement(
      'big',
      { className: 'text-muted' },
      getMessage('noData')
    )
  );
};

TableNoDataCellBase.propTypes = {
  style: PropTypes.object,
  colSpan: PropTypes.number,
  getMessage: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};

TableNoDataCellBase.defaultProps = {
  style: null,
  colSpan: 1
};

var TableNoDataCell = withStyles(styles$17, { name: 'TableNoDataCell' })(TableNoDataCellBase);

var tableLayoutTemplate = function tableLayoutTemplate(props) {
  return React.createElement(TableLayout$1, props);
};
var defaultRowTemplate = function defaultRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};
var defaultNoDataRowTemplate = function defaultNoDataRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};
var defaultCellTemplate$1 = function defaultCellTemplate(props) {
  return React.createElement(TableCell$2, props);
};
var defaultStubCellTemplate = function defaultStubCellTemplate(props) {
  return React.createElement(TableStubCell, props);
};
var defaultNoDataCellTemplate = function defaultNoDataCellTemplate(props) {
  return React.createElement(TableNoDataCell, props);
};

var defaultMessages$2 = {
  noData: 'No data'
};

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

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

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


      return React.createElement(TableView, _extends({
        tableLayoutTemplate: tableLayoutTemplate,
        tableRowTemplate: combineTemplates(tableRowTemplate, defaultRowTemplate),
        tableNoDataRowTemplate: combineTemplates(tableNoDataRowTemplate, defaultNoDataRowTemplate),
        tableCellTemplate: combineTemplates(tableCellTemplate, defaultCellTemplate$1),
        tableStubCellTemplate: combineTemplates(tableStubCellTemplate, defaultStubCellTemplate),
        tableStubHeaderCellTemplate: combineTemplates(tableStubHeaderCellTemplate, defaultStubCellTemplate),
        tableNoDataCellTemplate: combineTemplates(tableNoDataCellTemplate, defaultNoDataCellTemplate),
        messages: _extends({}, defaultMessages$2, messages)
      }, restProps));
    }
  }]);
  return TableView$$1;
}(React.PureComponent);

TableView$1.propTypes = {
  tableCellTemplate: PropTypes.func,
  tableRowTemplate: PropTypes.func,
  tableNoDataRowTemplate: PropTypes.func,
  tableStubCellTemplate: PropTypes.func,
  tableStubHeaderCellTemplate: PropTypes.func,
  tableNoDataCellTemplate: PropTypes.func,
  messages: PropTypes.shape({
    noData: PropTypes.string
  })
};

TableView$1.defaultProps = {
  tableCellTemplate: undefined,
  tableRowTemplate: undefined,
  tableNoDataRowTemplate: undefined,
  tableStubCellTemplate: undefined,
  tableStubHeaderCellTemplate: undefined,
  tableNoDataCellTemplate: undefined,
  messages: {}
};

var MINIMAL_COLUMN_WIDTH$1 = 120;

var containerTemplate$3 = function containerTemplate(props) {
  return React.createElement(TableContainer, props);
};
var headTableTemplate = function headTableTemplate(props) {
  return React.createElement(Table$2, _extends({ use: 'head' }, props));
};
var tableTemplate$1 = function tableTemplate(props) {
  return React.createElement(Table$2, props);
};
var headTemplate$1 = function headTemplate(props) {
  return React.createElement(TableHead, props);
};
var bodyTemplate$1 = function bodyTemplate(props) {
  return React.createElement(TableBody, props);
};

var VirtualTableLayout$1 = function VirtualTableLayout$$1(_ref) {
  var headerRows = _ref.headerRows,
      bodyRows = _ref.bodyRows,
      columns = _ref.columns,
      cellTemplate = _ref.cellTemplate,
      rowTemplate = _ref.rowTemplate,
      height = _ref.height,
      estimatedRowHeight = _ref.estimatedRowHeight;
  return React.createElement(TableLayout, {
    layoutComponent: VirtualTableLayout,
    headerRows: headerRows,
    rows: bodyRows,
    columns: columns,
    cellTemplate: cellTemplate,
    rowTemplate: rowTemplate,
    bodyTemplate: bodyTemplate$1,
    headTemplate: headTemplate$1,
    tableTemplate: tableTemplate$1,
    headTableTemplate: headTableTemplate,
    containerTemplate: containerTemplate$3,
    estimatedRowHeight: estimatedRowHeight,
    minColumnWidth: MINIMAL_COLUMN_WIDTH$1,
    height: height
  });
};

VirtualTableLayout$1.propTypes = {
  headerRows: PropTypes.array.isRequired,
  bodyRows: PropTypes.array.isRequired,
  columns: PropTypes.array.isRequired,
  cellTemplate: PropTypes.func.isRequired,
  rowTemplate: PropTypes.func.isRequired,
  height: PropTypes.number.isRequired,
  estimatedRowHeight: PropTypes.number.isRequired
};

var _tableLayoutTemplate = function _tableLayoutTemplate(props) {
  return React.createElement(VirtualTableLayout$1, props);
};
var defaultRowTemplate$1 = function defaultRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};
var defaultNoDataRowTemplate$1 = function defaultNoDataRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};
var defaultCellTemplate$2 = function defaultCellTemplate(props) {
  return React.createElement(TableCell$2, props);
};
var defaultStubCellTemplate$1 = function defaultStubCellTemplate(props) {
  return React.createElement(TableStubCell, props);
};
var defaultNoDataCellTemplate$1 = function defaultNoDataCellTemplate(props) {
  return React.createElement(TableNoDataCell, props);
};

var defaultMessages$3 = {
  noData: 'No data'
};

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

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

  createClass(VirtualTableView, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          tableCellTemplate = _props.tableCellTemplate,
          tableRowTemplate = _props.tableRowTemplate,
          tableNoDataRowTemplate = _props.tableNoDataRowTemplate,
          tableStubCellTemplate = _props.tableStubCellTemplate,
          tableStubHeaderCellTemplate = _props.tableStubHeaderCellTemplate,
          tableNoDataCellTemplate = _props.tableNoDataCellTemplate,
          height = _props.height,
          estimatedRowHeight = _props.estimatedRowHeight,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['tableCellTemplate', 'tableRowTemplate', 'tableNoDataRowTemplate', 'tableStubCellTemplate', 'tableStubHeaderCellTemplate', 'tableNoDataCellTemplate', 'height', 'estimatedRowHeight', 'messages']);


      return React.createElement(TableView, _extends({
        tableLayoutTemplate: function tableLayoutTemplate(props) {
          return _tableLayoutTemplate(_extends({}, props, {
            height: height,
            estimatedRowHeight: estimatedRowHeight
          }));
        },
        tableRowTemplate: combineTemplates(tableRowTemplate, defaultRowTemplate$1),
        tableNoDataRowTemplate: combineTemplates(tableNoDataRowTemplate, defaultNoDataRowTemplate$1),
        tableCellTemplate: combineTemplates(tableCellTemplate, defaultCellTemplate$2),
        tableStubCellTemplate: combineTemplates(tableStubCellTemplate, defaultStubCellTemplate$1),
        tableStubHeaderCellTemplate: combineTemplates(tableStubHeaderCellTemplate, defaultStubCellTemplate$1),
        tableNoDataCellTemplate: combineTemplates(tableNoDataCellTemplate, defaultNoDataCellTemplate$1),
        messages: _extends({}, defaultMessages$3, messages)
      }, restProps));
    }
  }]);
  return VirtualTableView;
}(React.PureComponent);

VirtualTableView.propTypes = {
  tableCellTemplate: PropTypes.func,
  tableRowTemplate: PropTypes.func,
  tableNoDataRowTemplate: PropTypes.func,
  tableStubCellTemplate: PropTypes.func,
  tableStubHeaderCellTemplate: PropTypes.func,
  tableNoDataCellTemplate: PropTypes.func,
  estimatedRowHeight: PropTypes.number,
  height: PropTypes.number,
  messages: PropTypes.shape({
    noData: PropTypes.string
  })
};

VirtualTableView.defaultProps = {
  tableCellTemplate: undefined,
  tableRowTemplate: undefined,
  tableNoDataRowTemplate: undefined,
  tableStubCellTemplate: undefined,
  tableStubHeaderCellTemplate: undefined,
  tableNoDataCellTemplate: undefined,
  estimatedRowHeight: 48,
  height: 530,
  messages: {}
};

var styles$18 = function styles$$1(theme) {
  return {
    cell: {
      verticalAlign: 'top',
      paddingTop: theme.spacing.unit + 4,
      paddingRight: theme.spacing.unit,
      '& ~ $cell': {
        paddingLeft: theme.spacing.unit
      }
    },
    input: {
      width: '100%'
    }
  };
};

var TableFilterCellBase = function TableFilterCellBase(_ref) {
  var style = _ref.style,
      filter = _ref.filter,
      getMessage = _ref.getMessage,
      setFilter = _ref.setFilter,
      classes = _ref.classes,
      children = _ref.children;
  return React.createElement(
    TableCell,
    {
      className: classes.cell,
      style: style
    },
    children || React.createElement(Input, {
      className: classes.input,
      value: filter ? filter.value : '',
      placeholder: getMessage('filterPlaceholder'),
      onChange: function onChange(e) {
        return setFilter(e.target.value ? { value: e.target.value } : null);
      }
    })
  );
};

TableFilterCellBase.propTypes = {
  style: PropTypes.object,
  filter: PropTypes.object,
  setFilter: PropTypes.func,
  classes: PropTypes.object.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  getMessage: PropTypes.func.isRequired
};

TableFilterCellBase.defaultProps = {
  style: null,
  filter: null,
  setFilter: function setFilter() {},
  children: undefined
};

var TableFilterCell = withStyles(styles$18, { name: 'TableFilterCell' })(TableFilterCellBase);

var defaultFilterCellTemplate = function defaultFilterCellTemplate(props) {
  return React.createElement(TableFilterCell, props);
};
var defaultFilterRowTemplate = function defaultFilterRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};

var defaultMessages$4 = {
  filterPlaceholder: 'Filter...'
};

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

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

  createClass(TableFilterRow$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          filterCellTemplate = _props.filterCellTemplate,
          filterRowTemplate = _props.filterRowTemplate,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['filterCellTemplate', 'filterRowTemplate', 'messages']);


      return React.createElement(TableFilterRow, _extends({
        filterCellTemplate: combineTemplates(filterCellTemplate, defaultFilterCellTemplate),
        filterRowTemplate: combineTemplates(filterRowTemplate, defaultFilterRowTemplate),
        messages: _extends({}, defaultMessages$4, messages)
      }, restProps));
    }
  }]);
  return TableFilterRow$$1;
}(React.PureComponent);

TableFilterRow$1.propTypes = {
  filterCellTemplate: PropTypes.func,
  filterRowTemplate: PropTypes.func,
  messages: PropTypes.shape({
    filterPlaceholder: PropTypes.string
  })
};

TableFilterRow$1.defaultProps = {
  filterCellTemplate: undefined,
  filterRowTemplate: undefined,
  messages: {}
};

var styles$20 = function styles$$1(theme) {
  return {
    groupingControl: {
      cursor: 'pointer',
      paddingLeft: 0,
      height: theme.spacing.unit * 3
    },
    floatLeft: {
      float: 'left',
      textAlign: 'left'
    },
    floatRight: {
      float: 'right',
      textAlign: 'right'
    }
  };
};

var GroupingControlBase = function GroupingControlBase(_ref) {
  var _classNames;

  var align = _ref.align,
      groupByColumn = _ref.groupByColumn,
      classes = _ref.classes;

  var invertedAlign = align === 'left' ? 'right' : 'left';
  var groupingControlClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.groupingControl, true), defineProperty(_classNames, classes.floatLeft, invertedAlign === 'left'), defineProperty(_classNames, classes.floatRight, invertedAlign === 'right'), _classNames));

  return React.createElement(
    'div',
    {
      onClick: function onClick(e) {
        e.stopPropagation();
        groupByColumn(e);
      },
      className: groupingControlClasses
    },
    React.createElement(List$1, null)
  );
};

GroupingControlBase.propTypes = {
  align: PropTypes.string.isRequired,
  groupByColumn: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};

var GroupingControl = withStyles(styles$20, { name: 'GroupingControl' })(GroupingControlBase);

var styles$21 = function styles$$1(theme) {
  return {
    resizeHandle: {
      position: 'absolute',
      userSelect: 'none',
      MozUserSelect: 'none',
      WebkitUserSelect: 'none',
      width: theme.spacing.unit * 2 + 'px',
      top: 0,
      right: '-' + theme.spacing.unit + 'px',
      height: '100%',
      cursor: 'col-resize',
      zIndex: 100
    },
    resizeHandleLine: {
      position: 'absolute',
      backgroundColor: theme.palette.grey[300],
      height: '50%',
      width: '1px',
      top: '25%',
      transition: 'all linear 100ms'
    },
    resizeHandleFirstLine: {
      left: theme.spacing.unit - 3 + 'px'
    },
    resizeHandleSecondLine: {
      left: theme.spacing.unit - 1 + 'px'
    },
    resizeHandleActive: {
      '& $resizeHandleLine': {
        backgroundColor: theme.palette.primary[300]
      }
    },
    '@media (pointer: fine)': {
      resizeHandleLine: {
        opacity: 0
      },
      resizeHandleActive: {
        '& $resizeHandleLine': {
          opacity: 1
        }
      },
      resizeHandle: {
        '&:hover $resizeHandleLine': {
          opacity: 1
        }
      }
    }
  };
};

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

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

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

    _this.state = {
      resizing: false
    };

    _this.onResizeStart = function (_ref) {
      var x = _ref.x;

      _this.resizeStartingX = x;
      _this.setState({ resizing: true });
    };
    _this.onResizeUpdate = function (_ref2) {
      var x = _ref2.x;
      var changeDraftColumnWidth = _this.props.changeDraftColumnWidth;

      changeDraftColumnWidth({ shift: x - _this.resizeStartingX });
    };
    _this.onResizeEnd = function (_ref3) {
      var x = _ref3.x;
      var changeColumnWidth = _this.props.changeColumnWidth;

      changeColumnWidth({ shift: x - _this.resizeStartingX });
      _this.setState({ resizing: false });
    };
    return _this;
  }

  createClass(ResizingControlBase, [{
    key: 'render',
    value: function render() {
      var _classNames, _classNames2, _classNames3;

      var classes = this.props.classes;
      var resizing = this.state.resizing;


      return React.createElement(
        Draggable,
        {
          onStart: this.onResizeStart,
          onUpdate: this.onResizeUpdate,
          onEnd: this.onResizeEnd
        },
        React.createElement(
          'div',
          {
            className: classNames((_classNames = {}, defineProperty(_classNames, classes.resizeHandle, true), defineProperty(_classNames, classes.resizeHandleActive, resizing), _classNames))
          },
          React.createElement('div', {
            className: classNames((_classNames2 = {}, defineProperty(_classNames2, classes.resizeHandleLine, true), defineProperty(_classNames2, classes.resizeHandleFirstLine, true), _classNames2))
          }),
          React.createElement('div', {
            className: classNames((_classNames3 = {}, defineProperty(_classNames3, classes.resizeHandleLine, true), defineProperty(_classNames3, classes.resizeHandleSecondLine, true), _classNames3))
          })
        )
      );
    }
  }]);
  return ResizingControlBase;
}(React.PureComponent);

ResizingControlBase.propTypes = {
  changeColumnWidth: PropTypes.func.isRequired,
  changeDraftColumnWidth: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};

var ResizingControl = withStyles(styles$21, { name: 'ResizingControl' })(ResizingControlBase);

var styles$22 = function styles$$1(theme) {
  return {
    tooltipRoot: {
      display: 'block',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    },
    sortLabelRoot: {
      height: theme.spacing.unit * 3
    },
    sortLabelActive: {
      color: 'inherit'
    }
  };
};

var SortingControlBase = function SortingControlBase(_ref) {
  var align = _ref.align,
      sortingDirection = _ref.sortingDirection,
      columnTitle = _ref.columnTitle,
      onClick = _ref.onClick,
      classes = _ref.classes,
      text = _ref.text;
  return React.createElement(
    Tooltip,
    {
      title: text,
      placement: align === 'right' ? 'bottom-end' : 'bottom-start',
      enterDelay: 300,
      classes: {
        root: classes.tooltipRoot
      }
    },
    React.createElement(
      TableSortLabel,
      {
        active: !!sortingDirection,
        direction: sortingDirection,
        onClick: onClick,
        classes: {
          root: classes.sortLabelRoot,
          active: classes.sortLabelActive
        }
      },
      columnTitle
    )
  );
};

SortingControlBase.propTypes = {
  align: PropTypes.string.isRequired,
  sortingDirection: PropTypes.oneOf(['asc', 'desc']),
  columnTitle: PropTypes.string.isRequired,
  classes: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired,
  text: PropTypes.string
};

SortingControlBase.defaultProps = {
  sortingDirection: null,
  text: 'Sort'
};

var SortingControl = withStyles(styles$22, { name: 'SortingControl' })(SortingControlBase);

var ENTER_KEY_CODE$1 = 13;
var SPACE_KEY_CODE$1 = 32;

var styles$19 = function styles$$1(theme) {
  return {
    plainTitle: {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      height: theme.spacing.unit * 3,
      lineHeight: theme.spacing.unit * 3 + 'px'
    },
    cell: {
      outline: 'none',
      position: 'relative',
      overflow: 'visible',
      paddingRight: theme.spacing.unit,
      '& ~ $cell': {
        paddingLeft: theme.spacing.unit
      }
    },
    cellNoUserSelect: {
      userSelect: 'none',
      MozUserSelect: 'none',
      WebkitUserSelect: 'none',
      width: '100%'
    },
    cellDraggable: {
      cursor: 'pointer'
    },
    cellDimmed: {
      opacity: 0.3
    },
    cellRight: {
      paddingLeft: theme.spacing.unit,
      paddingRight: theme.spacing.unit
    },
    clearPadding: {
      padding: 0
    }
  };
};

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

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

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

    _this.state = {
      dragging: false
    };

    _this.onClick = function (e) {
      var changeSortingDirection = _this.props.changeSortingDirection;

      var isActionKeyDown = e.keyCode === ENTER_KEY_CODE$1 || e.keyCode === SPACE_KEY_CODE$1;
      var isMouseClick = e.keyCode === undefined;

      var cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
      var cancel = isMouseClick && cancelSortingRelatedKey || isActionKeyDown && cancelSortingRelatedKey;

      e.preventDefault();
      changeSortingDirection({
        keepOther: e.shiftKey || cancelSortingRelatedKey,
        cancel: cancel
      });
    };
    return _this;
  }

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

      var _props = this.props,
          style = _props.style,
          column = _props.column,
          tableColumn = _props.tableColumn,
          allowSorting = _props.allowSorting,
          sortingDirection = _props.sortingDirection,
          allowGroupingByClick = _props.allowGroupingByClick,
          groupByColumn = _props.groupByColumn,
          allowDragging = _props.allowDragging,
          dragPayload = _props.dragPayload,
          allowResizing = _props.allowResizing,
          changeColumnWidth = _props.changeColumnWidth,
          changeDraftColumnWidth = _props.changeDraftColumnWidth,
          classes = _props.classes,
          getMessage = _props.getMessage;
      var dragging = this.state.dragging;

      var align = column.align || 'left';
      var columnTitle = column.title || column.name;
      var tooltipText = getMessage('sortingHint');

      var tableCellClasses = classNames((_classNames = {}, defineProperty(_classNames, classes.cell, true), defineProperty(_classNames, classes.cellRight, align === 'right'), defineProperty(_classNames, classes.cellNoUserSelect, allowDragging || allowSorting), defineProperty(_classNames, classes.cellDraggable, allowDragging), defineProperty(_classNames, classes.cellDimmed, dragging || tableColumn.draft), _classNames));
      var cellLayout = React.createElement(
        TableCell,
        {
          style: style,
          className: tableCellClasses,
          numeric: align === 'right'
        },
        allowGroupingByClick && React.createElement(GroupingControl, {
          align: align,
          groupByColumn: groupByColumn
        }),
        allowSorting ? React.createElement(SortingControl, {
          align: align,
          sortingDirection: sortingDirection,
          columnTitle: columnTitle,
          onClick: this.onClick,
          allowGroupingByClick: allowGroupingByClick,
          text: tooltipText
        }) : React.createElement(
          'div',
          { className: classes.plainTitle },
          columnTitle
        ),
        allowResizing && React.createElement(ResizingControl, {
          changeColumnWidth: changeColumnWidth,
          changeDraftColumnWidth: changeDraftColumnWidth
        })
      );

      return allowDragging ? React.createElement(
        DragSource,
        {
          ref: function ref(element) {
            _this2.cellRef = element;
          },
          getPayload: function getPayload() {
            return dragPayload;
          },
          onStart: function onStart() {
            return _this2.setState({ dragging: true });
          },
          onEnd: function onEnd() {
            return _this2.cellRef && _this2.setState({ dragging: false });
          }
        },
        cellLayout
      ) : cellLayout;
    }
  }]);
  return TableHeaderCellBase;
}(React.PureComponent);

TableHeaderCellBase.propTypes = {
  tableColumn: PropTypes.object,
  column: PropTypes.shape({
    title: PropTypes.string
  }).isRequired,
  style: PropTypes.object,
  allowSorting: PropTypes.bool,
  sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
  changeSortingDirection: PropTypes.func,
  allowGroupingByClick: PropTypes.bool,
  groupByColumn: PropTypes.func,
  allowDragging: PropTypes.bool,
  dragPayload: PropTypes.any,
  allowResizing: PropTypes.bool,
  changeColumnWidth: PropTypes.func,
  changeDraftColumnWidth: PropTypes.func,
  classes: PropTypes.object.isRequired,
  getMessage: PropTypes.func.isRequired
};

TableHeaderCellBase.defaultProps = {
  tableColumn: {},
  style: null,
  allowSorting: false,
  sortingDirection: undefined,
  changeSortingDirection: undefined,
  allowGroupingByClick: false,
  groupByColumn: undefined,
  allowDragging: false,
  dragPayload: null,
  allowResizing: false,
  changeColumnWidth: undefined,
  changeDraftColumnWidth: undefined
};

var TableHeaderCell = withStyles(styles$19, { name: 'TableHeaderCell' })(TableHeaderCellBase);

var defaultHeaderCellTemplate = function defaultHeaderCellTemplate(props) {
  return React.createElement(TableHeaderCell, props);
};
var defaultHeaderRowTemplate = function defaultHeaderRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};
var defaultMessages$5 = {
  sortingHint: 'Sort'
};

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

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

  createClass(TableHeaderRow$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          headerCellTemplate = _props.headerCellTemplate,
          headerRowTemplate = _props.headerRowTemplate,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['headerCellTemplate', 'headerRowTemplate', 'messages']);


      return React.createElement(TableHeaderRow, _extends({
        headerCellTemplate: combineTemplates(headerCellTemplate, defaultHeaderCellTemplate),
        headerRowTemplate: combineTemplates(headerRowTemplate, defaultHeaderRowTemplate),
        messages: _extends({}, defaultMessages$5, messages)
      }, restProps));
    }
  }]);
  return TableHeaderRow$$1;
}(React.PureComponent);

TableHeaderRow$1.propTypes = {
  headerCellTemplate: PropTypes.func,
  headerRowTemplate: PropTypes.func,
  messages: PropTypes.shape({
    sortingHint: PropTypes.string
  })
};

TableHeaderRow$1.defaultProps = {
  headerCellTemplate: undefined,
  headerRowTemplate: undefined,
  messages: {}
};

var styles$23 = function styles$$1(theme) {
  return {
    button: {
      padding: theme.spacing.unit,
      minWidth: 40
    },
    headingCell: {
      whiteSpace: 'nowrap',
      textAlign: 'center',
      paddingLeft: theme.spacing.unit * 3,
      paddingRight: 0
    },
    cell: {
      whiteSpace: 'nowrap',
      textAlign: 'center',
      paddingLeft: theme.spacing.unit * 3,
      paddingRight: 0
    }
  };
};

var withEditColumnStyles = withStyles(styles$23, { name: 'EditColumn' });

var CommandButtonBase = function CommandButtonBase(_ref) {
  var executeCommand = _ref.executeCommand,
      text = _ref.text,
      classes = _ref.classes;
  return React.createElement(
    Button,
    {
      color: 'primary',
      className: classes.button,
      onClick: function onClick(e) {
        executeCommand();
        e.stopPropagation();
      }
    },
    text
  );
};
CommandButtonBase.propTypes = {
  executeCommand: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
  classes: PropTypes.object.isRequired
};

var CommandButton = withEditColumnStyles(CommandButtonBase);

var EditCommandHeadingCellBase = function EditCommandHeadingCellBase(_ref2) {
  var addRow = _ref2.addRow,
      commandTemplate = _ref2.commandTemplate,
      allowAdding = _ref2.allowAdding,
      _ref2$style = _ref2.style,
      style = _ref2$style === undefined ? {} : _ref2$style,
      getMessage = _ref2.getMessage,
      classes = _ref2.classes;
  return React.createElement(
    TableCell,
    {
      className: classes.headingCell,
      style: style
    },
    allowAdding && commandTemplate({
      id: 'add',
      executeCommand: addRow,
      text: getMessage('addCommand')
    })
  );
};
EditCommandHeadingCellBase.propTypes = {
  addRow: PropTypes.func,
  allowAdding: PropTypes.bool,
  style: PropTypes.object,
  commandTemplate: PropTypes.func.isRequired,
  getMessage: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};
EditCommandHeadingCellBase.defaultProps = {
  addRow: function addRow() {},
  allowAdding: false,
  style: undefined
};

var EditCommandHeadingCell = withEditColumnStyles(EditCommandHeadingCellBase);

var EditCommandCellBase = function EditCommandCellBase(_ref3) {
  var startEditing = _ref3.startEditing,
      deleteRow = _ref3.deleteRow,
      cancelEditing = _ref3.cancelEditing,
      commitChanges = _ref3.commitChanges,
      isEditing = _ref3.isEditing,
      commandTemplate = _ref3.commandTemplate,
      allowEditing = _ref3.allowEditing,
      allowDeleting = _ref3.allowDeleting,
      _ref3$style = _ref3.style,
      style = _ref3$style === undefined ? {} : _ref3$style,
      classes = _ref3.classes,
      getMessage = _ref3.getMessage;

  var commands = [];
  if (!isEditing) {
    if (allowEditing) {
      commands.push({
        id: 'edit',
        executeCommand: startEditing,
        text: getMessage('editCommand')
      });
    }
    if (allowDeleting) {
      commands.push({
        id: 'delete',
        executeCommand: deleteRow,
        text: getMessage('deleteCommand')
      });
    }
  } else {
    commands = [{
      id: 'commit',
      executeCommand: commitChanges,
      text: getMessage('commitCommand')
    }, {
      id: 'cancel',
      executeCommand: cancelEditing,
      text: getMessage('cancelCommand')
    }];
  }
  return React.createElement(
    TableCell,
    {
      className: classes.cell,
      style: style
    },
    commands.map(function (command) {
      return React.createElement(
        'span',
        { key: command.id },
        commandTemplate(command)
      );
    })
  );
};
EditCommandCellBase.propTypes = {
  startEditing: PropTypes.func,
  deleteRow: PropTypes.func,
  cancelEditing: PropTypes.func,
  commitChanges: PropTypes.func,
  isEditing: PropTypes.bool,
  allowEditing: PropTypes.bool,
  allowDeleting: PropTypes.bool,
  commandTemplate: PropTypes.func,
  style: PropTypes.object,
  getMessage: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired
};
EditCommandCellBase.defaultProps = {
  startEditing: function startEditing() {},
  deleteRow: function deleteRow() {},
  cancelEditing: function cancelEditing() {},
  commitChanges: function commitChanges() {},
  isEditing: false,
  allowEditing: false,
  allowDeleting: false,
  commandTemplate: PropTypes.func,
  style: undefined
};

var EditCommandCell = withEditColumnStyles(EditCommandCellBase);

var defaultCellTemplate$3 = function defaultCellTemplate(props) {
  return React.createElement(EditCommandCell, props);
};
var defaultHeadingCellTemplate = function defaultHeadingCellTemplate(props) {
  return React.createElement(EditCommandHeadingCell, props);
};
var defaultCommandTemplate = function defaultCommandTemplate(props) {
  return React.createElement(CommandButton, props);
};

var defaultMessages$6 = {
  addCommand: 'New',
  editCommand: 'Edit',
  deleteCommand: 'Delete',
  commitCommand: 'Save',
  cancelCommand: 'Cancel'
};

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

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

  createClass(TableEditColumn$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          cellTemplate = _props.cellTemplate,
          headingCellTemplate = _props.headingCellTemplate,
          commandTemplate = _props.commandTemplate,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['cellTemplate', 'headingCellTemplate', 'commandTemplate', 'messages']);


      return React.createElement(TableEditColumn, _extends({
        cellTemplate: combineTemplates(cellTemplate, defaultCellTemplate$3),
        headingCellTemplate: combineTemplates(headingCellTemplate, defaultHeadingCellTemplate),
        commandTemplate: combineTemplates(commandTemplate, defaultCommandTemplate),
        messages: _extends({}, defaultMessages$6, messages)
      }, restProps));
    }
  }]);
  return TableEditColumn$$1;
}(React.PureComponent);

TableEditColumn$1.propTypes = {
  cellTemplate: PropTypes.func,
  headingCellTemplate: PropTypes.func,
  commandTemplate: PropTypes.func,
  messages: PropTypes.shape({
    addCommand: PropTypes.string,
    editCommand: PropTypes.string,
    deleteCommand: PropTypes.string,
    commitCommand: PropTypes.string,
    cancelCommand: PropTypes.string
  })
};

TableEditColumn$1.defaultProps = {
  cellTemplate: undefined,
  headingCellTemplate: undefined,
  commandTemplate: undefined,
  messages: {}
};

var styles$24 = function styles$$1(theme) {
  return {
    cell: {
      verticalAlign: 'top',
      paddingTop: theme.spacing.unit + 2,
      paddingRight: theme.spacing.unit,
      '& ~ $cell': {
        paddingLeft: theme.spacing.unit
      }
    },
    inputRoot: {
      width: '100%'
    },
    inputRight: {
      textAlign: 'right'
    }
  };
};

var EditCellBase = function EditCellBase(_ref) {
  var column = _ref.column,
      value = _ref.value,
      onValueChange = _ref.onValueChange,
      style = _ref.style,
      classes = _ref.classes,
      children = _ref.children;

  var inputClasses = classNames(defineProperty({}, classes.inputRight, column.align === 'right'));

  return React.createElement(
    TableCell,
    {
      className: classes.cell,
      style: style
    },
    children || React.createElement(Input, {
      className: classes.inputRoot,
      classes: { input: inputClasses },
      value: value || '',
      onChange: function onChange(e) {
        return onValueChange(e.target.value);
      }
    })
  );
};

EditCellBase.propTypes = {
  column: PropTypes.object,
  value: PropTypes.any,
  onValueChange: PropTypes.func.isRequired,
  style: PropTypes.object,
  classes: PropTypes.object.isRequired,
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};

EditCellBase.defaultProps = {
  column: {},
  value: '',
  style: {},
  children: undefined
};

var EditCell = withStyles(styles$24, { name: 'EditCell' })(EditCellBase);

var defaultEditCellTemplate = function defaultEditCellTemplate(props) {
  return React.createElement(EditCell, props);
};
var defaultEditRowTemplate = function defaultEditRowTemplate(props) {
  return React.createElement(TableRow$1, props);
};

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

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

  createClass(TableEditRow$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          editCellTemplate = _props.editCellTemplate,
          editRowTemplate = _props.editRowTemplate,
          restProps = objectWithoutProperties(_props, ['editCellTemplate', 'editRowTemplate']);


      return React.createElement(TableEditRow, _extends({
        editCellTemplate: combineTemplates(editCellTemplate, defaultEditCellTemplate),
        editRowTemplate: combineTemplates(editRowTemplate, defaultEditRowTemplate)
      }, restProps));
    }
  }]);
  return TableEditRow$$1;
}(React.PureComponent);

TableEditRow$1.propTypes = {
  editCellTemplate: PropTypes.func,
  editRowTemplate: PropTypes.func
};

TableEditRow$1.defaultProps = {
  editCellTemplate: undefined,
  editRowTemplate: undefined
};

var EmptyMessage = function EmptyMessage(_ref) {
  var getMessage = _ref.getMessage;
  return React.createElement(
    Toolbar,
    null,
    React.createElement(
      Typography$1,
      null,
      getMessage('noColumns')
    )
  );
};

EmptyMessage.propTypes = {
  getMessage: PropTypes.func.isRequired
};

var emptyMessageTemplate = function emptyMessageTemplate(props) {
  return React.createElement(EmptyMessage, props);
};

var defaultMessages$7 = {
  noColumns: 'Nothing to show'
};

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

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

  createClass(TableColumnVisibility$$1, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          messages = _props.messages,
          restProps = objectWithoutProperties(_props, ['messages']);


      return React.createElement(TableColumnVisibility, _extends({
        emptyMessageTemplate: emptyMessageTemplate,
        messages: _extends({}, defaultMessages$7, messages)
      }, restProps));
    }
  }]);
  return TableColumnVisibility$$1;
}(React.PureComponent);

TableColumnVisibility$1.propTypes = {
  messages: PropTypes.shape({
    noColumns: PropTypes.string
  })
};

TableColumnVisibility$1.defaultProps = {
  messages: {}
};

var TableReorderingCell = function TableReorderingCell(_ref) {
  var style = _ref.style,
      getCellDimensions = _ref.getCellDimensions;

  var refHandler = function refHandler(node) {
    return node && getCellDimensions(function () {
      var _node$getBoundingClie = node.getBoundingClientRect(),
          left = _node$getBoundingClie.left,
          right = _node$getBoundingClie.right;

      return { left: left, right: right };
    });
  };
  return React.createElement('td', {
    ref: refHandler,
    style: _extends({}, style, { padding: 0 })
  });
};

TableReorderingCell.propTypes = {
  getCellDimensions: PropTypes.func.isRequired,
  style: PropTypes.object
};

TableReorderingCell.defaultProps = {
  style: {}
};

var tableContainerTemplate = function tableContainerTemplate(_ref) {
  var onOver = _ref.onOver,
      onLeave = _ref.onLeave,
      onDrop = _ref.onDrop,
      children = _ref.children;
  return React.createElement(
    DropTarget,
    {
      onOver: onOver,
      onLeave: onLeave,
      onDrop: onDrop
    },
    children
  );
};

// eslint-disable-next-line react/prop-types
var reorderingRowTemplate = function reorderingRowTemplate(_ref2) {
  var style = _ref2.style,
      restParams = objectWithoutProperties(_ref2, ['style']);
  return React.createElement(TableRow$1, _extends({
    style: _extends({}, style, {
      visibility: 'hidden'
    })
  }, restParams));
};
var reorderingCellTemplate = function reorderingCellTemplate(params) {
  return React.createElement(TableReorderingCell, params);
};

var TableColumnReordering$1 = function TableColumnReordering$$1(props) {
  return React.createElement(TableColumnReordering, _extends({
    tableContainerTemplate: tableContainerTemplate,
    reorderingRowTemplate: reorderingRowTemplate,
    reorderingCellTemplate: reorderingCellTemplate
  }, props));
};

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

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

  createClass(TableColumnResizing$$1, [{
    key: 'render',
    value: function render() {
      return React.createElement(TableColumnResizing, this.props);
    }
  }]);
  return TableColumnResizing$$1;
}(React.PureComponent);

export { Grid$1 as Grid, ColumnChooser$1 as ColumnChooser, DragDropContext$1 as DragDropContext, PagingPanel$1 as PagingPanel, GroupingPanel$1 as GroupingPanel, TableRowDetail$1 as TableRowDetail, TableGroupRow$1 as TableGroupRow, TableSelection$1 as TableSelection, TableView$1 as TableView, VirtualTableView, TableFilterRow$1 as TableFilterRow, TableHeaderRow$1 as TableHeaderRow, TableEditColumn$1 as TableEditColumn, TableEditRow$1 as TableEditRow, TableColumnVisibility$1 as TableColumnVisibility, TableColumnReordering$1 as TableColumnReordering, TableColumnResizing$1 as TableColumnResizing };
//# sourceMappingURL=dx-react-grid-material-ui.es.js.map