cloudhubui/node_modules/@devexpress/dx-react-grid-material-ui/dist/dx-react-grid-material-ui.cjs.js

Various components to use in react projects

/**
 * Bundle of @devexpress/dx-react-grid-material-ui
 * Generated: 2021-03-04
 * Version: 2.7.5
 * License: https://js.devexpress.com/Licensing
 */

'use strict';

if (typeof process === "undefined") { var process = { env: {} }; }

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var PropTypes = require('prop-types');
var dxReactGrid = require('@devexpress/dx-react-grid');
var classNames = _interopDefault(require('clsx'));
var styles$S = require('@material-ui/core/styles');
var dxReactCore = require('@devexpress/dx-react-core');
var Popover = _interopDefault(require('@material-ui/core/Popover'));
var List = _interopDefault(require('@material-ui/core/List'));
var IconButton = _interopDefault(require('@material-ui/core/IconButton'));
var Tooltip = _interopDefault(require('@material-ui/core/Tooltip'));
var VisibilityOff = _interopDefault(require('@material-ui/icons/VisibilityOff'));
var ListItem = _interopDefault(require('@material-ui/core/ListItem'));
var ListItemText = _interopDefault(require('@material-ui/core/ListItemText'));
var Checkbox = _interopDefault(require('@material-ui/core/Checkbox'));
var Chip = _interopDefault(require('@material-ui/core/Chip'));
var Input = _interopDefault(require('@material-ui/core/Input'));
var MenuItem$1 = _interopDefault(require('@material-ui/core/MenuItem'));
var Select = _interopDefault(require('@material-ui/core/Select'));
var Button = _interopDefault(require('@material-ui/core/Button'));
var ChevronLeft = _interopDefault(require('@material-ui/icons/ChevronLeft'));
var ChevronRight = _interopDefault(require('@material-ui/icons/ChevronRight'));
var dxGridCore = require('@devexpress/dx-grid-core');
var TableSortLabel = _interopDefault(require('@material-ui/core/TableSortLabel'));
var TableCell$1 = _interopDefault(require('@material-ui/core/TableCell'));
var ExpandMore = _interopDefault(require('@material-ui/icons/ExpandMore'));
var ExpandLess = _interopDefault(require('@material-ui/icons/ExpandLess'));
var TableRowMUI = _interopDefault(require('@material-ui/core/TableRow'));
var colorManipulator = require('@material-ui/core/styles/colorManipulator');
var TableBody = _interopDefault(require('@material-ui/core/TableBody'));
var TableHead = _interopDefault(require('@material-ui/core/TableHead'));
var TableFooter = _interopDefault(require('@material-ui/core/TableFooter'));
var TableMUI = _interopDefault(require('@material-ui/core/Table'));
var Menu$1 = _interopDefault(require('@material-ui/core/Menu'));
var ListItemIcon = _interopDefault(require('@material-ui/core/ListItemIcon'));
var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
var SearchIcon = _interopDefault(require('@material-ui/icons/Search'));
var List$1 = _interopDefault(require('@material-ui/icons/List'));
var Toolbar$2 = _interopDefault(require('@material-ui/core/Toolbar'));
var InputAdornment = _interopDefault(require('@material-ui/core/InputAdornment'));
var Save = _interopDefault(require('@material-ui/icons/Save'));

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a 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);
  }
}

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

function _defineProperty(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;
}

function _extends() {
  _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;
  };

  return _extends.apply(this, arguments);
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

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

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
    return;
  }

  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"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

var styles = {
  root: {
    display: 'flex',
    flexDirection: 'column'
  }
};

var RootBase = function RootBase(_ref) {
  var children = _ref.children,
      classes = _ref.classes,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["children", "classes", "className"]);

  return React.createElement("div", _extends({
    className: classNames(classes.root, className)
  }, restProps), children);
};

process.env.NODE_ENV !== "production" ? RootBase.propTypes = {
  children: PropTypes.node.isRequired,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
} : void 0;
RootBase.defaultProps = {
  className: undefined
};
var Root = styles$S.withStyles(styles)(RootBase);

var Grid = function Grid(_ref) {
  var children = _ref.children,
      props = _objectWithoutProperties(_ref, ["children"]);

  return React.createElement(dxReactGrid.Grid, _extends({
    rootComponent: Root
  }, props), children);
};
Grid.Root = Root;
process.env.NODE_ENV !== "production" ? Grid.propTypes = {
  children: PropTypes.node.isRequired
} : void 0;

var Overlay = function Overlay(_ref) {
  var visible = _ref.visible,
      onHide = _ref.onHide,
      children = _ref.children,
      target = _ref.target,
      restProps = _objectWithoutProperties(_ref, ["visible", "onHide", "children", "target"]);

  return React.createElement(Popover, _extends({
    open: visible,
    anchorEl: target,
    onClose: onHide,
    anchorOrigin: {
      vertical: 'top',
      horizontal: 'right'
    },
    transformOrigin: {
      vertical: 'top',
      horizontal: 'right'
    }
  }, restProps), children);
};
process.env.NODE_ENV !== "production" ? Overlay.propTypes = {
  onHide: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
  visible: PropTypes.bool,
  target: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
} : void 0;
Overlay.defaultProps = {
  visible: false,
  target: null
};

