import React, { useContext, useState, useEffect, createElement, PureComponent } from 'react';
import 'react-dom';
import { e as _extends, c as _slicedToArray, d as _objectWithoutProperties, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import { T as Tooltip } from '../index-6829ab1f.js';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon } from '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-155df85b.js';
import Text from './text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from './box.js';
import { _ as _inheritsLoose, a as _assertThisInitialized, b as _extends$1, c as _objectWithoutPropertiesLoose } from '../objectWithoutPropertiesLoose-649e0ada.js';

var style = {
  display: "flex",
  alignItems: "center",
  borderBottomStyle: "solid"
};
var ThemedHeader = styled("div")(style, border, color);
ThemedHeader.defaultProps = {
  borderBottomColor: "grey.haptik",
  borderBottomWidth: "xs"
};

var tableBorder = variant({
  prop: "appearance",
  scale: "tableBorder",
  variants: {
    noBorder: {}
  }
});
var tableSpace = variant({
  prop: "space",
  scale: "tableSpace",
  variants: {
    "default": {},
    compact: {}
  }
});
var style$1 = {
  display: "flex",
  flex: 1,
  alignItems: "center",
  borderRightStyle: "solid",
  cursor: "pointer",
  "&:last-child": {
    borderRight: "none"
  }
};
var ThemedHeaderItem = styled("div")(style$1, color, border, space, tableBorder, tableSpace);
ThemedHeaderItem.defaultProps = {
  appearance: "withBorder",
  borderRightWidth: "xs",
  borderRightColor: "grey.haptik",
  space: "default"
};

var css_248z = ".Header_tableHeader__2o9vG {\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #EEE; }\n\n.Header_tableHeaderItem__1p7Va {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  border-right: 1px solid #EEE;\n  padding: 8px 12px;\n  cursor: pointer; }\n  .Header_tableHeaderItem__1p7Va:last-child {\n    border-right: none; }\n  .Header_tableHeaderItem__1p7Va.Header_active__5fOjW .Header_tableHeaderItemText__1StPB {\n    color: #124fa0; }\n\n.Header_tableHeaderItemText__1StPB {\n  font-weight: 600;\n  color: #000;\n  user-select: none; }\n\n.Header_tableHeaderItemIcon__1JWxZ {\n  font-size: 8px;\n  padding-left: 6px;\n  color: #124fa0; }\n";
var styles = {"tableHeader":"Header_tableHeader__2o9vG","tableHeaderItem":"Header_tableHeaderItem__1p7Va","active":"Header_active__5fOjW","tableHeaderItemText":"Header_tableHeaderItemText__1StPB","tableHeaderItemIcon":"Header_tableHeaderItemIcon__1JWxZ"};
styleInject(css_248z);

function Header(_ref) {
  var prefixClassName = _ref.prefixClassName,
    onSort = _ref.onSort,
    columns = _ref.columns,
    sortKey = _ref.sortKey,
    sortOrder = _ref.sortOrder,
    themed = _ref.themed,
    designProps = _ref.designProps;
  var _useContext = useContext(Context),
    primaryColor = _useContext.primaryColor;
  if (!columns || columns.length === 0) return null;
  if (themed) {
    return /*#__PURE__*/React.createElement(ThemedHeader, null, columns.map(function (column, i) {
      var isTheSortedColumn = sortKey === column.sortKey;
      var isActive = column.sortKey && isTheSortedColumn;
      var sortIcon = column.sortKey && isTheSortedColumn && (sortOrder === 1 ? "▲" : "▼");
      return /*#__PURE__*/React.createElement(ThemedHeaderItem, _extends({
        key: i,
        style: {
          width: column.width,
          maxWidth: column.width,
          minWidth: column.width,
          justifyContent: "space-between",
          alignItems: "flex-start"
        },
        onClick: function onClick() {
          return onSort(column);
        }
      }, designProps), column.prefixComponent || null, /*#__PURE__*/React.createElement(Text, _extends({}, designProps, {
        variant: "heading",
        color: isActive ? "blue.haptik" : "text"
      }), column.title), sortIcon && /*#__PURE__*/React.createElement("div", {
        style: {
          color: isActive ? primaryColor : undefined
        },
        className: "".concat(styles.tableHeaderItemIcon, " ").concat(prefixClassName, "-icon")
      }, sortIcon), column.info && /*#__PURE__*/React.createElement(Icon, {
        themed: true,
        tooltip: column.info,
        src: "infoV3",
        size: "small"
      }), column.postfixComponent || null);
    }));
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles.tableHeader, " ").concat(prefixClassName)
  }, columns.map(function (column, i) {
    var isTheSortedColumn = sortKey === column.sortKey;
    var isActive = column.sortKey && isTheSortedColumn;
    var activeClassName = isActive ? styles.active : "";
    var sortIcon = column.sortKey && isTheSortedColumn && (sortOrder === 1 ? "▲" : "▼");
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      className: "".concat(styles.tableHeaderItem, " ").concat(activeClassName, " ").concat(prefixClassName, "-column ").concat(column.className),
      style: {
        width: column.width,
        maxWidth: column.width,
        minWidth: column.width
      },
      onClick: function onClick() {
        return onSort(column);
      }
    }, column.prefixComponent || null, /*#__PURE__*/React.createElement("div", {
      style: {
        color: isActive ? primaryColor : undefined
      },
      className: "".concat(styles.tableHeaderItemText, " ").concat(prefixClassName, "-title")
    }, column.title), /*#__PURE__*/React.createElement("div", {
      style: {
        color: isActive ? primaryColor : undefined
      },
      className: "".concat(styles.tableHeaderItemIcon, " ").concat(prefixClassName, "-icon")
    }, sortIcon), column.postfixComponent || null);
  }));
}
Header.propTypes = {
  prefixClassName: PropTypes.string,
  onSort: PropTypes.func,
  columns: PropTypes.arrayOf(PropTypes.object),
  sortOrder: PropTypes.number,
  sortKey: PropTypes.string,
  themed: PropTypes.bool,
  designProps: PropTypes.shape({})
};
Header.defaultProps = {
  prefixClassName: "",
  onSort: function onSort() {},
  columns: [],
  sortOrder: -1,
  sortKey: ""
};
Header.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Header",
  "props": {
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onSort": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "columns": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "object"
        }
      },
      "required": false,
      "description": ""
    },
    "sortOrder": {
      "defaultValue": {
        "value": "-1",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "sortKey": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "designProps": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    }
  }
};

