@algolia/satellite 1.0.0-beta.119 → 1.0.0-beta.123

package/esm/Tables/DataTable/DataTable.js

@@ -0,0 +1,248 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { useEffect, useState } from "react";
+import compact from "lodash/compact";
+import get from "lodash/get";
+import stl from "../../styles/helpers/satellitePrefixer";
+import Checkbox from "../../Checkbox";
+import { RadioButton } from "../../RadioGroup";
+import { toSentenceCase } from "../../utils";
+import Table from "../Table";
+import DataTableHeader from "./components/Header";
+import DataTableFooter from "./components/Footer";
+import DataTableBody from "./components/Body";
+import DataTableLoader from "./components/Loader";
+
+var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
+  return String(idx);
+};
+/**
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ *
+ * #### Do
+ *
+ * - Organize columns and rows based on the needs of your users. To help people read the table, order the columns by importance from left to right, with the key pieces of content opening the row
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
+ * - Start by columns with highest value to the user, and continue with less important ones
+ *
+ * #### Do not
+ *
+ * - Center align text in cells
+ *
+ * ## Best practices
+ *
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
+ */
+
+
+export var DataTable = function DataTable(_ref) {
+  var data = _ref.data,
+      itemId = _ref.itemId,
+      columns = _ref.columns,
+      onChange = _ref.onChange,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? "success" : _ref$status,
+      noDataContent = _ref.noDataContent,
+      errorContent = _ref.errorContent,
+      _ref$sorting = _ref.sorting,
+      sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+      _ref$pagination = _ref.pagination,
+      pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+      _ref$selectMode = _ref.selectMode,
+      selectMode = _ref$selectMode === void 0 ? "none" : _ref$selectMode,
+      selection = _ref.selection,
+      onSelectionChange = _ref.onSelectionChange,
+      canSelectItem = _ref.canSelectItem,
+      canHoverRow = _ref.canHoverRow,
+      onRowHoveredChanged = _ref.onRowHoveredChanged;
+
+  if (process.env.NODE_ENV !== "production") {
+    var _selection$length;
+
+    if (itemId === undefined && (sorting.length > 0 || selectMode !== null)) {
+      console.warn("You did not provide a custom `itemId` function, but you have defined `sorting` and/or `selectMode`. This can lead to unexpected results.");
+    }
+
+    if (selectMode === "single" && ((_selection$length = selection === null || selection === void 0 ? void 0 : selection.length) !== null && _selection$length !== void 0 ? _selection$length : 0) > 1) {
+      console.warn("You can only have one selected item at a time in single `selectMode`.");
+    }
+
+    if (pagination && data.length > pagination.itemsPerPage) {
+      console.warn("`pagination.itemsPerPage` (".concat(pagination.itemsPerPage, ") doesn't match `data.length` (").concat(data.length, ")."));
+    }
+  }
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      hoveredRowId = _useState2[0],
+      setHoveredRowId = _useState2[1];
+
+  useEffect(function () {
+    // Reset hovered row when data changes to avoid inconsistent state
+    setHoveredRowId(undefined);
+  }, [data]);
+  var computedColumns = compact([selectMode === "single" && {
+    id: "singleSelect",
+    accessor: "singleSelect",
+    Header: function Header() {
+      return null;
+    },
+    Cell: function Cell(_ref2) {
+      var row = _ref2.row;
+      return /*#__PURE__*/React.createElement("div", {
+        className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex"])))
+      }, /*#__PURE__*/React.createElement(RadioButton, {
+        defaultChecked: row.selected,
+        disabled: !row.selectable,
+        className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+      }));
+    },
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-3"])))
+  }, selectMode === "multi" && {
+    id: "multiSelect",
+    accessor: "multiSelect",
+    Header: function Header() {
+      var unselectableRows = rows.filter(function (row) {
+        return !row.selectable;
+      }).map(function (r) {
+        return r.id;
+      });
+      var selectableRows = rows.filter(function (row) {
+        return row.selectable;
+      }).map(function (r) {
+        return r.id;
+      });
+      var selectionLength = (selection !== null && selection !== void 0 ? selection : []).length;
+      var dataLength = pagination ? pagination.itemsPerPage : data.length;
+      var isChecked = selectionLength === dataLength;
+      return /*#__PURE__*/React.createElement(Checkbox, {
+        "aria-label": "Select all" // Small hack to position the checkbox in the center of the header
+        ,
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["absolute mb-2.5"]))),
+        checked: isChecked,
+        indeterminate: selectionLength > 0 && selectionLength !== dataLength,
+        onClick: function onClick() {
+          return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat(_toConsumableArray(unselectableRows), _toConsumableArray(selectableRows)));
+        }
+      });
+    },
+    Cell: function Cell(_ref3) {
+      var row = _ref3.row;
+      return /*#__PURE__*/React.createElement("div", {
+        className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["flex"])))
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        checked: row.selected,
+        disabled: !row.selectable,
+        className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
+      }));
+    },
+    className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-3"])))
+  }].concat(_toConsumableArray(columns.map(function (c) {
+    var _c$Header;
+
+    return typeof c === "string" ? {
+      id: c,
+      accessor: c,
+      Header: function Header() {
+        return /*#__PURE__*/React.createElement("span", null, toSentenceCase(c));
+      }
+    } : _objectSpread(_objectSpread({}, c), {}, {
+      Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : function () {
+        return /*#__PURE__*/React.createElement("span", null, toSentenceCase(c.id));
+      }
+    });
+  }))));
+  var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;
+  var rows = data.map(function (item, index) {
+    var _ref4;
+
+    var id = typeof getItemIdInternal === "string" ? String(get(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
+    var hovered = hoveredRowId === id;
+    var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
+    var selected = sanitizedSelection.includes(id);
+    var selectable = selectMode !== "none" && (!canSelectItem || canSelectItem(item, index));
+    return {
+      item: item,
+      id: id,
+      hovered: hovered,
+      selected: selected,
+      selectable: selectable
+    };
+  });
+  var internalSorting = computedColumns.map(function (c) {
+    var _sorting$find$, _sorting$find;
+
+    return [c.id, c.sort ? (_sorting$find$ = (_sorting$find = sorting.find(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 1),
+          columnId = _ref6[0];
+
+      return columnId === c.id;
+    })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1]) !== null && _sorting$find$ !== void 0 ? _sorting$find$ : "desc" : "none"];
+  });
+
+  var onRowHoverChange = function onRowHoverChange(row) {
+    setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
+    onRowHoveredChanged === null || onRowHoveredChanged === void 0 ? void 0 : onRowHoveredChanged(row);
+  };
+
+  var handleToggleSort = function handleToggleSort(columnId, direction) {
+    var newSorting = internalSorting.map(function (_ref7) {
+      var _ref8 = _slicedToArray(_ref7, 2),
+          colId = _ref8[0],
+          d = _ref8[1];
+
+      return columnId === colId ? [columnId, direction] : [colId, d];
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      pagination: pagination,
+      sorting: newSorting
+    });
+  };
+
+  var handlePaginationChange = function handlePaginationChange(dataConfiguration) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(dataConfiguration);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"])))
+  }, status === "loading" && /*#__PURE__*/React.createElement("div", {
+    className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["absolute bg-white z-10 bg-opacity-50 w-full h-full flex items-center justify-center"])))
+  }, /*#__PURE__*/React.createElement(DataTableLoader, {
+    className: stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["-mt-12"])))
+  })), /*#__PURE__*/React.createElement(Table, {
+    className: stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
+    highlight: false,
+    footer: pagination !== false && /*#__PURE__*/React.createElement(DataTableFooter, {
+      pagination: pagination,
+      onChange: handlePaginationChange
+    })
+  }, /*#__PURE__*/React.createElement(DataTableHeader, {
+    disabled: status !== "success" || rows.length === 0,
+    columns: computedColumns,
+    onToggleSort: handleToggleSort,
+    sorting: internalSorting
+  }), /*#__PURE__*/React.createElement(DataTableBody, {
+    rows: rows,
+    columns: computedColumns,
+    status: status,
+    noDataContent: noDataContent,
+    errorContent: errorContent,
+    selectMode: selectMode,
+    selection: selection,
+    canHoverRow: canHoverRow,
+    onRowHoverChange: onRowHoverChange,
+    onSelectionChange: onSelectionChange
+  })));
+};
+export default DataTable;

