@punch-in/buffet-modern-core 3.3.11

package/build/esm/components/Picker/PickerSection.js

@@ -0,0 +1,48 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+var PickerSection = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  top: 38px;\n  left: ", ";\n  right: ", ";\n  z-index: 1046;\n  background-color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0 2px 4px ", ";\n  ", "\n"])), function (_ref) {
+  var position = _ref.position;
+  return position === 'left' ? '0' : 'auto';
+}, function (_ref2) {
+  var position = _ref2.position;
+  return position === 'right' ? '0' : 'auto';
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.main.colors.white;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.main.sizes.borderRadius;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.main.colors.darkGrey;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.main.colors.greyAlpha;
+}, function (_ref7) {
+  var isOpen = _ref7.isOpen;
+  return isOpen && 'display: block;';
+});
+PickerSection.defaultProps = {
+  isOpen: false,
+  position: 'left',
+  // TODO : This is temporary
+  theme: {
+    main: {
+      colors: {
+        white: '#ffffff',
+        darkGrey: '#e3e9f3',
+        greyAlpha: 'rgba(227, 233, 243, 0.5)'
+      },
+      sizes: {
+        borderRadius: '2px'
+      }
+    }
+  }
+};
+PickerSection.propTypes = {
+  isOpen: PropTypes.bool,
+  position: PropTypes.oneOf(['left', 'right'])
+};
+export default PickerSection;

package/build/esm/components/Picker/PickerWrapper.js

@@ -0,0 +1,5 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+var PickerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+export default PickerWrapper;

package/build/esm/components/Picker/index.js

@@ -0,0 +1,50 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useClickAwayListener } from '@punch-in/buffet-modern-hooks';
+import PickerButton from './PickerButton';
+import PickerSection from './PickerSection';
+import PickerWrapper from './PickerWrapper';
+var Picker = function Picker(_ref) {
+  var position = _ref.position,
+    renderButtonContent = _ref.renderButtonContent,
+    renderSectionContent = _ref.renderSectionContent;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var dropdownRef = useRef();
+  useClickAwayListener(dropdownRef, function () {
+    return setIsOpen(false);
+  });
+  var handleToggle = function handleToggle() {
+    setIsOpen(function (v) {
+      return !v;
+    });
+  };
+  return /*#__PURE__*/React.createElement(PickerWrapper, {
+    ref: dropdownRef
+  }, /*#__PURE__*/React.createElement(PickerButton, {
+    onClick: handleToggle,
+    isActive: isOpen
+  }, renderButtonContent(isOpen)), /*#__PURE__*/React.createElement(PickerSection, {
+    isOpen: isOpen,
+    position: position
+  }, renderSectionContent(handleToggle)));
+};
+Picker.defaultProps = {
+  position: 'left',
+  renderButtonContent: function renderButtonContent() {},
+  renderSectionContent: function renderSectionContent() {}
+};
+Picker.propTypes = {
+  position: PropTypes.oneOf(['left', 'right']),
+  renderButtonContent: PropTypes.func,
+  renderSectionContent: PropTypes.func
+};
+export default Picker;

package/build/esm/components/PrefixIcon/index.js

@@ -0,0 +1,7 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import { sizes } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+var PrefixIcon = styled(Icon)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n  font-size: 0.94em;\n"])), sizes.margin);
+export default PrefixIcon;

package/build/esm/components/Select/index.js