var tableBorder$1 = variant({
  prop: "appearance",
  scale: "tableBorder",
  variants: {
    noBorder: {}
  }
});
var tableSpace$1 = variant({
  prop: "space",
  scale: "tableSpace",
  variants: {
    "default": {},
    compact: {}
  }
});
var style$2 = {
  display: "flex",
  alignItems: "center",
  flex: 1,
  borderRightStyle: "solid",
  borderBottomStyle: "solid",
  overflow: "hidden",
  textOverflow: "ellipsis",
  "&:last-child": {
    borderRight: "none"
  }
};
var ThemedRowItem = styled("div")(style$2, border, color, space, tableBorder$1, tableSpace$1);
ThemedRowItem.defaultProps = {
  borderRightWidth: "xs",
  borderRightColor: "grey.haptik",
  borderBottomWidth: "xs",
  borderBottomColor: "grey.haptik",
  px: "sm",
  py: "xs",
  space: "default"
};

var css_248z$1 = ".Row_tableRow__3xdOk {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  cursor: pointer; }\n  .Row_tableRow__3xdOk:hover {\n    background-color: #F5F5F5; }\n  .Row_tableRow__3xdOk:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 3px;\n    height: 100%;\n    background-color: #124fa0;\n    opacity: 0; }\n  .Row_tableRow__3xdOk.Row_selected__2dIBt {\n    background-color: rgba(18, 79, 160, 0.1); }\n    .Row_tableRow__3xdOk.Row_selected__2dIBt:before {\n      opacity: 1; }\n  .Row_tableRow__3xdOk.Row_disabled__38rt1 {\n    opacity: 0.4; }\n  .Row_tableRow__3xdOk:last-child .Row_tableRowItem__2OBy3 {\n    margin-bottom: -1px; }\n\n.Row_tableRowItem__2OBy3 {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  border-right: 1px solid #EEE;\n  border-bottom: 1px solid #EEE;\n  padding: 8px 12px;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n  .Row_tableRowItem__2OBy3:last-child {\n    border-right: none; }\n  .Row_tableRowItem__2OBy3.Row_simple__1Y5Sf {\n    border-right: none;\n    border-bottom: 1px solid #EEE; }\n\n.Row_tableRowItemText__13W2B {\n  display: inline-flex;\n  align-items: center;\n  text-overflow: ellipsis;\n  width: 100%; }\n";
var styles$1 = {"tableRow":"Row_tableRow__3xdOk","selected":"Row_selected__2dIBt","disabled":"Row_disabled__38rt1","tableRowItem":"Row_tableRowItem__2OBy3","simple":"Row_simple__1Y5Sf","tableRowItemText":"Row_tableRowItemText__13W2B"};
styleInject(css_248z$1);