package/esm/Tables/DataTable/DataTable.tailwind.d.ts

@@ -0,0 +1,5 @@
+export = datatablePlugin;
+/**
+ * @type {import('../../tailwind-types').TailwindPlugin}
+ */
+declare const datatablePlugin: import('../../tailwind-types').TailwindPlugin;

package/esm/Tables/DataTable/DataTable.tailwind.js

@@ -0,0 +1,21 @@
+// purgecss whitelist: th, td, tr
+
+/**
+ * @type {import('../../tailwind-types').TailwindPlugin}
+ */
+var datatablePlugin = function datatablePlugin(_ref) {
+  var addComponents = _ref.addComponents,
+      theme = _ref.theme;
+  addComponents({
+    ".datatable": {
+      "tr.row-disabled td": {
+        cursor: "not-allowed"
+      },
+      "tr:not(.row-disabled):hover td": {
+        backgroundColor: theme("colors.grey.50")
+      }
+    }
+  });
+};
+
+export default datatablePlugin;

package/esm/Tables/DataTable/components/Body.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import type { DataTableProps } from "../DataTable";
+import type { Row, AdvancedColumnDefinition, Status, SelectMode } from "../types";
+export interface BodyProps<Item> extends Pick<DataTableProps<Item>, "selection" | "onSelectionChange" | "canHoverRow"> {
+    rows: Row<Item>[];
+    status?: Status;
+    noDataContent?: React.ReactNode;
+    errorContent?: React.ReactNode;
+    columns: AdvancedColumnDefinition<Item>[];
+    onRowHoverChange(row: Row<Item> | null): void;
+    selectMode: SelectMode;
+}
+export declare const Body: <Item extends {}>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, }: BodyProps<Item>) => JSX.Element;
+export default Body;

