@devexpress/dx-react-grid-material-ui/dist/dx-react-grid-material-ui.cjs.cjs.map

Material-UI templates for DevExtreme React Grid component

{"version":3,"file":"dx-react-grid-material-ui.cjs.cjs","sources":["../src/templates/layout.jsx","../src/grid.jsx","../src/templates/column-chooser/overlay.jsx","../src/templates/column-chooser/container.jsx","../src/templates/column-chooser/toggle-button.jsx","../src/templates/column-chooser/item.jsx","../src/utils/with-patched-props.jsx","../src/plugins/column-chooser.jsx","../src/templates/drag-drop.jsx","../src/plugins/drag-drop-provider.jsx","../src/templates/constants.js","../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/group-panel-item.jsx","../src/templates/group-panel-empty-message.jsx","../src/plugins/grouping-panel.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/utils.jsx","../src/templates/table-group-cell/container.jsx","../src/templates/table-group-cell/indent-cell.jsx","../src/templates/table-group-cell/icon.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/table-select-all-cell.jsx","../src/templates/table-select-cell.jsx","../src/utils/get-selection-color.jsx","../src/templates/table-select-row.jsx","../src/plugins/table-selection.jsx","../src/templates/table-parts.jsx","../src/templates/table.jsx","../src/templates/table-layout.jsx","../src/templates/table-stub-cell.jsx","../src/templates/table-no-data-cell.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/templates/table-band-header/row.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-reordering-cell.jsx","../src/templates/table-invisible-row.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-content.jsx","../src/templates/table-tree-cell.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":["import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { styled } from '@mui/material';\n\nconst PREFIX = 'Layout';\nexport const classes = {\n  root: `${PREFIX}-root`,\n};\n\nconst StyledDiv = styled('div')(() => ({\n  [`&.${classes.root}`]: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n}));\n\nexport const Root = ({\n  children, className, rootRef, ...restProps\n}) => (\n  <StyledDiv\n    className={classNames(classes.root, className)}\n    ref={rootRef}\n    {...restProps}\n  >\n    {children}\n  </StyledDiv>\n);\n\nRoot.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.string,\n  rootRef: PropTypes.object,\n};\n\nRoot.defaultProps = {\n  className: 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.node.isRequired,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Popover } from '@mui/material';\n\nexport const Overlay = ({\n  visible, onHide, children, target, ...restProps\n}) => (\n  <Popover\n    open={visible}\n    anchorEl={target}\n    onClose={onHide}\n    anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n    transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n    {...restProps}\n  >\n    {children}\n  </Popover>\n);\n\nOverlay.propTypes = {\n  onHide: PropTypes.func.isRequired,\n  children: PropTypes.node.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 { List } from '@mui/material';\n\nexport const Container = ({ children, ...restProps }) => (\n  <List\n    dense\n    {...restProps}\n  >\n    {children}\n  </List>\n);\n\nContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { IconButton, Tooltip } from '@mui/material';\nimport VisibilityOff from '@mui/icons-material/VisibilityOff';\n\nexport const ToggleButton = ({\n  onToggle, getMessage,\n  buttonRef, active,\n  ...restProps\n}) => (\n  <Tooltip\n    title={getMessage('showColumnChooser')}\n    placement=\"bottom\"\n    enterDelay={300}\n  >\n    <IconButton\n      onClick={onToggle}\n      ref={buttonRef}\n      {...restProps}\n      size=\"large\"\n    >\n      <VisibilityOff />\n    </IconButton>\n  </Tooltip>\n);\n\nToggleButton.propTypes = {\n  onToggle: PropTypes.func.isRequired,\n  getMessage: PropTypes.func.isRequired,\n  buttonRef: PropTypes.func.isRequired,\n  active: PropTypes.bool,\n};\n\nToggleButton.defaultProps = {\n  active: false,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  ListItem, ListItemText, Checkbox, styled,\n} from '@mui/material';\n\nconst PREFIX = 'Item';\nexport const classes = {\n  checkbox: `${PREFIX}-checkbox`,\n  itemText: `${PREFIX}-itemText`,\n};\n\nconst StyledListItem = styled(ListItem)(({ theme }) => ({\n  [`& .${classes.itemText}`]: {\n    paddingLeft: theme.spacing(1),\n  },\n  [`& .${classes.checkbox}`]: {\n    padding: 0,\n  },\n}));\n\nexport const Item = ({\n  item: { column, hidden },\n  disabled, onToggle,\n  ...restProps\n}) => (\n  <StyledListItem\n    key={column.name}\n    button={!disabled}\n    component=\"li\"\n    disabled={disabled}\n    onClick={!disabled ? onToggle : null}\n    {...restProps}\n  >\n    <Checkbox\n      checked={!hidden}\n      tabIndex={-1}\n      disableRipple\n      disabled={disabled}\n      className={classes.checkbox}\n    />\n    <ListItemText className={classes.itemText} primary={column.title || column.name} />\n  </StyledListItem>\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  disabled: PropTypes.bool,\n  onToggle: PropTypes.func,\n};\n\nItem.defaultProps = {\n  onToggle: () => { },\n  disabled: false,\n};\n","import * as React from 'react';\n\nexport const withPatchedProps = patchProps => (Target) => {\n  class Patched extends React.PureComponent {\n    render() {\n      return <Target {...patchProps(this.props)} />;\n    }\n  }\n  return Patched;\n};\n","import PropTypes from 'prop-types';\nimport { 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 { ToggleButton } from '../templates/column-chooser/toggle-button';\nimport { Item } from '../templates/column-chooser/item';\nimport { withPatchedProps } from '../utils/with-patched-props';\n\nconst defaultMessages = {\n  showColumnChooser: 'Show Column Chooser',\n};\n\nconst ColumnChooserWithMessages = withPatchedProps(({ messages, ...restProps }) => ({\n  messages: { ...defaultMessages, ...messages },\n  ...restProps,\n}))(ColumnChooserBase);\n\nColumnChooserWithMessages.propTypes = {\n  messages: PropTypes.shape({\n    hiddenColumnNames: PropTypes.string,\n  }),\n};\n\nColumnChooserWithMessages.defaultProps = {\n  messages: {},\n};\n\nColumnChooserWithMessages.components = ColumnChooserBase.components;\n\nexport const ColumnChooser = withComponents({\n  Container, Item, Overlay, ToggleButton,\n})(ColumnChooserWithMessages);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { Chip, styled } from '@mui/material';\n\nconst PREFIX = 'DragDrop';\nexport const classes = {\n  container: `${PREFIX}-container`,\n  column: `${PREFIX}-column`,\n};\n\nconst StyledDiv = styled('div')(() => ({\n  [`&.${classes.container}`]: {\n    position: 'fixed',\n    zIndex: 1000,\n    left: 0,\n    top: 0,\n    display: 'inline-block',\n  },\n}));\n\nexport const Container = ({\n  clientOffset, style, className, children,\n  ...restProps\n}) => (\n  <StyledDiv\n    className={classNames(classes.container, 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      ...style,\n    }}\n    {...restProps}\n  >\n    {children}\n  </StyledDiv>\n);\n\nContainer.propTypes = {\n  clientOffset: PropTypes.shape({\n    x: PropTypes.number.isRequired,\n    y: PropTypes.number.isRequired,\n  }).isRequired,\n  children: PropTypes.node,\n  style: PropTypes.object,\n  className: PropTypes.string,\n};\n\nContainer.defaultProps = {\n  style: null,\n  className: undefined,\n  children: undefined,\n};\n\nconst StyledChip = styled(Chip)(({ theme }) => ({\n  [`&.${classes.column}`]: {\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    float: 'right',\n    cursor: 'move',\n  },\n}));\n\nexport const Column = React.memo(({\n  column,\n  className,\n  ...restProps\n}) => (\n  <StyledChip\n    className={classNames(classes.column, className)}\n    label={column.title}\n    {...restProps}\n  />\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","export const IS_LEGACY_EDGE_MEDIA_QUERY = '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)';\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  Input, MenuItem, Select, styled,\n} from '@mui/material';\nimport { IS_LEGACY_EDGE_MEDIA_QUERY } from '../constants';\n\nconst PREFIX = 'PageSizeSelector';\nexport const classes = {\n  pageSizeSelector: `${PREFIX}-pageSizeSelector`,\n  label: `${PREFIX}-label`,\n  selectIcon: `${PREFIX}-selectIcon`,\n  selectMenu: `${PREFIX}-selectMenu`,\n  inputRoot: `${PREFIX}-inputRoot`,\n};\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.pageSizeSelector}`]: {\n    ...theme.typography.caption,\n    paddingRight: theme.spacing(5),\n    // NOTE: fixes vertical alignment in FF\n    display: 'flex',\n    alignItems: 'center',\n  },\n  [`& .${classes.label}`]: {\n    paddingRight: theme.spacing(3),\n  },\n  [`& .${classes.selectIcon}`]: {\n    top: 2,\n  },\n  [`& .${classes.selectMenu}`]: {\n    // NOTE: fix position for non-chromium Edge (issues 2234, 2788)\n    [`${IS_LEGACY_EDGE_MEDIA_QUERY}`]: {\n      position: 'absolute !important',\n    },\n  },\n  [`& .${classes.inputRoot}`]: {\n    fontSize: theme.spacing(1.75),\n    textAlign: 'right',\n  },\n  '@media (max-width: 768px)': {\n    [`&.${classes.pageSizeSelector}`]: {\n      paddingRight: theme.spacing(2),\n    },\n    [`& .${classes.label}`]: {\n      display: 'none',\n    },\n  },\n}));\n\nexport const PageSizeSelector = ({\n  pageSize,\n  onPageSizeChange,\n  pageSizes,\n  getMessage,\n}) => {\n  const showAll = getMessage('showAll');\n  return (\n    <StyledDiv className={classes.pageSizeSelector}>\n      <span className={classes.label}>\n        {getMessage('rowsPerPage')}\n      </span>\n      <Select\n        value={pageSize}\n        onChange={event => onPageSizeChange(event.target.value)}\n        classes={{\n          icon: classes.selectIcon,\n        }}\n        MenuProps={{\n          className: classes.selectMenu,\n        }}\n        input={(\n          <Input\n            disableUnderline\n            classes={{ root: classes.inputRoot }}\n          />\n        )}\n      >\n        {pageSizes.map(item => (\n          <MenuItem key={item} value={item}>\n            {item !== 0 ? item : showAll }\n          </MenuItem>\n        ))}\n      </Select>\n    </StyledDiv>\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 classNames from 'clsx';\nimport { Button, IconButton, styled } from '@mui/material';\nimport ChevronLeft from '@mui/icons-material/ChevronLeft';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport { firstRowOnPage, lastRowOnPage, calculateStartPage } from '@devexpress/dx-grid-core';\n\nconst PREFIX = 'Pagination';\nexport const classes = {\n  button: `${PREFIX}-button`,\n  activeButton: `${PREFIX}-activeButton`,\n  text: `${PREFIX}-text`,\n  pagination: `${PREFIX}-pagination`,\n  rowsLabel: `${PREFIX}-rowsLabel`,\n};\nconst StyledButton = styled(Button)(({ theme }) => ({\n  [`&.${classes.button}`]: {\n    minWidth: theme.spacing(2),\n  },\n  [`&.${classes.activeButton}`]: {\n    fontWeight: 'bold',\n    cursor: 'default',\n  },\n  [`&.${classes.text}`]: {\n    color: 'rgba(0, 0, 0, 0.87)',\n  },\n  '@media(max-width: 768px)': {\n    [`&.${classes.button}`]: {\n      display: 'none',\n    },\n  },\n}));\n\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.pagination}`]: {\n    margin: 0,\n  },\n  [`& .${classes.rowsLabel}`]: {\n    ...theme.typography.caption,\n    paddingRight: theme.spacing(5),\n  },\n  [`& .${classes.arrowButton}`]: {\n    display: 'inline-block',\n    transform: theme.direction === 'rtl' ? 'rotate(180deg)' : null,\n    msTransform: theme.direction === 'rtl' ? 'rotate(180deg)' : null,\n  },\n  [`& .${classes.prev}`]: {\n    marginRight: 0,\n  },\n  [`& .${classes.next}`]: {\n    marginLeft: 0,\n  },\n  '@media(max-width: 768px)': {\n    [`& .${classes.rowsLabel}`]: {\n      paddingRight: theme.spacing(2),\n    },\n    [`& .${classes.prev}`]: {\n      marginRight: theme.spacing(1),\n    },\n    [`& .${classes.next}`]: {\n      marginLeft: theme.spacing(1),\n    },\n  },\n}));\n\nconst PageButton = ({\n  text, isActive, isDisabled, onClick,\n}) => {\n  const buttonClasses = classNames({\n    [classes.button]: true,\n    [classes.activeButton]: isActive,\n    [classes.text]: true,\n  });\n\n  return (\n    <StyledButton\n      className={buttonClasses}\n      disabled={isDisabled}\n      onClick={onClick}\n      {...isActive ? { tabIndex: -1 } : null}\n    >\n      {text}\n    </StyledButton>\n  );\n};\n\nPageButton.propTypes = {\n  text: PropTypes.string.isRequired,\n  isActive: PropTypes.bool,\n  isDisabled: PropTypes.bool,\n  onClick: PropTypes.func,\n};\n\nPageButton.defaultProps = {\n  onClick: () => {},\n  isDisabled: false,\n  isActive: false,\n};\n\nconst ellipsisSymbol = '\\u2026';\n\nconst RenderPageButtons = (\n  currentPage,\n  totalPageCount,\n  onCurrentPageChange,\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      <PageButton\n        key={1}\n        text={String(1)}\n        onClick={() => onCurrentPageChange(0)}\n      />\n    ));\n\n    if (startPage > 2) {\n      pageButtons.push((\n        <PageButton\n          key=\"ellipsisStart\"\n          text={ellipsisSymbol}\n          isDisabled\n        />\n      ));\n    }\n  }\n\n  for (let page = startPage; page <= endPage; page += 1) {\n    pageButtons.push((\n      <PageButton\n        key={page}\n        text={String(page)}\n        isActive={page === currentPage + 1}\n        classes={classes}\n        onClick={() => onCurrentPageChange(page - 1)}\n        isDisabled={startPage === endPage}\n      />\n    ));\n  }\n\n  if (endPage < totalPageCount) {\n    if (endPage < totalPageCount - 1) {\n      pageButtons.push((\n        <PageButton\n          key=\"ellipsisEnd\"\n          text={ellipsisSymbol}\n          classes={classes}\n          isDisabled\n        />\n      ));\n    }\n\n    pageButtons.push((\n      <PageButton\n        key={totalPageCount}\n        text={String(totalPageCount)}\n        classes={classes}\n        onClick={() => onCurrentPageChange(totalPageCount - 1)}\n      />\n    ));\n  }\n\n  return pageButtons;\n};\n\nexport const Pagination = ({\n  totalPages,\n  totalCount,\n  pageSize,\n  currentPage,\n  onCurrentPageChange,\n  getMessage,\n}) => {\n  const from = firstRowOnPage(currentPage, pageSize, totalCount);\n  const to = lastRowOnPage(currentPage, pageSize, totalCount);\n\n  return (\n    <StyledDiv className={classes.pagination}>\n      <span className={classes.rowsLabel}>\n        {getMessage('info', { from, to, count: totalCount })}\n      </span>\n      <IconButton\n        className={classNames(classes.arrowButton, classes.prev)}\n        disabled={currentPage === 0}\n        onClick={() => (currentPage > 0) && onCurrentPageChange(currentPage - 1)}\n        aria-label=\"Previous\"\n        size=\"large\"\n      >\n        <ChevronLeft />\n      </IconButton>\n      {RenderPageButtons(currentPage, totalPages, onCurrentPageChange)}\n      <IconButton\n        className={classNames(classes.arrowButton, classes.next)}\n        disabled={currentPage === totalPages - 1 || totalCount === 0}\n        onClick={() => currentPage < totalPages - 1 && onCurrentPageChange(currentPage + 1)}\n        aria-label=\"Next\"\n        size=\"large\"\n      >\n        <ChevronRight />\n      </IconButton>\n    </StyledDiv>\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 { styled } from '@mui/material';\nimport { withKeyboardNavigation } from '@devexpress/dx-react-grid';\nimport { PageSizeSelector } from './page-size-selector';\nimport { Pagination } from './pagination';\n\nconst PREFIX = 'Pager';\nexport const classes = {\n  pager: `${PREFIX}-pager`,\n};\n\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.pager}`]: {\n    overflow: 'hidden',\n    padding: theme.spacing(1.5),\n    display: 'flex',\n    flex: 'none',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n  },\n}));\n\nconst PagerBase = ({\n  currentPage,\n  pageSizes,\n  totalPages,\n  pageSize,\n  onCurrentPageChange,\n  onPageSizeChange,\n  totalCount,\n  getMessage,\n  className,\n  forwardedRef,\n  ...restProps\n}) => (\n  <StyledDiv\n    className={classNames(classes.pager, 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  </StyledDiv>\n);\n\nPagerBase.propTypes = {\n  currentPage: PropTypes.number.isRequired,\n  totalPages: PropTypes.number.isRequired,\n  pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,\n  pageSize: PropTypes.number.isRequired,\n  onCurrentPageChange: PropTypes.func.isRequired,\n  onPageSizeChange: PropTypes.func.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 PropTypes from 'prop-types';\nimport { withComponents } from '@devexpress/dx-react-core';\nimport { PagingPanel as PagingPanelBase } from '@devexpress/dx-react-grid';\nimport { Pager as Container } from '../templates/paging-panel/pager';\nimport { withPatchedProps } from '../utils/with-patched-props';\n\nconst defaultMessages = {\n  rowsPerPage: 'Rows per page:',\n};\n\nconst PagingPanelWithMessages = withPatchedProps(({ messages, ...restProps }) => ({\n  messages: { ...defaultMessages, ...messages },\n  ...restProps,\n}))(PagingPanelBase);\n\nPagingPanelWithMessages.propTypes = {\n  messages: PropTypes.shape({\n    showAll: PropTypes.string,\n    rowsPerPage: PropTypes.string,\n    info: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.func,\n    ]),\n  }),\n};\n\nPagingPanelWithMessages.defaultProps = {\n  messages: {},\n};\n\nPagingPanelWithMessages.components = PagingPanelBase.components;\n\nexport const PagingPanel = withComponents({ Container })(PagingPanelWithMessages);\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { styled } from '@mui/material';\n\nconst PREFIX = 'GroupPanelContainer';\nexport const classes = {\n  panel: `${PREFIX}-panel`,\n};\n\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.panel}`]: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n    marginTop: theme.spacing(1.5),\n  },\n}));\n\nexport const GroupPanelContainer = ({\n  children,\n  className,\n  forwardedRef,\n  ...restProps\n}) => (\n  <StyledDiv\n    ref={forwardedRef}\n    className={classNames(classes.panel, className)}\n    {...restProps}\n  >\n    {children}\n  </StyledDiv>\n);\n\nGroupPanelContainer.propTypes = {\n  children: PropTypes.node,\n  className: PropTypes.string,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nGroupPanelContainer.defaultProps = {\n  children: undefined,\n  className: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { TableSortLabel, Chip, styled } from '@mui/material';\n\nconst PREFIX = 'GroupPanelItem';\nexport const classes = {\n  button: `${PREFIX}-button`,\n  withoutIcon: `${PREFIX}-withoutIcon`,\n  draftCell: `${PREFIX}-draftCell`,\n};\n\nconst StyledChip = styled(Chip)(({ theme }) => ({\n  [`&.${classes.button}`]: {\n    marginRight: theme.spacing(1),\n    marginBottom: theme.spacing(1.5),\n  },\n  [`&.${classes.withoutIcon}`]: {\n    paddingRight: '13px',\n    paddingLeft: '13px',\n  },\n  [`&.${classes.draftCell}`]: {\n    opacity: 0.3,\n  },\n}));\n\nconst ENTER_KEY_CODE = 13;\nconst SPACE_KEY_CODE = 32;\n\nconst label = (showSortingControls, sortingEnabled, sortingDirection, column, hovered) => {\n  const title = column.title || column.name;\n  return showSortingControls\n    ? (\n      <TableSortLabel\n        active={!!sortingDirection}\n        direction={sortingDirection === null ? undefined : sortingDirection}\n        disabled={!sortingEnabled}\n        hideSortIcon={!hovered}\n        tabIndex={-1}\n      >\n        {title}\n      </TableSortLabel>\n    )\n    : title;\n};\n\nexport const GroupPanelItem = ({\n  item: { column, draft },\n  onGroup, showGroupingControls,\n  showSortingControls, sortingDirection, onSort,\n  sortingEnabled, groupingEnabled,\n  className, forwardedRef,\n  ...restProps\n}) => {\n  const [hovered, setHovered] = React.useState(false);\n  const chipClassNames = classNames({\n    [classes.button]: true,\n    [classes.withoutIcon]: !showSortingControls || (!hovered && sortingDirection === null),\n    [classes.draftCell]: draft,\n  }, className);\n  const onClick = (e) => {\n    const isActionKeyDown = e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE;\n    const isMouseClick = e.keyCode === undefined;\n    const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;\n    const direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey\n      ? null\n      : undefined;\n\n    onSort({\n      direction,\n      keepOther: cancelSortingRelatedKey,\n    });\n  };\n\n  return (\n    <StyledChip\n      ref={forwardedRef}\n      label={label(showSortingControls, sortingEnabled, sortingDirection, column, hovered)}\n      className={chipClassNames}\n      {...showGroupingControls\n        ? { onDelete: groupingEnabled ? onGroup : null }\n        : null}\n      {...showSortingControls\n        ? {\n          onClick: sortingEnabled ? onClick : null,\n          onMouseEnter: () => setHovered(true),\n          onMouseLeave: () => setHovered(false),\n        }\n        : null}\n      {...restProps}\n    />\n  );\n};\n\nGroupPanelItem.propTypes = {\n  item: PropTypes.shape({\n    column: PropTypes.shape({\n      title: PropTypes.string,\n      name: PropTypes.string,\n    }).isRequired,\n    draft: PropTypes.bool,\n  }).isRequired,\n  showSortingControls: PropTypes.bool,\n  sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),\n  onSort: PropTypes.func,\n  onGroup: PropTypes.func,\n  showGroupingControls: PropTypes.bool,\n  className: PropTypes.string,\n  sortingEnabled: PropTypes.bool,\n  groupingEnabled: PropTypes.bool,\n  forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n};\n\nGroupPanelItem.defaultProps = {\n  showSortingControls: false,\n  sortingEnabled: false,\n  sortingDirection: undefined,\n  onSort: undefined,\n  onGroup: undefined,\n  showGroupingControls: false,\n  groupingEnabled: false,\n  className: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { styled } from '@mui/material';\n\nconst PREFIX = 'GroupPanelEmptyMessage';\nexport const classes = {\n  groupInfo: `${PREFIX}-groupInfo`,\n};\n\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.groupInfo}`]: {\n    color: theme.typography.caption.color,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: theme.typography.fontSize,\n  },\n}));\n\nexport const GroupPanelEmptyMessage = ({\n  getMessage,\n  className,\n  forwardedRef,\n  ...restProps\n}) => (\n  <StyledDiv\n    ref={forwardedRef}\n    className={classNames(classes.groupInfo, className)}\n    {...restProps}\n  >\n    {getMessage('groupByColumn')}\n  </StyledDiv>\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';\nimport { TableCell, styled, IconButton } from '@mui/material';\n\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport ExpandLess from '@mui/icons-material/ExpandLess';\n\nconst PREFIX = 'TableDetailToggleCell';\nexport const classes = {\n  toggleCell: `${PREFIX}-toggleCell`,\n  toggleCellButton: `${PREFIX}-toggleCellButton`,\n};\n\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n  [`&.${classes.toggleCell}`]: {\n    textAlign: 'center',\n    textOverflow: 'initial',\n    paddingTop: 0,\n    paddingBottom: 0,\n    paddingLeft: theme.spacing(1),\n  },\n}));\n\nexport const TableDetailToggleCell = ({\n  style, expanded, onToggle,\n  tableColumn, tableRow, row,\n  className, forwardedRef,\n  ...restProps\n}) => {\n  const handleClick = (e) => {\n    e.stopPropagation();\n    onToggle();\n  };\n  return (\n    <StyledTableCell\n      className={classNames(classes.toggleCell, className)}\n      style={style}\n      ref={forwardedRef}\n      {...restProps}\n    >\n      <IconButton onClick={handleClick}>\n        {\n          expanded\n            ? <ExpandLess />\n            : <ExpandMore />\n        }\n      </IconButton>\n    </StyledTableCell>\n  );\n};\n\nTableDetailToggleCell.propTypes = {\n  style: PropTypes.object,\n  expanded: PropTypes.bool,\n  onToggle: PropTypes.func,\n  className: PropTypes.string,\n  tableColumn: PropTypes.object,\n  tableRow: PropTypes.object,\n  row: PropTypes.any,\n  forwardedRef: PropTypes.func,\n};\n\nTableDetailToggleCell.defaultProps = {\n  style: null,\n  expanded: false,\n  onToggle: () => {},\n  className: undefined,\n  tableColumn: undefined,\n  tableRow: undefined,\n  row: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { TableCell, styled } from '@mui/material';\n\nconst PREFIX = 'TableDetailCell';\nexport const classes = {\n  active: `${PREFIX}-active`,\n};\n\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n  [`&.${classes.active}`]: {\n    backgroundColor: theme.palette.background.default,\n  },\n}));\n\nexport const TableDetailCell = ({\n  colSpan, style, children,\n  className, forwardedRef,\n  tableColumn, tableRow, row,\n  ...restProps\n}) => (\n  <StyledTableCell\n    style={style}\n    colSpan={colSpan}\n    ref={forwardedRef}\n    className={classNames(classes.active, className)}\n    {...restProps}\n  >\n    {children}\n  </StyledTableCell>\n);\n\nTableDetailCell.propTypes = {\n  style: PropTypes.object,\n  colSpan: PropTypes.number,\n  children: PropTypes.node,\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';\nimport { TableRow as TableRowMUI } from '@mui/material';\n\nexport const TableRow = ({\n  children,\n  row, tableRow,\n  forwardedRef,\n  ...restProps\n}) => (\n  <TableRowMUI\n    ref={forwardedRef}\n    {...restProps}\n  >\n    {children}\n  </TableRowMUI>\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: undefined,\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={48} {...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';\nimport { TableCell, styled } from '@mui/material';\n\nconst PREFIX = 'TableGroupCell';\nexport const classes = {\n  cell: `${PREFIX}-cell`,\n  cellNoWrap: `${PREFIX}-cellNoWrap`,\n};\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n  [`&.${classes.cell}`]: {\n    cursor: 'pointer',\n    paddingLeft: theme.spacing(1),\n    paddingRight: theme.spacing(1),\n    paddingTop: theme.spacing(0.5),\n    paddingBottom: theme.spacing(0.5),\n  },\n  [`&.${classes.cellNoWrap}`]: {\n    whiteSpace: 'nowrap',\n  },\n}));\n\nexport const Cell = ({\n  contentComponent: Content,\n  iconComponent: Icon,\n  containerComponent: Container,\n  inlineSummaryComponent: InlineSummary,\n  inlineSummaryItemComponent: InlineSummaryItem,\n  inlineSummaries, getMessage,\n  style, colSpan, row,\n  column, expanded,\n  onToggle,\n  children,\n  className, tableRow,\n  forwardedRef,\n  tableColumn, side, position,\n  ...restProps\n}) => {\n  const handleClick = () => onToggle();\n\n  return (\n    <StyledTableCell\n      colSpan={colSpan}\n      style={style}\n      className={classNames({\n        [classes.cell]: true,\n        [classes.cellNoWrap]: !(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        />\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    </StyledTableCell>\n  );\n};\n\nCell.propTypes = {\n  // oneOfType is a workaround because withStyles returns react object\n  contentComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  iconComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  containerComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  inlineSummaryComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,\n  style: PropTypes.object,\n  colSpan: PropTypes.number,\n  row: PropTypes.any,\n  column: PropTypes.object,\n  expanded: PropTypes.bool,\n  onToggle: PropTypes.func,\n  getMessage: PropTypes.func.isRequired,\n  children: PropTypes.node,\n  className: PropTypes.string,\n  tableRow: PropTypes.object,\n  tableColumn: PropTypes.object,\n  inlineSummaries: PropTypes.array,\n  side: PropTypes.string,\n  position: PropTypes.string,\n  forwardedRef: PropTypes.func,\n};\n\nCell.defaultProps = {\n  style: null,\n  colSpan: 1,\n  row: {},\n  column: {},\n  expanded: false,\n  inlineSummaries: [],\n  onToggle: () => {},\n  children: undefined,\n  className: 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';\nimport classNames from 'clsx';\nimport { styled } from '@mui/material';\n\nconst PREFIX = 'Content';\nexport const classes = {\n  columnTitle: `${PREFIX}-columnTitle`,\n};\nconst StyledSpan = styled('span')(() => ({\n  [`&.${classes.columnTitle}`]: {\n    verticalAlign: 'middle',\n  },\n}));\n\nexport const Content = ({\n  column, row, className, children, ...restProps\n}) => (\n  <StyledSpan\n    className={classNames(classes.columnTitle, className)}\n    {...restProps}\n  >\n    <strong>\n      {column.title || column.name}\n      :\n      {' '}\n    </strong>\n    {children || String(row.value)}\n  </StyledSpan>\n);\n\nContent.propTypes = {\n  row: PropTypes.any,\n  column: PropTypes.object,\n  children: PropTypes.node,\n  className: PropTypes.string,\n};\n\nContent.defaultProps = {\n  row: {},\n  column: {},\n  children: undefined,\n  className: undefined,\n};\n","import { darken, alpha, lighten } from '@mui/material';\n\nexport const getBorder = theme => (`1px solid ${theme.palette.mode === 'light'\n  ? lighten(alpha(theme.palette.divider, 1), 0.88)\n  : darken(alpha(theme.palette.divider, 1), 0.68)\n}`);\n\nexport const getStickyStyles = (theme, zIndex = 300) => ({\n  position: 'sticky',\n  background: theme.palette.background.paper,\n  zIndex,\n});\n\nexport const getStickyCellStyle = theme => ({\n  ...getStickyStyles(theme),\n  backgroundClip: 'padding-box',\n});\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { styled } from '@mui/material';\nimport { getStickyCellStyle } from '../utils';\n\nconst PREFIX = 'Container';\nexport const classes = {\n  wrapper: `${PREFIX}-wrapper`,\n};\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.wrapper}`]: {\n    ...getStickyCellStyle(theme),\n    float: 'left',\n    maxWidth: '100%',\n    overflowX: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n}));\n\nexport const Container = ({\n  children, style, className, side, position, ...restProps\n}) => (\n  <StyledDiv\n    className={classNames(classes.wrapper, className)}\n    style={{ ...style, [side]: position }}\n    {...restProps}\n  >\n    {children}\n  </StyledDiv>\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';\nimport { TableCell, styled } from '@mui/material';\nimport { getStickyCellStyle, getBorder } from '../utils';\n\nconst PREFIX = 'IndentCell';\nexport const classes = {\n  indentCell: `${PREFIX}-indentCell`,\n};\nconst StyledTableCell = styled(TableCell)(({ theme }) => ({\n  [`&.${classes.indentCell}`]: {\n    ...getStickyCellStyle(theme),\n    borderBottom: getBorder(theme),\n  },\n}));\n\nexport const IndentCell = ({\n  tableRow,\n  tableColumn,\n  row, column,\n  style, className,\n  position, side,\n  forwardedRef,\n  ...restProps\n}) => (\n  <StyledTableCell\n    className={classNames(classes.indentCell, className)}\n    ref={forwardedRef}\n    style={{ ...style, [side]: position }}\n    {...restProps}\n  />\n);\n\nIndentCell.propTypes = {\n  tableRow: PropTypes.object,\n  tableColumn: PropTypes.object,\n  row: PropTypes.any,\n  column: PropTypes.object,\n  style: PropTypes.object,\n  className: PropTypes.string,\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  style: null,\n  className: undefined,\n  side: 'left',\n  position: undefined,\n  forwardedRef: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport ExpandMore from '@mui/icons-material/ExpandMore';\nimport { IconButton } from '@mui/material';\n\nexport const Icon = React.memo(({\n  expanded,\n  className,\n  ...restProps\n}) => (\n  <IconButton\n    className={className}\n    {...restProps}\n  >\n    {\n      expanded\n        ? <ExpandMore />\n        : <ChevronRight />\n    }\n  </IconButton>\n));\n\nIcon.propTypes = {\n  expanded: PropTypes.bool.isRequired,\n  className: PropTypes.string,\n};\n\nIcon.defaultProps = {\n  className: undefined,\n};\n","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'clsx';\nimport { styled } from '@mui/material';\nimport { TableRow } from '../table-row';\n\nconst PREFIX = 'Row';\nexport const classes = {\n  row: `${PREFIX}-row`,\n};\nconst StyledTableRow = styled(TableRow)(() => ({\n  [`&.${classes.row}`]: {\n    cursor: 'pointer',\n  },\n}));\n\nexport const Row = ({\n  children, className, ...restProps\n}) => (\n  <StyledTableRow\n    {...restProps}\n    className={classNames(classes.row, className)}\n  >\n    {children}\n  </StyledTableRow>\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';\nimport { styled } from '@mui/material';\n\nconst PREFIX = 'InlineSummary';\nexport const classes = {\n  inlineSummary: `${PREFIX}-inlineSummary`,\n};\nconst StyledSpan = styled('span')(({ theme }) => ({\n  [`&.${classes.inlineSummary}`]: {\n    marginLeft: theme.spacing(1),\n    verticalAlign: 'middle',\n  },\n}));\n\nexport const InlineSummary = ({\n  inlineSummaries, getMessage,\n  inlineSummaryItemComponent: InlineSummaryItem,\n  className, ...restProps\n}) => (\n  <StyledSpan className={classNames(classes.inlineSummary, 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  </StyledSpan>\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';\nimport { TableCell as TableCellMUI, styled } from '@mui/material';\nimport { getBorder } from './utils';\n\nconst PREFIX = 'TableCell';\nexport const classes = {\n  cell: `${PREFIX}-cell`,\n  footer: `${PREFIX}-footer`,\n  cellRightAlign: `${PREFIX}-cellRightAlign`,\n  cellCenterAlign: `${PREFIX}-cellCenterAlign`,\n  cellNoWrap: `${PREFIX}-cellNoWrap`,\n};\n\nconst StyledTableCellMUI = styled(TableCellMUI)(({ theme }) => ({\n  [`&.${classes.cell}`]: {\n    paddingRight: theme.spacing(1),\n    paddingLeft: theme.spacing(1),\n    '&:first-of-type': {\n      paddingLeft: theme.spacing(3),\n    },\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n  },\n  [`&.${classes.footer}`]: {\n    borderTop: getBorder(theme),\n  },\n  [`&.${classes.cellRightAlign}`]: {\n    textAlign: 'right',\n  },\n  [`&.${classes.cellCenterAlign}`]: {\n    textAlign: 'center',\n  },\n  [`&.${classes.cellNoWrap}`]: {\n    whiteSpace: 'nowrap',\n  },\n}));\n\nexport const TableCell = ({\n  column, value, children,\n  tableRow, tableColumn, row,\n  className, forwardedRef,\n  ...restProps\n}) => (\n  <StyledTableCellMUI\n    className={classNames({\n      [classes.cell]: true,\n      [classes.cellRightAlign]: tableColumn && tableColumn.align === 'right',\n      [classes.cellCenterAlign]: tableColumn && tableColumn.align === 'center',\n      [classes.cellNoWrap]: !(tableColumn && tableColumn.wordWrapEnabled),\n    }, className)}\n    classes={{ footer: classes.footer }}\n    ref={forwardedRef}\n    {...restProps}\n  >\n    {children || value}\n  </StyledTableCellMUI>\n);\n\nTableCell.propTypes = {\n  value: PropTypes.any,\n  column: PropTypes.object,\n  row: PropTypes.any,\n  children: PropTypes.node,\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';\nimport { styled } from '@mui/material';\n\nconst PREFIX = 'TableSummaryItem';\nexport const classes = {\n  item: `${PREFIX}-item`,\n};\n\nconst StyledDiv = styled('div')(({ theme }) => ({\n  [`&.${classes.item}`]: {\n    fontWeight: theme.typography.fontWeightBold,\n    color: theme.palette.text.primary,\n    fontSize: theme.typography.pxToRem(13),\n  },\n}));\n\nexport const TableSummaryItem = ({\n  children,\n  type,\n  value,\n  getMessage,\n  className,\n  ...restProps\n}) => (\n  <StyledDiv\n    className={classNames([classes.item], className)}\n    {...restProps}\n  >\n    {\n      <React.Fragment>\n        {getMessage(type)}\n        :&nbsp;&nbsp;\n        {children}\n      </React.Fragment>\n    }\n  </StyledDiv>\n);\n\nTableSummaryItem.propTypes = {\n  value: PropTypes.number,\n  type: PropTypes.string.isRequired,\n  getMessage: PropTypes.func.isRequired,\n  children: PropTypes.node,\n  className: PropTypes.string,\n};\n\nTableSummaryItem.defaultProps = {\n  value: null,\n  children: undefined,\n  className: 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 { Icon } from '../templates/table-group-cell/icon';\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 contentCellPadding=\"8px\" indentColumnWidth={48} {...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';\nimport { Checkbox, TableCell, styled } from '@mui/material';\n\nconst PREFIX = 'TableSelectAllCell';\nexport const classes =