var ellipsisStyles = {
  overflow: "hidden",
  textOverflow: "ellipsis",
  whiteSpace: "nowrap"
};
function Row(_ref) {
  var index = _ref.index,
    style = _ref.style,
    data = _ref.data,
    _onClick = _ref.onClick,
    prefixClassName = _ref.prefixClassName,
    widths = _ref.widths,
    themed = _ref.themed,
    designProps = _ref.designProps,
    _ref$active = _ref.active,
    active = _ref$active === void 0 ? false : _ref$active,
    _ref$highlightActiveR = _ref.highlightActiveRow,
    highlightActiveRow = _ref$highlightActiveR === void 0 ? false : _ref$highlightActiveR;
  var row = data[index];
  var rowColumns = Array.isArray(row) ? row : row.columns;
  var disabledClassName = row.disabled ? styles$1.disabled : "";
  var activeClassName = active && highlightActiveRow ? styles$1.selected : "";
  var rowClassName = row.className || "";
  var _useState = useState(function () {
      return Array(rowColumns.length).fill().map(function () {
        return /*#__PURE__*/React.createRef();
      });
    }),
    _useState2 = _slicedToArray(_useState, 1),
    refs = _useState2[0];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    columnOverflowData = _useState4[0],
    setColumnOverflowData = _useState4[1];
  useEffect(function () {
    var columnOverflowData = refs.map(function (ref) {
      return ref.current && ref.current.offsetWidth < ref.current.scrollWidth;
    });
    setColumnOverflowData(columnOverflowData);
  }, [refs]);
  if (row.hidden) return null;
  return /*#__PURE__*/React.createElement("div", {
    style: style,
    key: "".concat(index, "-").concat(row.id),
    className: "".concat(styles$1.tableRow, " ").concat(disabledClassName, " ").concat(prefixClassName, " ").concat(rowClassName, " ").concat(activeClassName),
    onClick: function onClick() {
      return _onClick(index, row);
    }
  }, rowColumns.map(function (column, i) {
    if (themed) {
      var TextComponent = function TextComponent() {
        return /*#__PURE__*/React.createElement(Text, _extends({}, designProps, {
          style: ellipsisStyles,
          ref: refs[i]
        }), column.content);
      };
      return /*#__PURE__*/React.createElement(ThemedRowItem, _extends({}, designProps, {
        key: i,
        style: {
          width: widths[i],
          maxWidth: widths[i],
          minWidth: widths[i]
        }
      }), columnOverflowData[i] ? /*#__PURE__*/React.createElement(Tooltip, {
        tooltip: column.content,
        offset: {
          left: refs[i].current && (refs[i].current.offsetWidth - 20) / 2 || 0,
          top: -(refs[i].current && refs[i].current.offsetTop / 2) || 0
        },
        themed: true
      }, /*#__PURE__*/React.createElement(Box, {
        padding: "zero",
        margin: "zero",
        display: "inline-grid"
      }, /*#__PURE__*/React.createElement(TextComponent, null))) : /*#__PURE__*/React.createElement(TextComponent, null));
    }
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      className: "".concat(styles$1.tableRowItem, " ").concat(prefixClassName, "-column"),
      style: {
        width: widths[i],
        maxWidth: widths[i],
        minWidth: widths[i]
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles$1.tableRowItemText, " ").concat(prefixClassName, "-column-content")
    }, column.content));
  }));
}
Row.propTypes = {
  prefixClassName: PropTypes.string,
  widths: PropTypes.arrayOf(PropTypes.string),
  onClick: PropTypes.func,
  index: PropTypes.number,
  style: PropTypes.shape({}),
  active: PropTypes.bool,
  highlightActiveRow: PropTypes.bool,
  data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    columns: PropTypes.array,
    disabled: PropTypes.bool,
    className: PropTypes.string,
    hidden: PropTypes.bool
  }))),
  themed: PropTypes.bool,
  designProps: PropTypes.shape({})
};
Row.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Row",
  "props": {
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "highlightActiveRow": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "widths": {
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "string"
        }
      },
      "required": false,
      "description": ""
    },
    "onClick": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "index": {
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "style": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    },
    "data": {
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "arrayOf",
          "value": {
            "name": "shape",
            "value": {
              "id": {
                "name": "string",
                "required": false
              },
              "columns": {
                "name": "array",
                "required": false
              },
              "disabled": {
                "name": "bool",
                "required": false
              },
              "className": {
                "name": "string",
                "required": false
              },
              "hidden": {
                "name": "bool",
                "required": false
              }
            }
          }
        }
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "designProps": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    }
  }
};

function Body(_ref) {
  var className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    onRowClick = _ref.onRowClick,
    rows = _ref.rows,
    columns = _ref.columns,
    themed = _ref.themed,
    designProps = _ref.designProps,
    activeIndex = _ref.activeIndex,
    highlightActiveRow = _ref.highlightActiveRow;
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixClassName, " ").concat(className)
  }, rows.map(function (_, index) {
    var isRowActive = index === activeIndex;
    return /*#__PURE__*/React.createElement(Row, {
      key: index,
      index: index,
      data: rows,
      onClick: onRowClick,
      widths: columns.map(function (column) {
        return column.width;
      }),
      prefixClassName: "".concat(prefixClassName, "-row"),
      themed: themed,
      designProps: designProps,
      active: isRowActive,
      highlightActiveRow: highlightActiveRow
    });
  }));
}
Body.propTypes = {
  className: PropTypes.string,
  prefixClassName: PropTypes.string,
  onRowClick: PropTypes.func,
  rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)),
  columns: PropTypes.arrayOf(PropTypes.object),
  themed: PropTypes.bool,
  designProps: PropTypes.shape({}),
  activeIndex: PropTypes.bool,
  highlightActiveRow: PropTypes.bool
};
Body.defaultProps = {
  onRowClick: function onRowClick() {},
  className: "",
  prefixClassName: "",
  rows: [[]],
  columns: []
};
Body.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Body",
  "props": {
    "onRowClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "rows": {
      "defaultValue": {
        "value": "[[]]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "arrayOf",
          "value": {
            "name": "object"
          }
        }
      },
      "required": false,
      "description": ""
    },
    "columns": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "object"
        }
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "designProps": {
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    },
    "activeIndex": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "highlightActiveRow": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

var safeIsNaN = Number.isNaN ||
    function ponyfill(value) {
        return typeof value === 'number' && value !== value;
    };
function isEqual(first, second) {
    if (first === second) {
        return true;
    }
    if (safeIsNaN(first) && safeIsNaN(second)) {
        return true;
    }
    return false;
}
function areInputsEqual(newInputs, lastInputs) {
    if (newInputs.length !== lastInputs.length) {
        return false;
    }
    for (var i = 0; i < newInputs.length; i++) {
        if (!isEqual(newInputs[i], lastInputs[i])) {
            return false;
        }
    }
    return true;
}

function memoizeOne(resultFn, isEqual) {
    if (isEqual === void 0) { isEqual = areInputsEqual; }
    var lastThis;
    var lastArgs = [];
    var lastResult;
    var calledOnce = false;
    function memoized() {
        var newArgs = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            newArgs[_i] = arguments[_i];
        }
        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
            return lastResult;
        }
        lastResult = resultFn.apply(this, newArgs);
        calledOnce = true;
        lastThis = this;
        lastArgs = newArgs;
        return lastResult;
    }
    return memoized;
}