var Container = function Container(_ref) {
  var children = _ref.children,
      restProps = _objectWithoutProperties(_ref, ["children"]);

  return React.createElement(List, _extends({
    dense: true
  }, restProps), children);
};
process.env.NODE_ENV !== "production" ? Container.propTypes = {
  children: PropTypes.node.isRequired
} : void 0;

var ToggleButton = function ToggleButton(_ref) {
  var onToggle = _ref.onToggle,
      getMessage = _ref.getMessage,
      buttonRef = _ref.buttonRef,
      active = _ref.active,
      restProps = _objectWithoutProperties(_ref, ["onToggle", "getMessage", "buttonRef", "active"]);

  return React.createElement(Tooltip, {
    title: getMessage('showColumnChooser'),
    placement: "bottom",
    enterDelay: 300
  }, React.createElement(IconButton, _extends({
    onClick: onToggle,
    buttonRef: buttonRef
  }, restProps), React.createElement(VisibilityOff, null)));
};
process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
  onToggle: PropTypes.func.isRequired,
  getMessage: PropTypes.func.isRequired,
  buttonRef: PropTypes.func.isRequired,
  active: PropTypes.bool
} : void 0;
ToggleButton.defaultProps = {
  active: false
};

var styles$1 = function styles(theme) {
  return {
    checkbox: {
      padding: 0
    },
    itemText: {
      paddingLeft: theme.spacing(1)
    }
  };
};

var ItemBase = function ItemBase(_ref) {
  var _ref$item = _ref.item,
      column = _ref$item.column,
      hidden = _ref$item.hidden,
      disabled = _ref.disabled,
      onToggle = _ref.onToggle,
      classes = _ref.classes,
      restProps = _objectWithoutProperties(_ref, ["item", "disabled", "onToggle", "classes"]);

  return React.createElement(ListItem, _extends({
    key: column.name,
    button: !disabled,
    component: "li",
    disabled: disabled,
    onClick: !disabled ? onToggle : null
  }, restProps), React.createElement(Checkbox, {
    checked: !hidden,
    tabIndex: -1,
    disableRipple: true,
    disabled: disabled,
    className: classes.checkbox
  }), React.createElement(ListItemText, {
    className: classes.itemText,
    primary: column.title || column.name
  }));
};

process.env.NODE_ENV !== "production" ? ItemBase.propTypes = {
  item: PropTypes.shape({
    column: PropTypes.shape({
      name: PropTypes.string,
      title: PropTypes.string
    }),
    hidden: PropTypes.bool
  }).isRequired,
  disabled: PropTypes.bool,
  onToggle: PropTypes.func,
  classes: PropTypes.object.isRequired
} : void 0;
ItemBase.defaultProps = {
  onToggle: function onToggle() {},
  disabled: false
};
var Item = styles$S.withStyles(styles$1, {
  name: 'Item'
})(ItemBase);

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}
var withPatchedProps = function withPatchedProps(patchProps) {
  return function (Target) {
    var Patched = /*#__PURE__*/function (_React$PureComponent) {
      _inherits(Patched, _React$PureComponent);

      var _super = _createSuper(Patched);

      function Patched() {
        _classCallCheck(this, Patched);

        return _super.apply(this, arguments);
      }

      _createClass(Patched, [{
        key: "render",
        value: function render() {
          return React.createElement(Target, patchProps(this.props));
        }
      }]);

      return Patched;
    }(React.PureComponent);

    return Patched;
  };
};

var defaultMessages = {
  showColumnChooser: 'Show Column Chooser'
};
var ColumnChooserWithMessages = withPatchedProps(function (_ref) {
  var messages = _ref.messages,
      restProps = _objectWithoutProperties(_ref, ["messages"]);

  return _objectSpread2({
    messages: _objectSpread2({}, defaultMessages, {}, messages)
  }, restProps);
})(dxReactGrid.ColumnChooser);
ColumnChooserWithMessages.propTypes = {
  messages: PropTypes.shape({
    hiddenColumnNames: PropTypes.string
  })
};
ColumnChooserWithMessages.defaultProps = {
  messages: {}
};
ColumnChooserWithMessages.components = dxReactGrid.ColumnChooser.components;
var ColumnChooser = dxReactCore.withComponents({
  Container: Container,
  Item: Item,
  Overlay: Overlay,
  ToggleButton: ToggleButton
})(ColumnChooserWithMessages);

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

