@algolia/satellite 1.0.0-beta.121 → 1.0.0-beta.125

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Footer = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pagination = _interopRequireWildcard(require("../../../Pagination"));
+
+var _utils = require("../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var Footer = function Footer(_ref) {
+  var pagination = _ref.pagination,
+      onChange = _ref.onChange;
+  return (0, _utils.isDeterminatePagination)(pagination) ? /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
+    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: []
+      });
+    })
+  }) : (0, _utils.isIndeterminatePagination)(pagination) ? /*#__PURE__*/_react["default"].createElement(_Pagination.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;
+};
+
+exports.Footer = Footer;
+var _default = Footer;
+exports["default"] = _default;

package/cjs/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/cjs/Tables/DataTable/components/Header.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Header = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HeaderCell = _interopRequireDefault(require("./HeaderCell"));
+
+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["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column) {
+    var Header = column.Header;
+    var sortingDirection = sorting.find(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2["default"])(_ref2, 1),
+          colId = _ref3[0];
+
+      return colId === column.id;
+    }) || [null];
+    return /*#__PURE__*/_react["default"].createElement(_HeaderCell["default"], {
+      key: column.id,
+      column: column,
+      disabled: disabled,
+      sortingDirection: sortingDirection[1],
+      onToggleSort: onToggleSort
+    }, !Header ? null : typeof Header === "string" ? Header : /*#__PURE__*/_react["default"].createElement(Header, {
+      column: column
+    }));
+  })));
+};
+
+exports.Header = Header;
+var _default = Header;
+exports["default"] = _default;

package/cjs/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/cjs/Tables/DataTable/components/HeaderCell.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.HeaderCell = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+
+var _excluded = ["sortingDirection", "onToggleSort", "column", "disabled", "children"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var iconClassName = (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["h-4 inline ml-1"])));
+
+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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("th", (0, _extends2["default"])({}, 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: (0, _classnames["default"])(className, (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["group ", ""])), sort && (disabled ? "cursor-not-allowed" : "cursor-pointer")))
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center"])))
+  }, children, sort ? sortingDirection === "desc" ? /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronDown, {
+    className: iconClassName
+  }) : sortingDirection === "asc" ? /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronUp, {
+    className: iconClassName
+  }) : /*#__PURE__*/_react["default"].createElement(_reactFeather.ChevronDown, {
+    className: (0, _classnames["default"])(iconClassName, (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["text-grey-300 opacity-0 group-hover:opacity-100"]))))
+  }) : null));
+};
+
+exports.HeaderCell = HeaderCell;
+var _default = HeaderCell;
+exports["default"] = _default;

package/cjs/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/cjs/Tables/DataTable/components/Loader.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Loader = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
+
+var _EmptyState = _interopRequireDefault(require("../../../EmptyState"));
+
+var _ProgressSpinner = _interopRequireDefault(require("../../../ProgressSpinner"));
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Loader = function Loader(_ref) {
+  var className = _ref.className;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      showLoadMessage = _useState2[0],
+      setShowLoadMessage = _useState2[1];
+
+  (0, _react.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["default"].createElement("div", {
+    className: className
+  }, showLoadMessage ? /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+    usageContext: "result",
+    medallion: /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex justify-center"])))
+    }, /*#__PURE__*/_react["default"].createElement(_ProgressSpinner["default"], null)),
+    title: "It appears to be taking a while to get your data",
+    description: "Please hold or try again later",
+    centered: true
+  }) : /*#__PURE__*/_react["default"].createElement(_ProgressSpinner["default"], null));
+};
+
+exports.Loader = Loader;
+var _default = Loader;
+exports["default"] = _default;

package/cjs/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/cjs/Tables/DataTable/components/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Header = require("./Header");
+
+Object.keys(_Header).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Header[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Header[key];
+    }
+  });
+});
+
+var _HeaderCell = require("./HeaderCell");
+
+Object.keys(_HeaderCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HeaderCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HeaderCell[key];
+    }
+  });
+});
+
+var _Body = require("./Body");
+
+Object.keys(_Body).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Body[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Body[key];
+    }
+  });
+});
+
+var _Footer = require("./Footer");
+
+Object.keys(_Footer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Footer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Footer[key];
+    }
+  });
+});
+
+var _Loader = require("./Loader");
+
+Object.keys(_Loader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Loader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Loader[key];
+    }
+  });
+});

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

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