// Animation frame based implementation of setTimeout.
// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
var now = hasNativePerformanceNow ? function () {
  return performance.now();
} : function () {
  return Date.now();
};
function cancelTimeout(timeoutID) {
  cancelAnimationFrame(timeoutID.id);
}
function requestTimeout(callback, delay) {
  var start = now();

  function tick() {
    if (now() - start >= delay) {
      callback.call(null);
    } else {
      timeoutID.id = requestAnimationFrame(tick);
    }
  }

  var timeoutID = {
    id: requestAnimationFrame(tick)
  };
  return timeoutID;
}

var size = -1; // This utility copied from "dom-helpers" package.

function getScrollbarSize(recalculate) {
  if (recalculate === void 0) {
    recalculate = false;
  }

  if (size === -1 || recalculate) {
    var div = document.createElement('div');
    var style = div.style;
    style.width = '50px';
    style.height = '50px';
    style.overflow = 'scroll';
    document.body.appendChild(div);
    size = div.offsetWidth - div.clientWidth;
    document.body.removeChild(div);
  }

  return size;
}
var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
// The safest way to check this is to intentionally set a negative offset,
// and then verify that the subsequent "scroll" event matches the negative offset.
// If it does not match, then we can assume a non-standard RTL scroll implementation.

function getRTLOffsetType(recalculate) {
  if (recalculate === void 0) {
    recalculate = false;
  }

  if (cachedRTLResult === null || recalculate) {
    var outerDiv = document.createElement('div');
    var outerStyle = outerDiv.style;
    outerStyle.width = '50px';
    outerStyle.height = '50px';
    outerStyle.overflow = 'scroll';
    outerStyle.direction = 'rtl';
    var innerDiv = document.createElement('div');
    var innerStyle = innerDiv.style;
    innerStyle.width = '100px';
    innerStyle.height = '100px';
    outerDiv.appendChild(innerDiv);
    document.body.appendChild(outerDiv);

    if (outerDiv.scrollLeft > 0) {
      cachedRTLResult = 'positive-descending';
    } else {
      outerDiv.scrollLeft = 1;

      if (outerDiv.scrollLeft === 0) {
        cachedRTLResult = 'negative';
      } else {
        cachedRTLResult = 'positive-ascending';
      }
    }

    document.body.removeChild(outerDiv);
    return cachedRTLResult;
  }

  return cachedRTLResult;
}

var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;

var defaultItemKey$1 = function defaultItemKey(index, data) {
  return index;
}; // In DEV mode, this Set helps us only log a warning once per component instance.