@@ -0,0 +1,82 @@
+var _excluded = ["autoFocus", "id", "name", "onChange", "options", "tabIndex", "value"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ *
+ * Select
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import invariant from 'invariant';
+import { Select as StyledSelect } from '@punch-in/buffet-modern';
+function Select(_ref) {
+  var autoFocus = _ref.autoFocus,
+    id = _ref.id,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    tabIndex = _ref.tabIndex,
+    value = _ref.value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var lengthOfReactElementsInOptions = options.filter(function (option) {
+    return /*#__PURE__*/React.isValidElement(option);
+  }).length;
+  var formatOptions = function formatOptions() {
+    return options.map(function (option) {
+      var optionValue = option;
+
+      // Type check
+      // Use option.value if it is defined (ie. even when it is an empty string)
+      if (option && typeof option.value !== 'undefined') {
+        optionValue = option.value;
+      }
+      return /*#__PURE__*/React.createElement("option", {
+        key: JSON.stringify(optionValue),
+        value: optionValue
+      }, option.label || option);
+    });
+  };
+  var renderOptions = function renderOptions() {
+    var areOptionsValidReactElements = options.every(function (option) {
+      return /*#__PURE__*/React.isValidElement(option);
+    });
+    return areOptionsValidReactElements ? options : formatOptions();
+  };
+  if (lengthOfReactElementsInOptions > 0) {
+    invariant(lengthOfReactElementsInOptions === options.length, 'You have mixed up React Elements and non React Elements in your options array ');
+  }
+  return /*#__PURE__*/React.createElement(StyledSelect, _extends({
+    autoFocus: autoFocus,
+    id: id || name,
+    name: name,
+    onChange: onChange,
+    tabIndex: tabIndex,
+    value: value
+  }, rest), renderOptions());
+}
+Select.defaultProps = {
+  autoComplete: 'off',
+  autoFocus: false,
+  id: null,
+  options: [],
+  placeholder: null,
+  tabIndex: '0'
+};
+Select.propTypes = {
+  autoComplete: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
+  }), PropTypes.string, PropTypes.node])),
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired
+};
+export default Select;

package/build/esm/components/Separator/index.js

@@ -0,0 +1,44 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Flex from '../Flex';
+import Padded from '../Padded';
+import Text from '../Text';
+import colors from '../../theme/colors';
+var BorderTop = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  width: 100%;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.main.colors.border;
+});
+BorderTop.defaultProps = {
+  theme: {
+    main: {
+      colors: colors
+    }
+  }
+};
+BorderTop.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  theme: PropTypes.object
+};
+var Separator = function Separator(_ref2) {
+  var label = _ref2.label;
+  return /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, label ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BorderTop, null), /*#__PURE__*/React.createElement(Padded, {
+    left: true,
+    right: true,
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: "grey"
+  }, label)), /*#__PURE__*/React.createElement(BorderTop, null)) : /*#__PURE__*/React.createElement(BorderTop, null));
+};
+Separator.defaultProps = {
+  label: null
+};
+Separator.propTypes = {
+  label: PropTypes.string
+};
+export default Separator;

package/build/esm/components/Table/ActionCollapse.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+function ActionCollapse(_ref) {
+  var colSpan = _ref.colSpan,
+    translatedNumberOfEntry = _ref.translatedNumberOfEntry,
+    translatedNumberOfEntries = _ref.translatedNumberOfEntries,
+    translatedAction = _ref.translatedAction,
+    icon = _ref.icon,
+    numberOfSelectedEntries = _ref.numberOfSelectedEntries,
+    onConfirm = _ref.onConfirm;
+  return /*#__PURE__*/React.createElement("tr", {
+    className: "deleteRow"
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: colSpan
+  }, /*#__PURE__*/React.createElement("p", null, numberOfSelectedEntries, "\xA0", numberOfSelectedEntries > 1 ? translatedNumberOfEntries : translatedNumberOfEntry, "\xA0 selected\xA0-\xA0", /*#__PURE__*/React.createElement("button", {
+    onClick: onConfirm,
+    type: "button"
+  }, /*#__PURE__*/React.createElement("p", null, translatedAction), icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  })))));
+}
+ActionCollapse.defaultProps = {
+  icon: 'trash',
+  translatedNumberOfEntry: 'entry',
+  translatedNumberOfEntries: 'entries',
+  translatedAction: 'Delete all',
+  numberOfSelectedEntries: 0,
+  onConfirm: function onConfirm() {}
+};
+ActionCollapse.propTypes = {
+  colSpan: PropTypes.number.isRequired,
+  icon: PropTypes.string,
+  numberOfSelectedEntries: PropTypes.number,
+  onConfirm: PropTypes.func,
+  translatedAction: PropTypes.string,
+  translatedNumberOfEntries: PropTypes.string,
+  translatedNumberOfEntry: PropTypes.string
+};
+export default ActionCollapse;