package/esm/Tables/DataTable/components/Body.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from "react";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import EmptyState from "../../../EmptyState";
+import { getCellValue } from "../utils";
+export var Body = function Body(_ref) {
+  var rows = _ref.rows,
+      columns = _ref.columns,
+      status = _ref.status,
+      noDataContent = _ref.noDataContent,
+      errorContent = _ref.errorContent,
+      selectMode = _ref.selectMode,
+      _ref$selection = _ref.selection,
+      selection = _ref$selection === void 0 ? [] : _ref$selection,
+      onSelectionChange = _ref.onSelectionChange,
+      onRowHoverChange = _ref.onRowHoverChange,
+      _ref$canHoverRow = _ref.canHoverRow,
+      canHoverRow = _ref$canHoverRow === void 0 ? function () {
+    return true;
+  } : _ref$canHoverRow;
+
+  var handleRowSelection = function handleRowSelection(row) {
+    if (!onSelectionChange) return;
+    var rowId = row.id;
+    var isSelected = selection.includes(rowId);
+    var newSelection = isSelected ? selection.filter(function (id) {
+      return id !== rowId;
+    }) : selectMode === "multi" ? [].concat(_toConsumableArray(selection), [rowId]) : [rowId];
+    onSelectionChange(newSelection);
+  };
+
+  var additionalRowProps = function additionalRowProps(row) {
+    return _objectSpread(_objectSpread({}, canHoverRow(row) ? {
+      onMouseEnter: function onMouseEnter() {
+        return onRowHoverChange(row);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return onRowHoverChange(null);
+      },
+      className: "hoverable"
+    } : {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["row-disabled"])))
+    }), row.selectable && {
+      onClick: function onClick() {
+        return handleRowSelection(row);
+      }
+    });
+  };
+
+  if (status === "error") {
+    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      colSpan: columns.length
+    }, /*#__PURE__*/React.createElement("span", {
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex justify-center py-6"])))
+    }, errorContent || /*#__PURE__*/React.createElement(EmptyState, {
+      title: "Error",
+      description: "An error occurred while loading data.",
+      centered: true,
+      usageContext: "result"
+    })))));
+  }
+
+  if (rows.length === 0 && status !== "loading") {
+    return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+      colSpan: columns.length
+    }, /*#__PURE__*/React.createElement("span", {
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex justify-center py-6"])))
+    }, noDataContent || /*#__PURE__*/React.createElement(EmptyState, {
+      title: "Empty",
+      description: "There is no data to display",
+      centered: true,
+      usageContext: "result"
+    })))));
+  }
+
+  return /*#__PURE__*/React.createElement("tbody", null, rows.map(function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement("tr", _extends({}, additionalRowProps(row), {
+      key: rowIndex
+    }), columns.map(function (column) {
+      var value = getCellValue(column, row);
+      var Cell = column.Cell;
+      return Cell ? /*#__PURE__*/React.createElement("td", {
+        className: column === null || column === void 0 ? void 0 : column.className,
+        key: column.id
+      }, /*#__PURE__*/React.createElement(Cell, {
+        row: rows[rowIndex],
+        column: column,
+        value: value
+      })) : /*#__PURE__*/React.createElement("td", {
+        className: column === null || column === void 0 ? void 0 : column.className,
+        key: column.id
+      }, value !== null && value !== void 0 ? value : "-");
+    }));
+  }));
+};
+export default Body;