function createListComponent(_ref) {
  var _class;

  var getItemOffset = _ref.getItemOffset,
      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
      getItemSize = _ref.getItemSize,
      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
      getStartIndexForOffset = _ref.getStartIndexForOffset,
      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
      initInstanceProps = _ref.initInstanceProps,
      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
      validateProps = _ref.validateProps;
  return _class = /*#__PURE__*/function (_PureComponent) {
    _inheritsLoose(List, _PureComponent);

    // Always use explicit constructor for React components.
    // It produces less code after transpilation. (#26)
    // eslint-disable-next-line no-useless-constructor
    function List(props) {
      var _this;

      _this = _PureComponent.call(this, props) || this;
      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
      _this._outerRef = void 0;
      _this._resetIsScrollingTimeoutId = null;
      _this.state = {
        instance: _assertThisInitialized(_this),
        isScrolling: false,
        scrollDirection: 'forward',
        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
        scrollUpdateWasRequested: false
      };
      _this._callOnItemsRendered = void 0;
      _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
        return _this.props.onItemsRendered({
          overscanStartIndex: overscanStartIndex,
          overscanStopIndex: overscanStopIndex,
          visibleStartIndex: visibleStartIndex,
          visibleStopIndex: visibleStopIndex
        });
      });
      _this._callOnScroll = void 0;
      _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
        return _this.props.onScroll({
          scrollDirection: scrollDirection,
          scrollOffset: scrollOffset,
          scrollUpdateWasRequested: scrollUpdateWasRequested
        });
      });
      _this._getItemStyle = void 0;

      _this._getItemStyle = function (index) {
        var _this$props = _this.props,
            direction = _this$props.direction,
            itemSize = _this$props.itemSize,
            layout = _this$props.layout;

        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);

        var style;

        if (itemStyleCache.hasOwnProperty(index)) {
          style = itemStyleCache[index];
        } else {
          var _offset = getItemOffset(_this.props, index, _this._instanceProps);

          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"

          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
          var isRtl = direction === 'rtl';
          var offsetHorizontal = isHorizontal ? _offset : 0;
          itemStyleCache[index] = style = {
            position: 'absolute',
            left: isRtl ? undefined : offsetHorizontal,
            right: isRtl ? offsetHorizontal : undefined,
            top: !isHorizontal ? _offset : 0,
            height: !isHorizontal ? size : '100%',
            width: isHorizontal ? size : '100%'
          };
        }

        return style;
      };

      _this._getItemStyleCache = void 0;
      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
        return {};
      });

      _this._onScrollHorizontal = function (event) {
        var _event$currentTarget = event.currentTarget,
            clientWidth = _event$currentTarget.clientWidth,
            scrollLeft = _event$currentTarget.scrollLeft,
            scrollWidth = _event$currentTarget.scrollWidth;

        _this.setState(function (prevState) {
          if (prevState.scrollOffset === scrollLeft) {
            // Scroll position may have been updated by cDM/cDU,
            // In which case we don't need to trigger another render,
            // And we don't want to update state.isScrolling.
            return null;
          }

          var direction = _this.props.direction;
          var scrollOffset = scrollLeft;

          if (direction === 'rtl') {
            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
            switch (getRTLOffsetType()) {
              case 'negative':
                scrollOffset = -scrollLeft;
                break;

              case 'positive-descending':
                scrollOffset = scrollWidth - clientWidth - scrollLeft;
                break;
            }
          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.


          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
          return {
            isScrolling: true,
            scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
            scrollOffset: scrollOffset,
            scrollUpdateWasRequested: false
          };
        }, _this._resetIsScrollingDebounced);
      };

      _this._onScrollVertical = function (event) {
        var _event$currentTarget2 = event.currentTarget,
            clientHeight = _event$currentTarget2.clientHeight,
            scrollHeight = _event$currentTarget2.scrollHeight,
            scrollTop = _event$currentTarget2.scrollTop;

        _this.setState(function (prevState) {
          if (prevState.scrollOffset === scrollTop) {
            // Scroll position may have been updated by cDM/cDU,
            // In which case we don't need to trigger another render,
            // And we don't want to update state.isScrolling.
            return null;
          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.


          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
          return {
            isScrolling: true,
            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
            scrollOffset: scrollOffset,
            scrollUpdateWasRequested: false
          };
        }, _this._resetIsScrollingDebounced);
      };

      _this._outerRefSetter = function (ref) {
        var outerRef = _this.props.outerRef;
        _this._outerRef = ref;

        if (typeof outerRef === 'function') {
          outerRef(ref);
        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
          outerRef.current = ref;
        }
      };

      _this._resetIsScrollingDebounced = function () {
        if (_this._resetIsScrollingTimeoutId !== null) {
          cancelTimeout(_this._resetIsScrollingTimeoutId);
        }

        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
      };

      _this._resetIsScrolling = function () {
        _this._resetIsScrollingTimeoutId = null;

        _this.setState({
          isScrolling: false
        }, function () {
          // Clear style cache after state update has been committed.
          // This way we don't break pure sCU for items that don't use isScrolling param.
          _this._getItemStyleCache(-1, null);
        });
      };

      return _this;
    }

    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
      validateSharedProps$1(nextProps, prevState);
      validateProps(nextProps);
      return null;
    };

    var _proto = List.prototype;

    _proto.scrollTo = function scrollTo(scrollOffset) {
      scrollOffset = Math.max(0, scrollOffset);
      this.setState(function (prevState) {
        if (prevState.scrollOffset === scrollOffset) {
          return null;
        }

        return {
          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
          scrollOffset: scrollOffset,
          scrollUpdateWasRequested: true
        };
      }, this._resetIsScrollingDebounced);
    };

    _proto.scrollToItem = function scrollToItem(index, align) {
      if (align === void 0) {
        align = 'auto';
      }

      var _this$props2 = this.props,
          itemCount = _this$props2.itemCount,
          layout = _this$props2.layout;
      var scrollOffset = this.state.scrollOffset;
      index = Math.max(0, Math.min(index, itemCount - 1)); // The scrollbar size should be considered when scrolling an item into view, to ensure it's fully visible.
      // But we only need to account for its size when it's actually visible.
      // This is an edge case for lists; normally they only scroll in the dominant direction.

      var scrollbarSize = 0;

      if (this._outerRef) {
        var outerRef = this._outerRef;

        if (layout === 'vertical') {
          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
        } else {
          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
        }
      }

      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps, scrollbarSize));
    };

    _proto.componentDidMount = function componentDidMount() {
      var _this$props3 = this.props,
          direction = _this$props3.direction,
          initialScrollOffset = _this$props3.initialScrollOffset,
          layout = _this$props3.layout;

      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"

        if (direction === 'horizontal' || layout === 'horizontal') {
          outerRef.scrollLeft = initialScrollOffset;
        } else {
          outerRef.scrollTop = initialScrollOffset;
        }
      }

      this._callPropsCallbacks();
    };

    _proto.componentDidUpdate = function componentDidUpdate() {
      var _this$props4 = this.props,
          direction = _this$props4.direction,
          layout = _this$props4.layout;
      var _this$state = this.state,
          scrollOffset = _this$state.scrollOffset,
          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;

      if (scrollUpdateWasRequested && this._outerRef != null) {
        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"

        if (direction === 'horizontal' || layout === 'horizontal') {
          if (direction === 'rtl') {
            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
            // So we need to determine which browser behavior we're dealing with, and mimic it.
            switch (getRTLOffsetType()) {
              case 'negative':
                outerRef.scrollLeft = -scrollOffset;
                break;

              case 'positive-ascending':
                outerRef.scrollLeft = scrollOffset;
                break;

              default:
                var clientWidth = outerRef.clientWidth,
                    scrollWidth = outerRef.scrollWidth;
                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
                break;
            }
          } else {
            outerRef.scrollLeft = scrollOffset;
          }
        } else {
          outerRef.scrollTop = scrollOffset;
        }
      }

      this._callPropsCallbacks();
    };

    _proto.componentWillUnmount = function componentWillUnmount() {
      if (this._resetIsScrollingTimeoutId !== null) {
        cancelTimeout(this._resetIsScrollingTimeoutId);
      }
    };

    _proto.render = function render() {
      var _this$props5 = this.props,
          children = _this$props5.children,
          className = _this$props5.className,
          direction = _this$props5.direction,
          height = _this$props5.height,
          innerRef = _this$props5.innerRef,
          innerElementType = _this$props5.innerElementType,
          innerTagName = _this$props5.innerTagName,
          itemCount = _this$props5.itemCount,
          itemData = _this$props5.itemData,
          _this$props5$itemKey = _this$props5.itemKey,
          itemKey = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey,
          layout = _this$props5.layout,
          outerElementType = _this$props5.outerElementType,
          outerTagName = _this$props5.outerTagName,
          style = _this$props5.style,
          useIsScrolling = _this$props5.useIsScrolling,
          width = _this$props5.width;
      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"

      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;

      var _this$_getRangeToRend = this._getRangeToRender(),
          startIndex = _this$_getRangeToRend[0],
          stopIndex = _this$_getRangeToRend[1];

      var items = [];

      if (itemCount > 0) {
        for (var _index = startIndex; _index <= stopIndex; _index++) {
          items.push(createElement(children, {
            data: itemData,
            key: itemKey(_index, itemData),
            index: _index,
            isScrolling: useIsScrolling ? isScrolling : undefined,
            style: this._getItemStyle(_index)
          }));
        }
      } // Read this value AFTER items have been created,
      // So their actual sizes (if variable) are taken into consideration.


      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
      return createElement(outerElementType || outerTagName || 'div', {
        className: className,
        onScroll: onScroll,
        ref: this._outerRefSetter,
        style: _extends$1({
          position: 'relative',
          height: height,
          width: width,
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
          willChange: 'transform',
          direction: direction
        }, style)
      }, createElement(innerElementType || innerTagName || 'div', {
        children: items,
        ref: innerRef,
        style: {
          height: isHorizontal ? '100%' : estimatedTotalSize,
          pointerEvents: isScrolling ? 'none' : undefined,
          width: isHorizontal ? estimatedTotalSize : '100%'
        }
      }));
    };

    _proto._callPropsCallbacks = function _callPropsCallbacks() {
      if (typeof this.props.onItemsRendered === 'function') {
        var itemCount = this.props.itemCount;

        if (itemCount > 0) {
          var _this$_getRangeToRend2 = this._getRangeToRender(),
              _overscanStartIndex = _this$_getRangeToRend2[0],
              _overscanStopIndex = _this$_getRangeToRend2[1],
              _visibleStartIndex = _this$_getRangeToRend2[2],
              _visibleStopIndex = _this$_getRangeToRend2[3];

          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
        }
      }

      if (typeof this.props.onScroll === 'function') {
        var _this$state2 = this.state,
            _scrollDirection = _this$state2.scrollDirection,
            _scrollOffset = _this$state2.scrollOffset,
            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;

        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
      }
    } // Lazily create and cache item styles while scrolling,
    // So that pure component sCU will prevent re-renders.
    // We maintain this cache, and pass a style prop rather than index,
    // So that List can clear cached styles and force item re-render if necessary.
    ;

    _proto._getRangeToRender = function _getRangeToRender() {
      var _this$props6 = this.props,
          itemCount = _this$props6.itemCount,
          overscanCount = _this$props6.overscanCount;
      var _this$state3 = this.state,
          isScrolling = _this$state3.isScrolling,
          scrollDirection = _this$state3.scrollDirection,
          scrollOffset = _this$state3.scrollOffset;

      if (itemCount === 0) {
        return [0, 0, 0, 0];
      }

      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
      // If there isn't at least one extra item, tab loops back around.

      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
    };

    return List;
  }(PureComponent), _class.defaultProps = {
    direction: 'ltr',
    itemData: undefined,
    layout: 'vertical',
    overscanCount: 2,
    useIsScrolling: false
  }, _class;
} // NOTE: I considered further wrapping individual items with a pure ListItem component.
// This would avoid ever calling the render function for the same index more than once,
// But it would also add the overhead of a lot of components/fibers.
// I assume people already do this (render function returning a class component),
// So my doing it would just unnecessarily double the wrappers.

