@algolia/satellite 1.0.0-beta.120 → 1.0.0-beta.124

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>>;
+    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";

package/esm/styles/tailwind.config.js

@@ -146,5 +146,5 @@ export default {
     borderWidth: ["responsive", "first"],
     visibility: ["responsive", "group-hover"]
   },
-  plugins: [require("./base.tailwind"), typography.plugin, require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
+  plugins: [require("./base.tailwind"), typography.plugin, require("../FlexGrid/FlexGrid.tailwind"), require("../AutoComplete/AutoComplete.tailwind"), require("../Button/Button.tailwind"), require("../Card/Card.tailwind"), require("../Checkbox/Checkbox.tailwind"), require("../EmptyState/EmptyState.tailwind"), require("../Flag/Flag.tailwind"), require("../HelpUnderline/HelpUnderline.tailwind"), require("../Input/Input.tailwind"), require("../InstantSearch/InstantSearch.tailwind"), require("../Medallion/Medallion.tailwind"), require("../Modal/Modal.tailwind"), require("../ProgressBar/ProgressBar.tailwind"), require("../ProgressSpinner/ProgressSpinner.tailwind"), require("../RadioGroup/RadioButton.tailwind"), require("../RangeSlider/RangeSlider.tailwind"), require("../ScrollIndicator/ScrollIndicator.tailwind"), require("../Select/Select.tailwind"), require("../Sidebar/Sidebar.tailwind"), require("../Switch/Switch.tailwind"), require("../Tabs/Tabs.tailwind"), require("../Tables/DataTable/DataTable.tailwind"), require("../Tables/Table/Table.tailwind"), require("../Tag/Tag.tailwind"), require("../TextArea/TextArea.tailwind"), require("../Toggle/Toggle.tailwind"), require("../Tooltip/Tooltip.tailwind"), require("../UserContent/UserContent.tailwind"), require("../DatePicker/DatePicker.tailwind")]
 };

package/esm/utils/index.d.ts

@@ -4,4 +4,5 @@ export { range } from "./range";
 export { uniqBy } from "./uniqBy";
 export { uniqueId } from "./uniqueId";
 export { isNil } from "./isNil";
+export { toSentenceCase } from "./toSentenceCase";
 export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/esm/utils/index.js

@@ -3,4 +3,5 @@ export { pluralize } from "./pluralize";
 export { range } from "./range";
 export { uniqBy } from "./uniqBy";
 export { uniqueId } from "./uniqueId";
-export { isNil } from "./isNil";
+export { isNil } from "./isNil";
+export { toSentenceCase } from "./toSentenceCase";

package/esm/utils/toSentenceCase.d.ts

@@ -0,0 +1,3 @@
+/** Converts PascalCase and camelCase to Sentence case */
+export declare const toSentenceCase: (str: string) => string;
+export default toSentenceCase;

package/esm/utils/toSentenceCase.js

@@ -0,0 +1,9 @@
+import capitalize from "lodash/capitalize";
+/** Converts PascalCase and camelCase to Sentence case */
+
+export var toSentenceCase = function toSentenceCase(str) {
+  var firstChar = str.charAt(0);
+  var remainingChars = str.slice(1).replace(/\s/g, "").replace(/([A-Z]+)/g, "$1").replace(/([A-Z][a-z])/g, " $1").trim();
+  return capitalize("".concat(firstChar).concat(remainingChars));
+};
+export default toSentenceCase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.120",
+  "version": "1.0.0-beta.124",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "del dist",

package/satellite.css

@@ -2602,8 +2602,12 @@ html, body {
   outline: none;
 }
 
-.stl-table-wrapper {
-  border: 1px solid #d6d6e7;
+.stl-datatable tr.stl-row-disabled td {
+  cursor: not-allowed;
+}
+
+.stl-datatable tr:not(.stl-row-disabled):hover td {
+  background-color: #fcfcfd;
 }
 
 .stl-table {
@@ -2616,6 +2620,10 @@ html, body {
   padding: 14px 16px;
 }
 
+.stl-table thead {
+  background-color: #fcfcfd;
+}
+
 .stl-table th {
   border-bottom: 1px solid #d6d6e7;
   font-weight: normal;
@@ -2630,20 +2638,7 @@ html, body {
 }
 
 .stl-table-with-highlight tr:hover td {
-  background-color: rgba(245, 245, 250, 0.6);
-}
-
-.stl-table-footer {
-  background-color: #f5f5fa;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #5a5e9a;
-  padding: 12px 16px;
-}
-
-.stl-table-footer-small {
-  padding: 4px 16px;
+  background-color: #fcfcfd;
 }
 
 .stl-tag {
@@ -3104,6 +3099,10 @@ input:disabled ~ .stl-toggle {
   text-align: center;
 }
 
+.stl-date-picker .DayPicker-Months, .stl-date-range-picker .DayPicker-Months {
+  align-items: start;
+}
+
 .stl-date-picker .DayPicker-Day, .stl-date-range-picker .DayPicker-Day {
   border-radius: 3px;
 }
@@ -3122,8 +3121,9 @@ input:disabled ~ .stl-toggle {
   border-radius: 9999px;
   width: 32px;
   height: 32px;
-  left: 2px;
-  top: 4px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   z-index: -1;
 }