package/esm/Tables/DataTable/components/Footer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { PaginationConfiguration, DataConfiguration } from "../types";
+export interface FooterProps {
+    pagination: PaginationConfiguration;
+    onChange(dataConfiguration: DataConfiguration): void;
+}
+export declare const Footer: ({ pagination, onChange }: FooterProps) => JSX.Element | null;
+export default Footer;

package/esm/Tables/DataTable/components/Footer.js

@@ -0,0 +1,60 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React from "react";
+import Pagination, { CompactPagination } from "../../../Pagination";
+import { isDeterminatePagination, isIndeterminatePagination } from "../utils";
+export var Footer = function Footer(_ref) {
+  var pagination = _ref.pagination,
+      onChange = _ref.onChange;
+  return isDeterminatePagination(pagination) ? /*#__PURE__*/React.createElement(Pagination, {
+    nbPages: Math.ceil(pagination.totalItemsCount / pagination.itemsPerPage),
+    currentPage: pagination.currentPage,
+    maxButtons: 8,
+    onChange: function (_onChange) {
+      function onChange(_x) {
+        return _onChange.apply(this, arguments);
+      }
+
+      onChange.toString = function () {
+        return _onChange.toString();
+      };
+
+      return onChange;
+    }(function (page) {
+      return onChange({
+        pagination: _objectSpread(_objectSpread({}, pagination), {}, {
+          currentPage: page
+        }),
+        sorting: []
+      });
+    })
+  }) : isIndeterminatePagination(pagination) ? /*#__PURE__*/React.createElement(CompactPagination, {
+    label: "compact",
+    currentPage: pagination.currentPage,
+    showGoToFirstPage: true,
+    nextDisabled: pagination.isLastPage,
+    onChange: function (_onChange2) {
+      function onChange(_x2) {
+        return _onChange2.apply(this, arguments);
+      }
+
+      onChange.toString = function () {
+        return _onChange2.toString();
+      };
+
+      return onChange;
+    }(function (page) {
+      return onChange({
+        pagination: _objectSpread(_objectSpread({}, pagination), {}, {
+          currentPage: page
+        }),
+        sorting: []
+      });
+    })
+  }) : null;
+};
+export default Footer;

package/esm/Tables/DataTable/components/Header.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { AdvancedColumnDefinition, Sorting, SortingDirection } from "../types";
+export interface HeaderProps<Item> {
+    columns: AdvancedColumnDefinition<Item>[];
+    sorting?: Sorting[];
+    onToggleSort: (columnId: string, direction: SortingDirection) => void;
+    disabled?: boolean;
+}
+export declare const Header: <Item extends {}>({ columns, sorting, onToggleSort, disabled }: HeaderProps<Item>) => JSX.Element;
+export default Header;

package/esm/Tables/DataTable/components/Header.js

@@ -0,0 +1,29 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from "react";
+import HeaderCell from "./HeaderCell";
+export var Header = function Header(_ref) {
+  var columns = _ref.columns,
+      _ref$sorting = _ref.sorting,
+      sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
+      onToggleSort = _ref.onToggleSort,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(function (column) {
+    var Header = column.Header;
+    var sortingDirection = sorting.find(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 1),
+          colId = _ref3[0];
+
+      return colId === column.id;
+    }) || [null];
+    return /*#__PURE__*/React.createElement(HeaderCell, {
+      key: column.id,
+      column: column,
+      disabled: disabled,
+      sortingDirection: sortingDirection[1],
+      onToggleSort: onToggleSort
+    }, Header ? /*#__PURE__*/React.createElement(Header, {
+      column: column
+    }) : Header);
+  })));
+};
+export default Header;