package/build/esm/components/Table/index.js

@@ -0,0 +1,140 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ *
+ * Table
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LoadingIndicator, Table as StyledTable, TableRowEmpty } from '@punch-in/buffet-modern';
+import TableHeader from '../TableHeader';
+import TableRow from '../TableRow';
+import ActionCollapse from './ActionCollapse';
+function Table(_ref) {
+  var bulkActionProps = _ref.bulkActionProps,
+    className = _ref.className,
+    customRow = _ref.customRow,
+    headers = _ref.headers,
+    isLoading = _ref.isLoading,
+    onChangeSort = _ref.onChangeSort,
+    onClickRow = _ref.onClickRow,
+    _onSelect = _ref.onSelect,
+    onSelectAll = _ref.onSelectAll,
+    rows = _ref.rows,
+    rowLinks = _ref.rowLinks,
+    showActionCollapse = _ref.showActionCollapse,
+    sortBy = _ref.sortBy,
+    sortOrder = _ref.sortOrder,
+    tableEmptyText = _ref.tableEmptyText,
+    withBulkAction = _ref.withBulkAction;
+  var colSpan = withBulkAction ? headers.length + 1 : headers.length;
+  if (rowLinks.length > 0) {
+    colSpan += 1;
+  }
+  var areAllEntriesSelected = rows.length > 0 && rows.some(function (row) {
+    return row._isChecked === true;
+  });
+  var shouldDisplayEmptyRow = rows.length === 0 && !isLoading;
+  return /*#__PURE__*/React.createElement(StyledTable, {
+    className: className
+  }, /*#__PURE__*/React.createElement("table", {
+    className: ""
+  }, /*#__PURE__*/React.createElement(TableHeader, {
+    headers: headers,
+    onChangeSort: onChangeSort,
+    onSelectAll: onSelectAll,
+    rows: rows,
+    shouldAddCell: rowLinks.length > 0,
+    sortBy: sortBy,
+    sortOrder: sortOrder,
+    withBulkAction: withBulkAction
+  }), /*#__PURE__*/React.createElement("tbody", null, withBulkAction && areAllEntriesSelected && showActionCollapse && /*#__PURE__*/React.createElement(ActionCollapse, _extends({
+    colSpan: colSpan,
+    numberOfSelectedEntries: rows.filter(function (row) {
+      return row._isChecked === true;
+    }).length
+  }, bulkActionProps)), isLoading && /*#__PURE__*/React.createElement(TableRowEmpty, {
+    isLoading: true
+  }, /*#__PURE__*/React.createElement("td", {
+    colSpan: colSpan
+  }, /*#__PURE__*/React.createElement(LoadingIndicator, null))), shouldDisplayEmptyRow && /*#__PURE__*/React.createElement(TableRowEmpty, null, /*#__PURE__*/React.createElement("td", {
+    colSpan: colSpan
+  }, tableEmptyText)), !shouldDisplayEmptyRow && rows.map(function (row, index) {
+    var key = row.id || "key".concat(index);
+    if (customRow) {
+      var Row = customRow;
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: JSON.stringify(row)
+      }, /*#__PURE__*/React.createElement(Row, {
+        row: row,
+        headers: headers,
+        onSelect: _onSelect
+      }));
+    }
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: key,
+      headers: headers,
+      onClick: onClickRow,
+      onSelect: function onSelect() {
+        _onSelect(row, index);
+      },
+      row: row,
+      rowLinks: rowLinks,
+      withBulkAction: withBulkAction
+    });
+  }))));
+}
+Table.defaultProps = {
+  bulkActionProps: {
+    icon: 'trash',
+    onConfirm: function onConfirm() {},
+    translatedNumberOfEntry: 'entry',
+    translatedNumberOfEntries: 'entries',
+    translatedAction: 'Delete all'
+  },
+  className: null,
+  customRow: null,
+  headers: [],
+  isLoading: false,
+  onChangeSort: function onChangeSort() {},
+  onClickRow: function onClickRow() {},
+  onSelect: function onSelect() {},
+  onSelectAll: function onSelectAll() {},
+  rows: [],
+  rowLinks: [],
+  showActionCollapse: false,
+  sortBy: null,
+  sortOrder: 'asc',
+  tableEmptyText: 'There is no data',
+  withBulkAction: false
+};
+Table.propTypes = {
+  bulkActionProps: PropTypes.shape({
+    icon: PropTypes.string,
+    onConfirm: PropTypes.func,
+    translatedAction: PropTypes.string,
+    translatedNumberOfEntries: PropTypes.string,
+    translatedNumberOfEntry: PropTypes.string
+  }),
+  className: PropTypes.string,
+  customRow: PropTypes.func,
+  headers: PropTypes.arrayOf(PropTypes.shape({
+    isSortEnabled: PropTypes.bool,
+    name: PropTypes.string,
+    value: PropTypes.string
+  })),
+  isLoading: PropTypes.bool,
+  onChangeSort: PropTypes.func,
+  onClickRow: PropTypes.func,
+  onSelect: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  rowLinks: PropTypes.instanceOf(Array),
+  rows: PropTypes.instanceOf(Array),
+  showActionCollapse: PropTypes.bool,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  tableEmptyText: PropTypes.string,
+  withBulkAction: PropTypes.bool
+};
+export default Table;