var ContainerBase = function ContainerBase(_ref) {
  var clientOffset = _ref.clientOffset,
      classes = _ref.classes,
      style = _ref.style,
      className = _ref.className,
      children = _ref.children,
      restProps = _objectWithoutProperties(_ref, ["clientOffset", "classes", "style", "className", "children"]);

  return React.createElement("div", _extends({
    className: classNames(classes.container, className),
    style: _objectSpread2({
      transform: "translate(calc(".concat(clientOffset.x, "px - 50%), calc(").concat(clientOffset.y, "px - 50%))"),
      msTransform: "translateX(".concat(clientOffset.x, "px) translateX(-50%) translateY(").concat(clientOffset.y, "px) translateY(-50%)")
    }, style)
  }, restProps), children);
};

process.env.NODE_ENV !== "production" ? ContainerBase.propTypes = {
  clientOffset: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  }).isRequired,
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  style: PropTypes.object,
  className: PropTypes.string
} : void 0;
ContainerBase.defaultProps = {
  style: null,
  className: undefined,
  children: undefined
};
var Container$1 = styles$S.withStyles(styles$2, {
  name: 'DragDrop'
})(ContainerBase);
var ColumnBase = React.memo(function (_ref2) {
  var column = _ref2.column,
      classes = _ref2.classes,
      className = _ref2.className,
      restProps = _objectWithoutProperties(_ref2, ["column", "classes", "className"]);

  return React.createElement(Chip, _extends({
    className: classNames(classes.column, className),
    label: column.title
  }, restProps));
});
ColumnBase.propTypes = {
  column: PropTypes.object.isRequired,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
};
ColumnBase.defaultProps = {
  className: undefined
};
var Column = styles$S.withStyles(styles$2, {
  name: 'DragDrop'
})(ColumnBase);

var DragDropProvider = dxReactCore.withComponents({
  Container: Container$1,
  Column: Column
})(dxReactGrid.DragDropProvider);

var IS_LEGACY_EDGE_MEDIA_QUERY = '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)';

var styles$3 = function styles(theme) {
  return {
    pageSizeSelector: _objectSpread2({}, theme.typography.caption, {
      paddingRight: theme.spacing(5),
      // NOTE: fixes vertical alignment in FF
      display: 'flex',
      alignItems: 'center'
    }),
    label: {
      paddingRight: theme.spacing(3)
    },
    pageSizeTitle: {
      width: 'auto',
      marginRight: theme.spacing(2)
    },
    inputRoot: {
      fontSize: theme.spacing(1.75),
      textAlign: 'right'
    },
    selectIcon: {
      top: 2
    },
    selectMenu: _defineProperty({}, "".concat(IS_LEGACY_EDGE_MEDIA_QUERY), {
      position: 'absolute !important'
    }),
    '@media (max-width: 768px)': {
      label: {
        display: 'none'
      },
      pageSizeSelector: {
        paddingRight: theme.spacing(2)
      }
    }
  };
};

var PageSizeSelectorBase = function PageSizeSelectorBase(_ref) {
  var pageSize = _ref.pageSize,
      onPageSizeChange = _ref.onPageSizeChange,
      pageSizes = _ref.pageSizes,
      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: {
      icon: classes.selectIcon
    },
    MenuProps: {
      className: classes.selectMenu
    },
    input: React.createElement(Input, {
      disableUnderline: true,
      classes: {
        root: classes.inputRoot
      }
    })
  }, pageSizes.map(function (item) {
    return React.createElement(MenuItem$1, {
      key: item,
      value: item
    }, item !== 0 ? item : showAll);
  })));
};

process.env.NODE_ENV !== "production" ? PageSizeSelectorBase.propTypes = {
  pageSize: PropTypes.number.isRequired,
  onPageSizeChange: PropTypes.func.isRequired,
  pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
  classes: PropTypes.object.isRequired,
  getMessage: PropTypes.func.isRequired
} : void 0;
var PageSizeSelector = styles$S.withStyles(styles$3, {
  name: 'PageSizeSelector'
})(PageSizeSelectorBase);

var styles$4 = function styles(theme) {
  return {
    pagination: {
      margin: 0
    },
    rowsLabel: _objectSpread2({}, theme.typography.caption, {
      paddingRight: theme.spacing(5)
    }),
    button: {
      minWidth: theme.spacing(2)
    },
    activeButton: {
      fontWeight: 'bold',
      cursor: 'default'
    },
    arrowButton: {
      display: 'inline-block',
      transform: theme.direction === 'rtl' ? 'rotate(180deg)' : null,
      msTransform: theme.direction === 'rtl' ? 'rotate(180deg)' : null
    },
    prev: {
      marginRight: 0
    },
    next: {
      marginLeft: 0
    },
    '@media(max-width: 768px)': {
      button: {
        display: 'none'
      },
      prev: {
        marginRight: theme.spacing(1)
      },
      next: {
        marginLeft: theme.spacing(1)
      },
      rowsLabel: {
        paddingRight: theme.spacing(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, _extends({
    className: buttonClasses,
    disabled: isDisabled,
    onClick: onClick
  }, isActive ? {
    tabIndex: -1
  } : null), text);
};

process.env.NODE_ENV !== "production" ? PageButton.propTypes = {
  text: PropTypes.string.isRequired,
  isActive: PropTypes.bool,
  isDisabled: PropTypes.bool,
  classes: PropTypes.object.isRequired,
  onClick: PropTypes.func
} : void 0;
PageButton.defaultProps = {
  onClick: function onClick() {},
  isDisabled: false,
  isActive: false
};
var ellipsisSymbol = "\u2026";

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

  if (maxButtonCount < totalPageCount) {
    startPage = dxGridCore.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 = dxGridCore.firstRowOnPage(currentPage, pageSize, totalCount);
  var to = dxGridCore.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);
    },
    "aria-label": "Previous"
  }, 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);
    },
    "aria-label": "Next"
  }, React.createElement(ChevronRight, null)));
};

