/**
 * Bundle of @devexpress/dx-react-grid-bootstrap4
 * Generated: 2024-09-11
 * Version: 4.0.9
 * License: https://js.devexpress.com/Licensing
 */

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@devexpress/dx-react-grid'), require('clsx'), require('@devexpress/dx-react-core'), require('react-dom'), require('react-popper'), require('@devexpress/dx-grid-core')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@devexpress/dx-react-grid', 'clsx', '@devexpress/dx-react-core', 'react-dom', 'react-popper', '@devexpress/dx-grid-core'], factory) :
  (global = global || self, factory((global.DevExpress = global.DevExpress || {}, global.DevExpress.DXReactGridBootstrap4 = {}), global.React, global.PropTypes, global.dxReactGrid, global.classNames, global.dxReactCore, global.ReactDOM, global.reactPopper, global.dxGridCore));
}(this, (function (exports, React, PropTypes, dxReactGrid, classNames, dxReactCore, ReactDOM, reactPopper, dxGridCore) { 'use strict';

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

  PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes;
  classNames = classNames && Object.prototype.hasOwnProperty.call(classNames, 'default') ? classNames['default'] : classNames;

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

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

      return target;
    };

    return _extends.apply(this, arguments);
  }

  const BodyColorContext = /*#__PURE__*/React.createContext();

  const getBodyColor = () => {
    const body = document.getElementsByTagName('body')[0];
    const {
      backgroundColor
    } = window.getComputedStyle(body);
    return backgroundColor;
  };

  class Root extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        backgroundColor: undefined
      };
    }

    componentDidMount() {
      this.setState({
        backgroundColor: getBodyColor()
      });
    }

    render() {
      const {
        children,
        className,
        rootRef,
        ...restProps
      } = this.props;
      const {
        backgroundColor
      } = this.state;
      return /*#__PURE__*/React.createElement("div", _extends({
        className: classNames('d-flex flex-column', className),
        ref: rootRef
      }, restProps), /*#__PURE__*/React.createElement(BodyColorContext.Provider, {
        value: backgroundColor
      }, children));
    }

  }
  process.env.NODE_ENV !== "production" ? Root.propTypes = {
    className: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    rootRef: PropTypes.object
  } : void 0;
  Root.defaultProps = {
    className: undefined,
    children: undefined,
    rootRef: undefined
  };

  const Grid = ({
    children,
    ...props
  }) => /*#__PURE__*/React.createElement(dxReactGrid.Grid, _extends({
    rootComponent: Root
  }, props), children);
  Grid.Root = Root;
  process.env.NODE_ENV !== "production" ? Grid.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
  } : void 0;

  const DefaultArrowComponent = /*#__PURE__*/React.forwardRef(({
    placement,
    ...restProps
  }, ref) => /*#__PURE__*/React.createElement("div", _extends({
    className: "arrow",
    ref: ref
  }, restProps)));
  DefaultArrowComponent.propTypes = {
    placement: PropTypes.string.isRequired
  };
  class Popover extends React.PureComponent {
    constructor(props) {
      super(props); // These two fields should be created only if `isOpen && toggle` condition is true
      // and destroyed when condition turns false.
      // But it would require usage of `this.state` and other code complications.
      // So let's not change it for now. Maybe a better solution would be found.

      this.contentRef = /*#__PURE__*/React.createRef();
      this.handleClick = this.handleClick.bind(this);
    }

    componentDidMount() {
      const {
        isOpen,
        toggle
      } = this.props;

      if (isOpen && toggle) {
        this.attachDocumentEvents();
      }
    }

    componentDidUpdate() {
      const {
        isOpen,
        toggle
      } = this.props;

      if (isOpen && toggle) {
        this.attachDocumentEvents();
      } else {
        this.detachDocumentEvents();
      }
    }

    componentWillUnmount() {
      this.detachDocumentEvents();
    }

    handleClick(e) {
      const {
        target: eventTarget
      } = e;
      const {
        current: contentNode
      } = this.contentRef;
      const {
        toggle,
        target
      } = this.props;

      if (contentNode && !contentNode.contains(eventTarget) && !target.contains(eventTarget)) {
        toggle();
      }
    }

    attachDocumentEvents() {
      if (!this.listenersAttached) {
        this.toggleDocumentEvents('addEventListener');
        this.listenersAttached = true;
      }
    }

    detachDocumentEvents() {
      if (this.listenersAttached) {
        this.toggleDocumentEvents('removeEventListener');
        this.listenersAttached = false;
      }
    }

    toggleDocumentEvents(method) {
      ['click', 'touchstart'].forEach(eventType => {
        document[method](eventType, this.handleClick, true);
      });
    }

    renderPopper() {
      const {
        children,
        target,
        renderInBody,
        arrowComponent: ArrowComponent,
        modifiers = [],
        ...restProps
      } = this.props;
      const popperModifiers = [{
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      }, ...modifiers];
      return /*#__PURE__*/React.createElement(reactPopper.Popper, _extends({
        referenceElement: target,
        modifiers: popperModifiers
      }, restProps), ({
        ref,
        style,
        arrowProps,
        placement
      }) => /*#__PURE__*/React.createElement("div", {
        className: `popover show bs-popover-${placement}`,
        ref: ref,
        style: style
      }, /*#__PURE__*/React.createElement("div", {
        className: "popover-inner",
        ref: this.contentRef
      }, children), /*#__PURE__*/React.createElement(ArrowComponent, _extends({}, arrowProps, {
        placement: restProps.placement
      }))));
    }

    render() {
      const {
        isOpen,
        renderInBody
      } = this.props;
      if (!isOpen) return null;
      return renderInBody ? /*#__PURE__*/ReactDOM.createPortal(this.renderPopper(), document.body) : this.renderPopper();
    }

  }
  process.env.NODE_ENV !== "production" ? Popover.propTypes = {
    renderInBody: PropTypes.bool,
    placement: PropTypes.string,
    isOpen: PropTypes.bool,
    children: PropTypes.node.isRequired,
    target: PropTypes.oneOfType([PropTypes.instanceOf(typeof Element !== 'undefined' ? Element : Object), PropTypes.object]),
    toggle: PropTypes.func,
    arrowComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  Popover.defaultProps = {
    target: null,
    renderInBody: true,
    isOpen: false,
    placement: 'auto',
    toggle: undefined,
    arrowComponent: DefaultArrowComponent
  };

  const Overlay = ({
    visible,
    children,
    target,
    onHide,
    ...restProps
  }) => {
    const handleToggle = () => {
      if (visible) onHide();
    };

    return target ? /*#__PURE__*/React.createElement(Popover, _extends({
      placement: "bottom",
      isOpen: visible,
      target: target,
      renderInBody: false,
      toggle: handleToggle
    }, restProps), children) : null;
  };
  process.env.NODE_ENV !== "production" ? Overlay.propTypes = {
    children: PropTypes.node.isRequired,
    onHide: PropTypes.func.isRequired,
    visible: PropTypes.bool,
    target: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
  } : void 0;
  Overlay.defaultProps = {
    visible: false,
    target: null
  };

  const Container = ({
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('py-2', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Container.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string
  } : void 0;
  Container.defaultProps = {
    className: undefined
  };

  const handleMouseDown = e => {
    e.currentTarget.style.outline = 'none';
  };

  const handleBlur = e => {
    e.currentTarget.style.outline = '';
  };

  const Item = ({
    item: {
      column,
      hidden
    },
    onToggle,
    className,
    disabled,
    ...restProps
  }) => /*#__PURE__*/React.createElement("button", _extends({
    className: classNames({
      'dropdown-item dx-g-bs4-column-chooser-item': true,
      'dx-g-bs4-cursor-pointer': !disabled
    }, className),
    type: "button",
    onClick: onToggle,
    onMouseDown: handleMouseDown,
    onBlur: handleBlur,
    disabled: disabled
  }, restProps), /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    className: classNames({
      'dx-g-bs4-cursor-pointer': !disabled,
      'dx-g-bs4-column-chooser-checkbox': true
    }),
    tabIndex: -1,
    checked: !hidden,
    disabled: disabled,
    onChange: onToggle,
    onClick: e => e.stopPropagation()
  }), column.title || column.name);
  process.env.NODE_ENV !== "production" ? Item.propTypes = {
    item: PropTypes.shape({
      column: PropTypes.shape({
        name: PropTypes.string,
        title: PropTypes.string
      }),
      hidden: PropTypes.bool
    }).isRequired,
    onToggle: PropTypes.func,
    className: PropTypes.string,
    disabled: PropTypes.bool
  } : void 0;
  Item.defaultProps = {
    onToggle: () => {},
    className: undefined,
    disabled: false
  };

  const ToggleButton = ({
    onToggle,
    className,
    getMessage,
    buttonRef,
    active,
    ...restProps
  }) => {
    const buttonClasses = classNames({
      btn: true,
      'btn-outline-secondary': true,
      'border-0': true,
      active
    }, className);
    return /*#__PURE__*/React.createElement("button", _extends({
      type: "button",
      className: buttonClasses,
      onClick: onToggle,
      ref: buttonRef
    }, restProps), /*#__PURE__*/React.createElement("span", {
      className: "oi oi-eye"
    }));
  };
  process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
    onToggle: PropTypes.func.isRequired,
    getMessage: PropTypes.func.isRequired,
    buttonRef: PropTypes.func.isRequired,
    className: PropTypes.string,
    active: PropTypes.bool
  } : void 0;
  ToggleButton.defaultProps = {
    className: undefined,
    active: false
  };

  const ColumnChooser = dxReactCore.withComponents({
    Container,
    Item,
    Overlay,
    ToggleButton
  })(dxReactGrid.ColumnChooser);

  const Container$1 = ({
    clientOffset,
    style,
    className,
    children,
    ...restProps
  }) => /*#__PURE__*/React.createElement("ul", _extends({
    className: classNames('list-group d-inline-block position-fixed dx-g-bs4-drag-drop', className),
    style: {
      transform: `translate(calc(${clientOffset.x}px - 50%), calc(${clientOffset.y}px - 50%))`,
      msTransform: `translateX(${clientOffset.x}px) translateX(-50%) translateY(${clientOffset.y}px) translateY(-50%)`,
      zIndex: 1000,
      left: 0,
      top: 0,
      ...style
    }
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Container$1.propTypes = {
    clientOffset: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired
    }).isRequired,
    style: PropTypes.object,
    className: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
  } : void 0;
  Container$1.defaultProps = {
    style: {},
    className: undefined,
    children: undefined
  };
  const Column = /*#__PURE__*/React.memo(({
    column,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("li", _extends({
    className: classNames('list-group-item', className)
  }, restProps), column.title));
  Column.propTypes = {
    column: PropTypes.object.isRequired,
    className: PropTypes.string
  };
  Column.defaultProps = {
    className: undefined
  };

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

  const PaginationLink = ({
    previous,
    next,
    children,
    ...restProps
  }) => {
    let ariaLabel = '';
    let content = children;

    if (next || previous) {
      let angleQuote;

      if (next) {
        angleQuote = '\u00bb';
        ariaLabel = 'Next';
      }

      if (previous) {
        angleQuote = '\u00ab';
        ariaLabel = 'Previous';
      }

      content = [/*#__PURE__*/React.createElement("span", {
        "aria-hidden": "true",
        key: "caret"
      }, children || angleQuote), /*#__PURE__*/React.createElement("span", {
        className: "sr-only",
        key: "sr"
      }, ariaLabel)];
    }

    return /*#__PURE__*/React.createElement("a", _extends({
      className: "page-link",
      "aria-label": ariaLabel
    }, restProps), content);
  };
  process.env.NODE_ENV !== "production" ? PaginationLink.propTypes = {
    previous: PropTypes.bool,
    next: PropTypes.bool,
    children: PropTypes.node
  } : void 0;
  PaginationLink.defaultProps = {
    previous: false,
    next: false,
    children: undefined
  };

  const PaginationItem = ({
    active,
    disabled,
    ...restProps
  }) => /*#__PURE__*/React.createElement("li", _extends({
    className: classNames('page-item', {
      active,
      disabled
    })
  }, restProps));
  process.env.NODE_ENV !== "production" ? PaginationItem.propTypes = {
    active: PropTypes.bool,
    disabled: PropTypes.bool
  } : void 0;
  PaginationItem.defaultProps = {
    active: false,
    disabled: false
  };

  const Pagination = ({
    className,
    listClassName,
    ...restProps
  }) => /*#__PURE__*/React.createElement("nav", {
    className: className
  }, /*#__PURE__*/React.createElement("ul", _extends({
    className: classNames('pagination', listClassName)
  }, restProps)));
  process.env.NODE_ENV !== "production" ? Pagination.propTypes = {
    className: PropTypes.string,
    listClassName: PropTypes.string
  } : void 0;
  Pagination.defaultProps = {
    className: undefined,
    listClassName: undefined
  };

  const PageSizeSelector = ({
    pageSize,
    onPageSizeChange,
    pageSizes,
    getMessage
  }) => {
    const showAll = getMessage('showAll');
    return /*#__PURE__*/React.createElement("div", {
      className: "d-inline-block"
    }, /*#__PURE__*/React.createElement("select", {
      className: "form-control d-sm-none",
      value: pageSize,
      onChange: e => onPageSizeChange(parseInt(e.target.value, 10))
    }, pageSizes.map(val => /*#__PURE__*/React.createElement("option", {
      key: val,
      value: val
    }, val || showAll))), /*#__PURE__*/React.createElement(Pagination, {
      className: "d-none d-sm-flex",
      listClassName: "m-0"
    }, pageSizes.map(item => /*#__PURE__*/React.createElement(PaginationItem, {
      key: item,
      active: item === pageSize && true
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      href: "#",
      onClick: e => {
        e.preventDefault();
        onPageSizeChange(item);
      }
    }, item || showAll)))));
  };
  process.env.NODE_ENV !== "production" ? PageSizeSelector.propTypes = {
    pageSize: PropTypes.number.isRequired,
    onPageSizeChange: PropTypes.func.isRequired,
    pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
    getMessage: PropTypes.func.isRequired
  } : void 0;

  const renderPageButtons = (currentPage, totalPageCount, currentPageChange) => {
    const pageButtons = [];
    const maxButtonCount = 3;
    let startPage = 1;
    let endPage = totalPageCount || 1; // NOTE: take into account last button and ellipsis (T1004797)

    if (maxButtonCount < totalPageCount - 2) {
      startPage = dxGridCore.calculateStartPage(currentPage + 1, maxButtonCount, totalPageCount);
      endPage = startPage + maxButtonCount - 1;
    }

    if (startPage > 1) {
      pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
        key: 1
      }, /*#__PURE__*/React.createElement(PaginationLink, {
        href: "#",
        onClick: e => currentPageChange(e, 0)
      }, 1)));

      if (startPage > 2) {
        pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
          key: "ellipsisStart",
          disabled: true
        }, /*#__PURE__*/React.createElement(PaginationLink, null, '...')));
      }
    }

    for (let page = startPage; page <= endPage; page += 1) {
      pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
        key: page,
        active: page === currentPage + 1,
        disabled: startPage === endPage
      }, /*#__PURE__*/React.createElement(PaginationLink, {
        href: "#",
        onClick: e => currentPageChange(e, page - 1)
      }, page)));
    }

    if (endPage < totalPageCount) {
      if (endPage < totalPageCount - 1) {
        pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
          key: "ellipsisEnd",
          disabled: true
        }, /*#__PURE__*/React.createElement(PaginationLink, null, '...')));
      }

      pageButtons.push( /*#__PURE__*/React.createElement(PaginationItem, {
        key: totalPageCount
      }, /*#__PURE__*/React.createElement(PaginationLink, {
        href: "#",
        onClick: e => currentPageChange(e, totalPageCount - 1)
      }, totalPageCount)));
    }

    return pageButtons;
  };

  const Pagination$1 = ({
    totalPages,
    currentPage,
    onCurrentPageChange,
    totalCount,
    pageSize,
    getMessage
  }) => {
    const from = dxGridCore.firstRowOnPage(currentPage, pageSize, totalCount);
    const to = dxGridCore.lastRowOnPage(currentPage, pageSize, totalCount);

    const currentPageChange = (e, nextPage) => {
      e.preventDefault();
      onCurrentPageChange(nextPage);
    };

    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
      className: "float-right d-none d-sm-flex",
      listClassName: "m-0"
    }, /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      previous: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage - 1)
    })), renderPageButtons(currentPage, totalPages, currentPageChange), /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === totalPages - 1 || totalCount === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      next: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage + 1)
    }))), /*#__PURE__*/React.createElement(Pagination, {
      className: "float-right d-sm-none",
      listClassName: "m-0"
    }, /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      previous: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage - 1)
    })), "\xA0", /*#__PURE__*/React.createElement(PaginationItem, {
      disabled: currentPage === totalPages - 1 || totalCount === 0
    }, /*#__PURE__*/React.createElement(PaginationLink, {
      next: true,
      href: "#",
      onClick: e => currentPageChange(e, currentPage + 1)
    }))), /*#__PURE__*/React.createElement("span", {
      className: "float-right d-sm-none mr-4"
    }, /*#__PURE__*/React.createElement("span", {
      className: "d-inline-block align-middle"
    }, getMessage('info', {
      from,
      to,
      count: totalCount
    }))));
  };
  process.env.NODE_ENV !== "production" ? Pagination$1.propTypes = {
    totalPages: PropTypes.number.isRequired,
    currentPage: PropTypes.number.isRequired,
    onCurrentPageChange: PropTypes.func.isRequired,
    totalCount: PropTypes.number.isRequired,
    pageSize: PropTypes.number.isRequired,
    getMessage: PropTypes.func.isRequired
  } : void 0;

  const PagerBase = ({
    currentPage,
    onCurrentPageChange,
    totalPages,
    pageSize,
    onPageSizeChange,
    pageSizes,
    totalCount,
    getMessage,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('clearfix card-footer dx-g-bs4-paging-panel', className),
    ref: forwardedRef
  }, restProps), !!pageSizes.length && /*#__PURE__*/React.createElement(PageSizeSelector, {
    pageSize: pageSize,
    onPageSizeChange: onPageSizeChange,
    pageSizes: pageSizes,
    getMessage: getMessage
  }), /*#__PURE__*/React.createElement(Pagination$1, {
    totalPages: totalPages,
    totalCount: totalCount,
    currentPage: currentPage,
    onCurrentPageChange: page => onCurrentPageChange(page),
    pageSize: pageSize,
    getMessage: getMessage
  }));

  process.env.NODE_ENV !== "production" ? PagerBase.propTypes = {
    currentPage: PropTypes.number.isRequired,
    onCurrentPageChange: PropTypes.func.isRequired,
    totalPages: PropTypes.number.isRequired,
    pageSize: PropTypes.number.isRequired,
    onPageSizeChange: PropTypes.func.isRequired,
    pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
    totalCount: PropTypes.number.isRequired,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  PagerBase.defaultProps = {
    className: undefined,
    forwardedRef: undefined
  };
  const Pager = dxReactGrid.withKeyboardNavigation('paging', 'none')(PagerBase);

  const PagingPanel = dxReactCore.withComponents({
    Container: Pager
  })(dxReactGrid.PagingPanel);

  const GroupPanelContainer = ({
    children,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    ref: forwardedRef,
    className: classNames('w-100 mt-1', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? GroupPanelContainer.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    className: PropTypes.string,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  GroupPanelContainer.defaultProps = {
    children: null,
    className: undefined,
    forwardedRef: undefined
  };

  const SortingIndicator = /*#__PURE__*/React.memo(({
    direction,
    className
  }) => /*#__PURE__*/React.createElement("span", {
    className: classNames({
      'oi dx-g-bs4-sorting-indicator mx-2': true,
      'oi-arrow-thick-bottom': direction === 'desc',
      'oi-arrow-thick-top': direction !== 'desc',
      invisible: !direction
    }, className)
  }));
  SortingIndicator.propTypes = {
    direction: PropTypes.oneOf(['asc', 'desc']),
    className: PropTypes.string
  };
  SortingIndicator.defaultProps = {
    direction: null,
    className: undefined
  };

  const ENTER_KEY_CODE = 13;
  const SPACE_KEY_CODE = 32;

  const isActionKey = keyCode => keyCode === ENTER_KEY_CODE || keyCode === SPACE_KEY_CODE;

  const GroupPanelItem = ({
    item: {
      column,
      draft
    },
    onGroup,
    showGroupingControls,
    showSortingControls,
    sortingDirection,
    onSort,
    className,
    groupingEnabled,
    sortingEnabled,
    forwardedRef,
    ...restProps
  }) => {
    const handleSortingChange = e => {
      const isActionKeyDown = isActionKey(e.keyCode);
      const isMouseClick = e.keyCode === undefined;
      if (!showSortingControls || !sortingEnabled || !(isActionKeyDown || isMouseClick)) return;
      const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
      const direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey ? null : undefined;
      e.preventDefault();
      onSort({
        direction,
        keepOther: cancelSortingRelatedKey
      });
    };

    const handleUngroup = e => {
      if (!groupingEnabled) return;
      const isActionKeyDown = isActionKey(e.keyCode);
      const isMouseClick = e.keyCode === undefined;
      if (!isActionKeyDown && !isMouseClick) return;
      onGroup();
    };

    return /*#__PURE__*/React.createElement("div", _extends({
      ref: forwardedRef,
      className: classNames({
        'btn-group mb-1 mr-1': true,
        'dx-g-bs4-inactive': draft
      }, className)
    }, restProps), /*#__PURE__*/React.createElement("span", _extends({
      className: classNames({
        'btn btn-outline-secondary': true,
        disabled: !sortingEnabled && (showSortingControls || !groupingEnabled)
      }),
      onClick: handleSortingChange,
      onKeyDown: handleSortingChange
    }, sortingEnabled ? {
      tabIndex: 0
    } : null), column.title || column.name, showSortingControls && sortingDirection && /*#__PURE__*/React.createElement("span", null, "\xA0", /*#__PURE__*/React.createElement(SortingIndicator, {
      direction: sortingDirection
    }))), showGroupingControls && /*#__PURE__*/React.createElement("span", {
      className: classNames({
        'btn btn-outline-secondary': true,
        disabled: !groupingEnabled
      }),
      onClick: handleUngroup
    }, "\xA0", /*#__PURE__*/React.createElement("span", {
      className: "oi oi-x dx-g-bs4-group-panel-item-icon"
    })));
  };
  process.env.NODE_ENV !== "production" ? GroupPanelItem.propTypes = {
    item: PropTypes.shape({
      column: PropTypes.shape({
        name: PropTypes.string,
        title: PropTypes.string
      }).isRequired,
      draft: PropTypes.bool
    }).isRequired,
    showSortingControls: PropTypes.bool,
    sortingDirection: PropTypes.oneOf(['asc', 'desc', null]),
    className: PropTypes.string,
    onSort: PropTypes.func,
    onGroup: PropTypes.func,
    showGroupingControls: PropTypes.bool,
    groupingEnabled: PropTypes.bool,
    sortingEnabled: PropTypes.bool,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  GroupPanelItem.defaultProps = {
    showSortingControls: false,
    sortingDirection: undefined,
    className: undefined,
    onSort: undefined,
    onGroup: undefined,
    showGroupingControls: false,
    sortingEnabled: false,
    groupingEnabled: false,
    forwardedRef: undefined
  };

  const GroupPanelEmptyMessage = ({
    getMessage,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    ref: forwardedRef,
    className: classNames('dx-g-bs4-group-panel-empty-message', className)
  }, restProps), getMessage('groupByColumn'));
  process.env.NODE_ENV !== "production" ? GroupPanelEmptyMessage.propTypes = {
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  GroupPanelEmptyMessage.defaultProps = {
    className: undefined,
    forwardedRef: undefined
  };

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

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

  const handleMouseDown$1 = e => {
    e.target.style.outline = 'none';
  };

  const handleBlur$1 = e => {
    e.target.style.outline = '';
  };

  const ExpandButton = ({
    visible,
    expanded,
    onToggle,
    className,
    ...restProps
  }) => {
    const fireToggle = () => {
      if (!visible) return;
      onToggle(!expanded);
    };

    const handleClick = e => {
      e.stopPropagation();
      fireToggle();
    };

    const handleKeyDown = e => {
      if (e.keyCode === ENTER_KEY_CODE$1 || e.keyCode === SPACE_KEY_CODE$1) {
        e.preventDefault();
        fireToggle();
      }
    };

    return /*#__PURE__*/React.createElement("i", _extends({
      className: classNames({
        'oi p-2 text-center dx-g-bs4-toggle-button': true,
        'oi-chevron-bottom': expanded,
        'oi-chevron-right': !expanded,
        'dx-g-bs4-toggle-button-hidden': !visible
      }, className),
      tabIndex: visible ? 0 : undefined // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
      ,
      onKeyDown: handleKeyDown,
      onMouseDown: handleMouseDown$1,
      onBlur: handleBlur$1,
      onClick: handleClick
    }, restProps));
  };
  process.env.NODE_ENV !== "production" ? ExpandButton.propTypes = {
    visible: PropTypes.bool,
    expanded: PropTypes.bool,
    onToggle: PropTypes.func,
    className: PropTypes.string
  } : void 0;
  ExpandButton.defaultProps = {
    visible: true,
    expanded: false,
    onToggle: () => {},
    className: undefined
  };

  const TableDetailToggleCell = ({
    expanded,
    onToggle,
    tableColumn,
    tableRow,
    row,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('text-center align-middle', className),
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement(ExpandButton, {
    expanded: expanded,
    onToggle: onToggle
  }));
  process.env.NODE_ENV !== "production" ? TableDetailToggleCell.propTypes = {
    className: PropTypes.string,
    expanded: PropTypes.bool,
    onToggle: PropTypes.func,
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    row: PropTypes.any,
    forwardedRef: PropTypes.func
  } : void 0;
  TableDetailToggleCell.defaultProps = {
    className: undefined,
    expanded: false,
    onToggle: () => {},
    tableColumn: undefined,
    tableRow: undefined,
    row: undefined,
    forwardedRef: undefined
  };

  const TableDetailCell = ({
    colSpan,
    children,
    className,
    tableColumn,
    tableRow,
    row,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    colSpan: colSpan,
    ref: forwardedRef,
    className: classNames('table-active', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableDetailCell.propTypes = {
    style: PropTypes.object,
    colSpan: PropTypes.number,
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    className: PropTypes.string,
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    row: PropTypes.any,
    forwardedRef: PropTypes.func
  } : void 0;
  TableDetailCell.defaultProps = {
    style: null,
    colSpan: 1,
    className: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    row: undefined,
    children: undefined,
    forwardedRef: undefined
  };

  const TableRow = ({
    children,
    row,
    tableRow,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tr", _extends({
    ref: forwardedRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableRow.propTypes = {
    children: PropTypes.node,
    row: PropTypes.any,
    tableRow: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableRow.defaultProps = {
    children: null,
    row: undefined,
    tableRow: undefined,
    forwardedRef: undefined
  };

  const TableRowDetailWithWidth = props => /*#__PURE__*/React.createElement(dxReactGrid.TableRowDetail, _extends({
    toggleColumnWidth: 40
  }, props));

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

  const Cell = ({
    className,
    colSpan,
    row,
    column,
    expanded,
    onToggle,
    children,
    tableRow,
    tableColumn,
    iconComponent: Icon,
    contentComponent: Content,
    inlineSummaryComponent: InlineSummary,
    inlineSummaryItemComponent: InlineSummaryItem,
    inlineSummaries,
    getMessage,
    containerComponent: Container,
    side,
    position,
    forwardedRef,
    ...restProps
  }) => {
    const handleClick = () => onToggle();

    return /*#__PURE__*/React.createElement("td", _extends({
      colSpan: colSpan,
      className: classNames({
        'dx-g-bs4-group-cell': true,
        'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled)
      }, className),
      ref: forwardedRef,
      onClick: handleClick
    }, restProps), /*#__PURE__*/React.createElement(Container, {
      side: side,
      position: position
    }, /*#__PURE__*/React.createElement(Icon, {
      expanded: expanded,
      onToggle: onToggle,
      className: "mr-2"
    }), /*#__PURE__*/React.createElement(Content, {
      column: column,
      row: row
    }, children), inlineSummaries.length ? /*#__PURE__*/React.createElement(InlineSummary, {
      inlineSummaries: inlineSummaries,
      getMessage: getMessage,
      inlineSummaryItemComponent: InlineSummaryItem
    }) : null));
  };
  process.env.NODE_ENV !== "production" ? Cell.propTypes = {
    contentComponent: PropTypes.func.isRequired,
    iconComponent: PropTypes.func.isRequired,
    containerComponent: PropTypes.func.isRequired,
    inlineSummaryComponent: PropTypes.func.isRequired,
    inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
    inlineSummaries: PropTypes.array,
    row: PropTypes.any,
    column: PropTypes.object,
    expanded: PropTypes.bool,
    className: PropTypes.string,
    colSpan: PropTypes.number,
    getMessage: PropTypes.func.isRequired,
    onToggle: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    side: PropTypes.string,
    position: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  Cell.defaultProps = {
    row: {},
    column: {},
    expanded: false,
    inlineSummaries: [],
    className: undefined,
    colSpan: 1,
    onToggle: () => {},
    children: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    side: 'left',
    position: '',
    forwardedRef: undefined
  };

  const Content = ({
    column,
    row,
    children,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", restProps, /*#__PURE__*/React.createElement("strong", null, column.title || column.name, ":", ' '), children || String(row.value));
  process.env.NODE_ENV !== "production" ? Content.propTypes = {
    row: PropTypes.any,
    column: PropTypes.object,
    children: PropTypes.node
  } : void 0;
  Content.defaultProps = {
    row: {},
    column: {},
    children: undefined
  };

  const Container$2 = ({
    children,
    className,
    style,
    side,
    position,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('position-sticky dx-g-bs4-fixed-group-cell', className),
    style: { ...style,
      [side]: position
    }
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Container$2.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    style: PropTypes.object,
    side: PropTypes.string,
    position: PropTypes.string
  } : void 0;
  Container$2.defaultProps = {
    children: undefined,
    className: undefined,
    style: null,
    side: 'left',
    position: ''
  };

  const IndentCell = ({
    tableRow,
    tableColumn,
    row,
    column,
    style,
    className,
    position,
    side,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('position-sticky dx-g-bs4-fixed-cell', className),
    style: { ...style,
      [side]: position
    },
    ref: forwardedRef
  }, restProps));
  process.env.NODE_ENV !== "production" ? IndentCell.propTypes = {
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    row: PropTypes.any,
    column: PropTypes.object,
    className: PropTypes.string,
    style: PropTypes.object,
    side: PropTypes.string,
    position: PropTypes.number,
    forwardedRef: PropTypes.func
  } : void 0;
  IndentCell.defaultProps = {
    tableRow: undefined,
    tableColumn: undefined,
    row: {},
    column: {},
    className: undefined,
    style: null,
    side: 'left',
    position: undefined,
    forwardedRef: undefined
  };

  const Row = ({
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement(TableRow, _extends({}, restProps, {
    className: classNames('dx-g-bs4-cursor-pointer', className)
  }), children);
  process.env.NODE_ENV !== "production" ? Row.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string
  } : void 0;
  Row.defaultProps = {
    children: null,
    className: undefined
  };

  const InlineSummary = ({
    inlineSummaries,
    getMessage,
    inlineSummaryItemComponent: InlineSummaryItem,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", _extends({
    className: classNames('ml-2', className)
  }, restProps), '(', inlineSummaries.map(s => /*#__PURE__*/React.createElement(InlineSummaryItem, {
    key: s.type,
    summary: s,
    getMessage: getMessage
  })).reduce((acc, summary) => acc.concat(summary, ', '), []).slice(0, -1), ')');
  process.env.NODE_ENV !== "production" ? InlineSummary.propTypes = {
    className: PropTypes.string,
    getMessage: PropTypes.func.isRequired,
    inlineSummaries: PropTypes.array,
    inlineSummaryItemComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired
  } : void 0;
  InlineSummary.defaultProps = {
    className: undefined,
    inlineSummaries: []
  };

  const TableCell = ({
    column,
    value,
    children,
    tableRow,
    tableColumn,
    row,
    forwardedRef,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames({
      'dx-g-bs4-table-cell': true,
      'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled),
      'text-right': tableColumn && tableColumn.align === 'right',
      'text-center': tableColumn && tableColumn.align === 'center'
    }, className),
    ref: forwardedRef
  }, restProps), children || value);
  process.env.NODE_ENV !== "production" ? TableCell.propTypes = {
    value: PropTypes.any,
    column: PropTypes.object,
    row: PropTypes.any,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    className: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  TableCell.defaultProps = {
    value: undefined,
    column: undefined,
    row: undefined,
    children: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    className: undefined,
    forwardedRef: undefined
  };

  const SummaryCell = ({
    onToggle,
    ...restProps
  }) => /*#__PURE__*/React.createElement(TableCell, _extends({}, restProps, {
    onClick: onToggle
  }));
  process.env.NODE_ENV !== "production" ? SummaryCell.propTypes = {
    onToggle: PropTypes.func
  } : void 0;
  SummaryCell.defaultProps = {
    onToggle: () => {}
  };

  const TableSummaryItem = ({
    children,
    type,
    value,
    getMessage,
    className,
    tagName: Tag,
    ...restProps
  }) => /*#__PURE__*/React.createElement(Tag, _extends({
    className: classNames('dx-g-bs4-table-summary-item', className)
  }, restProps), /*#__PURE__*/React.createElement(React.Fragment, null, getMessage(type), ":\xA0\xA0", children));
  process.env.NODE_ENV !== "production" ? TableSummaryItem.propTypes = {
    tagName: PropTypes.string,
    value: PropTypes.number,
    type: PropTypes.string.isRequired,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    children: PropTypes.node
  } : void 0;
  TableSummaryItem.defaultProps = {
    tagName: 'div',
    value: null,
    className: undefined,
    children: undefined
  };

  const TableGroupRowWithIndent = props => /*#__PURE__*/React.createElement(dxReactGrid.TableGroupRow, _extends({
    indentColumnWidth: 33,
    contentCellPadding: "0.75rem"
  }, props));

  TableGroupRowWithIndent.components = dxReactGrid.TableGroupRow.components;
  const StubCell = SummaryCell;
  const TableGroupRow = dxReactCore.withComponents({
    Row,
    Cell,
    IndentCell,
    Container: Container$2,
    Content,
    Icon: ExpandButton,
    InlineSummary,
    InlineSummaryItem: dxReactGrid.InlineSummaryItem,
    SummaryCell,
    SummaryItem: TableSummaryItem,
    StubCell
  })(TableGroupRowWithIndent);
  TableGroupRow.COLUMN_TYPE = dxReactGrid.TableGroupRow.COLUMN_TYPE;
  TableGroupRow.ROW_TYPE = dxReactGrid.TableGroupRow.ROW_TYPE;

  const SelectionControl = ({
    disabled,
    checked,
    indeterminate,
    onChange,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("input", _extends({
    className: classNames({
      'd-inline-block': true,
      'dx-g-bs4-cursor-pointer': !disabled
    }, className),
    type: "checkbox",
    disabled: disabled,
    checked: checked,
    ref: ref => {
      if (ref) {
        ref.indeterminate = indeterminate; // eslint-disable-line no-param-reassign
      }
    },
    onChange: () => {
      if (disabled) return;
      onChange();
    },
    onClick: e => e.stopPropagation()
  }, restProps));
  process.env.NODE_ENV !== "production" ? SelectionControl.propTypes = {
    disabled: PropTypes.bool,
    checked: PropTypes.bool,
    indeterminate: PropTypes.bool,
    onChange: PropTypes.func,
    className: PropTypes.string
  } : void 0;
  SelectionControl.defaultProps = {
    disabled: false,
    checked: false,
    indeterminate: false,
    onChange: () => {},
    className: undefined
  };

  const TableSelectAllCell = ({
    className,
    allSelected,
    someSelected,
    disabled,
    onToggle,
    tableColumn,
    tableRow,
    rowSpan,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    className: classNames({
      'text-center': true,
      'align-middle': !rowSpan,
      'align-bottom': !!rowSpan
    }, className),
    rowSpan: rowSpan,
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement(SelectionControl, {
    disabled: disabled,
    checked: allSelected,
    indeterminate: someSelected,
    onChange: onToggle
  }));
  process.env.NODE_ENV !== "production" ? TableSelectAllCell.propTypes = {
    className: PropTypes.string,
    allSelected: PropTypes.bool,
    someSelected: PropTypes.bool,
    disabled: PropTypes.bool,
    onToggle: PropTypes.func,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    rowSpan: PropTypes.number,
    forwardedRef: PropTypes.func
  } : void 0;
  TableSelectAllCell.defaultProps = {
    className: undefined,
    allSelected: false,
    someSelected: false,
    disabled: false,
    onToggle: () => {},
    tableRow: undefined,
    tableColumn: undefined,
    rowSpan: undefined,
    forwardedRef: undefined
  };

  const TableSelectCell = ({
    className,
    selected,
    onToggle,
    row,
    tableRow,
    tableColumn,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('text-center align-middle', className),
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement(SelectionControl, {
    checked: selected,
    onChange: onToggle
  }));
  process.env.NODE_ENV !== "production" ? TableSelectCell.propTypes = {
    className: PropTypes.string,
    selected: PropTypes.bool,
    onToggle: PropTypes.func,
    row: PropTypes.any,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    forwardedRef: PropTypes.func
  } : void 0;
  TableSelectCell.defaultProps = {
    className: undefined,
    selected: false,
    onToggle: () => {},
    row: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    forwardedRef: undefined
  };

  const TableSelectRow = ({
    highlighted,
    children,
    style,
    onToggle,
    selectByRowClick,
    className,
    tableRow,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tr", _extends({
    ref: forwardedRef,
    style: style,
    className: classNames({
      'table-active': highlighted
    }, className),
    onClick: e => {
      if (!selectByRowClick) return;
      e.stopPropagation();
      onToggle();
    }
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableSelectRow.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    onToggle: PropTypes.func,
    selectByRowClick: PropTypes.bool,
    highlighted: PropTypes.bool,
    style: PropTypes.object,
    tableRow: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableSelectRow.defaultProps = {
    children: null,
    className: undefined,
    onToggle: () => {},
    selectByRowClick: false,
    highlighted: false,
    style: null,
    tableRow: undefined,
    forwardedRef: undefined
  };

  const TableSelectionWithWidth = props => /*#__PURE__*/React.createElement(dxReactGrid.TableSelection, _extends({
    selectionColumnWidth: 40
  }, props));

  TableSelectionWithWidth.components = dxReactGrid.TableSelection.components;
  const TableSelection = dxReactCore.withComponents({
    Row: TableSelectRow,
    Cell: TableSelectCell,
    HeaderCell: TableSelectAllCell
  })(TableSelectionWithWidth);
  TableSelection.COLUMN_TYPE = dxReactGrid.TableSelection.COLUMN_TYPE;

  const TableHead = ({
    isFixed,
    className,
    style,
    ...restProps
  }) => {
    const backgroundColor = React.useContext(BodyColorContext);
    return /*#__PURE__*/React.createElement("thead", _extends({
      className: classNames({
        'dx-g-bs4-fixed-header': isFixed,
        'dx-g-bs4-table-sticky': isFixed
      }, className),
      style: { ...(isFixed && {
          backgroundColor
        }),
        ...style
      }
    }, restProps));
  };
  process.env.NODE_ENV !== "production" ? TableHead.propTypes = {
    className: PropTypes.string,
    isFixed: PropTypes.bool,
    style: PropTypes.object
  } : void 0;
  TableHead.defaultProps = {
    isFixed: undefined,
    style: undefined,
    className: undefined
  };
  const TableBody = ({
    isFixed,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tbody", restProps);
  process.env.NODE_ENV !== "production" ? TableBody.propTypes = {
    isFixed: PropTypes.bool
  } : void 0;
  TableBody.defaultProps = {
    isFixed: undefined
  };
  const TableFooter = ({
    isFixed,
    ...restProps
  }) => {
    const backgroundColor = React.useContext(BodyColorContext);
    return /*#__PURE__*/React.createElement("tfoot", _extends({
      className: classNames({
        'dx-g-bs4-fixed-footer': isFixed,
        'dx-g-bs4-table-sticky': isFixed
      }),
      style: { ...(isFixed && {
          backgroundColor
        })
      }
    }, restProps));
  };
  process.env.NODE_ENV !== "production" ? TableFooter.propTypes = {
    isFixed: PropTypes.bool
  } : void 0;
  TableFooter.defaultProps = {
    isFixed: undefined
  };

  const MINIMAL_COLUMN_WIDTH = 150;
  const TableLayout = props => /*#__PURE__*/React.createElement(dxReactGrid.TableLayout, _extends({
    layoutComponent: dxReactGrid.StaticTableLayout,
    minColumnWidth: MINIMAL_COLUMN_WIDTH
  }, props));

  const TableStubCell = ({
    className,
    tableRow,
    tableColumn,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    ref: forwardedRef,
    className: classNames('p-0', className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableStubCell.propTypes = {
    className: PropTypes.string,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableStubCell.defaultProps = {
    className: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    forwardedRef: undefined
  };

  const TableStubHeaderCell = ({
    className,
    tableRow,
    tableColumn,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    className: classNames({
      'p-0': true
    }, className),
    ref: forwardedRef
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableStubHeaderCell.propTypes = {
    className: PropTypes.string,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    forwardedRef: PropTypes.func
  } : void 0;
  TableStubHeaderCell.defaultProps = {
    className: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    forwardedRef: undefined
  };

  const TableNoDataCell = ({
    className,
    colSpan,
    getMessage,
    tableRow,
    tableColumn,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('py-5 dx-g-bs4-no-data-cell', className),
    colSpan: colSpan
  }, restProps), /*#__PURE__*/React.createElement("div", {
    className: "dx-g-bs4-fixed-block"
  }, /*#__PURE__*/React.createElement("big", {
    className: "text-muted"
  }, getMessage('noData'))));
  process.env.NODE_ENV !== "production" ? TableNoDataCell.propTypes = {
    colSpan: PropTypes.number,
    getMessage: PropTypes.func.isRequired,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    className: PropTypes.string
  } : void 0;
  TableNoDataCell.defaultProps = {
    className: undefined,
    colSpan: 1,
    tableRow: undefined,
    tableColumn: undefined
  };

  const Table = ({
    children,
    use,
    style,
    className,
    forwardedRef,
    ...restProps
  }) => {
    const backgroundColor = React.useContext(BodyColorContext);
    return /*#__PURE__*/React.createElement("table", _extends({
      ref: forwardedRef,
      className: classNames({
        'table dx-g-bs4-table': true,
        'dx-g-bs4-table-sticky': !!use,
        'dx-g-bs4-table-head': use === 'head',
        'dx-g-bs4-table-foot': use === 'foot'
      }, className)
    }, restProps, {
      style: { ...style,
        ...(use ? {
          backgroundColor
        } : null)
      }
    }), children);
  };
  process.env.NODE_ENV !== "production" ? Table.propTypes = {
    use: PropTypes.oneOf(['head', 'foot']),
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
    style: PropTypes.object,
    className: PropTypes.string,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  Table.defaultProps = {
    className: undefined,
    use: undefined,
    style: null,
    forwardedRef: undefined
  };

  const TableContainer = ({
    children,
    className,
    style,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    ref: forwardedRef,
    className: classNames('table-responsive dx-g-bs4-table-container', className),
    style: {
      msOverflowStyle: 'auto',
      ...style
    }
  }, restProps), /*#__PURE__*/React.createElement("div", null, children));
  process.env.NODE_ENV !== "production" ? TableContainer.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
    className: PropTypes.string,
    style: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableContainer.defaultProps = {
    className: undefined,
    style: null,
    forwardedRef: undefined
  };

  const TableStubRow = ({
    children,
    tableRow,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("tr", _extends({
    ref: forwardedRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableStubRow.propTypes = {
    children: PropTypes.node,
    tableRow: PropTypes.object,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  TableStubRow.defaultProps = {
    children: null,
    tableRow: undefined,
    forwardedRef: undefined
  };

  const Table$1 = dxReactCore.withComponents({
    Table: Table,
    TableHead,
    TableBody,
    TableFooter,
    Container: TableContainer,
    Layout: TableLayout,
    Row: TableRow,
    Cell: TableCell,
    NoDataRow: TableRow,
    NoDataCell: TableNoDataCell,
    StubRow: TableStubRow,
    StubCell: TableStubCell,
    StubHeaderCell: TableStubHeaderCell
  })(dxReactGrid.Table);
  Table$1.COLUMN_TYPE = dxReactGrid.Table.COLUMN_TYPE;
  Table$1.ROW_TYPE = dxReactGrid.Table.ROW_TYPE;
  Table$1.NODATA_ROW_TYPE = dxReactGrid.Table.NODATA_ROW_TYPE;

  const TableSkeletonCell = ({
    className,
    tableRow,
    tableColumn,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames('dx-g-bs4-skeleton-cell', className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableSkeletonCell.propTypes = {
    className: PropTypes.string,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object
  } : void 0;
  TableSkeletonCell.defaultProps = {
    className: undefined,
    tableRow: undefined,
    tableColumn: undefined
  };

  const MINIMAL_COLUMN_WIDTH$1 = 150;
  const VirtualTableLayout = props => /*#__PURE__*/React.createElement(dxReactGrid.TableLayout, _extends({
    layoutComponent: dxReactGrid.VirtualTableLayout,
    minColumnWidth: MINIMAL_COLUMN_WIDTH$1
  }, props));

  const FixedHeader = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Table, _extends({
    use: "head",
    ref: ref
  }, props)));
  const FixedFooter = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Table, _extends({
    use: "foot",
    ref: ref
  }, props)));
  const VirtualTable = dxReactGrid.makeVirtualTable(Table$1, {
    VirtualLayout: VirtualTableLayout,
    FixedHeader,
    FixedFooter,
    SkeletonCell: TableSkeletonCell,
    defaultEstimatedRowHeight: 49,
    defaultHeight: 530
  });
  VirtualTable.COLUMN_TYPE = Table$1.COLUMN_TYPE;
  VirtualTable.ROW_TYPE = Table$1.ROW_TYPE;
  VirtualTable.NODATA_ROW_TYPE = Table$1.NODATA_ROW_TYPE;

  const TableFilterCell = ({
    filter,
    onFilter,
    children,
    column,
    tableRow,
    tableColumn,
    getMessage,
    filteringEnabled,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement("div", {
    className: "input-group"
  }, children));
  process.env.NODE_ENV !== "production" ? TableFilterCell.propTypes = {
    filter: PropTypes.object,
    onFilter: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    column: PropTypes.object,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    getMessage: PropTypes.func,
    filteringEnabled: PropTypes.bool,
    forwardedRef: PropTypes.func
  } : void 0;
  TableFilterCell.defaultProps = {
    filter: null,
    onFilter: () => {},
    children: undefined,
    column: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    getMessage: undefined,
    filteringEnabled: true,
    forwardedRef: undefined
  };

  const Editor = ({
    value,
    disabled,
    getMessage,
    onChange,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("input", _extends({
    type: "text",
    className: classNames('form-control', className),
    value: value,
    onChange: event => onChange(event.target.value),
    readOnly: disabled,
    placeholder: getMessage('filterPlaceholder')
  }, restProps));
  process.env.NODE_ENV !== "production" ? Editor.propTypes = {
    value: PropTypes.any,
    disabled: PropTypes.bool,
    onChange: PropTypes.func,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string
  } : void 0;
  Editor.defaultProps = {
    value: '',
    disabled: false,
    onChange: () => {},
    className: undefined
  };

  class FilterSelector extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        opened: false
      };

      this.handleButtonClick = () => {
        this.setState(prevState => ({
          opened: !prevState.opened
        }));
      };

      this.handleOverlayToggle = () => {
        const {
          opened
        } = this.state;
        if (opened) this.setState({
          opened: false
        });
      };

      this.handleMenuItemClick = nextValue => {
        const {
          onChange
        } = this.props;
        this.setState({
          opened: false
        });
        onChange(nextValue);
      };
    }

    render() {
      const {
        value,
        availableValues,
        disabled,
        getMessage,
        iconComponent: Icon,
        toggleButtonComponent: ToggleButton,
        className,
        ...restProps
      } = this.props;
      const {
        opened
      } = this.state;
      return availableValues.length ? /*#__PURE__*/React.createElement("div", _extends({
        className: classNames('input-group-prepend', className)
      }, restProps), /*#__PURE__*/React.createElement(ToggleButton, {
        disabled: disabled || availableValues.length === 1,
        onToggle: this.handleButtonClick,
        buttonRef: ref => {
          this.targetElement = ref;
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        type: value
      })), this.targetElement ? /*#__PURE__*/React.createElement(Popover, {
        placement: "bottom",
        isOpen: opened,
        target: this.targetElement,
        toggle: this.handleOverlayToggle
      }, /*#__PURE__*/React.createElement("div", {
        className: "py-2"
      }, availableValues.map(valueItem => /*#__PURE__*/React.createElement("button", {
        type: "button",
        key: valueItem,
        className: classNames({
          'dropdown-item d-flex align-items-center': true,
          'dx-g-bs4-cursor-pointer dx-g-bs4-filter-selector-item': true,
          active: valueItem === value
        }),
        onClick: () => this.handleMenuItemClick(valueItem)
      }, /*#__PURE__*/React.createElement(Icon, {
        type: valueItem
      }), /*#__PURE__*/React.createElement("span", {
        className: "dx-g-bs4-filter-selector-item-text"
      }, getMessage(valueItem)))))) : null) : null;
    }

  }
  process.env.NODE_ENV !== "production" ? FilterSelector.propTypes = {
    value: PropTypes.string,
    availableValues: PropTypes.arrayOf(PropTypes.string),
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    // oneOfType is a workaround because React.memo returns react object
    iconComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
    toggleButtonComponent: PropTypes.func.isRequired,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string
  } : void 0;
  FilterSelector.defaultProps = {
    value: undefined,
    availableValues: [],
    onChange: () => {},
    disabled: false,
    className: undefined
  };

  const ToggleButton$1 = ({
    buttonRef,
    onToggle,
    disabled,
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    className: classNames('btn btn-outline-secondary', className),
    disabled: disabled,
    onClick: onToggle,
    ref: buttonRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? ToggleButton$1.propTypes = {
    buttonRef: PropTypes.func.isRequired,
    onToggle: PropTypes.func.isRequired,
    children: PropTypes.node,
    disabled: PropTypes.bool,
    className: PropTypes.string
  } : void 0;
  ToggleButton$1.defaultProps = {
    children: undefined,
    className: undefined,
    disabled: false
  };

  const AVAILABLE_PATHS = {
    contains: 'M6.094 19.563l-2.031 0.281c-0.646 0.094-1.13 0.266-1.453 0.516-0.302 0.24-0.453 0.646-0.453 1.219 0 0.438 0.138 0.799 0.414 1.086s0.664 0.419 1.164 0.398c0.708 0 1.281-0.24 1.719-0.719 0.427-0.49 0.641-1.125 0.641-1.906v-0.875zM8.234 24.641h-2.172v-1.641c-0.677 1.24-1.661 1.859-2.953 1.859-0.927 0-1.682-0.276-2.266-0.828-0.552-0.552-0.828-1.292-0.828-2.219 0-1.927 1.068-3.052 3.203-3.375l2.875-0.438c0-1.469-0.656-2.203-1.969-2.203-1.177 0-2.224 0.427-3.141 1.281v-2.078c1.010-0.656 2.198-0.984 3.563-0.984 2.458 0 3.687 1.302 3.687 3.906v6.719zM14.734 16.797c0.521-0.583 1.167-0.875 1.938-0.875 0.74 0 1.323 0.281 1.75 0.844 0.448 0.583 0.672 1.38 0.672 2.391 0 1.188-0.24 2.13-0.719 2.828-0.49 0.677-1.13 1.016-1.922 1.016-0.719 0-1.302-0.271-1.75-0.813-0.427-0.51-0.641-1.141-0.641-1.891v-1.266c-0.021-0.906 0.203-1.651 0.672-2.234zM16.969 24.859c1.375 0 2.443-0.521 3.203-1.562 0.781-1.042 1.172-2.427 1.172-4.156 0-1.542-0.354-2.771-1.063-3.688-0.688-0.958-1.651-1.438-2.891-1.438-1.427 0-2.531 0.693-3.313 2.078v-6.781h-2.156v15.328h2.172v-1.5c0.677 1.146 1.635 1.719 2.875 1.719zM22.266 6.125c0.135 0 0.245 0.063 0.328 0.188 0.104 0.073 0.156 0.182 0.156 0.328v22.953c0 0.125-0.052 0.24-0.156 0.344-0.083 0.115-0.193 0.172-0.328 0.172h-12.281c-0.146 0-0.266-0.057-0.359-0.172-0.115-0.115-0.172-0.229-0.172-0.344v-22.953c0-0.135 0.057-0.245 0.172-0.328 0.094-0.125 0.214-0.188 0.359-0.188h12.281zM31.531 24.141c-0.76 0.479-1.693 0.719-2.797 0.719-1.427 0-2.589-0.479-3.484-1.438-0.865-0.958-1.286-2.198-1.266-3.719 0-1.688 0.448-3.052 1.344-4.094 0.917-1.042 2.208-1.573 3.875-1.594 0.854 0 1.63 0.177 2.328 0.531v2.156c-0.677-0.531-1.391-0.792-2.141-0.781-0.938 0-1.714 0.339-2.328 1.016-0.594 0.677-0.891 1.552-0.891 2.625 0 1.042 0.297 1.88 0.891 2.516 0.521 0.615 1.25 0.922 2.188 0.922 0.813 0 1.573-0.297 2.281-0.891v2.031z',
    notContains: 'M5.828 20.469v0.328c0 0.385-0.057 0.667-0.172 0.844-0.052 0.083-0.117 0.177-0.195 0.281s-0.174 0.224-0.289 0.359c-0.458 0.521-1.031 0.771-1.719 0.75-0.521 0-0.927-0.141-1.219-0.422-0.292-0.292-0.438-0.661-0.438-1.109 0-0.156 0.010-0.273 0.031-0.352s0.052-0.141 0.094-0.188 0.094-0.086 0.156-0.117 0.141-0.078 0.234-0.141c0.031-0.031 0.078-0.070 0.141-0.117s0.146-0.086 0.25-0.117h3.125zM14.016 18.328c0.010-0.406 0.070-0.729 0.18-0.969s0.289-0.49 0.539-0.75c0.479-0.604 1.13-0.906 1.953-0.906 0.75 0 1.344 0.292 1.781 0.875 0.198 0.25 0.349 0.495 0.453 0.734s0.172 0.578 0.203 1.016h-5.109zM19.078 20.469c-0.063 0.427-0.146 0.708-0.25 0.844-0.052 0.073-0.109 0.159-0.172 0.258l-0.219 0.352c-0.469 0.688-1.135 1.031-2 1.031-0.708 0-1.297-0.271-1.766-0.813l-0.305-0.359c-0.089-0.104-0.159-0.198-0.211-0.281-0.104-0.167-0.156-0.448-0.156-0.844v-0.188h5.078zM33.344 18.328l-6.875 0c0.031-0.198 0.070-0.372 0.117-0.523s0.107-0.284 0.18-0.398 0.154-0.224 0.242-0.328l0.305-0.344c0.604-0.688 1.391-1.031 2.359-1.031 0.771 0 1.51 0.266 2.219 0.797v-2.234c-0.75-0.333-1.552-0.5-2.406-0.5-1.667 0-2.974 0.531-3.922 1.594-0.396 0.427-0.708 0.859-0.938 1.297s-0.385 0.995-0.469 1.672h-2.719c-0.021-0.719-0.117-1.31-0.289-1.773s-0.424-0.914-0.758-1.352c-0.729-0.938-1.719-1.417-2.969-1.438-1.479 0-2.615 0.708-3.406 2.125v-6.953h-2.266v9.391h-3.75v-0.594c0-2.646-1.25-3.969-3.75-3.969-1.365 0-2.583 0.328-3.656 0.984v2.125c0.99-0.865 2.063-1.297 3.219-1.297 1.344 0 2.016 0.75 2.016 2.25l-2.953 0.125c-0.25 0.021-0.487 0.070-0.711 0.148l-0.633 0.227h-3.328v2.141h1.828l-0.281 0.594c-0.073 0.135-0.109 0.37-0.109 0.703 0 0.938 0.276 1.682 0.828 2.234 0.542 0.573 1.313 0.859 2.313 0.859 1.281 0 2.297-0.635 3.047-1.906v1.656h2.172v-4.141h3.75v4.141h2.297v-1.516c0.677 1.188 1.661 1.776 2.953 1.766 1.385 0 2.464-0.531 3.234-1.594 0.302-0.385 0.557-0.792 0.766-1.219 0.198-0.385 0.339-0.911 0.422-1.578h2.703c0.021 0.708 0.141 1.25 0.359 1.625 0.115 0.198 0.253 0.401 0.414 0.609s0.346 0.427 0.555 0.656c0.906 1 2.099 1.5 3.578 1.5 1.104 0 2.057-0.245 2.859-0.734v-2.109c-0.75 0.604-1.526 0.917-2.328 0.938-0.979 0-1.74-0.318-2.281-0.953l-0.328-0.328c-0.094-0.094-0.177-0.195-0.25-0.305s-0.13-0.234-0.172-0.375-0.073-0.315-0.094-0.523h6.906v-2.141zM33.297 5.688c0.146 0 0.266 0.047 0.359 0.141 0.104 0.104 0.156 0.229 0.156 0.375v23.484c0 0.135-0.052 0.255-0.156 0.359-0.094 0.115-0.214 0.172-0.359 0.172h-35.078c-0.135 0-0.26-0.057-0.375-0.172-0.094-0.115-0.135-0.234-0.125-0.359v-23.484c0-0.104 0.042-0.229 0.125-0.375 0.104-0.094 0.229-0.141 0.375-0.141h35.078z',
    startsWith: 'M6.109 20.688c0 0.813-0.219 1.474-0.656 1.984-0.448 0.531-1.010 0.786-1.688 0.766-0.51 0-0.896-0.141-1.156-0.422-0.302-0.292-0.443-0.667-0.422-1.125 0-0.615 0.151-1.042 0.453-1.281 0.177-0.135 0.378-0.245 0.602-0.328s0.497-0.146 0.82-0.188l2.047-0.313v0.906zM8.203 18.063c0-2.688-1.219-4.031-3.656-4.031-1.333 0-2.51 0.339-3.531 1.016v2.141c0.917-0.885 1.948-1.328 3.094-1.328 1.333 0 2 0.766 2 2.297l-2.891 0.453c-2.115 0.333-3.161 1.516-3.141 3.547 0 0.958 0.266 1.724 0.797 2.297 0.542 0.573 1.292 0.859 2.25 0.859 1.292 0 2.26-0.641 2.906-1.922v1.688h2.172v-7.016zM14.703 16.906c0.479-0.604 1.109-0.906 1.891-0.906 0.76 0 1.344 0.297 1.75 0.891 0.438 0.615 0.656 1.443 0.656 2.484 0 1.219-0.229 2.198-0.688 2.938-0.469 0.719-1.109 1.078-1.922 1.078-0.719 0-1.286-0.281-1.703-0.844-0.448-0.542-0.672-1.208-0.672-2v-1.313c-0.010-0.938 0.219-1.714 0.688-2.328zM16.906 25.313c1.365 0 2.422-0.542 3.172-1.625 0.771-1.115 1.156-2.563 1.156-4.344 0-1.604-0.339-2.885-1.016-3.844-0.698-0.979-1.661-1.469-2.891-1.469-1.438 0-2.531 0.719-3.281 2.156v-7.078h-2.188v15.969h2.172v-1.563c0.667 1.198 1.625 1.797 2.875 1.797zM31.375 24.563c-0.75 0.5-1.672 0.75-2.766 0.75-1.427 0-2.583-0.505-3.469-1.516-0.885-0.969-1.318-2.26-1.297-3.875 0-1.74 0.464-3.161 1.391-4.266 0.927-1.063 2.198-1.604 3.813-1.625 0.844 0 1.62 0.172 2.328 0.516v2.25c-0.688-0.563-1.406-0.828-2.156-0.797-0.927 0-1.688 0.349-2.281 1.047-0.583 0.698-0.875 1.609-0.875 2.734 0 1.094 0.281 1.969 0.844 2.625 0.542 0.656 1.286 0.984 2.234 0.984 0.781 0 1.526-0.323 2.234-0.969v2.141zM22.172 5.844c0.115 0 0.224 0.052 0.328 0.156 0.094 0.125 0.141 0.25 0.141 0.375v23.844c0 0.156-0.047 0.286-0.141 0.391-0.115 0.094-0.224 0.141-0.328 0.141h-23.469c-0.125 0-0.24-0.047-0.344-0.141-0.094-0.104-0.141-0.234-0.141-0.391v-23.844c0-0.125 0.047-0.25 0.141-0.375 0.104-0.104 0.219-0.156 0.344-0.156h23.469z',
    endsWith: 'M6.234 19.344l-2.047 0.313c-0.625 0.083-1.104 0.26-1.438 0.531-0.302 0.24-0.453 0.651-0.453 1.234 0 0.469 0.141 0.852 0.422 1.148s0.672 0.435 1.172 0.414c0.677 0 1.234-0.25 1.672-0.75 0.448-0.51 0.672-1.167 0.672-1.969v-0.922zM8.359 24.578h-2.141v-1.656c-0.667 1.26-1.656 1.891-2.969 1.891-0.938 0-1.698-0.276-2.281-0.828-0.542-0.573-0.813-1.328-0.813-2.266 0-2.021 1.063-3.188 3.188-3.5l2.891-0.484c0-1.51-0.661-2.266-1.984-2.266-1.167 0-2.214 0.443-3.141 1.328v-2.125c1.042-0.677 2.224-1.016 3.547-1.016 2.469 0 3.703 1.333 3.703 4v6.922zM14.906 16.516c0.49-0.615 1.13-0.922 1.922-0.922 0.76 0 1.339 0.297 1.734 0.891 0.438 0.615 0.656 1.438 0.656 2.469 0 1.208-0.229 2.182-0.688 2.922-0.469 0.698-1.115 1.047-1.938 1.047-0.708 0-1.276-0.276-1.703-0.828-0.458-0.552-0.688-1.214-0.688-1.984v-1.281c-0.010-0.948 0.224-1.719 0.703-2.313zM17.125 24.813c1.354 0 2.417-0.531 3.188-1.594 0.781-1.073 1.172-2.505 1.172-4.297 0-1.604-0.349-2.87-1.047-3.797-0.698-0.979-1.661-1.469-2.891-1.469-1.438 0-2.542 0.714-3.313 2.141v-7h-2.203v15.781h2.188v-1.531c0.677 1.177 1.646 1.766 2.906 1.766zM31.688 21.969c-0.698 0.635-1.453 0.953-2.266 0.953-0.958 0-1.703-0.323-2.234-0.969-0.563-0.667-0.849-1.536-0.859-2.609 0-1.115 0.297-2.016 0.891-2.703 0.594-0.698 1.359-1.047 2.297-1.047 0.76 0 1.484 0.266 2.172 0.797v-2.219c-0.708-0.344-1.49-0.516-2.344-0.516-1.625 0-2.906 0.536-3.844 1.609-0.938 1.083-1.406 2.495-1.406 4.234 0 1.594 0.438 2.875 1.313 3.844 0.885 0.979 2.052 1.469 3.5 1.469 1.083 0 2.010-0.245 2.781-0.734v-2.109zM33.188 5.563c0.104 0 0.219 0.047 0.344 0.141 0.094 0.146 0.141 0.276 0.141 0.391v23.578c0 0.146-0.047 0.281-0.141 0.406-0.125 0.094-0.24 0.141-0.344 0.141h-23.625c-0.125 0-0.24-0.047-0.344-0.141-0.094-0.135-0.135-0.271-0.125-0.406v-23.578c0-0.115 0.042-0.245 0.125-0.391 0.094-0.094 0.208-0.141 0.344-0.141h23.625z',
    equal: 'M29.438 11.797v2.75h-26.922v-2.75h26.922zM29.438 17.406v2.75h-26.922v-2.75h26.922z',
    notEqual: 'M16.906 11.797l3.016-6.547 2.094 1-2.547 5.547h9.969v2.75h-11.234l-1.328 2.859h12.563v2.75h-13.828l-2.875 6.281-2.094-0.984 2.438-5.297h-10.563v-2.75h11.828l1.297-2.859h-13.125v-2.75h14.391z',
    greaterThan: 'M24.125 16.047l-14.906 8.625-1.375-2.375 10.781-6.25-10.781-6.234 1.375-2.375z',
    greaterThanOrEqual: 'M23.031 14.328l-14.906 8.625-1.375-2.375 10.797-6.25-10.797-6.234 1.375-2.375zM23.828 15.641l1.375 2.391-14.938 8.609-1.375-2.375z',
    lessThan: 'M22.75 7.438l1.375 2.375-10.781 6.234 10.781 6.25-1.375 2.375-14.906-8.609z',
    lessThanOrEqual: 'M23.828 5.719l1.375 2.375-10.813 6.234 10.813 6.25-1.375 2.375-14.922-8.609zM23.047 24.266l-1.375 2.375-14.922-8.609 1.375-2.391z'
  };
  const Icon = /*#__PURE__*/React.memo(({
    type,
    className,
    ...restProps
  }) => {
    const path = AVAILABLE_PATHS[type];
    return path ? /*#__PURE__*/React.createElement("svg", _extends({
      className: classNames('d-block dx-g-bs4-filter-selector-icon', className),
      viewBox: "0 0 32 32"
    }, restProps), /*#__PURE__*/React.createElement("path", {
      d: path
    })) : /*#__PURE__*/React.createElement("span", _extends({
      className: classNames('d-block', 'oi', 'oi-magnifying-glass', 'dx-g-bs4-filter-selector-icon', className)
    }, restProps));
  });
  process.env.NODE_ENV !== "production" ? Icon.propTypes = {
    type: PropTypes.string,
    className: PropTypes.string
  } : void 0;
  Icon.defaultProps = {
    type: undefined,
    className: undefined
  };

  const TableFilterRow = dxReactCore.withComponents({
    Row: TableRow,
    Cell: TableFilterCell,
    Editor,
    FilterSelector,
    Icon,
    ToggleButton: ToggleButton$1
  })(dxReactGrid.TableFilterRow);
  TableFilterRow.ROW_TYPE = dxReactGrid.TableFilterRow.ROW_TYPE;

  class ResizingControl extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        resizing: false
      };

      this.onResizeStart = ({
        x
      }) => {
        this.resizeStartingX = x;
        this.setState({
          resizing: true
        });
      };

      this.onResizeUpdate = ({
        x
      }) => {
        const {
          onWidthDraft
        } = this.props;

        if (x >= 0) {
          onWidthDraft({
            shift: x - this.resizeStartingX
          });
        }
      };

      this.onResizeEnd = ({
        x
      }) => {
        const {
          onWidthChange,
          onWidthDraftCancel
        } = this.props;
        onWidthDraftCancel();
        onWidthChange({
          shift: x - this.resizeStartingX
        });
        this.setState({
          resizing: false
        });
      };
    }

    render() {
      const {
        resizing
      } = this.state;
      return /*#__PURE__*/React.createElement(dxReactCore.Draggable, {
        onStart: this.onResizeStart,
        onUpdate: this.onResizeUpdate,
        onEnd: this.onResizeEnd
      }, /*#__PURE__*/React.createElement("div", {
        className: classNames({
          'dx-g-bs4-resizing-control-wrapper': true,
          'dx-g-bs4-resizing-control-wrapper-active': resizing
        })
      }, /*#__PURE__*/React.createElement("div", {
        className: classNames({
          'dx-g-bs4-resize-control-line dx-g-bs4-resize-control-line-first bg-primary': true,
          'dx-g-bs4-resize-control-line-active': resizing
        })
      }), /*#__PURE__*/React.createElement("div", {
        className: classNames({
          'dx-g-bs4-resize-control-line dx-g-bs4-resize-control-line-second bg-primary': true,
          'dx-g-bs4-resize-control-line-active': resizing
        })
      })));
    }

  }
  process.env.NODE_ENV !== "production" ? ResizingControl.propTypes = {
    onWidthChange: PropTypes.func.isRequired,
    onWidthDraft: PropTypes.func.isRequired,
    onWidthDraftCancel: PropTypes.func.isRequired
  } : void 0;

  const CellLayout = ({
    column,
    tableColumn,
    draggingEnabled,
    resizingEnabled,
    dragging,
    onWidthChange,
    onWidthDraft,
    onWidthDraftCancel,
    getCellWidth,
    tableRow,
    className,
    children,
    forwardedRef,
    ...restProps
  }) => {
    const cellRef = React.useRef();
    const getWidthGetter = React.useCallback(() => {
      const node = cellRef.current;
      return node && getCellWidth(() => {
        const {
          width
        } = node.getBoundingClientRect();
        return width;
      });
    });
    React.useEffect(() => {
      getWidthGetter();
    }, []);
    return /*#__PURE__*/React.createElement("th", _extends({
      className: classNames({
        'position-relative dx-g-bs4-header-cell': true,
        'dx-g-bs4-user-select-none': draggingEnabled,
        'dx-g-bs4-cursor-pointer': draggingEnabled,
        'dx-g-bs4-inactive': dragging || tableColumn && tableColumn.draft,
        'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled)
      }, className),
      scope: "col",
      ref: node => {
        cellRef.current = node;

        if (typeof forwardedRef === 'function') {
          forwardedRef(node);
        } else if (forwardedRef) {
          // eslint-disable-next-line no-param-reassign
          forwardedRef.current = node;
        }
      }
    }, restProps), /*#__PURE__*/React.createElement("div", {
      className: "d-flex flex-direction-row align-items-center"
    }, children), resizingEnabled && /*#__PURE__*/React.createElement(ResizingControl, {
      onWidthChange: onWidthChange,
      onWidthDraft: onWidthDraft,
      onWidthDraftCancel: onWidthDraftCancel
    }));
  };
  process.env.NODE_ENV !== "production" ? CellLayout.propTypes = {
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    column: PropTypes.object,
    dragging: PropTypes.bool,
    draggingEnabled: PropTypes.bool,
    resizingEnabled: PropTypes.bool,
    onWidthChange: PropTypes.func,
    onWidthDraft: PropTypes.func,
    onWidthDraftCancel: PropTypes.func,
    className: PropTypes.string,
    children: PropTypes.node,
    getCellWidth: PropTypes.func,
    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
  } : void 0;
  CellLayout.defaultProps = {
    column: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    dragging: false,
    draggingEnabled: false,
    resizingEnabled: false,
    onWidthChange: undefined,
    onWidthDraft: undefined,
    onWidthDraftCancel: undefined,
    className: undefined,
    children: undefined,
    getCellWidth: () => {},
    forwardedRef: undefined
  };

  class TableHeaderCell extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        dragging: false
      };
      this.dragRef = /*#__PURE__*/React.createRef();

      this.onDragStart = () => {
        this.setState({
          dragging: true
        });
      };

      this.onDragEnd = () => {
        if (this.dragRef.current) {
          this.setState({
            dragging: false
          });
        }
      };
    }

    render() {
      const {
        column,
        draggingEnabled
      } = this.props;
      const {
        dragging
      } = this.state;
      return draggingEnabled ? /*#__PURE__*/React.createElement(dxReactCore.DragSource, {
        ref: this.dragRef,
        payload: [{
          type: 'column',
          columnName: column.name
        }],
        onStart: this.onDragStart,
        onEnd: this.onDragEnd
      }, /*#__PURE__*/React.createElement(CellLayout, _extends({}, this.props, {
        dragging: dragging
      }))) : /*#__PURE__*/React.createElement(CellLayout, _extends({}, this.props, {
        dragging: dragging
      }));
    }

  }
  process.env.NODE_ENV !== "production" ? TableHeaderCell.propTypes = {
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    column: PropTypes.object,
    className: PropTypes.string,
    draggingEnabled: PropTypes.bool,
    resizingEnabled: PropTypes.bool,
    onWidthChange: PropTypes.func,
    onWidthDraft: PropTypes.func,
    onWidthDraftCancel: PropTypes.func,
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    getCellWidth: PropTypes.func
  } : void 0;
  TableHeaderCell.defaultProps = {
    column: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    className: undefined,
    draggingEnabled: false,
    resizingEnabled: false,
    onWidthChange: undefined,
    onWidthDraft: undefined,
    onWidthDraftCancel: undefined,
    children: undefined,
    getCellWidth: () => {}
  };

  const handleMouseDown$2 = e => {
    e.currentTarget.style.outline = 'none';
  };

  const handleBlur$2 = e => {
    e.currentTarget.style.outline = '';
  };

  const ENTER_KEY_CODE$2 = 13;
  const SPACE_KEY_CODE$2 = 32;

  const onClick = (e, onSort) => {
    const isActionKeyDown = e.keyCode === ENTER_KEY_CODE$2 || e.keyCode === SPACE_KEY_CODE$2;
    const isMouseClick = e.keyCode === undefined;
    if (!(isActionKeyDown || isMouseClick)) return;
    const cancelSortingRelatedKey = e.metaKey || e.ctrlKey;
    const direction = (isMouseClick || isActionKeyDown) && cancelSortingRelatedKey ? null : undefined;
    const keepOther = e.shiftKey || cancelSortingRelatedKey;
    e.preventDefault();
    onSort({
      direction,
      keepOther
    });
  };

  const SortLabel = ({
    align,
    direction,
    disabled,
    children,
    onSort,
    getMessage,
    className,
    column,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", _extends({
    className: classNames({
      'd-inline-flex flex-direction-row align-items-center mw-100 dx-g-bs4-user-select-none': true,
      'dx-g-bs4-cursor-pointer': !disabled,
      'flex-row-reverse': align === 'right',
      'text-primary': direction
    }, className),
    tabIndex: disabled ? -1 : 0,
    onMouseDown: handleMouseDown$2,
    onBlur: handleBlur$2
  }, !disabled ? {
    onKeyDown: e => onClick(e, onSort),
    onClick: e => onClick(e, onSort)
  } : null, restProps), children, /*#__PURE__*/React.createElement(SortingIndicator, {
    direction: direction,
    className: direction ? '' : 'dx-g-bs4-sort-indicator-invisible'
  }));
  process.env.NODE_ENV !== "production" ? SortLabel.propTypes = {
    column: PropTypes.object,
    align: PropTypes.string,
    direction: PropTypes.oneOf(['asc', 'desc']),
    children: PropTypes.node,
    onSort: PropTypes.func.isRequired,
    disabled: PropTypes.bool,
    className: PropTypes.string,
    getMessage: PropTypes.func
  } : void 0;
  SortLabel.defaultProps = {
    column: undefined,
    direction: null,
    disabled: false,
    children: undefined,
    className: undefined,
    align: 'left',
    getMessage: () => {}
  };

  const GroupButton = ({
    disabled,
    onGroup,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames({
      'dx-g-bs4-grouping-control': true
    }, className),
    onClick: e => {
      if (disabled) return;
      e.stopPropagation();
      onGroup();
    }
  }, restProps), /*#__PURE__*/React.createElement("span", {
    className: classNames({
      'oi oi-list dx-g-bs4-grouping-control-icon': true,
      'dx-g-bs4-cursor-pointer': !disabled,
      'dx-g-bs4-inactive': disabled
    })
  }));
  process.env.NODE_ENV !== "production" ? GroupButton.propTypes = {
    onGroup: PropTypes.func.isRequired,
    disabled: PropTypes.bool,
    className: PropTypes.string
  } : void 0;
  GroupButton.defaultProps = {
    disabled: false,
    className: undefined
  };

  const Title = ({
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("span", _extends({
    className: classNames('dx-rg-bs4-table-header-title', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Title.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    className: PropTypes.string
  } : void 0;
  Title.defaultProps = {
    className: null,
    children: undefined
  };

  const Content$1 = ({
    column,
    children,
    align,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames({
      'dx-g-bs4-header-cell-content w-100 d-flex flex-row align-items-end': true,
      'justify-content-center': align === 'center',
      'justify-content-end': align === 'right'
    }, className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Content$1.propTypes = {
    column: PropTypes.object,
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    align: PropTypes.string,
    className: PropTypes.string
  } : void 0;
  Content$1.defaultProps = {
    column: undefined,
    align: 'left',
    className: null,
    children: undefined
  };

  const TableHeaderRow = dxReactCore.withComponents({
    Cell: TableHeaderCell,
    Row: TableRow,
    Content: Content$1,
    SortLabel,
    Title,
    GroupButton
  })(dxReactGrid.TableHeaderRow);
  TableHeaderRow.ROW_TYPE = dxReactGrid.TableHeaderRow.ROW_TYPE;

  const Cell$1 = ({
    column,
    children,
    beforeBorder,
    tableRow,
    tableColumn,
    row,
    forwardedRef,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    className: classNames({
      'dx-g-bs4-banded-cell dx-g-bs4-table-cell text-nowrap border-right': true,
      'border-left': beforeBorder
    }, className),
    ref: forwardedRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? Cell$1.propTypes = {
    column: PropTypes.object,
    row: PropTypes.any,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    className: PropTypes.string,
    beforeBorder: PropTypes.bool,
    forwardedRef: PropTypes.func
  } : void 0;
  Cell$1.defaultProps = {
    column: undefined,
    row: undefined,
    children: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    className: undefined,
    beforeBorder: false,
    forwardedRef: undefined
  };

  const BandedHeaderCell = ({
    component: HeaderCellComponent,
    className,
    beforeBorder,
    ...restProps
  }) => /*#__PURE__*/React.createElement(HeaderCellComponent, _extends({
    className: classNames({
      'dx-g-bs4-banded-header-cell border-right': true,
      'border-left': beforeBorder
    }, className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? BandedHeaderCell.propTypes = {
    component: PropTypes.func.isRequired,
    className: PropTypes.string,
    beforeBorder: PropTypes.bool
  } : void 0;
  BandedHeaderCell.defaultProps = {
    className: undefined,
    beforeBorder: false
  };

  const InvisibleCell = () => /*#__PURE__*/React.createElement("th", {
    className: "d-none"
  });

  const TableBandHeader = dxReactCore.withComponents({
    Cell: Cell$1,
    Row: TableRow,
    BandedHeaderCell,
    InvisibleCell
  })(dxReactGrid.TableBandHeader);
  TableBandHeader.ROW_TYPE = dxReactGrid.TableBandHeader.ROW_TYPE;

  const EditCell = ({
    column,
    value,
    onValueChange,
    className,
    children,
    row,
    tableRow,
    tableColumn,
    editingEnabled,
    autoFocus,
    onBlur,
    onFocus,
    onKeyDown,
    forwardedRef,
    ...restProps
  }) => {
    const patchedChildren = children ? /*#__PURE__*/React.cloneElement(children, {
      autoFocus,
      onBlur,
      onFocus,
      onKeyDown
    }) : children;
    return /*#__PURE__*/React.createElement("td", _extends({
      className: classNames({
        'align-middle dx-g-bs4-table-edit-cell': true
      }, className),
      ref: forwardedRef
    }, restProps), patchedChildren || /*#__PURE__*/React.createElement("input", {
      type: "text",
      className: classNames({
        'form-control w-100': true,
        'text-right': tableColumn && tableColumn.align === 'right',
        'text-center': tableColumn && tableColumn.align === 'center'
      }),
      readOnly: !editingEnabled,
      value: value,
      onChange: e => onValueChange(e.target.value) // eslint-disable-next-line jsx-a11y/no-autofocus
      ,
      autoFocus: autoFocus,
      onBlur: onBlur,
      onFocus: onFocus,
      onKeyDown: onKeyDown
    }));
  };
  process.env.NODE_ENV !== "production" ? EditCell.propTypes = {
    column: PropTypes.object,
    row: PropTypes.any,
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    value: PropTypes.any,
    onValueChange: PropTypes.func,
    className: PropTypes.string,
    editingEnabled: PropTypes.bool,
    children: PropTypes.node,
    autoFocus: PropTypes.bool,
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    onKeyDown: PropTypes.func,
    forwardedRef: PropTypes.func
  } : void 0;
  EditCell.defaultProps = {
    column: undefined,
    row: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    className: undefined,
    children: undefined,
    editingEnabled: true,
    value: '',
    onValueChange: () => {},
    autoFocus: false,
    onBlur: () => {},
    onFocus: () => {},
    onKeyDown: () => {},
    forwardedRef: undefined
  };

  const TableEditRow = dxReactCore.withComponents({
    Row: TableRow,
    Cell: EditCell
  })(dxReactGrid.TableEditRow);
  TableEditRow.ADDED_ROW_TYPE = dxReactGrid.TableEditRow.ADDED_ROW_TYPE;
  TableEditRow.EDIT_ROW_TYPE = dxReactGrid.TableEditRow.EDIT_ROW_TYPE;

  const CommandButton = ({
    onExecute,
    text,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    className: classNames('btn btn-link dx-g-bs4-table-edit-command-cell', className),
    onClick: e => {
      e.stopPropagation();
      onExecute();
    }
  }, restProps), text);
  process.env.NODE_ENV !== "production" ? CommandButton.propTypes = {
    text: PropTypes.string.isRequired,
    onExecute: PropTypes.func.isRequired,
    className: PropTypes.string
  } : void 0;
  CommandButton.defaultProps = {
    className: undefined
  };
  const EditCommandHeadingCell = ({
    children,
    className,
    tableColumn,
    tableRow,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("th", _extends({
    className: classNames({
      'text-center p-0 text-nowrap': true
    }, className),
    ref: forwardedRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? EditCommandHeadingCell.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    className: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  EditCommandHeadingCell.defaultProps = {
    children: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    className: undefined,
    forwardedRef: undefined
  };
  const EditCommandCell = ({
    tableColumn,
    tableRow,
    row,
    children,
    className,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    className: classNames({
      'text-center p-0 text-nowrap': true
    }, className),
    ref: forwardedRef
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? EditCommandCell.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
    tableColumn: PropTypes.object,
    tableRow: PropTypes.object,
    row: PropTypes.any,
    className: PropTypes.string,
    forwardedRef: PropTypes.func
  } : void 0;
  EditCommandCell.defaultProps = {
    children: undefined,
    tableColumn: undefined,
    tableRow: undefined,
    row: undefined,
    className: undefined,
    forwardedRef: undefined
  };

  const TableEditColumn = dxReactCore.withComponents({
    Cell: EditCommandCell,
    HeaderCell: EditCommandHeadingCell,
    Command: CommandButton
  })(dxReactGrid.TableEditColumn);
  TableEditColumn.COLUMN_TYPE = dxReactGrid.TableEditColumn.COLUMN_TYPE;

  const EmptyMessage = ({
    getMessage,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('py-5 text-center', className)
  }, restProps), /*#__PURE__*/React.createElement("big", {
    className: "text-muted"
  }, getMessage('noColumns')));
  process.env.NODE_ENV !== "production" ? EmptyMessage.propTypes = {
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string
  } : void 0;
  EmptyMessage.defaultProps = {
    className: undefined
  };

  const TableColumnVisibility = dxReactCore.withComponents({
    EmptyMessage
  })(dxReactGrid.TableColumnVisibility);

  const TableInvisibleRow = ({
    className,
    ...restParams
  }) => /*#__PURE__*/React.createElement(TableRow, _extends({
    className: classNames('dx-g-bs4-table-invisible-row', className)
  }, restParams));
  process.env.NODE_ENV !== "production" ? TableInvisibleRow.propTypes = {
    className: PropTypes.string
  } : void 0;
  TableInvisibleRow.defaultProps = {
    className: undefined
  };

  const TableReorderingCell = ({
    style,
    getCellDimensions
  }) => {
    const refHandler = node => node && getCellDimensions(() => dxGridCore.getCellGeometries(node));

    return /*#__PURE__*/React.createElement("td", {
      ref: refHandler,
      className: "p-0 border-0",
      style: style
    });
  };
  process.env.NODE_ENV !== "production" ? TableReorderingCell.propTypes = {
    getCellDimensions: PropTypes.func.isRequired,
    style: PropTypes.object
  } : void 0;
  TableReorderingCell.defaultProps = {
    style: null
  };

  const TableColumnReordering = dxReactCore.withComponents({
    Row: TableInvisibleRow,
    Cell: TableReorderingCell
  })(dxReactGrid.TableColumnReordering);

  class TableColumnResizing extends React.PureComponent {
    render() {
      const {
        minColumnWidth,
        maxColumnWidth,
        ...restProps
      } = this.props;
      return /*#__PURE__*/React.createElement(dxReactGrid.TableColumnResizing, _extends({}, restProps, {
        minColumnWidth: minColumnWidth,
        maxColumnWidth: maxColumnWidth
      }));
    }

  }
  process.env.NODE_ENV !== "production" ? TableColumnResizing.propTypes = {
    minColumnWidth: PropTypes.number,
    maxColumnWidth: PropTypes.number
  } : void 0;
  TableColumnResizing.defaultProps = {
    minColumnWidth: 55,
    maxColumnWidth: Infinity
  };

  const ToolbarBase = ({
    children,
    className,
    style,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('card-header py-2 d-flex position-relative dx-g-bs4-toolbar', className),
    ref: forwardedRef,
    style: style
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? ToolbarBase.propTypes = {
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
    className: PropTypes.string,
    style: PropTypes.object,
    forwardedRef: PropTypes.func
  } : void 0;
  ToolbarBase.defaultProps = {
    className: undefined,
    style: null,
    forwardedRef: undefined
  };
  const Toolbar = dxReactGrid.withKeyboardNavigation('toolbar', 'none')(ToolbarBase);

  const FlexibleSpace = () => /*#__PURE__*/React.createElement("div", {
    className: "d-flex ml-auto"
  });

  const Toolbar$1 = dxReactCore.withComponents({
    Root: Toolbar,
    FlexibleSpace
  })(dxReactGrid.Toolbar);

  const TableTreeExpandButton = ({
    className,
    visible,
    expanded,
    onToggle,
    ...restProps
  }) => /*#__PURE__*/React.createElement(ExpandButton, _extends({
    visible: visible,
    expanded: expanded,
    onToggle: onToggle,
    className: classNames('mr-3', className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableTreeExpandButton.propTypes = {
    className: PropTypes.string,
    visible: PropTypes.bool,
    expanded: PropTypes.bool,
    onToggle: PropTypes.func
  } : void 0;
  TableTreeExpandButton.defaultProps = {
    className: undefined,
    visible: false,
    expanded: false,
    onToggle: () => {}
  };

  const TableTreeCheckbox = ({
    className,
    checked,
    indeterminate,
    disabled,
    onChange,
    ...restProps
  }) => /*#__PURE__*/React.createElement(SelectionControl, _extends({
    disabled: disabled,
    checked: checked,
    indeterminate: indeterminate,
    onChange: onChange,
    className: classNames('mr-4', className)
  }, restProps));
  process.env.NODE_ENV !== "production" ? TableTreeCheckbox.propTypes = {
    className: PropTypes.string,
    checked: PropTypes.bool,
    indeterminate: PropTypes.bool,
    disabled: PropTypes.bool,
    onChange: PropTypes.func
  } : void 0;
  TableTreeCheckbox.defaultProps = {
    className: undefined,
    checked: false,
    indeterminate: false,
    disabled: false,
    onChange: () => {}
  };

  const TableTreeIndent = /*#__PURE__*/React.memo(({
    level
  }) => Array.from({
    length: level
  }).map((value, currentLevel) => /*#__PURE__*/React.createElement("span", {
    // eslint-disable-next-line react/no-array-index-key
    key: currentLevel,
    className: "d-inline-block mr-4"
  })));
  TableTreeIndent.propTypes = {
    level: PropTypes.number
  };
  TableTreeIndent.defaultProps = {
    level: 0
  };

  const TableTreeCell = ({
    column,
    children,
    tableRow,
    tableColumn,
    row,
    forwardedRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("td", _extends({
    ref: forwardedRef
  }, restProps), /*#__PURE__*/React.createElement("div", {
    className: classNames({
      'd-flex flex-direction-row align-items-center': true,
      'text-nowrap': !(tableColumn && tableColumn.wordWrapEnabled),
      'text-right': tableColumn && tableColumn.align === 'right',
      'text-center': tableColumn && tableColumn.align === 'center'
    })
  }, children));
  process.env.NODE_ENV !== "production" ? TableTreeCell.propTypes = {
    column: PropTypes.object,
    row: PropTypes.any,
    children: PropTypes.node,
    tableRow: PropTypes.object,
    tableColumn: PropTypes.object,
    style: PropTypes.object,
    forwardedRef: PropTypes.func
  } : void 0;
  TableTreeCell.defaultProps = {
    column: undefined,
    row: undefined,
    children: undefined,
    tableRow: undefined,
    tableColumn: undefined,
    style: null,
    forwardedRef: undefined
  };

  const TableTreeContent = ({
    children,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("div", _extends({
    className: classNames('w-100 dx-g-bs4-table-tree-content', className)
  }, restProps), children);
  process.env.NODE_ENV !== "production" ? TableTreeContent.propTypes = {
    className: PropTypes.string,
    children: PropTypes.node
  } : void 0;
  TableTreeContent.defaultProps = {
    className: undefined,
    children: undefined
  };

  const TableTreeColumn = dxReactCore.withComponents({
    Cell: TableTreeCell,
    Content: TableTreeContent,
    Indent: TableTreeIndent,
    ExpandButton: TableTreeExpandButton,
    Checkbox: TableTreeCheckbox
  })(dxReactGrid.TableTreeColumn);

  const SearchPanelInput = ({
    onValueChange,
    value,
    getMessage,
    className,
    inputRef,
    ...restProps
  }) => /*#__PURE__*/React.createElement("input", _extends({
    ref: inputRef,
    type: "text",
    className: classNames('form-control w-25', className),
    onChange: e => onValueChange(e.target.value),
    value: value,
    placeholder: getMessage('searchPlaceholder')
  }, restProps));
  process.env.NODE_ENV !== "production" ? SearchPanelInput.propTypes = {
    value: PropTypes.any,
    onValueChange: PropTypes.func.isRequired,
    getMessage: PropTypes.func.isRequired,
    className: PropTypes.string,
    inputRef: PropTypes.object
  } : void 0;
  SearchPanelInput.defaultProps = {
    value: null,
    className: undefined,
    inputRef: undefined
  };

  const SearchPanel = dxReactCore.withComponents({
    Input: SearchPanelInput
  })(dxReactGrid.SearchPanel);

  class FixedCell extends React.PureComponent {
    render() {
      const {
        className,
        component: CellPlaceholder,
        position,
        selected,
        showLeftDivider,
        showRightDivider,
        side,
        style,
        ...restProps
      } = this.props;
      const backgroundColor = selected ? 'inherit' : this.context;
      return /*#__PURE__*/React.createElement(CellPlaceholder, _extends({
        className: classNames({
          'border-left': showLeftDivider,
          'border-right': showRightDivider,
          'dx-g-bs4-fixed-cell': true,
          'position-sticky': true
        }, className),
        style: {
          backgroundColor,
          [side]: position,
          ...style
        }
      }, restProps));
    }

  }
  FixedCell.contextType = BodyColorContext;
  process.env.NODE_ENV !== "production" ? FixedCell.propTypes = {
    className: PropTypes.string,
    component: PropTypes.func.isRequired,
    position: PropTypes.number,
    selected: PropTypes.bool,
    showLeftDivider: PropTypes.bool,
    showRightDivider: PropTypes.bool,
    side: PropTypes.string.isRequired,
    style: PropTypes.object
  } : void 0;
  FixedCell.defaultProps = {
    className: undefined,
    position: undefined,
    selected: false,
    showLeftDivider: false,
    showRightDivider: false,
    style: null
  };

  const TableBorderlessStubCell = ({
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement(TableStubCell, _extends({
    className: classNames('border-0', className)
  }, restProps));

  process.env.NODE_ENV !== "production" ? TableBorderlessStubCell.propTypes = {
    className: PropTypes.string
  } : void 0;
  TableBorderlessStubCell.defaultProps = {
    className: undefined
  };
  const TableListenerCell = ({
    listen,
    onSizeChange,
    ...restProps
  }) => listen ? /*#__PURE__*/React.createElement(dxReactCore.Sizer, _extends({
    containerComponent: TableBorderlessStubCell,
    onSizeChange: onSizeChange
  }, restProps)) : /*#__PURE__*/React.createElement(TableBorderlessStubCell, restProps);
  process.env.NODE_ENV !== "production" ? TableListenerCell.propTypes = {
    listen: PropTypes.bool.isRequired,
    onSizeChange: PropTypes.func.isRequired
  } : void 0;

  const TableFixedColumns = dxReactCore.withComponents({
    Cell: FixedCell,
    ListenerRow: TableInvisibleRow,
    ListenerCell: TableListenerCell
  })(dxReactGrid.TableFixedColumns);

  const TableSummaryRow = dxReactCore.withComponents({
    TotalRow: TableRow,
    GroupRow: TableRow,
    TreeRow: TableRow,
    TotalCell: TableCell,
    GroupCell: TableCell,
    TreeCell: TableCell,
    TableTreeCell,
    TableTreeContent,
    TableTreeIndent,
    Item: TableSummaryItem
  })(dxReactGrid.TableSummaryRow);
  TableSummaryRow.TREE_ROW_TYPE = dxReactGrid.TableSummaryRow.TREE_ROW_TYPE;
  TableSummaryRow.GROUP_ROW_TYPE = dxReactGrid.TableSummaryRow.GROUP_ROW_TYPE;
  TableSummaryRow.TOTAL_ROW_TYPE = dxReactGrid.TableSummaryRow.TOTAL_ROW_TYPE;

  const TableInlineCellEditing = dxReactCore.withComponents({
    Cell: EditCell
  })(dxReactGrid.TableInlineCellEditing);

  const ToggleButton$2 = ({
    onToggle,
    getMessage,
    buttonRef,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    className: classNames('btn btn-outline-secondary border-0', className),
    onClick: onToggle,
    ref: buttonRef
  }, restProps), /*#__PURE__*/React.createElement("span", {
    className: "oi oi-data-transfer-download"
  }));
  process.env.NODE_ENV !== "production" ? ToggleButton$2.propTypes = {
    onToggle: PropTypes.func.isRequired,
    getMessage: PropTypes.func.isRequired,
    buttonRef: PropTypes.func.isRequired,
    className: PropTypes.string
  } : void 0;
  ToggleButton$2.defaultProps = {
    className: undefined
  };

  const Menu = ({
    visible,
    target,
    onHide,
    children,
    ...restProps
  }) => /*#__PURE__*/React.createElement(Popover, _extends({
    placement: "bottom",
    isOpen: visible,
    target: target,
    toggle: onHide
  }, restProps), /*#__PURE__*/React.createElement("div", {
    className: "py-2"
  }, children));
  process.env.NODE_ENV !== "production" ? Menu.propTypes = {
    onHide: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired,
    visible: PropTypes.bool,
    target: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
  } : void 0;
  Menu.defaultProps = {
    visible: false,
    target: null
  };

  const MenuItem = ({
    text,
    onClick,
    className,
    ...restProps
  }) => /*#__PURE__*/React.createElement("button", _extends({
    type: "button",
    className: classNames('dx-g-bs4-cursor-pointer dropdown-item', className),
    onClick: onClick
  }, restProps), text);
  process.env.NODE_ENV !== "production" ? MenuItem.propTypes = {
    text: PropTypes.string.isRequired,
    onClick: PropTypes.func,
    className: PropTypes.string
  } : void 0;
  MenuItem.defaultProps = {
    onClick: () => {},
    className: undefined
  };

  const ExportPanel = dxReactCore.withComponents({
    ToggleButton: ToggleButton$2,
    Menu,
    MenuItem
  })(dxReactGrid.ExportPanel);

  class FocusCellBase extends React.PureComponent {
    render() {
      const {
        className,
        component: CellPlaceholder,
        focused,
        ...restProps
      } = this.props;
      return /*#__PURE__*/React.createElement(CellPlaceholder, _extends({
        className: classNames({
          'border border-primary dx-g-bs-focus-cell': !!focused,
          'dx-g-bs4-simple-cell': true
        }, className)
      }, restProps));
    }

  }

  process.env.NODE_ENV !== "production" ? FocusCellBase.propTypes = {
    className: PropTypes.string,
    component: PropTypes.func.isRequired,
    focused: PropTypes.bool
  } : void 0;
  FocusCellBase.defaultProps = {
    className: undefined,
    focused: undefined
  };
  const FocusCell = dxReactGrid.withKeyboardNavigation()(FocusCellBase);

  class FocusRow extends React.PureComponent {
    render() {
      const {
        component: RowPlaceholder,
        className,
        focused,
        ...restProps
      } = this.props;
      return /*#__PURE__*/React.createElement(RowPlaceholder, _extends({
        className: classNames({
          'bg-light': !!focused
        }, className)
      }, restProps));
    }

  }
  process.env.NODE_ENV !== "production" ? FocusRow.propTypes = {
    className: PropTypes.string,
    component: PropTypes.func.isRequired,
    focused: PropTypes.bool
  } : void 0;
  FocusRow.defaultProps = {
    focused: false,
    className: undefined
  };

  const TableKeyboardNavigation = dxReactCore.withComponents({
    Cell: FocusCell,
    Row: FocusRow
  })(dxReactGrid.TableKeyboardNavigation);

  exports.ColumnChooser = ColumnChooser;
  exports.DragDropProvider = DragDropProvider;
  exports.ExportPanel = ExportPanel;
  exports.Grid = Grid;
  exports.GroupingPanel = GroupingPanel;
  exports.PagingPanel = PagingPanel;
  exports.SearchPanel = SearchPanel;
  exports.Table = Table$1;
  exports.TableBandHeader = TableBandHeader;
  exports.TableColumnReordering = TableColumnReordering;
  exports.TableColumnResizing = TableColumnResizing;
  exports.TableColumnVisibility = TableColumnVisibility;
  exports.TableEditColumn = TableEditColumn;
  exports.TableEditRow = TableEditRow;
  exports.TableFilterRow = TableFilterRow;
  exports.TableFixedColumns = TableFixedColumns;
  exports.TableGroupRow = TableGroupRow;
  exports.TableHeaderRow = TableHeaderRow;
  exports.TableInlineCellEditing = TableInlineCellEditing;
  exports.TableKeyboardNavigation = TableKeyboardNavigation;
  exports.TableRowDetail = TableRowDetail;
  exports.TableSelection = TableSelection;
  exports.TableSummaryRow = TableSummaryRow;
  exports.TableTreeColumn = TableTreeColumn;
  exports.Toolbar = Toolbar$1;
  exports.VirtualTable = VirtualTable;

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

})));
//# sourceMappingURL=dx-react-grid-bootstrap4.umd.cjs.map