var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
  var children = _ref2.children,
      direction = _ref2.direction,
      height = _ref2.height,
      layout = _ref2.layout,
      innerTagName = _ref2.innerTagName,
      outerTagName = _ref2.outerTagName,
      width = _ref2.width;
  var instance = _ref3.instance;
};

var FixedSizeList = /*#__PURE__*/createListComponent({
  getItemOffset: function getItemOffset(_ref, index) {
    var itemSize = _ref.itemSize;
    return index * itemSize;
  },
  getItemSize: function getItemSize(_ref2, index) {
    var itemSize = _ref2.itemSize;
    return itemSize;
  },
  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
    var itemCount = _ref3.itemCount,
        itemSize = _ref3.itemSize;
    return itemSize * itemCount;
  },
  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset, instanceProps, scrollbarSize) {
    var direction = _ref4.direction,
        height = _ref4.height,
        itemCount = _ref4.itemCount,
        itemSize = _ref4.itemSize,
        layout = _ref4.layout,
        width = _ref4.width;
    // TODO Deprecate direction "horizontal"
    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
    var size = isHorizontal ? width : height;
    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
    var maxOffset = Math.min(lastItemOffset, index * itemSize);
    var minOffset = Math.max(0, index * itemSize - size + itemSize + scrollbarSize);

    if (align === 'smart') {
      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
        align = 'auto';
      } else {
        align = 'center';
      }
    }

    switch (align) {
      case 'start':
        return maxOffset;

      case 'end':
        return minOffset;

      case 'center':
        {
          // "Centered" offset is usually the average of the min and max.
          // But near the edges of the list, this doesn't hold true.
          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);

          if (middleOffset < Math.ceil(size / 2)) {
            return 0; // near the beginning
          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
            return lastItemOffset; // near the end
          } else {
            return middleOffset;
          }
        }

      case 'auto':
      default:
        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
          return scrollOffset;
        } else if (scrollOffset < minOffset) {
          return minOffset;
        } else {
          return maxOffset;
        }

    }
  },
  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
    var itemCount = _ref5.itemCount,
        itemSize = _ref5.itemSize;
    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
  },
  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
    var direction = _ref6.direction,
        height = _ref6.height,
        itemCount = _ref6.itemCount,
        itemSize = _ref6.itemSize,
        layout = _ref6.layout,
        width = _ref6.width;
    // TODO Deprecate direction "horizontal"
    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
    var offset = startIndex * itemSize;
    var size = isHorizontal ? width : height;
    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
    ));
  },
  initInstanceProps: function initInstanceProps(props) {// Noop
  },
  shouldResetStyleCacheOnItemSizeChange: true,
  validateProps: function validateProps(_ref7) {
    var itemSize = _ref7.itemSize;
  }
});