process.env.NODE_ENV !== "production" ? 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
} : void 0;
var Pagination = styles$S.withStyles(styles$4, {
  name: 'Pagination'
})(PaginationBase);

var styles$5 = function styles(theme) {
  return {
    pager: {
      overflow: 'hidden',
      padding: theme.spacing(1.5),
      display: 'flex',
      flex: 'none',
      alignItems: 'center',
      justifyContent: 'flex-end'
    }
  };
};

var PagerBase = function PagerBase(_ref) {
  var currentPage = _ref.currentPage,
      pageSizes = _ref.pageSizes,
      totalPages = _ref.totalPages,
      pageSize = _ref.pageSize,
      classes = _ref.classes,
      _onCurrentPageChange = _ref.onCurrentPageChange,
      onPageSizeChange = _ref.onPageSizeChange,
      totalCount = _ref.totalCount,
      getMessage = _ref.getMessage,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["currentPage", "pageSizes", "totalPages", "pageSize", "classes", "onCurrentPageChange", "onPageSizeChange", "totalCount", "getMessage", "className"]);

  return React.createElement("div", _extends({
    className: classNames(classes.pager, className)
  }, restProps), !!pageSizes.length && React.createElement(PageSizeSelector, {
    pageSize: pageSize,
    onPageSizeChange: onPageSizeChange,
    pageSizes: pageSizes,
    getMessage: getMessage
  }), React.createElement(Pagination, {
    totalPages: totalPages,
    totalCount: totalCount,
    currentPage: currentPage,
    onCurrentPageChange: function onCurrentPageChange(page) {
      return _onCurrentPageChange(page);
    },
    pageSize: pageSize,
    getMessage: getMessage
  }));
};

process.env.NODE_ENV !== "production" ? PagerBase.propTypes = {
  currentPage: PropTypes.number.isRequired,
  totalPages: PropTypes.number.isRequired,
  pageSizes: 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,
  className: PropTypes.string
} : void 0;
PagerBase.defaultProps = {
  className: undefined
};
var Pager = styles$S.withStyles(styles$5, {
  name: 'Pager'
})(PagerBase);

var defaultMessages$1 = {
  rowsPerPage: 'Rows per page:'
};
var PagingPanelWithMessages = withPatchedProps(function (_ref) {
  var messages = _ref.messages,
      restProps = _objectWithoutProperties(_ref, ["messages"]);

  return _objectSpread2({
    messages: _objectSpread2({}, defaultMessages$1, {}, messages)
  }, restProps);
})(dxReactGrid.PagingPanel);
PagingPanelWithMessages.propTypes = {
  messages: PropTypes.shape({
    showAll: PropTypes.string,
    rowsPerPage: PropTypes.string,
    info: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
  })
};
PagingPanelWithMessages.defaultProps = {
  messages: {}
};
PagingPanelWithMessages.components = dxReactGrid.PagingPanel.components;
var PagingPanel = dxReactCore.withComponents({
  Container: Pager
})(PagingPanelWithMessages);

var styles$6 = function styles(theme) {
  return {
    panel: {
      display: 'flex',
      flexWrap: 'wrap',
      width: '100%',
      marginTop: theme.spacing(1.5)
    }
  };
};

var GroupPanelContainerBase = function GroupPanelContainerBase(_ref) {
  var classes = _ref.classes,
      children = _ref.children,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["classes", "children", "className"]);

  return React.createElement("div", _extends({
    className: classNames(classes.panel, className)
  }, restProps), children);
};

process.env.NODE_ENV !== "production" ? GroupPanelContainerBase.propTypes = {
  classes: PropTypes.object.isRequired,
  children: PropTypes.node,
  className: PropTypes.string
} : void 0;
GroupPanelContainerBase.defaultProps = {
  children: undefined,
  className: undefined
};
var GroupPanelContainer = styles$S.withStyles(styles$6, {
  name: 'GroupPanelContainer'
})(GroupPanelContainerBase);

var ENTER_KEY_CODE = 13;
var SPACE_KEY_CODE = 32;