package/build/esm/components/Table/tests/index.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { TableRowEmpty } from '@punch-in/buffet-modern';
+import TableRow from '../../TableRow';
+import Table from '../index';
+import ActionCollapse from '../ActionCollapse';
+describe('<Table />', function () {
+  // eslint-disable-next-line jest/expect-expect
+  it('Should not crash', function () {
+    mount(/*#__PURE__*/React.createElement(Table, null));
+  });
+  it('Should display the Empty row if there is no data', function () {
+    var wrapper = mount(/*#__PURE__*/React.createElement(Table, null));
+    expect(wrapper.find(TableRow)).toHaveLength(0);
+    expect(wrapper.find(TableRowEmpty)).toHaveLength(1);
+  });
+  it('Should display a custom component if given', function () {
+    var Custom = function Custom() {
+      return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Test"));
+    };
+    var headers = [{
+      value: 'test'
+    }];
+    var rows = [{
+      test: 'test1',
+      other: 'other'
+    }];
+    var wrapper = mount(/*#__PURE__*/React.createElement(Table, {
+      customRow: Custom,
+      rows: rows,
+      headers: headers
+    }));
+    expect(wrapper.find(TableRow)).toHaveLength(0);
+    expect(wrapper.find(TableRowEmpty)).toHaveLength(0);
+    expect(wrapper.find(Custom)).toHaveLength(1);
+  });
+  it('Should display the ActionCollapse correctly without the rowLinks', function () {
+    var headers = [{
+      value: 'test'
+    }];
+    var rows = [{
+      test: 'test1',
+      other: 'other',
+      _isChecked: true
+    }];
+    var wrapper = mount(/*#__PURE__*/React.createElement(Table, {
+      rows: rows,
+      headers: headers,
+      withBulkAction: true
+    }));
+    var collapse = wrapper.find(ActionCollapse);
+    expect(collapse).toHaveLength(1);
+    expect(collapse.prop('colSpan')).toBe(2);
+  });
+  it('Should display the ActionCollapse correctly with the bulkAction', function () {
+    var headers = [{
+      value: 'test'
+    }];
+    var rows = [{
+      test: 'test1',
+      other: 'other',
+      _isChecked: true
+    }];
+    var rowLinks = [{
+      icon: 'trash',
+      onClick: jest.fn()
+    }];
+    var wrapper = mount(/*#__PURE__*/React.createElement(Table, {
+      rows: rows,
+      headers: headers,
+      rowLinks: rowLinks,
+      withBulkAction: true
+    }));
+    var collapse = wrapper.find(ActionCollapse);
+    expect(collapse).toHaveLength(1);
+    expect(collapse.prop('colSpan')).toBe(3);
+  });
+  it('Should display the ActionCollapse if one of the row is not checked', function () {
+    var headers = [{
+      value: 'test'
+    }];
+    var rows = [{
+      test: 'test1',
+      other: 'other',
+      _isChecked: true
+    }, {
+      test: 'test2',
+      other: 'other1',
+      _isChecked: false
+    }];
+    var rowLinks = [{
+      icon: 'trash',
+      onClick: jest.fn()
+    }];
+    var wrapper = mount(/*#__PURE__*/React.createElement(Table, {
+      rows: rows,
+      headers: headers,
+      rowLinks: rowLinks,
+      withBulkAction: true
+    }));
+    var collapse = wrapper.find(ActionCollapse);
+    expect(collapse).toHaveLength(1);
+    expect(collapse.prop('numberOfSelectedEntries')).toBe(1);
+  });
+  it('Should not display the ActionCollapse if the withBulkAction is false', function () {
+    var headers = [{
+      value: 'test'
+    }];
+    var rows = [{
+      test: 'test1',
+      other: 'other',
+      _isChecked: true
+    }, {
+      test: 'test2',
+      other: 'other1',
+      _isChecked: true
+    }];
+    var rowLinks = [{
+      icon: 'trash',
+      onClick: jest.fn()
+    }];
+    var wrapper = mount(/*#__PURE__*/React.createElement(Table, {
+      rows: rows,
+      headers: headers,
+      rowLinks: rowLinks
+    }));
+    var collapse = wrapper.find(ActionCollapse);
+    expect(collapse).toHaveLength(0);
+  });
+});

