@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.umd.cjs.map

Bootstrap 4 templates for DevExtreme React Grid component

{"version":3,"file":"dx-react-grid-bootstrap4.umd.cjs","sources":["../src/templates/layout.jsx","../src/grid.jsx","../../dx-react-bootstrap4/components/popover.jsx","../src/templates/column-chooser/overlay.jsx","../src/templates/column-chooser/container.jsx","../src/templates/column-chooser/item.jsx","../src/templates/column-chooser/toggle-button.jsx","../src/plugins/column-chooser.jsx","../src/templates/drag-drop.jsx","../src/plugins/drag-drop-provider.jsx","../src/templates/parts/pagination/pagination-link.jsx","../src/templates/parts/pagination/pagination-item.jsx","../src/templates/parts/pagination/pagination.jsx","../src/templates/paging-panel/page-size-selector.jsx","../src/templates/paging-panel/pagination.jsx","../src/templates/paging-panel/pager.jsx","../src/plugins/paging-panel.jsx","../src/templates/group-panel-container.jsx","../src/templates/parts/sorting-indicator.jsx","../src/templates/group-panel-item.jsx","../src/templates/group-panel-empty-message.jsx","../src/plugins/grouping-panel.jsx","../src/templates/parts/expand-button.jsx","../src/templates/table-detail-toggle-cell.jsx","../src/templates/table-detail-cell.jsx","../src/templates/table-row.jsx","../src/plugins/table-row-detail.jsx","../src/templates/table-group-cell/cell.jsx","../src/templates/table-group-cell/content.jsx","../src/templates/table-group-cell/container.jsx","../src/templates/table-group-cell/indent-cell.jsx","../src/templates/table-group-cell/row.jsx","../src/templates/table-group-cell/inline-summary.jsx","../src/templates/table-cell.jsx","../src/templates/table-group-cell/summary-cell.jsx","../src/templates/table-summary-item.jsx","../src/plugins/table-group-row.jsx","../src/templates/parts/selection-control.jsx","../src/templates/table-select-all-cell.jsx","../src/templates/table-select-cell.jsx","../src/templates/table-select-row.jsx","../src/plugins/table-selection.jsx","../src/templates/table-parts.jsx","../src/templates/table-layout.jsx","../src/templates/table-stub-cell.jsx","../src/templates/table-stub-header-cell.jsx","../src/templates/table-no-data-cell.jsx","../src/templates/table.jsx","../src/templates/table-container.jsx","../src/templates/table-stub-row.jsx","../src/plugins/table.jsx","../src/templates/table-skeleton-cell.jsx","../src/templates/virtual-table-layout.jsx","../src/plugins/virtual-table.jsx","../src/templates/table-filter-cell.jsx","../src/templates/filter-row/editor.jsx","../src/templates/filter-row/filter-selector.jsx","../src/templates/filter-row/filter-selector/toggle-button.jsx","../src/templates/filter-row/icon.jsx","../src/plugins/table-filter-row.jsx","../src/templates/table-header-cell/resizing-control.jsx","../src/templates/table-header-cell/cell-layout.jsx","../src/templates/table-header-cell.jsx","../src/templates/table-header-cell/sort-label.jsx","../src/templates/table-header-cell/group-button.jsx","../src/templates/table-header-cell/title.jsx","../src/templates/table-header-cell/content.jsx","../src/plugins/table-header-row.jsx","../src/templates/table-band-header/cell.jsx","../src/templates/table-band-header/banded-header-cell.jsx","../src/templates/table-band-header/invisible-cell.jsx","../src/plugins/table-band-header.jsx","../src/templates/table-edit-cell.jsx","../src/plugins/table-edit-row.jsx","../src/templates/table-edit-command-cell.jsx","../src/plugins/table-edit-column.jsx","../src/templates/empty-message.jsx","../src/plugins/table-column-visibility.jsx","../src/templates/table-invisible-row.jsx","../src/templates/table-reordering-cell.jsx","../src/plugins/table-column-reordering.jsx","../src/plugins/table-column-resizing.jsx","../src/templates/toolbar/toolbar.jsx","../src/templates/toolbar/flexible-space.jsx","../src/plugins/toolbar.jsx","../src/templates/table-tree-expand-button.jsx","../src/templates/table-tree-checkbox.jsx","../src/templates/table-tree-indent.jsx","../src/templates/table-tree-cell.jsx","../src/templates/table-tree-content.jsx","../src/plugins/table-tree-column.jsx","../src/templates/search-panel-input.jsx","../src/plugins/search-panel.jsx","../src/templates/table-fixed-cell.jsx","../src/templates/table-listener-cell.jsx","../src/plugins/table-fixed-columns.jsx","../src/plugins/table-summary-row.jsx","../src/plugins/table-inline-cell-editing.jsx","../src/templates/export-panel/toggle-button.jsx","../src/templates/export-panel/menu.jsx","../src/templates/export-panel/menu-item.jsx","../src/plugins/export-panel.jsx","../src/templates/table-focus-cell.jsx","../src/templates/table-focus-row.jsx","../src/plugins/table-keyboard-navigation.jsx"],"sourcesContent":["/* globals document:true window:true */\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const BodyColorContext = React.createContext();\n\nconst getBodyColor = () => {\n  const body = document.getElementsByTagName('body')[0];\n  const { backgroundColor } = window.getComputedStyle(body);\n\n  return backgroundColor;\n};\n\nexport class Root extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      backgroundColor: undefined,\n    };\n  }\n\n  componentDidMount() {\n    this.setState({\n      backgroundColor: getBodyColor(),\n    });\n  }\n\n  render() {\n    const {\n      children, className, rootRef, ...restProps\n    } = this.props;\n    const { backgroundColor } = this.state;\n    return (\n      <div\n        className={classNames('d-flex flex-column', className)}\n        ref={rootRef}\n        {...restProps}\n      >\n        <BodyColorContext.Provider value={backgroundColor}>\n          {children}\n        </BodyColorContext.Provider>\n      </div>\n    );\n  }\n}\n\nRoot.propTypes = {\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.node),\n  ]),\n  rootRef: PropTypes.object,\n};\n\nRoot.defaultProps = {\n  className: undefined,\n  children: undefined,\n  rootRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Grid as GridBase } from '@devexpress/dx-react-grid';\nimport { Root } from './templates/layout';\n\nexport const Grid = ({ children, ...props }) => (\n  <GridBase\n    rootComponent={Root}\n    {...props}\n  >\n    {children}\n  </GridBase>\n);\n\nGrid.Root = Root;\n\nGrid.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]).isRequired,\n};\n","/* globals document:true Element:true */\n/* eslint-disable import/no-extraneous-dependencies */\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { Popper } from 'react-popper';\n\nconst DefaultArrowComponent = React.forwardRef(({ placement, ...restProps }, ref) => (\n  <div className=\"arrow\" ref={ref} {...restProps} />\n));\n\nDefaultArrowComponent.propTypes = {\n  placement: PropTypes.string.isRequired,\n};\nexport class Popover extends React.PureComponent {\n  constructor(props) {\n    super(props);\n\n    // These two fields should be created only if `isOpen && toggle` condition is true\n    // and destroyed when condition turns false.\n    // But it would require usage of `this.state` and other code complications.\n    // So let's not change it for now. Maybe a better solution would be found.\n    this.contentRef = React.createRef();\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  componentDidMount() {\n    const { isOpen, toggle } = this.props;\n    if (isOpen && toggle) {\n      this.attachDocumentEvents();\n    }\n  }\n\n  componentDidUpdate() {\n    const { isOpen, toggle } = this.props;\n    if (isOpen && toggle) {\n      this.attachDocumentEvents();\n    } else {\n      this.detachDocumentEvents();\n    }\n  }\n\n  componentWillUnmount() {\n    this.detachDocumentEvents();\n  }\n\n  handleClick(e) {\n    const { target: eventTarget } = e;\n    const { current: contentNode } = this.contentRef;\n    const { toggle, target } = this.props;\n\n    if (contentNode && !contentNode.contains(eventTarget) && !target.contains(eventTarget)) {\n      toggle();\n    }\n  }\n\n  attachDocumentEvents() {\n    if (!this.listenersAttached) {\n      this.toggleDocumentEvents('addEventListener');\n      this.listenersAttached = true;\n    }\n  }\n\n  detachDocumentEvents() {\n    if (this.listenersAttached) {\n      this.toggleDocumentEvents('removeEventListener');\n      this.listenersAttached = false;\n    }\n  }\n\n  toggleDocumentEvents(method) {\n    ['click', 'touchstart'].forEach((eventType) => {\n      document[method](eventType, this.handleClick, true);\n    });\n  }\n\n  renderPopper() {\n    const {\n      children, target, renderInBody,\n      arrowComponent: ArrowComponent, modifiers = [],\n      ...restProps\n    } = this.props;\n\n    const popperModifiers = [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, 8],\n        },\n      },\n      ...modifiers,\n    ];\n\n    return (\n      <Popper\n        referenceElement={target}\n        modifiers={popperModifiers}\n        {...restProps}\n      >\n        {({\n          ref, style, arrowProps, placement,\n        }) => (\n          <div className={`popover show bs-popover-${placement}`} ref={ref} style={style}>\n            <div className=\"popover-inner\" ref={this.contentRef}>\n              {children}\n            </div>\n            <ArrowComponent\n              {...arrowProps}\n              placement={restProps.placement}\n            />\n          </div>\n        )}\n      </Popper>\n    );\n  }\n\n  render() {\n    const {\n      isOpen, renderInBody,\n    } = this.props;\n\n    if (!isOpen) return null;\n\n    return renderInBody\n      ? (\n        ReactDOM.createPortal(\n          this.renderPopper(),\n          document.body,\n        )\n      )\n      : this.renderPopper();\n  }\n}\n\nPopover.propTypes = {\n  renderInBody: PropTypes.bool,\n  placement: PropTypes.string,\n  isOpen: PropTypes.bool,\n  children: PropTypes.node.isRequired,\n  target: PropTypes.oneOfType([\n    PropTypes.instanceOf((typeof Element !== 'undefined') ? Element : Object),\n    PropTypes.object,\n  ]),\n  toggle: PropTypes.func,\n  arrowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nPopover.defaultProps = {\n  target: null,\n  renderInBody: true,\n  isOpen: false,\n  placement: 'auto',\n  toggle: undefined,\n  arrowComponent: DefaultArrowComponent,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover } from '../../../../dx-react-bootstrap4/components';\n\nexport const Overlay = ({\n  visible, children, target, onHide, ...restProps\n}) => {\n  const handleToggle = () => {\n    if (visible) onHide();\n  };\n  return (\n    target ? (\n      <Popover\n        placement=\"bottom\"\n        isOpen={visible}\n        target={target}\n        renderInBody={false}\n        toggle={handleToggle}\n        {...restProps}\n      >\n        {children}\n      </Popover>\n    ) : null\n  );\n};\n\nOverlay.propTypes = {\n  children: PropTypes.node.isRequired,\n  onHide: PropTypes.func.isRequired,\n  visible: PropTypes.bool,\n  target: PropTypes.oneOfType([\n    PropTypes.object,\n    PropTypes.func,\n  ]),\n};\n\nOverlay.defaultProps = {\n  visible: false,\n  target: null,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const Container = ({\n  children,\n  className,\n  ...restProps\n}) => (\n  <div\n    className={classNames('py-2', className)}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n\nContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n};\n\nContainer.defaultProps = {\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nconst handleMouseDown = (e) => { e.currentTarget.style.outline = 'none'; };\nconst handleBlur = (e) => { e.currentTarget.style.outline = ''; };\n\nexport const Item = ({\n  item: { column, hidden },\n  onToggle, className,\n  disabled, ...restProps\n}) => (\n  <button\n    className={classNames({\n      'dropdown-item dx-g-bs4-column-chooser-item': true,\n      'dx-g-bs4-cursor-pointer': !disabled,\n    }, className)}\n    type=\"button\"\n    onClick={onToggle}\n    onMouseDown={handleMouseDown}\n    onBlur={handleBlur}\n    disabled={disabled}\n    {...restProps}\n  >\n    <input\n      type=\"checkbox\"\n      className={classNames({\n        'dx-g-bs4-cursor-pointer': !disabled,\n        'dx-g-bs4-column-chooser-checkbox': true,\n      })}\n      tabIndex={-1}\n      checked={!hidden}\n      disabled={disabled}\n      onChange={onToggle}\n      onClick={e => e.stopPropagation()}\n    />\n    {column.title || column.name}\n  </button>\n);\n\nItem.propTypes = {\n  item: PropTypes.shape({\n    column: PropTypes.shape({\n      name: PropTypes.string,\n      title: PropTypes.string,\n    }),\n    hidden: PropTypes.bool,\n  }).isRequired,\n  onToggle: PropTypes.func,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n};\n\nItem.defaultProps = {\n  onToggle: () => {},\n  className: undefined,\n  disabled: false,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const ToggleButton = ({\n  onToggle, className,\n  getMessage, buttonRef,\n  active, ...restProps\n}) => {\n  const buttonClasses = classNames({\n    btn: true,\n    'btn-outline-secondary': true,\n    'border-0': true,\n    active,\n  }, className);\n  return (\n    <button\n      type=\"button\"\n      className={buttonClasses}\n      onClick={onToggle}\n      ref={buttonRef}\n      {...restProps}\n    >\n      <span className=\"oi oi-eye\" />\n    </button>\n  );\n};\n\nToggleButton.propTypes = {\n  onToggle: PropTypes.func.isRequired,\n  getMessage: PropTypes.func.isRequired,\n  buttonRef: PropTypes.func.isRequired,\n  className: PropTypes.string,\n  active: PropTypes.bool,\n};\n\nToggleButton.defaultProps = {\n  className: undefined,\n  active: false,\n};\n","import { withComponents } from '@devexpress/dx-react-core';\nimport { ColumnChooser as ColumnChooserBase } from '@devexpress/dx-react-grid';\nimport { Overlay } from '../templates/column-chooser/overlay';\nimport { Container } from '../templates/column-chooser/container';\nimport { Item } from '../templates/column-chooser/item';\nimport { ToggleButton } from '../templates/column-chooser/toggle-button';\n\nexport const ColumnChooser = withComponents({\n  Container, Item, Overlay, ToggleButton,\n})(ColumnChooserBase);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const Container = ({\n  clientOffset, style, className, children,\n  ...restProps\n}) => (\n  <ul\n    className={classNames('list-group d-inline-block position-fixed dx-g-bs4-drag-drop', className)}\n    style={{\n      transform: `translate(calc(${clientOffset.x}px - 50%), calc(${clientOffset.y}px - 50%))`,\n      msTransform: `translateX(${clientOffset.x}px) translateX(-50%) translateY(${clientOffset.y}px) translateY(-50%)`,\n      zIndex: 1000,\n      left: 0,\n      top: 0,\n      ...style,\n    }}\n    {...restProps}\n  >\n    {children}\n  </ul>\n);\n\nContainer.propTypes = {\n  clientOffset: PropTypes.shape({\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  style: PropTypes.object,\n  className: PropTypes.string,\n  children: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.node),\n  ]),\n};\n\nContainer.defaultProps = {\n  style: {},\n  className: undefined,\n  children: undefined,\n};\n\nexport const Column = React.memo(({ column, className, ...restProps }) => (\n  <li\n    className={classNames('list-group-item', className)}\n    {...restProps}\n  >\n    {column.title}\n  </li>\n));\n\nColumn.propTypes = {\n  column: PropTypes.object.isRequired,\n  className: PropTypes.string,\n};\n\nColumn.defaultProps = {\n  className: undefined,\n};\n","import { withComponents } from '@devexpress/dx-react-core';\nimport { DragDropProvider as DragDropProviderBase } from '@devexpress/dx-react-grid';\nimport { Container, Column } from '../templates/drag-drop';\n\nexport const DragDropProvider = withComponents({ Container, Column })(DragDropProviderBase);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const PaginationLink = ({\n  previous,\n  next,\n  children,\n  ...restProps\n}) => {\n  let ariaLabel = '';\n  let content = children;\n\n  if (next || previous) {\n    let angleQuote;\n    if (next) {\n      angleQuote = '\\u00bb';\n      ariaLabel = 'Next';\n    }\n    if (previous) {\n      angleQuote = '\\u00ab';\n      ariaLabel = 'Previous';\n    }\n\n    content = [\n      <span aria-hidden=\"true\" key=\"caret\">\n        {children || angleQuote}\n      </span>,\n      <span className=\"sr-only\" key=\"sr\">\n        {ariaLabel}\n      </span>,\n    ];\n  }\n\n  return (\n    <a\n      className=\"page-link\"\n      aria-label={ariaLabel}\n      {...restProps}\n    >\n      {content}\n    </a>\n  );\n};\n\nPaginationLink.propTypes = {\n  previous: PropTypes.bool,\n  next: PropTypes.bool,\n  children: PropTypes.node,\n};\n\nPaginationLink.defaultProps = {\n  previous: false,\n  next: false,\n  children: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const PaginationItem = ({\n  active,\n  disabled,\n  ...restProps\n}) => (\n  <li\n    className={classNames('page-item', { active, disabled })}\n    {...restProps}\n  />\n);\n\nPaginationItem.propTypes = {\n  active: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nPaginationItem.defaultProps = {\n  active: false,\n  disabled: false,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const Pagination = ({\n  className,\n  listClassName,\n  ...restProps\n}) => (\n  <nav className={className}>\n    <ul\n      className={classNames('pagination', listClassName)}\n      {...restProps}\n    />\n  </nav>\n);\n\nPagination.propTypes = {\n  className: PropTypes.string,\n  listClassName: PropTypes.string,\n};\n\nPagination.defaultProps = {\n  className: undefined,\n  listClassName: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Pagination, PaginationItem, PaginationLink } from '../parts/pagination';\n\nexport const PageSizeSelector = ({\n  pageSize,\n  onPageSizeChange,\n  pageSizes,\n  getMessage,\n}) => {\n  const showAll = getMessage('showAll');\n  return (\n    <div className=\"d-inline-block\">\n      <select\n        className=\"form-control d-sm-none\"\n        value={pageSize}\n        onChange={e => onPageSizeChange(parseInt(e.target.value, 10))}\n      >\n        {pageSizes.map(val => (\n          <option key={val} value={val}>\n            {val || showAll}\n          </option>\n        ))}\n      </select>\n      <Pagination className=\"d-none d-sm-flex\" listClassName=\"m-0\">\n        {pageSizes.map(item => (\n          <PaginationItem key={item} active={item === pageSize && true}>\n            <PaginationLink\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                onPageSizeChange(item);\n              }}\n            >\n              {item || showAll}\n            </PaginationLink>\n          </PaginationItem>\n        ))}\n      </Pagination>\n    </div>\n  );\n};\n\nPageSizeSelector.propTypes = {\n  pageSize: PropTypes.number.isRequired,\n  onPageSizeChange: PropTypes.func.isRequired,\n  pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,\n  getMessage: PropTypes.func.isRequired,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { firstRowOnPage, lastRowOnPage, calculateStartPage } from '@devexpress/dx-grid-core';\nimport {\n  Pagination as PaginationBS4,\n  PaginationLink,\n  PaginationItem,\n} from '../parts/pagination';\n\nconst renderPageButtons = (\n  currentPage,\n  totalPageCount,\n  currentPageChange,\n) => {\n  const pageButtons = [];\n  const maxButtonCount = 3;\n  let startPage = 1;\n  let endPage = totalPageCount || 1;\n\n  // NOTE: take into account last button and ellipsis (T1004797)\n  if (maxButtonCount < totalPageCount - 2) {\n    startPage = calculateStartPage(currentPage + 1, maxButtonCount, totalPageCount);\n    endPage = (startPage + maxButtonCount) - 1;\n  }\n  if (startPage > 1) {\n    pageButtons.push((\n      <PaginationItem key={1}>\n        <PaginationLink\n          href=\"#\"\n          onClick={e => currentPageChange(e, 0)}\n        >\n          {1}\n        </PaginationLink>\n      </PaginationItem>\n    ));\n\n    if (startPage > 2) {\n      pageButtons.push((\n        <PaginationItem key=\"ellipsisStart\" disabled>\n          <PaginationLink>\n            {'...'}\n          </PaginationLink>\n        </PaginationItem>\n      ));\n    }\n  }\n\n  for (let page = startPage; page <= endPage; page += 1) {\n    pageButtons.push((\n      <PaginationItem\n        key={page}\n        active={page === currentPage + 1}\n        disabled={startPage === endPage}\n      >\n        <PaginationLink\n          href=\"#\"\n          onClick={e => currentPageChange(e, page - 1)}\n        >\n          {page}\n        </PaginationLink>\n      </PaginationItem>\n    ));\n  }\n\n  if (endPage < totalPageCount) {\n    if (endPage < totalPageCount - 1) {\n      pageButtons.push((\n        <PaginationItem key=\"ellipsisEnd\" disabled>\n          <PaginationLink>\n            {'...'}\n          </PaginationLink>\n        </PaginationItem>\n      ));\n    }\n\n    pageButtons.push((\n      <PaginationItem key={totalPageCount}>\n        <PaginationLink\n          href=\"#\"\n          onClick={e => currentPageChange(e, totalPageCount - 1)}\n        >\n          {totalPageCount}\n        </PaginationLink>\n      </PaginationItem>\n    ));\n  }\n\n  return pageButtons;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onCurrentPageChange,\n  totalCount,\n  pageSize,\n  getMessage,\n}) => {\n  const from = firstRowOnPage(currentPage, pageSize, totalCount);\n  const to = lastRowOnPage(currentPage, pageSize, totalCount);\n  const currentPageChange = (e, nextPage) => {\n    e.preventDefault();\n    onCurrentPageChange(nextPage);\n  };\n  return (\n    <React.Fragment>\n      <PaginationBS4 className=\"float-right d-none d-sm-flex\" listClassName=\"m-0\">\n        <PaginationItem disabled={currentPage === 0}>\n          <PaginationLink\n            previous\n            href=\"#\"\n            onClick={e => currentPageChange(e, currentPage - 1)}\n          />\n        </PaginationItem>\n        {renderPageButtons(currentPage, totalPages, currentPageChange)}\n        <PaginationItem disabled={currentPage === totalPages - 1 || totalCount === 0}>\n          <PaginationLink\n            next\n            href=\"#\"\n            onClick={e => currentPageChange(e, currentPage + 1)}\n          />\n        </PaginationItem>\n      </PaginationBS4>\n\n      <PaginationBS4 className=\"float-right d-sm-none\" listClassName=\"m-0\">\n        <PaginationItem disabled={currentPage === 0}>\n          <PaginationLink\n            previous\n            href=\"#\"\n            onClick={e => currentPageChange(e, currentPage - 1)}\n          />\n        </PaginationItem>\n        &nbsp;\n        <PaginationItem disabled={currentPage === totalPages - 1 || totalCount === 0}>\n          <PaginationLink\n            next\n            href=\"#\"\n            onClick={e => currentPageChange(e, currentPage + 1)}\n          />\n        </PaginationItem>\n      </PaginationBS4>\n      <span className=\"float-right d-sm-none mr-4\">\n        <span className=\"d-inline-block align-middle\">\n          {getMessage('info', { from, to, count: totalCount })}\n        </span>\n      </span>\n    </React.Fragment>\n  );\n};\n\nPagination.propTypes = {\n  totalPages: PropTypes.number.isRequired,\n  currentPage: PropTypes.number.isRequired,\n  onCurrentPageChange: PropTypes.func.isRequired,\n  totalCount: PropTypes.number.isRequired,\n  pageSize: PropTypes.number.isRequired,\n  getMessage: PropTypes.func.isRequired,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { withKeyboardNavigation } from '@devexpress/dx-react-grid';\nimport { PageSizeSelector } from './page-size-selector';\nimport { Pagination } from './pagination';\n\nconst PagerBase = ({\n  currentPage,\n  onCurrentPageChange,\n  totalPages,\n  pageSize,\n  onPageSizeChange,\n  pageSizes,\n  totalCount,\n  getMessage,\n  className,\n  forwardedRef,\n  ...restProps\n}) => (\n  <div\n    className={classNames('clearfix card-footer dx-g-bs4-paging-panel', className)}\n    ref={forwardedRef}\n    {...restProps}\n  >\n    {!!pageSizes.length && (\n    <PageSizeSelector\n      pageSize={pageSize}\n      onPageSizeChange={onPageSizeChange}\n      pageSizes={pageSizes}\n      getMessage={getMessage}\n    />\n    )}\n    <Pagination\n      totalPages={totalPages}\n      totalCount={totalCount}\n      currentPage={currentPage}\n      onCurrentPageChange={page => onCurrentPageChange(page)}\n      pageSize={pageSize}\n      getMessage={getMessage}\n    />\n  </div>\n);\n\nPagerBase.propTypes = {\n  currentPage: PropTypes.number.isRequired,\n  onCurrentPageChange: PropTypes.func.isRequired,\n  totalPages: PropTypes.number.isRequired,\n  pageSize: PropTypes.number.isRequired,\n  onPageSizeChange: PropTypes.func.isRequired,\n  pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,\n  totalCount: PropTypes.number.isRequired,\n  getMessage: PropTypes.func.isRequired,\n  className: PropTypes.string,\n  forwardedRef: PropTypes.func,\n};\n\nPagerBase.defaultProps = {\n  className: undefined,\n  forwardedRef: undefined,\n};\n\nexport const Pager = withKeyboardNavigation('paging', 'none')(PagerBase);\n","import { withComponents } from '@devexpress/dx-react-core';\nimport { PagingPanel as PagingPanelBase } from '@devexpress/dx-react-grid';\nimport { Pager as Container } from '../templates/paging-panel/pager';\n\nexport const PagingPanel = withComponents({ Container })(PagingPanelBase);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const GroupPanelContainer = ({\n  children, className, forwardedRef, ...restProps\n}) => (\n  <div\n    ref={forwardedRef}\n    className={classNames('w-100 mt-1', className)}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n\nGroupPanelContainer.propTypes = {\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]),\n  className: PropTypes.string,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nGroupPanelContainer.defaultProps = {\n  children: null,\n  className: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const SortingIndicator = React.memo(({ direction, className }) => (\n  <span\n    className={classNames({\n      'oi dx-g-bs4-sorting-indicator mx-2': true,\n      'oi-arrow-thick-bottom': direction === 'desc',\n      'oi-arrow-thick-top': direction !== 'desc',\n      invisible: !direction,\n    }, className)}\n  />\n));\n\nSortingIndicator.propTypes = {\n  direction: PropTypes.oneOf(['asc', 'desc']),\n  className: PropTypes.string,\n};\n\nSortingIndicator.defaultProps = {\n  direction: null,\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { SortingIndicator } from './parts/sorting-indicator';\n\nconst ENTER_KEY_CODE = 13;\nconst SPACE_KEY_CODE = 32;\n\nconst isActionKey = keyCode => keyCode === ENTER_KEY_CODE || keyCode === SPACE_KEY_CODE;\n\nexport const GroupPanelItem = ({\n  item: { column, draft },\n  onGroup, showGroupingControls, showSortingControls,\n  sortingDirection, onSort, className, groupingEnabled,\n  sortingEnabled, forwardedRef, ...restProps\n}) => {\n  const handleSortingChange = (e) => {\n    const isActionKeyDown = isActionKey(e.keyCode);\n    const isMouseClick = e.keyCode === undefined;\n\n    if ((!showSortingControls || !sortingEnabled) || !(isActionKeyDown || isMouseClick)) return;\n\n    const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;\n    const direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey\n      ? null\n      : undefined;\n\n    e.preventDefault();\n    onSort({\n      direction,\n      keepOther: cancelSortingRelatedKey,\n    });\n  };\n  const handleUngroup = (e) => {\n    if (!groupingEnabled) return;\n    const isActionKeyDown = isActionKey(e.keyCode);\n    const isMouseClick = e.keyCode === undefined;\n\n    if (!isActionKeyDown && !isMouseClick) return;\n    onGroup();\n  };\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames({\n        'btn-group mb-1 mr-1': true,\n        'dx-g-bs4-inactive': draft,\n      }, className)}\n      {...restProps}\n    >\n      <span\n        className={classNames({\n          'btn btn-outline-secondary': true,\n          disabled: !sortingEnabled && (showSortingControls || !groupingEnabled),\n        })}\n        onClick={handleSortingChange}\n        onKeyDown={handleSortingChange}\n        {...sortingEnabled ? { tabIndex: 0 } : null}\n      >\n        {column.title || column.name}\n        {showSortingControls && sortingDirection && (\n          <span>\n            &nbsp;\n            <SortingIndicator\n              direction={sortingDirection}\n            />\n          </span>\n        )}\n      </span>\n\n      {showGroupingControls && (\n        <span\n          className={classNames({\n            'btn btn-outline-secondary': true,\n            disabled: !groupingEnabled,\n          })}\n          onClick={handleUngroup}\n        >\n          &nbsp;\n          <span\n            className=\"oi oi-x dx-g-bs4-group-panel-item-icon\"\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n\nGroupPanelItem.propTypes = {\n  item: PropTypes.shape({\n    column: PropTypes.shape({\n      name: PropTypes.string,\n      title: PropTypes.string,\n    }).isRequired,\n    draft: PropTypes.bool,\n  }).isRequired,\n  showSortingControls: PropTypes.bool,\n  sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),\n  className: PropTypes.string,\n  onSort: PropTypes.func,\n  onGroup: PropTypes.func,\n  showGroupingControls: PropTypes.bool,\n  groupingEnabled: PropTypes.bool,\n  sortingEnabled: PropTypes.bool,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nGroupPanelItem.defaultProps = {\n  showSortingControls: false,\n  sortingDirection: undefined,\n  className: undefined,\n  onSort: undefined,\n  onGroup: undefined,\n  showGroupingControls: false,\n  sortingEnabled: false,\n  groupingEnabled: false,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const GroupPanelEmptyMessage = ({\n  getMessage,\n  className,\n  forwardedRef,\n  ...restProps\n}) => (\n  <div\n    ref={forwardedRef}\n    className={classNames('dx-g-bs4-group-panel-empty-message', className)}\n    {...restProps}\n  >\n    {getMessage('groupByColumn')}\n  </div>\n);\n\nGroupPanelEmptyMessage.propTypes = {\n  getMessage: PropTypes.func.isRequired,\n  className: PropTypes.string,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nGroupPanelEmptyMessage.defaultProps = {\n  className: undefined,\n  forwardedRef: undefined,\n};\n","import { withComponents } from '@devexpress/dx-react-core';\nimport { GroupingPanel as GroupingPanelBase } from '@devexpress/dx-react-grid';\nimport { GroupPanelContainer as Container } from '../templates/group-panel-container';\nimport { GroupPanelItem as Item } from '../templates/group-panel-item';\nimport { GroupPanelEmptyMessage as EmptyMessage } from '../templates/group-panel-empty-message';\n\nexport const GroupingPanel = withComponents({ Container, Item, EmptyMessage })(GroupingPanelBase);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nconst ENTER_KEY_CODE = 13;\nconst SPACE_KEY_CODE = 32;\n\nconst handleMouseDown = (e) => { e.target.style.outline = 'none'; };\nconst handleBlur = (e) => { e.target.style.outline = ''; };\n\nexport const ExpandButton = ({\n  visible, expanded, onToggle, className, ...restProps\n}) => {\n  const fireToggle = () => {\n    if (!visible) return;\n    onToggle(!expanded);\n  };\n  const handleClick = (e) => {\n    e.stopPropagation();\n    fireToggle();\n  };\n  const handleKeyDown = (e) => {\n    if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {\n      e.preventDefault();\n      fireToggle();\n    }\n  };\n  return (\n    <i\n      className={classNames({\n        'oi p-2 text-center dx-g-bs4-toggle-button': true,\n        'oi-chevron-bottom': expanded,\n        'oi-chevron-right': !expanded,\n        'dx-g-bs4-toggle-button-hidden': !visible,\n      }, className)}\n      tabIndex={visible ? 0 : undefined} // eslint-disable-line jsx-a11y/no-noninteractive-tabindex\n      onKeyDown={handleKeyDown}\n      onMouseDown={handleMouseDown}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      {...restProps}\n    />\n  );\n};\n\nExpandButton.propTypes = {\n  visible: PropTypes.bool,\n  expanded: PropTypes.bool,\n  onToggle: PropTypes.func,\n  className: PropTypes.string,\n};\n\nExpandButton.defaultProps = {\n  visible: true,\n  expanded: false,\n  onToggle: () => {},\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nimport { ExpandButton } from './parts/expand-button';\n\nexport const TableDetailToggleCell = ({\n  expanded, onToggle,\n  tableColumn, tableRow, row, className,\n  forwardedRef,\n  ...restProps\n}) => (\n  <td\n    className={classNames('text-center align-middle', className)}\n    ref={forwardedRef}\n    {...restProps}\n  >\n    <ExpandButton\n      expanded={expanded}\n      onToggle={onToggle}\n    />\n  </td>\n);\n\nTableDetailToggleCell.propTypes = {\n  className: PropTypes.string,\n  expanded: PropTypes.bool,\n  onToggle: PropTypes.func,\n  tableColumn: PropTypes.object,\n  tableRow: PropTypes.object,\n  row: PropTypes.any,\n  forwardedRef: PropTypes.func,\n};\n\nTableDetailToggleCell.defaultProps = {\n  className: undefined,\n  expanded: false,\n  onToggle: () => {},\n  tableColumn: undefined,\n  tableRow: undefined,\n  row: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport classNames from 'clsx';\nimport PropTypes from 'prop-types';\n\nexport const TableDetailCell = ({\n  colSpan, children, className,\n  tableColumn, tableRow, row,\n  forwardedRef,\n  ...restProps\n}) => (\n  <td\n    colSpan={colSpan}\n    ref={forwardedRef}\n    className={classNames('table-active', className)}\n    {...restProps}\n  >\n    {children}\n  </td>\n);\n\nTableDetailCell.propTypes = {\n  style: PropTypes.object,\n  colSpan: PropTypes.number,\n  children: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.node),\n    PropTypes.node,\n  ]),\n  className: PropTypes.string,\n  tableColumn: PropTypes.object,\n  tableRow: PropTypes.object,\n  row: PropTypes.any,\n  forwardedRef: PropTypes.func,\n};\n\nTableDetailCell.defaultProps = {\n  style: null,\n  colSpan: 1,\n  className: undefined,\n  tableColumn: undefined,\n  tableRow: undefined,\n  row: undefined,\n  children: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const TableRow = ({\n  children, row, tableRow, forwardedRef,\n  ...restProps\n}) => (\n  <tr\n    ref={forwardedRef}\n    {...restProps}\n  >\n    {children}\n  </tr>\n);\n\nTableRow.propTypes = {\n  children: PropTypes.node,\n  row: PropTypes.any,\n  tableRow: PropTypes.object,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nTableRow.defaultProps = {\n  children: null,\n  row: undefined,\n  tableRow: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport { withComponents } from '@devexpress/dx-react-core';\nimport { TableRowDetail as TableRowDetailBase } from '@devexpress/dx-react-grid';\nimport { TableDetailToggleCell as ToggleCell } from '../templates/table-detail-toggle-cell';\nimport { TableDetailCell as Cell } from '../templates/table-detail-cell';\nimport { TableRow as Row } from '../templates/table-row';\n\nconst TableRowDetailWithWidth = props => <TableRowDetailBase toggleColumnWidth={40} {...props} />;\nTableRowDetailWithWidth.components = TableRowDetailBase.components;\n\nexport const TableRowDetail = withComponents({ Row, Cell, ToggleCell })(TableRowDetailWithWidth);\n\nTableRowDetail.COLUMN_TYPE = TableRowDetailBase.COLUMN_TYPE;\nTableRowDetail.ROW_TYPE = TableRowDetailBase.ROW_TYPE;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const Cell = ({\n  className, colSpan, row, column,\n  expanded, onToggle,\n  children, tableRow, tableColumn,\n  iconComponent: Icon, contentComponent: Content,\n  inlineSummaryComponent: InlineSummary,\n  inlineSummaryItemComponent: InlineSummaryItem,\n  inlineSummaries,\n  getMessage,\n  containerComponent: Container,\n  side, position,\n  forwardedRef,\n  ...restProps\n}) => {\n  const handleClick = () => onToggle();\n\n  return (\n    <td\n      colSpan={colSpan}\n      className={classNames({\n        'dx-g-bs4-group-cell': true,\n        'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled),\n      }, className)}\n      ref={forwardedRef}\n      onClick={handleClick}\n      {...restProps}\n    >\n      <Container side={side} position={position}>\n        <Icon\n          expanded={expanded}\n          onToggle={onToggle}\n          className=\"mr-2\"\n        />\n        <Content\n          column={column}\n          row={row}\n        >\n          {children}\n        </Content>\n        {\n          inlineSummaries.length ? (\n            <InlineSummary\n              inlineSummaries={inlineSummaries}\n              getMessage={getMessage}\n              inlineSummaryItemComponent={InlineSummaryItem}\n            />\n          ) : null\n        }\n      </Container>\n    </td>\n  );\n};\n\nCell.propTypes = {\n  contentComponent: PropTypes.func.isRequired,\n  iconComponent: PropTypes.func.isRequired,\n  containerComponent: PropTypes.func.isRequired,\n  inlineSummaryComponent: PropTypes.func.isRequired,\n  inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  inlineSummaries: PropTypes.array,\n  row: PropTypes.any,\n  column: PropTypes.object,\n  expanded: PropTypes.bool,\n  className: PropTypes.string,\n  colSpan: PropTypes.number,\n  getMessage: PropTypes.func.isRequired,\n  onToggle: PropTypes.func,\n  children: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.node),\n  ]),\n  tableRow: PropTypes.object,\n  tableColumn: PropTypes.object,\n  side: PropTypes.string,\n  position: PropTypes.string,\n  forwardedRef: PropTypes.func,\n};\n\nCell.defaultProps = {\n  row: {},\n  column: {},\n  expanded: false,\n  inlineSummaries: [],\n  className: undefined,\n  colSpan: 1,\n  onToggle: () => {},\n  children: undefined,\n  tableRow: undefined,\n  tableColumn: undefined,\n  side: 'left',\n  position: '',\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const Content = ({\n  column, row, children, ...restProps\n}) => (\n  <span {...restProps}>\n    <strong>\n      {column.title || column.name}\n      :\n      {' '}\n    </strong>\n    {children || String(row.value)}\n  </span>\n);\n\nContent.propTypes = {\n  row: PropTypes.any,\n  column: PropTypes.object,\n  children: PropTypes.node,\n};\n\nContent.defaultProps = {\n  row: {},\n  column: {},\n  children: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const Container = ({\n  children, className, style, side, position, ...restProps\n}) => (\n  <div\n    className={classNames('position-sticky dx-g-bs4-fixed-group-cell', className)}\n    style={{\n      ...style,\n      [side]: position,\n    }}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n\nContainer.propTypes = {\n  children: PropTypes.node,\n  className: PropTypes.string,\n  style: PropTypes.object,\n  side: PropTypes.string,\n  position: PropTypes.string,\n};\n\nContainer.defaultProps = {\n  children: undefined,\n  className: undefined,\n  style: null,\n  side: 'left',\n  position: '',\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const IndentCell = ({\n  tableRow,\n  tableColumn,\n  row, column,\n  style, className,\n  position, side,\n  forwardedRef,\n  ...restProps\n}) => (\n  <td\n    className={classNames('position-sticky dx-g-bs4-fixed-cell', className)}\n    style={{ ...style, [side]: position }}\n    ref={forwardedRef}\n    {...restProps}\n  />\n);\n\nIndentCell.propTypes = {\n  tableRow: PropTypes.object,\n  tableColumn: PropTypes.object,\n  row: PropTypes.any,\n  column: PropTypes.object,\n  className: PropTypes.string,\n  style: PropTypes.object,\n  side: PropTypes.string,\n  position: PropTypes.number,\n  forwardedRef: PropTypes.func,\n};\n\nIndentCell.defaultProps = {\n  tableRow: undefined,\n  tableColumn: undefined,\n  row: {},\n  column: {},\n  className: undefined,\n  style: null,\n  side: 'left',\n  position: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { TableRow as RowBase } from '../table-row';\n\nexport const Row = ({ children, className, ...restProps }) => (\n  <RowBase\n    {...restProps}\n    className={classNames('dx-g-bs4-cursor-pointer', className)}\n  >\n    {children}\n  </RowBase>\n);\n\nRow.propTypes = {\n  children: PropTypes.node,\n  className: PropTypes.string,\n};\n\nRow.defaultProps = {\n  children: null,\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const InlineSummary = ({\n  inlineSummaries, getMessage,\n  inlineSummaryItemComponent: InlineSummaryItem,\n  className, ...restProps\n}) => (\n  <span className={classNames('ml-2', className)} {...restProps}>\n    {'('}\n    {inlineSummaries.map(s => (\n      <InlineSummaryItem\n        key={s.type}\n        summary={s}\n        getMessage={getMessage}\n      />\n    ))\n      .reduce((acc, summary) => acc.concat(summary, ', '), [])\n      .slice(0, -1)}\n    {')'}\n  </span>\n);\n\nInlineSummary.propTypes = {\n  className: PropTypes.string,\n  getMessage: PropTypes.func.isRequired,\n  inlineSummaries: PropTypes.array,\n  inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n};\n\nInlineSummary.defaultProps = {\n  className: undefined,\n  inlineSummaries: [],\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const TableCell = ({\n  column, value, children,\n  tableRow, tableColumn, row,\n  forwardedRef,\n  className, ...restProps\n}) => (\n  <td\n    className={classNames({\n      'dx-g-bs4-table-cell': true,\n      'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled),\n      'text-right': tableColumn && tableColumn.align === 'right',\n      'text-center': tableColumn && tableColumn.align === 'center',\n    }, className)}\n    ref={forwardedRef}\n    {...restProps}\n  >\n    {children || value}\n  </td>\n);\n\nTableCell.propTypes = {\n  value: PropTypes.any,\n  column: PropTypes.object,\n  row: PropTypes.any,\n  children: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.arrayOf(PropTypes.node),\n  ]),\n  tableRow: PropTypes.object,\n  tableColumn: PropTypes.object,\n  className: PropTypes.string,\n  forwardedRef: PropTypes.func,\n};\n\nTableCell.defaultProps = {\n  value: undefined,\n  column: undefined,\n  row: undefined,\n  children: undefined,\n  tableRow: undefined,\n  tableColumn: undefined,\n  className: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TableCell } from '../table-cell';\n\nexport const SummaryCell = ({ onToggle, ...restProps }) => (\n  <TableCell\n    {...restProps}\n    onClick={onToggle}\n  />\n);\n\nSummaryCell.propTypes = {\n  onToggle: PropTypes.func,\n};\n\nSummaryCell.defaultProps = {\n  onToggle: () => {},\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const TableSummaryItem = ({\n  children,\n  type,\n  value,\n  getMessage,\n  className,\n  tagName: Tag,\n  ...restProps\n}) => (\n  <Tag\n    className={classNames('dx-g-bs4-table-summary-item', className)}\n    {...restProps}\n  >\n    {\n      <React.Fragment>\n        {getMessage(type)}\n        :&nbsp;&nbsp;\n        {children}\n      </React.Fragment>\n    }\n  </Tag>\n);\n\nTableSummaryItem.propTypes = {\n  tagName: PropTypes.string,\n  value: PropTypes.number,\n  type: PropTypes.string.isRequired,\n  getMessage: PropTypes.func.isRequired,\n  className: PropTypes.string,\n  children: PropTypes.node,\n};\n\nTableSummaryItem.defaultProps = {\n  tagName: 'div',\n  value: null,\n  className: undefined,\n  children: undefined,\n};\n","import * as React from 'react';\nimport { withComponents } from '@devexpress/dx-react-core';\nimport { TableGroupRow as TableGroupRowBase, InlineSummaryItem } from '@devexpress/dx-react-grid';\nimport { Cell } from '../templates/table-group-cell/cell';\nimport { Content } from '../templates/table-group-cell/content';\nimport { Container } from '../templates/table-group-cell/container';\nimport { IndentCell } from '../templates/table-group-cell/indent-cell';\nimport { ExpandButton as Icon } from '../templates/parts/expand-button';\nimport { Row } from '../templates/table-group-cell/row';\nimport { InlineSummary } from '../templates/table-group-cell/inline-summary';\nimport { SummaryCell } from '../templates/table-group-cell/summary-cell';\nimport { TableSummaryItem as SummaryItem } from '../templates/table-summary-item';\n\nconst TableGroupRowWithIndent = props => (\n  <TableGroupRowBase indentColumnWidth={33} contentCellPadding=\"0.75rem\" {...props} />\n);\nTableGroupRowWithIndent.components = TableGroupRowBase.components;\n\nconst StubCell = SummaryCell;\n\nexport const TableGroupRow = withComponents({\n  Row,\n  Cell,\n  IndentCell,\n  Container,\n  Content,\n  Icon,\n  InlineSummary,\n  InlineSummaryItem,\n  SummaryCell,\n  SummaryItem,\n  StubCell,\n})(TableGroupRowWithIndent);\n\nTableGroupRow.COLUMN_TYPE = TableGroupRowBase.COLUMN_TYPE;\nTableGroupRow.ROW_TYPE = TableGroupRowBase.ROW_TYPE;\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nexport const SelectionControl = ({\n  disabled, checked, indeterminate, onChange, className, ...restProps\n}) => (\n  <input\n    className={classNames({\n      'd-inline-block': true,\n      'dx-g-bs4-cursor-pointer': !disabled,\n    }, className)}\n    type=\"checkbox\"\n    disabled={disabled}\n    checked={checked}\n    ref={(ref) => {\n      if (ref) {\n        ref.indeterminate = indeterminate; // eslint-disable-line no-param-reassign\n      }\n    }}\n    onChange={() => {\n      if (disabled) return;\n      onChange();\n    }}\n    onClick={e => e.stopPropagation()}\n    {...restProps}\n  />\n);\n\nSelectionControl.propTypes = {\n  disabled: PropTypes.bool,\n  checked: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  onChange: PropTypes.func,\n  className: PropTypes.string,\n};\n\nSelectionControl.defaultProps = {\n  disabled: false,\n  checked: false,\n  indeterminate: false,\n  onChange: () => {},\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nimport { SelectionControl } from './parts/selection-control';\n\nexport const TableSelectAllCell = ({\n  className, allSelected, someSelected, disabled, onToggle,\n  tableColumn, tableRow, rowSpan,\n  forwardedRef,\n  ...restProps\n}) => (\n  <th\n    className={classNames({\n      'text-center': true,\n      'align-middle': !rowSpan,\n      'align-bottom': !!rowSpan,\n    }, className)}\n    rowSpan={rowSpan}\n    ref={forwardedRef}\n    {...restProps}\n  >\n    <SelectionControl\n      disabled={disabled}\n      checked={allSelected}\n      indeterminate={someSelected}\n      onChange={onToggle}\n    />\n  </th>\n);\n\nTableSelectAllCell.propTypes = {\n  className: PropTypes.string,\n  allSelected: PropTypes.bool,\n  someSelected: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onToggle: PropTypes.func,\n  tableRow: PropTypes.object,\n  tableColumn: PropTypes.object,\n  rowSpan: PropTypes.number,\n  forwardedRef: PropTypes.func,\n};\n\nTableSelectAllCell.defaultProps = {\n  className: undefined,\n  allSelected: false,\n  someSelected: false,\n  disabled: false,\n  onToggle: () => {},\n  tableRow: undefined,\n  tableColumn: undefined,\n  rowSpan: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\n\nimport { SelectionControl } from './parts/selection-control';\n\nexport const TableSelectCell = ({\n  className,\n  select