package/esm/Tables/DataTable/components/HeaderCell.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { AdvancedColumnDefinition, SortingDirection } from "../types";
+export interface HeaderCellProps<Item> extends React.HTMLAttributes<HTMLTableCellElement> {
+    column: AdvancedColumnDefinition<Item>;
+    disabled?: boolean;
+    sortingDirection?: SortingDirection;
+    onToggleSort: (columnId: string, sortingDirection: SortingDirection) => void;
+    children: React.ReactNode;
+}
+export declare const HeaderCell: <Item extends {}>({ sortingDirection, onToggleSort, column: { id, className, sort }, disabled, children, ...props }: HeaderCellProps<Item>) => JSX.Element;
+export default HeaderCell;

package/esm/Tables/DataTable/components/HeaderCell.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import React from "react";
+import cx from "classnames";
+import { ChevronDown, ChevronUp } from "react-feather";
+import stl from "../../../styles/helpers/satellitePrefixer";
+var iconClassName = stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["h-4 inline ml-1"])));
+export var HeaderCell = function HeaderCell(_ref) {
+  var _ref$sortingDirection = _ref.sortingDirection,
+      sortingDirection = _ref$sortingDirection === void 0 ? "none" : _ref$sortingDirection,
+      onToggleSort = _ref.onToggleSort,
+      _ref$column = _ref.column,
+      id = _ref$column.id,
+      className = _ref$column.className,
+      _ref$column$sort = _ref$column.sort,
+      sort = _ref$column$sort === void 0 ? false : _ref$column$sort,
+      disabled = _ref.disabled,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("th", _extends({}, props, {
+    "aria-sort": sortingDirection === "desc" ? "descending" : sortingDirection === "asc" ? "ascending" : "none",
+    onClick: function onClick() {
+      return sort && !disabled && onToggleSort(id, sortingDirection === "desc" ? "asc" : sortingDirection === "asc" ? "none" : "desc");
+    },
+    className: cx(className, stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer")))
+  }), /*#__PURE__*/React.createElement("span", {
+    className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["inline-flex items-center"])))
+  }, children, sort ? sortingDirection === "desc" ? /*#__PURE__*/React.createElement(ChevronDown, {
+    className: iconClassName
+  }) : sortingDirection === "asc" ? /*#__PURE__*/React.createElement(ChevronUp, {
+    className: iconClassName
+  }) : /*#__PURE__*/React.createElement(ChevronDown, {
+    className: cx(iconClassName, stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
+  }) : null));
+};
+export default HeaderCell;

package/esm/Tables/DataTable/components/Loader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface LoaderProps {
+    className?: string;
+}
+export declare const Loader: ({ className }: LoaderProps) => JSX.Element;
+export default Loader;

package/esm/Tables/DataTable/components/Loader.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject;
+
+import React, { useEffect, useState } from "react";
+import stl from "../../../styles/helpers/satellitePrefixer";
+import EmptyState from "../../../EmptyState";
+import ProgressSpinner from "../../../ProgressSpinner";
+export var Loader = function Loader(_ref) {
+  var className = _ref.className;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showLoadMessage = _useState2[0],
+      setShowLoadMessage = _useState2[1];
+
+  useEffect(function () {
+    // See https://github.com/algolia/AlgoliaWeb/blob/develop/_client/src/common/components/AsyncWrapper/AsyncWrapper.tsx#L56
+    var loadTimer = setTimeout(function () {
+      return setShowLoadMessage(true);
+    }, 5000);
+    return function () {
+      clearTimeout(loadTimer);
+      setShowLoadMessage(false);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, showLoadMessage ? /*#__PURE__*/React.createElement(EmptyState, {
+    usageContext: "result",
+    medallion: /*#__PURE__*/React.createElement("div", {
+      className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["flex justify-center"])))
+    }, /*#__PURE__*/React.createElement(ProgressSpinner, null)),
+    title: "It appears to be taking a while to get your data",
+    description: "Please hold or try again later",
+    centered: true
+  }) : /*#__PURE__*/React.createElement(ProgressSpinner, null));
+};
+export default Loader;

package/esm/Tables/DataTable/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Header";
+export * from "./HeaderCell";
+export * from "./Body";
+export * from "./Footer";
+export * from "./Loader";

package/esm/Tables/DataTable/components/index.js

@@ -0,0 +1,5 @@
+export * from "./Header";
+export * from "./HeaderCell";
+export * from "./Body";
+export * from "./Footer";
+export * from "./Loader";

package/esm/Tables/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./DataTable";
+export * from "./types";
+export { default } from "./DataTable";

package/esm/Tables/DataTable/index.js

@@ -0,0 +1,3 @@
+export * from "./DataTable";
+export * from "./types";
+export { default } from "./DataTable";