var styles$7 = function styles(theme) {
  return {
    button: {
      marginRight: theme.spacing(1),
      marginBottom: theme.spacing(1.5)
    },
    withoutIcon: {
      paddingRight: '13px',
      paddingLeft: '13px'
    },
    draftCell: {
      opacity: 0.3
    }
  };
};

var label = function label(showSortingControls, sortingEnabled, sortingDirection, column, hovered) {
  var title = column.title || column.name;
  return showSortingControls ? React.createElement(TableSortLabel, {
    active: !!sortingDirection,
    direction: sortingDirection === null ? undefined : sortingDirection,
    disabled: !sortingEnabled,
    hideSortIcon: !hovered,
    tabIndex: -1
  }, title) : title;
};

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

  var _ref$item = _ref.item,
      column = _ref$item.column,
      draft = _ref$item.draft,
      onGroup = _ref.onGroup,
      showGroupingControls = _ref.showGroupingControls,
      showSortingControls = _ref.showSortingControls,
      sortingDirection = _ref.sortingDirection,
      onSort = _ref.onSort,
      sortingEnabled = _ref.sortingEnabled,
      groupingEnabled = _ref.groupingEnabled,
      classes = _ref.classes,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["item", "onGroup", "showGroupingControls", "showSortingControls", "sortingDirection", "onSort", "sortingEnabled", "groupingEnabled", "classes", "className"]);

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      hovered = _React$useState2[0],
      setHovered = _React$useState2[1];

  var chipClassNames = classNames((_classNames = {}, _defineProperty(_classNames, classes.button, true), _defineProperty(_classNames, classes.withoutIcon, !showSortingControls || !hovered && sortingDirection === null), _defineProperty(_classNames, classes.draftCell, draft), _classNames), className);

  var onClick = function onClick(e) {
    var isActionKeyDown = e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE;
    var isMouseClick = e.keyCode === undefined;
    var cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
    var direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey ? null : undefined;
    onSort({
      direction: direction,
      keepOther: cancelSortingRelatedKey
    });
  };

  return React.createElement(Chip, _extends({
    label: label(showSortingControls, sortingEnabled, sortingDirection, column, hovered),
    className: chipClassNames
  }, showGroupingControls ? {
    onDelete: groupingEnabled ? onGroup : null
  } : null, showSortingControls ? {
    onClick: sortingEnabled ? onClick : null,
    onMouseEnter: function onMouseEnter() {
      return setHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setHovered(false);
    }
  } : null, restProps));
};

process.env.NODE_ENV !== "production" ? GroupPanelItemBase.propTypes = {
  item: PropTypes.shape({
    column: PropTypes.shape({
      title: PropTypes.string,
      name: PropTypes.string
    }).isRequired,
    draft: PropTypes.bool
  }).isRequired,
  showSortingControls: PropTypes.bool,
  sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
  onSort: PropTypes.func,
  onGroup: PropTypes.func,
  showGroupingControls: PropTypes.bool,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  sortingEnabled: PropTypes.bool,
  groupingEnabled: PropTypes.bool
} : void 0;
GroupPanelItemBase.defaultProps = {
  showSortingControls: false,
  sortingEnabled: false,
  sortingDirection: undefined,
  onSort: undefined,
  onGroup: undefined,
  showGroupingControls: false,
  groupingEnabled: false,
  className: undefined
};
var GroupPanelItem = styles$S.withStyles(styles$7, {
  name: 'GroupPanelItem'
})(GroupPanelItemBase);

var styles$8 = function styles(theme) {
  return {
    groupInfo: {
      color: theme.typography.caption.color,
      fontFamily: theme.typography.fontFamily,
      fontSize: theme.typography.fontSize
    }
  };
};

var GroupPanelEmptyMessageBase = function GroupPanelEmptyMessageBase(_ref) {
  var getMessage = _ref.getMessage,
      classes = _ref.classes,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["getMessage", "classes", "className"]);

  return React.createElement("div", _extends({
    className: classNames(classes.groupInfo, className)
  }, restProps), getMessage('groupByColumn'));
};

process.env.NODE_ENV !== "production" ? GroupPanelEmptyMessageBase.propTypes = {
  getMessage: PropTypes.func.isRequired,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
} : void 0;
GroupPanelEmptyMessageBase.defaultProps = {
  className: undefined
};
var GroupPanelEmptyMessage = styles$S.withStyles(styles$8, {
  name: 'GroupPanelEmptyMessage'
})(GroupPanelEmptyMessageBase);

var GroupingPanel = dxReactCore.withComponents({
  Container: GroupPanelContainer,
  Item: GroupPanelItem,
  EmptyMessage: GroupPanelEmptyMessage
})(dxReactGrid.GroupingPanel);

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