package/build/esm/components/TableHeader/index.js

@@ -0,0 +1,88 @@
+/**
+ *
+ * TableHeader
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { Checkbox } from '@punch-in/buffet-modern';
+import Icon from '../Icon';
+
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/control-has-associated-label */
+function TableHeader(_ref) {
+  var headers = _ref.headers,
+    onChangeSort = _ref.onChangeSort,
+    onSelectAll = _ref.onSelectAll,
+    rows = _ref.rows,
+    shouldAddCell = _ref.shouldAddCell,
+    sortBy = _ref.sortBy,
+    sortOrder = _ref.sortOrder,
+    withBulkAction = _ref.withBulkAction;
+  var checked = rows.length > 0 && rows.every(function (row) {
+    return row._isChecked === true;
+  });
+  var shouldDisplayNotChecked = rows.some(function (row) {
+    return row._isChecked === true;
+  }) && !checked;
+  return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, withBulkAction && /*#__PURE__*/React.createElement("th", {
+    className: "checkCell"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    onChange: onSelectAll,
+    checked: checked,
+    someChecked: shouldDisplayNotChecked
+  })), headers.map(function (header) {
+    var isSortEnabled = header.isSortEnabled,
+      name = header.name,
+      value = header.value;
+    var shouldDisplaySort = isSortEnabled && sortBy === value;
+    var firstElementThatCanBeSorted = get(headers.filter(function (h) {
+      return h.isSortEnabled;
+    }), [0, 'value'], null);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      React.createElement("th", {
+        key: value,
+        onClick: function onClick() {
+          onChangeSort({
+            sortBy: value,
+            firstElementThatCanBeSorted: firstElementThatCanBeSorted,
+            isSortEnabled: isSortEnabled
+          });
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        className: isSortEnabled ? 'clickable' : ''
+      }, name, shouldDisplaySort && /*#__PURE__*/React.createElement(Icon, {
+        icon: sortOrder || 'asc'
+      })))
+    );
+  }), shouldAddCell && /*#__PURE__*/React.createElement("th", null)));
+}
+TableHeader.defaultProps = {
+  headers: [],
+  onChangeSort: function onChangeSort() {},
+  onSelectAll: function onSelectAll() {},
+  rows: [],
+  shouldAddCell: false,
+  sortBy: null,
+  sortOrder: 'asc',
+  withBulkAction: false
+};
+TableHeader.propTypes = {
+  headers: PropTypes.arrayOf(PropTypes.shape({
+    isSortEnabled: PropTypes.bool,
+    name: PropTypes.string,
+    value: PropTypes.string
+  })),
+  onChangeSort: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  rows: PropTypes.instanceOf(Array),
+  shouldAddCell: PropTypes.bool,
+  sortBy: PropTypes.string,
+  sortOrder: PropTypes.string,
+  withBulkAction: PropTypes.bool
+};
+export default TableHeader;