package/cjs/Tables/DataTable/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable["default"];
+  }
+});
+
+var _DataTable = _interopRequireWildcard(require("./DataTable"));
+
+Object.keys(_DataTable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataTable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DataTable[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/cjs/Tables/DataTable/types.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+export declare type Status = "loading" | "error" | "success";
+export declare type SelectMode = "single" | "multi" | "none";
+export declare type SortingDirection = "asc" | "desc" | "none";
+export declare type Sorting = [columnId: string, direction: SortingDirection];
+export declare type GetItemId<Item> = string | ((item: Item, idx: number) => string);
+export interface Row<Item> {
+    item: Item;
+    id: string;
+    hovered: boolean;
+    selected: boolean;
+    selectable: boolean;
+}
+export interface CellProps<Item> {
+    value: any;
+    row: Row<Item>;
+    column: AdvancedColumnDefinition<Item>;
+}
+export interface HeaderProps<Item> {
+    column: AdvancedColumnDefinition<Item>;
+}
+export interface AdvancedColumnDefinition<Item> {
+    /** The ID of the column - Should be unique */
+    id: string;
+    /** A string or a function which determines how to get the column data */
+    accessor: string | ((item: Item) => any);
+    sort?: boolean;
+    Header?: React.ComponentType<HeaderProps<Item>> | string | false;
+    Cell?: React.ComponentType<CellProps<Item>>;
+    className?: string;
+}
+export declare type ColumnDefinition<Item> = string | AdvancedColumnDefinition<Item>;
+export interface IndeterminatePagination {
+    currentPage: number;
+    itemsPerPage: number;
+    isLastPage?: boolean;
+}
+export interface DeterminatePagination {
+    currentPage: number;
+    itemsPerPage: number;
+    totalItemsCount: number;
+}
+export declare type PaginationConfiguration = false | IndeterminatePagination | DeterminatePagination;
+export interface DataConfiguration {
+    /** The current pagination configuration */
+    pagination: PaginationConfiguration;
+    /** The current sorting configuration */
+    sorting: Sorting[];
+}

package/cjs/Tables/DataTable/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/Tables/DataTable/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Row, DeterminatePagination, IndeterminatePagination, PaginationConfiguration, AdvancedColumnDefinition } from "./types";
+export declare const isDeterminatePagination: (pagination: PaginationConfiguration) => pagination is DeterminatePagination;
+export declare const isIndeterminatePagination: (pagination: PaginationConfiguration) => pagination is IndeterminatePagination;
+export declare const getCellValue: <Item extends {}>(column: AdvancedColumnDefinition<Item>, row: Row<Item>) => any;

package/cjs/Tables/DataTable/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIndeterminatePagination = exports.isDeterminatePagination = exports.getCellValue = void 0;
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var isDeterminatePagination = function isDeterminatePagination(pagination) {
+  return pagination !== false && "totalItemsCount" in pagination;
+};
+
+exports.isDeterminatePagination = isDeterminatePagination;
+
+var isIndeterminatePagination = function isIndeterminatePagination(pagination) {
+  return pagination !== false && !("totalItemsCount" in pagination) && "currentPage" in pagination && typeof pagination.currentPage === "number";
+};
+
+exports.isIndeterminatePagination = isIndeterminatePagination;
+
+var getCellValue = function getCellValue(column, row) {
+  if (typeof column.accessor === "string") {
+    return (0, _get["default"])(row.item, column.accessor);
+  }
+
+  return column.accessor(row.item);
+};
+
+exports.getCellValue = getCellValue;

package/cjs/{Table → Tables/Table}/Table.d.ts

@@ -6,7 +6,7 @@ export interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttri
     highlight?: boolean;
 }
 /**
- * Data tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *
  * #### Do
  *

package/cjs/{Table → Tables/Table}/Table.js

@@ -17,14 +17,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _satellitePrefixer = _interopRequireDefault(require("../styles/helpers/satellitePrefixer"));
+var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _Footer = _interopRequireDefault(require("./components/Footer"));
+
+var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
 
 /**
- * Data tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
  *
  * #### Do
  *
@@ -52,13 +54,13 @@ var Table = function Table(_ref) {
       highlight = _ref$highlight === void 0 ? true : _ref$highlight,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["table-wrapper rounded text-grey-900 bg-white display-body"]))), className)
+    className: (0, _classnames["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["rounded text-grey-900 bg-white display-body"]))), className)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["overflow-x-auto"])))
   }, /*#__PURE__*/_react["default"].createElement("table", (0, _extends2["default"])({}, props, {
     className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
-  }))), footer && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["table-footer ", ""])), smallFooter && "table-footer-small")
+  }))), footer && /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+    size: smallFooter ? "small" : "default"
   }, footer));
 };
 

package/cjs/Tables/Table/Table.tailwind.d.ts

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

package/cjs/{Table → Tables/Table}/Table.tailwind.js

@@ -1,20 +1,14 @@
 "use strict";
 
-// @ts-check
-var rgba = require("../styles/rgba"); // purgecss whitelist: th, td, tr
+// purgecss whitelist: th, td, tr
 
 /**
- * @type {import('../tailwind-types').TailwindPlugin}
+ * @type {import('../../tailwind-types').TailwindPlugin}
  */
-
-
 var tablePlugin = function tablePlugin(_ref) {
   var addComponents = _ref.addComponents,
       theme = _ref.theme;
   addComponents({
-    ".table-wrapper": {
-      border: "1px solid ".concat(theme("colors.grey.200"))
-    },
     ".table": {
       width: "100%",
       borderCollapse: "collapse",
@@ -22,6 +16,9 @@ var tablePlugin = function tablePlugin(_ref) {
       "th, td": {
         padding: "14px 16px"
       },
+      thead: {
+        backgroundColor: theme("colors.grey.50")
+      },
       th: {
         borderBottom: "1px solid ".concat(theme("colors.grey.200")),
         fontWeight: "normal"
@@ -37,19 +34,8 @@ var tablePlugin = function tablePlugin(_ref) {
     },
     ".table-with-highlight": {
       "tr:hover td": {
-        backgroundColor: rgba(theme("colors.grey.100"), 0.6)
+        backgroundColor: theme("colors.grey.50")
       }
-    },
-    ".table-footer": {
-      backgroundColor: theme("colors.grey.100"),
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: theme("colors.grey.600"),
-      padding: "12px 16px"
-    },
-    ".table-footer-small": {
-      padding: "4px 16px"
     }
   });
 };

package/cjs/Tables/Table/components/Footer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare type FooterSizes = "default" | "small";
+export interface FooterProps {
+    size?: FooterSizes;
+    children?: React.ReactNode;
+}
+export declare const Footer: ({ size, children }: FooterProps) => JSX.Element;
+export default Footer;