var TableDetailToggleCellBase = function TableDetailToggleCellBase(_ref) {
  var style = _ref.style,
      expanded = _ref.expanded,
      classes = _ref.classes,
      onToggle = _ref.onToggle,
      tableColumn = _ref.tableColumn,
      tableRow = _ref.tableRow,
      row = _ref.row,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["style", "expanded", "classes", "onToggle", "tableColumn", "tableRow", "row", "className"]);

  var handleClick = function handleClick(e) {
    e.stopPropagation();
    onToggle();
  };

  return React.createElement(TableCell$1, _extends({
    className: classNames(classes.toggleCell, className),
    style: style
  }, restProps), React.createElement(IconButton, {
    className: classes.toggleCellButton,
    onClick: handleClick
  }, expanded ? React.createElement(ExpandLess, null) : React.createElement(ExpandMore, null)));
};

process.env.NODE_ENV !== "production" ? TableDetailToggleCellBase.propTypes = {
  style: PropTypes.object,
  expanded: PropTypes.bool,
  classes: PropTypes.object.isRequired,
  onToggle: PropTypes.func,
  className: PropTypes.string,
  tableColumn: PropTypes.object,
  tableRow: PropTypes.object,
  row: PropTypes.any
} : void 0;
TableDetailToggleCellBase.defaultProps = {
  style: null,
  expanded: false,
  onToggle: function onToggle() {},
  className: undefined,
  tableColumn: undefined,
  tableRow: undefined,
  row: undefined
};
var TableDetailToggleCell = styles$S.withStyles(styles$9, {
  name: 'TableDetailToggleCell'
})(TableDetailToggleCellBase);

var styles$a = function styles(theme) {
  return {
    active: {
      backgroundColor: theme.palette.background.default
    }
  };
};

var TableDetailCellBase = function TableDetailCellBase(_ref) {
  var colSpan = _ref.colSpan,
      style = _ref.style,
      children = _ref.children,
      classes = _ref.classes,
      className = _ref.className,
      tableColumn = _ref.tableColumn,
      tableRow = _ref.tableRow,
      row = _ref.row,
      restProps = _objectWithoutProperties(_ref, ["colSpan", "style", "children", "classes", "className", "tableColumn", "tableRow", "row"]);

  return React.createElement(TableCell$1, _extends({
    style: style,
    colSpan: colSpan,
    className: classNames(classes.active, className)
  }, restProps), children);
};

process.env.NODE_ENV !== "production" ? TableDetailCellBase.propTypes = {
  style: PropTypes.object,
  colSpan: PropTypes.number,
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  tableColumn: PropTypes.object,
  tableRow: PropTypes.object,
  row: PropTypes.any
} : void 0;
TableDetailCellBase.defaultProps = {
  style: null,
  colSpan: 1,
  className: undefined,
  tableColumn: undefined,
  tableRow: undefined,
  row: undefined,
  children: undefined
};
var TableDetailCell = styles$S.withStyles(styles$a, {
  name: 'TableDetailCell'
})(TableDetailCellBase);

var TableRow = function TableRow(_ref) {
  var children = _ref.children,
      row = _ref.row,
      tableRow = _ref.tableRow,
      restProps = _objectWithoutProperties(_ref, ["children", "row", "tableRow"]);

  return React.createElement(TableRowMUI, restProps, children);
};
process.env.NODE_ENV !== "production" ? TableRow.propTypes = {
  children: PropTypes.node,
  row: PropTypes.any,
  tableRow: PropTypes.object
} : void 0;
TableRow.defaultProps = {
  children: undefined,
  row: undefined,
  tableRow: undefined
};

var TableRowDetailWithWidth = function TableRowDetailWithWidth(props) {
  return React.createElement(dxReactGrid.TableRowDetail, _extends({
    toggleColumnWidth: 48
  }, props));
};

TableRowDetailWithWidth.components = dxReactGrid.TableRowDetail.components;
var TableRowDetail = dxReactCore.withComponents({
  Row: TableRow,
  Cell: TableDetailCell,
  ToggleCell: TableDetailToggleCell
})(TableRowDetailWithWidth);
TableRowDetail.COLUMN_TYPE = dxReactGrid.TableRowDetail.COLUMN_TYPE;
TableRowDetail.ROW_TYPE = dxReactGrid.TableRowDetail.ROW_TYPE;

