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

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 ? null : typeof Header === "string" ? Header : /*#__PURE__*/React.createElement(Header, {
+      column: column
+    }));
+  })));
+};
+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";

package/esm/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/esm/Tables/DataTable/types.js

@@ -0,0 +1 @@
+export {};

package/esm/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/esm/Tables/DataTable/utils.js

@@ -0,0 +1,14 @@
+import get from "lodash/get";
+export var isDeterminatePagination = function isDeterminatePagination(pagination) {
+  return pagination !== false && "totalItemsCount" in pagination;
+};
+export var isIndeterminatePagination = function isIndeterminatePagination(pagination) {
+  return pagination !== false && !("totalItemsCount" in pagination) && "currentPage" in pagination && typeof pagination.currentPage === "number";
+};
+export var getCellValue = function getCellValue(column, row) {
+  if (typeof column.accessor === "string") {
+    return get(row.item, column.accessor);
+  }
+
+  return column.accessor(row.item);
+};

package/esm/{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/esm/{Table → Tables/Table}/Table.js

@@ -2,15 +2,16 @@ import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["className", "footer", "smallFooter", "hasActions", "highlight"];
 import React from "react";
 import cx from "classnames";
-import stl from "../styles/helpers/satellitePrefixer";
+import stl from "../../styles/helpers/satellitePrefixer";
+import Footer from "./components/Footer";
 
 /**
- * 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
  *
@@ -39,13 +40,13 @@ export var Table = function Table(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["table-wrapper rounded text-grey-900 bg-white display-body"]))), className)
+    className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["rounded text-grey-900 bg-white display-body"]))), className)
   }, /*#__PURE__*/React.createElement("div", {
     className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["overflow-x-auto"])))
   }, /*#__PURE__*/React.createElement("table", _extends({}, props, {
     className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["table ", " ", ""])), hasActions && "table-with-actions", highlight && "table-with-highlight")
-  }))), footer && /*#__PURE__*/React.createElement("div", {
-    className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["table-footer ", ""])), smallFooter && "table-footer-small")
+  }))), footer && /*#__PURE__*/React.createElement(Footer, {
+    size: smallFooter ? "small" : "default"
   }, footer));
 };
 export default Table;

package/esm/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/esm/{Table → Tables/Table}/Table.tailwind.js

@@ -1,18 +1,12 @@
-import _rgba from "../styles/rgba";
-// @ts-check
-var rgba = _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",
@@ -20,6 +14,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"
@@ -35,19 +32,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/esm/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;

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

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import React from "react";
+import cx from "classnames";
+import stl from "../../../styles/helpers/satellitePrefixer";
+export var Footer = function Footer(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "default" : _ref$size,
+      children = _ref.children;
+  var SIZE_CLASSNAMES = {
+    "default": stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["py-3 px-4"]))),
+    small: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["py-1 px-4"])))
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["bg-grey-100 border-t border-grey-200 text-grey-600 flex items-center justify-center"]))), SIZE_CLASSNAMES[size])
+  }, children);
+};
+export default Footer;

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

@@ -0,0 +1,2 @@
+export * from "./Table";
+export { default } from "./Table";

package/esm/Tables/Table/index.js

@@ -0,0 +1,2 @@
+export * from "./Table";
+export { default } from "./Table";

package/esm/Tables/index.d.ts

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

package/esm/Tables/index.js

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

package/esm/index.d.ts

@@ -34,7 +34,7 @@ export * from "./Satellite";
 export * from "./Select";
 export * from "./Sidebar";
 export * from "./Switch";
-export * from "./Table";
+export * from "./Tables";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";

package/esm/index.js

@@ -34,7 +34,7 @@ export * from "./Satellite";
 export * from "./Select";
 export * from "./Sidebar";
 export * from "./Switch";
-export * from "./Table";
+export * from "./Tables";
 export * from "./Tabs";
 export * from "./Tag";
 export * from "./TextArea";