// Pulled from react-compat
// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
function shallowDiffers(prev, next) {
  for (var attribute in prev) {
    if (!(attribute in next)) {
      return true;
    }
  }

  for (var _attribute in next) {
    if (prev[_attribute] !== next[_attribute]) {
      return true;
    }
  }

  return false;
}

var _excluded = ["style"],
    _excluded2 = ["style"];
// It knows to compare individual style props and ignore the wrapper object.
// See https://reactjs.org/docs/react-api.html#reactmemo

function areEqual(prevProps, nextProps) {
  var prevStyle = prevProps.style,
      prevRest = _objectWithoutPropertiesLoose(prevProps, _excluded);

  var nextStyle = nextProps.style,
      nextRest = _objectWithoutPropertiesLoose(nextProps, _excluded2);

  return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
}

function Body$1(_ref) {
  var className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    onRowClick = _ref.onRowClick,
    rows = _ref.rows,
    columns = _ref.columns,
    rowHeight = _ref.rowHeight,
    height = _ref.height,
    activeIndex = _ref.activeIndex,
    highlightActiveRow = _ref.highlightActiveRow,
    designProps = _ref.designProps,
    themed = _ref.themed;
  // Themed just for passing theming information

  var renderRow = /*#__PURE__*/React.memo(
  // eslint-disable-next-line react/prop-types
  function (_ref2) {
    var index = _ref2.index,
      style = _ref2.style,
      data = _ref2.data;
    var isRowActive = index === activeIndex;
    return /*#__PURE__*/React.createElement(Row, {
      index: index,
      style: style,
      data: data,
      onClick: onRowClick,
      widths: columns.map(function (column) {
        return column.width;
      }),
      prefixClassName: "".concat(prefixClassName, "-row"),
      active: isRowActive,
      highlightActiveRow: highlightActiveRow,
      designProps: designProps,
      themed: themed
    });
  }, areEqual);
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixClassName, " ").concat(className)
  }, /*#__PURE__*/React.createElement(FixedSizeList, {
    height: height,
    itemCount: rows.length,
    itemSize: rowHeight,
    itemData: rows,
    width: "100%"
  }, renderRow));
}
Body$1.propTypes = {
  className: PropTypes.string,
  prefixClassName: PropTypes.string,
  onRowClick: PropTypes.func,
  height: PropTypes.number,
  rowHeight: PropTypes.number,
  rows: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)),
  columns: PropTypes.arrayOf(PropTypes.object),
  activeIndex: PropTypes.bool,
  highlightActiveRow: PropTypes.bool,
  designProps: PropTypes.shape({}),
  themed: PropTypes.bool
};
Body$1.defaultProps = {
  onRowClick: function onRowClick() {},
  className: "",
  prefixClassName: "",
  rows: [[]],
  columns: [],
  rowHeight: 0,
  height: 300,
  designProps: PropTypes.shape({}),
  themed: false
};
Body$1.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Body",
  "props": {
    "onRowClick": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "rows": {
      "defaultValue": {
        "value": "[[]]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "arrayOf",
          "value": {
            "name": "object"
          }
        }
      },
      "required": false,
      "description": ""
    },
    "columns": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "object"
        }
      },
      "required": false,
      "description": ""
    },
    "rowHeight": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "height": {
      "defaultValue": {
        "value": "300",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "designProps": {
      "defaultValue": {
        "value": "PropTypes.shape({})",
        "computed": true
      },
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "activeIndex": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "highlightActiveRow": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

var tableBorder$2 = variant({
  prop: "appearance",
  scale: "tableBorder",
  variants: {
    noBorder: {}
  }
});
var tableRowBackground = variant({
  prop: "rowBackground",
  scale: "tableRowBackground",
  variants: {
    "default": {},
    alternate: {}
  }
});
var style$3 = {
  display: "flex",
  flexDirection: "column",
  overflow: "hidden"
};
var ThemedTableWrapper = styled("div")(style$3, color, border, tableBorder$2, tableRowBackground);
ThemedTableWrapper.defaultProps = {
  appearance: "withBorder",
  borderWidth: "xs",
  borderColor: "grey.haptik",
  borderStyle: "solid",
  backgroundColor: "grey.pastel",
  borderRadius: "3",
  rowBackground: "default"
};

var css_248z$2 = ".Table_table__3FWoV {\n  display: flex;\n  flex-direction: column;\n  background-color: #fff;\n  border-radius: 8px;\n  border: 1px solid #DDDDDD;\n  overflow: hidden; }\n  .Table_table__3FWoV.Table_simple__BlRSt {\n    background-color: transparent;\n    border: none; }\n\n.Table_tableHeader__16Dup {\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #EEE; }\n\n.Table_tableHeaderItem__1JTKL {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  border-right: 1px solid #EEE;\n  padding: 8px 12px;\n  cursor: pointer; }\n  .Table_tableHeaderItem__1JTKL:last-child {\n    border-right: none; }\n  .Table_tableHeaderItem__1JTKL.Table_simple__BlRSt {\n    border-right: none; }\n    .Table_tableHeaderItem__1JTKL.Table_simple__BlRSt .Table_tableHeaderItemText__1r3Gj {\n      font-weight: 400;\n      color: #999; }\n  .Table_tableHeaderItem__1JTKL.Table_active__2v10R .Table_tableHeaderItemText__1r3Gj {\n    color: #124fa0; }\n\n.Table_tableHeaderItemText__1r3Gj {\n  font-weight: 600;\n  color: #000;\n  user-select: none; }\n\n.Table_tableHeaderItemIcon__JVZlR {\n  font-size: 8px;\n  padding-left: 6px;\n  color: #124fa0; }\n\n.Table_tableRow__1xr7Y {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  cursor: pointer; }\n  .Table_tableRow__1xr7Y:hover {\n    background-color: #F5F5F5; }\n  .Table_tableRow__1xr7Y:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 3px;\n    height: 100%;\n    background-color: #124fa0;\n    opacity: 0; }\n  .Table_tableRow__1xr7Y.Table_selected__36h8E {\n    background-color: rgba(18, 79, 160, 0.1); }\n    .Table_tableRow__1xr7Y.Table_selected__36h8E:before {\n      opacity: 1; }\n  .Table_tableRow__1xr7Y.Table_disabled__3L9fs {\n    opacity: 0.4; }\n\n.Table_tableRowItem__35MaF {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  border-right: 1px solid #EEE;\n  border-bottom: 1px solid #EEE;\n  padding: 8px 12px;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n  .Table_tableRowItem__35MaF:last-child {\n    border-right: none; }\n  .Table_tableRowItem__35MaF.Table_simple__BlRSt {\n    border-right: none;\n    border-bottom: 1px solid #EEE; }\n\n.Table_tableRowItemText__3xWfL {\n  display: inline-flex;\n  align-items: center;\n  text-overflow: ellipsis;\n  width: 100%; }\n";
var styles$2 = {"table":"Table_table__3FWoV","simple":"Table_simple__BlRSt","tableHeader":"Table_tableHeader__16Dup","tableHeaderItem":"Table_tableHeaderItem__1JTKL","tableHeaderItemText":"Table_tableHeaderItemText__1r3Gj","active":"Table_active__2v10R","tableHeaderItemIcon":"Table_tableHeaderItemIcon__JVZlR","tableRow":"Table_tableRow__1xr7Y","selected":"Table_selected__36h8E","disabled":"Table_disabled__3L9fs","tableRowItem":"Table_tableRowItem__35MaF","tableRowItemText":"Table_tableRowItemText__3xWfL"};
styleInject(css_248z$2);

var _excluded$1 = ["columns", "rows", "onSort", "onRowClick", "highlightActiveRow", "sortKey", "sortOrder", "className", "prefixClassName", "virtual", "rowHeight", "height", "themed", "activeIndex"];
function Table(props) {
  var columns = props.columns,
    rows = props.rows,
    onSort = props.onSort,
    onRowClick = props.onRowClick,
    highlightActiveRow = props.highlightActiveRow,
    sortKey = props.sortKey,
    sortOrder = props.sortOrder,
    className = props.className,
    prefixClassName = props.prefixClassName,
    virtual = props.virtual,
    rowHeight = props.rowHeight,
    height = props.height,
    themed = props.themed,
    _props$activeIndex = props.activeIndex,
    activeIndex = _props$activeIndex === void 0 ? -1 : _props$activeIndex,
    designProps = _objectWithoutProperties(props, _excluded$1);
  var RenderBody = virtual ? Body$1 : Body;
  var rowProps = onRowClick ? {
    onRowClick: onRowClick
  } : {};
  if (themed) {
    return /*#__PURE__*/React.createElement(ThemedTableWrapper, designProps, /*#__PURE__*/React.createElement(Header, {
      prefixClassName: "".concat(prefixClassName, "-header"),
      onSort: onSort,
      columns: columns,
      sortOrder: sortOrder,
      sortKey: sortKey,
      designProps: designProps,
      themed: true
    }), /*#__PURE__*/React.createElement(RenderBody, _extends({}, rowProps, {
      activeIndex: activeIndex,
      highlightActiveRow: highlightActiveRow,
      prefixClassName: "".concat(prefixClassName, "-body"),
      rows: rows,
      columns: columns,
      rowHeight: rowHeight,
      height: height,
      designProps: designProps,
      themed: true
    })));
  }
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "table",
    className: "".concat(styles$2.table, " ").concat(className, " ").concat(prefixClassName)
  }, /*#__PURE__*/React.createElement(Header, {
    prefixClassName: "".concat(prefixClassName, "-header"),
    onSort: onSort,
    columns: columns,
    sortOrder: sortOrder,
    sortKey: sortKey
  }), /*#__PURE__*/React.createElement(RenderBody, _extends({}, rowProps, {
    activeIndex: activeIndex,
    highlightActiveRow: highlightActiveRow,
    prefixClassName: "".concat(prefixClassName, "-body"),
    rows: rows,
    columns: columns,
    rowHeight: rowHeight,
    height: height
  })));
}
Table.propTypes = _objectSpread2(_objectSpread2({
  className: PropTypes.string,
  height: PropTypes.number,
  prefixClassName: PropTypes.string,
  themed: PropTypes.bool
}, Header.propTypes), Body.propTypes);
Table.defaultProps = {
  className: "",
  prefixClassName: "",
  height: 300,
  themed: false
};
Table.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Table",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "height": {
      "defaultValue": {
        "value": "300",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  },
  "composes": ["./components/Header", "./components/Body"]
};

export default Table;