var styles$b = function styles(theme) {
  return {
    cell: {
      cursor: 'pointer',
      paddingLeft: theme.spacing(1),
      paddingRight: theme.spacing(1),
      paddingTop: theme.spacing(0.5),
      paddingBottom: theme.spacing(0.5)
    },
    cellNoWrap: {
      whiteSpace: 'nowrap'
    }
  };
};

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

  var Content = _ref.contentComponent,
      Icon = _ref.iconComponent,
      Container = _ref.containerComponent,
      InlineSummary = _ref.inlineSummaryComponent,
      InlineSummaryItem = _ref.inlineSummaryItemComponent,
      inlineSummaries = _ref.inlineSummaries,
      getMessage = _ref.getMessage,
      style = _ref.style,
      colSpan = _ref.colSpan,
      row = _ref.row,
      column = _ref.column,
      expanded = _ref.expanded,
      onToggle = _ref.onToggle,
      classes = _ref.classes,
      children = _ref.children,
      className = _ref.className,
      tableRow = _ref.tableRow,
      tableColumn = _ref.tableColumn,
      side = _ref.side,
      position = _ref.position,
      restProps = _objectWithoutProperties(_ref, ["contentComponent", "iconComponent", "containerComponent", "inlineSummaryComponent", "inlineSummaryItemComponent", "inlineSummaries", "getMessage", "style", "colSpan", "row", "column", "expanded", "onToggle", "classes", "children", "className", "tableRow", "tableColumn", "side", "position"]);

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

  return React.createElement(TableCell$1, _extends({
    colSpan: colSpan,
    style: style,
    className: classNames((_classNames = {}, _defineProperty(_classNames, classes.cell, true), _defineProperty(_classNames, classes.cellNoWrap, !(tableColumn && tableColumn.wordWrapEnabled)), _classNames), className),
    onClick: handleClick
  }, restProps), React.createElement(Container, {
    side: side,
    position: position
  }, React.createElement(Icon, {
    expanded: expanded
  }), React.createElement(Content, {
    column: column,
    row: row
  }, children), inlineSummaries.length ? React.createElement(InlineSummary, {
    inlineSummaries: inlineSummaries,
    getMessage: getMessage,
    inlineSummaryItemComponent: InlineSummaryItem
  }) : null));
};

process.env.NODE_ENV !== "production" ? CellBase.propTypes = {
  // oneOfType is a workaround because withStyles returns react object
  contentComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  iconComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  containerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  inlineSummaryComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
  style: PropTypes.object,
  colSpan: PropTypes.number,
  row: PropTypes.any,
  column: PropTypes.object,
  expanded: PropTypes.bool,
  onToggle: PropTypes.func,
  classes: PropTypes.object.isRequired,
  getMessage: PropTypes.func.isRequired,
  children: PropTypes.node,
  className: PropTypes.string,
  tableRow: PropTypes.object,
  tableColumn: PropTypes.object,
  inlineSummaries: PropTypes.array,
  side: PropTypes.string,
  position: PropTypes.string
} : void 0;
CellBase.defaultProps = {
  style: null,
  colSpan: 1,
  row: {},
  column: {},
  expanded: false,
  inlineSummaries: [],
  onToggle: function onToggle() {},
  children: undefined,
  className: undefined,
  tableRow: undefined,
  tableColumn: undefined,
  side: 'left',
  position: ''
};
var Cell = styles$S.withStyles(styles$b, {
  name: 'TableGroupCell'
})(CellBase);

var styles$c = function styles() {
  return {
    columnTitle: {
      verticalAlign: 'middle'
    }
  };
};

var ContentBase = function ContentBase(_ref) {
  var column = _ref.column,
      row = _ref.row,
      classes = _ref.classes,
      className = _ref.className,
      children = _ref.children,
      restProps = _objectWithoutProperties(_ref, ["column", "row", "classes", "className", "children"]);

  return React.createElement("span", _extends({
    className: classNames(classes.columnTitle, className)
  }, restProps), React.createElement("strong", null, column.title || column.name, ":", ' '), children || String(row.value));
};

process.env.NODE_ENV !== "production" ? ContentBase.propTypes = {
  row: PropTypes.any,
  column: PropTypes.object,
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
} : void 0;
ContentBase.defaultProps = {
  row: {},
  column: {},
  children: undefined,
  className: undefined
};
var Content = styles$S.withStyles(styles$c)(ContentBase);

var getBorder = function getBorder(theme) {
  return "1px solid ".concat(theme.palette.type === 'light' ? colorManipulator.lighten(colorManipulator.fade(theme.palette.divider, 1), 0.88) : colorManipulator.darken(colorManipulator.fade(theme.palette.divider, 1), 0.68));
};
var getStickyCellStyle = function getStickyCellStyle(theme) {
  return {
    backgroundColor: theme.palette.background.paper,
    position: 'sticky',
    zIndex: 300,
    backgroundClip: 'padding-box'
  };
};

var styles$d = function styles(theme) {
  return {
    wrapper: _objectSpread2({}, getStickyCellStyle(theme), {
      float: 'left',
      maxWidth: '100%',
      overflowX: 'hidden',
      textOverflow: 'ellipsis'
    })
  };
};

var ContainerBase$1 = function ContainerBase(_ref) {
  var children = _ref.children,
      style = _ref.style,
      classes = _ref.classes,
      className = _ref.className,
      side = _ref.side,
      position = _ref.position,
      restProps = _objectWithoutProperties(_ref, ["children", "style", "classes", "className", "side", "position"]);

  return React.createElement("div", _extends({
    className: classNames(classes.wrapper, className),
    style: _objectSpread2({}, style, _defineProperty({}, side, position))
  }, restProps), children);
};

process.env.NODE_ENV !== "production" ? ContainerBase$1.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  style: PropTypes.object,
  side: PropTypes.string,
  position: PropTypes.string
} : void 0;
ContainerBase$1.defaultProps = {
  children: undefined,
  className: undefined,
  style: null,
  side: 'left',
  position: ''
};
var Container$2 = styles$S.withStyles(styles$d)(ContainerBase$1);

var styles$e = function styles(theme) {
  return {
    indentCell: _objectSpread2({}, getStickyCellStyle(theme), {
      borderBottom: getBorder(theme)
    })
  };
};

var IndentCellBase = function IndentCellBase(_ref) {
  var tableRow = _ref.tableRow,
      tableColumn = _ref.tableColumn,
      row = _ref.row,
      column = _ref.column,
      style = _ref.style,
      className = _ref.className,
      classes = _ref.classes,
      position = _ref.position,
      side = _ref.side,
      restProps = _objectWithoutProperties(_ref, ["tableRow", "tableColumn", "row", "column", "style", "className", "classes", "position", "side"]);

  return React.createElement(TableCell$1, _extends({
    className: classNames(classes.indentCell, className),
    style: _objectSpread2({}, style, _defineProperty({}, side, position))
  }, restProps));
};

process.env.NODE_ENV !== "production" ? IndentCellBase.propTypes = {
  tableRow: PropTypes.object,
  tableColumn: PropTypes.object,
  row: PropTypes.any,
  column: PropTypes.object,
  style: PropTypes.object,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  side: PropTypes.string,
  position: PropTypes.number
} : void 0;
IndentCellBase.defaultProps = {
  tableRow: undefined,
  tableColumn: undefined,
  row: {},
  column: {},
  style: null,
  className: undefined,
  side: 'left',
  position: undefined
};
var IndentCell = styles$S.withStyles(styles$e)(IndentCellBase);

var styles$f = function styles(theme) {
  return {
    groupButton: {
      verticalAlign: 'middle',
      display: 'inline-block',
      padding: theme.spacing(1),
      marginRight: theme.spacing(1)
    }
  };
};

var IconBase = React.memo(function (_ref) {
  var expanded = _ref.expanded,
      classes = _ref.classes,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["expanded", "classes", "className"]);

  return React.createElement(IconButton, _extends({
    className: classNames(classes.groupButton, className)
  }, restProps), expanded ? React.createElement(ExpandMore, null) : React.createElement(ChevronRight, null));
});
IconBase.propTypes = {
  expanded: PropTypes.bool.isRequired,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
};
IconBase.defaultProps = {
  className: undefined
};
var Icon = styles$S.withStyles(styles$f)(IconBase);

var styles$g = function styles() {
  return {
    row: {
      cursor: 'pointer'
    }
  };
};

var RowBase = function RowBase(_ref) {
  var children = _ref.children,
      classes = _ref.classes,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["children", "classes", "className"]);

  return React.createElement(TableRow, _extends({}, restProps, {
    className: classNames(classes.row, className)
  }), children);
};

process.env.NODE_ENV !== "production" ? RowBase.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
  className: PropTypes.string
} : void 0;
RowBase.defaultProps = {
  children: null,
  className: undefined
};
var Row = styles$S.withStyles(styles$g)(RowBase);

var styles$h = function styles(theme) {
  return {
    inlineSummary: {
      marginLeft: theme.spacing(1),
      verticalAlign: 'middle'
    }
  };
};

var InlineSummaryBase = function InlineSummaryBase(_ref) {
  var inlineSummaries = _ref.inlineSummaries,
      getMessage = _ref.getMessage,
      InlineSummaryItem = _ref.inlineSummaryItemComponent,
      classes = _ref.classes,
      className = _ref.className,
      restProps = _objectWithoutProperties(_ref, ["inlineSummaries", "getMessage", "inlineSummaryItemComponent", "classes", "className"]);

  return React.createElement("span", _extends({
    className: classNames(classes.inlineSummary, className)
  }, restProps), '(', inlineSummaries.map(function (s) {
    return React.createElement(InlineSummaryItem, {
      key: s.type,
      summary: s,
      getMessage: getMessage
    });
  }).reduce(function (acc, summary) {
    return acc.concat(summary, ', ');
  }, []).slice(0, -1), ')');
};

process.env.NODE_ENV !== "production" ? InlineSummaryBase.propTypes = {
  classes: PropTypes.object.isRequired,
  className: PropTypes.string,
  getMessage: PropTypes.func.isRequired,
  inlineSummaries: PropTypes.array,
  inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
} : void 0;
InlineSummaryBase.defaultProps = {
  className: undefined,
  inlineSummaries: []
};
var InlineSummary = styles$S.withStyles(styles$h)(InlineSummaryBase);

var styles$i = function styles(theme) {
  return {