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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/cjs/Button/styles.d.ts +1 -1
  2. package/cjs/Checkbox/Checkbox.js +1 -0
  3. package/cjs/DatePicker/DatePicker.tailwind.js +7 -2
  4. package/cjs/Dropdown/DropdownButton.d.ts +1 -1
  5. package/cjs/Pagination/DotPagination/DotPagination.d.ts +2 -1
  6. package/cjs/Pagination/DotPagination/DotPagination.js +4 -2
  7. package/cjs/Pagination/Pagination/Pagination.js +3 -0
  8. package/cjs/ProgressSpinner/ProgressSpinner.js +1 -1
  9. package/cjs/Tables/DataTable/DataTable.d.ts +41 -0
  10. package/cjs/Tables/DataTable/DataTable.js +278 -0
  11. package/cjs/Tables/DataTable/DataTable.tailwind.d.ts +5 -0
  12. package/cjs/Tables/DataTable/DataTable.tailwind.js +23 -0
  13. package/cjs/Tables/DataTable/components/Body.d.ts +14 -0
  14. package/cjs/Tables/DataTable/components/Body.js +125 -0
  15. package/cjs/Tables/DataTable/components/Footer.d.ts +8 -0
  16. package/cjs/Tables/DataTable/components/Footer.js +81 -0
  17. package/cjs/Tables/DataTable/components/Header.d.ts +10 -0
  18. package/cjs/Tables/DataTable/components/Header.js +44 -0
  19. package/cjs/Tables/DataTable/components/HeaderCell.d.ts +11 -0
  20. package/cjs/Tables/DataTable/components/HeaderCell.js +61 -0
  21. package/cjs/Tables/DataTable/components/Loader.d.ts +6 -0
  22. package/cjs/Tables/DataTable/components/Loader.js +63 -0
  23. package/cjs/Tables/DataTable/components/index.d.ts +5 -0
  24. package/cjs/Tables/DataTable/components/index.js +70 -0
  25. package/cjs/Tables/DataTable/index.d.ts +3 -0
  26. package/cjs/Tables/DataTable/index.js +46 -0
  27. package/cjs/Tables/DataTable/types.d.ts +49 -0
  28. package/cjs/Tables/DataTable/types.js +5 -0
  29. package/cjs/Tables/DataTable/utils.d.ts +4 -0
  30. package/cjs/Tables/DataTable/utils.js +32 -0
  31. package/cjs/{Table → Tables/Table}/Table.d.ts +1 -1
  32. package/cjs/{Table → Tables/Table}/Table.js +8 -6
  33. package/cjs/Tables/Table/Table.tailwind.d.ts +5 -0
  34. package/cjs/{Table → Tables/Table}/Table.tailwind.js +6 -20
  35. package/cjs/Tables/Table/components/Footer.d.ts +8 -0
  36. package/cjs/Tables/Table/components/Footer.js +35 -0
  37. package/cjs/Tables/Table/index.d.ts +2 -0
  38. package/cjs/{Table → Tables/Table}/index.js +7 -5
  39. package/cjs/Tables/index.d.ts +3 -0
  40. package/cjs/Tables/index.js +46 -0
  41. package/cjs/index.d.ts +1 -1
  42. package/cjs/index.js +4 -4
  43. package/cjs/styles/tailwind.config.js +1 -1
  44. package/cjs/utils/index.d.ts +1 -0
  45. package/cjs/utils/index.js +9 -1
  46. package/cjs/utils/toSentenceCase.d.ts +3 -0
  47. package/cjs/utils/toSentenceCase.js +21 -0
  48. package/esm/Button/styles.d.ts +1 -1
  49. package/esm/Checkbox/Checkbox.js +1 -0
  50. package/esm/DatePicker/DatePicker.tailwind.js +7 -2
  51. package/esm/Dropdown/DropdownButton.d.ts +1 -1
  52. package/esm/Pagination/DotPagination/DotPagination.d.ts +2 -1
  53. package/esm/Pagination/DotPagination/DotPagination.js +4 -2
  54. package/esm/Pagination/Pagination/Pagination.js +3 -0
  55. package/esm/ProgressSpinner/ProgressSpinner.js +1 -1
  56. package/esm/Tables/DataTable/DataTable.d.ts +41 -0
  57. package/esm/Tables/DataTable/DataTable.js +246 -0
  58. package/esm/Tables/DataTable/DataTable.tailwind.d.ts +5 -0
  59. package/esm/Tables/DataTable/DataTable.tailwind.js +21 -0
  60. package/esm/Tables/DataTable/components/Body.d.ts +14 -0
  61. package/esm/Tables/DataTable/components/Body.js +106 -0
  62. package/esm/Tables/DataTable/components/Footer.d.ts +8 -0
  63. package/esm/Tables/DataTable/components/Footer.js +60 -0
  64. package/esm/Tables/DataTable/components/Header.d.ts +10 -0
  65. package/esm/Tables/DataTable/components/Header.js +29 -0
  66. package/esm/Tables/DataTable/components/HeaderCell.d.ts +11 -0
  67. package/esm/Tables/DataTable/components/HeaderCell.js +42 -0
  68. package/esm/Tables/DataTable/components/Loader.d.ts +6 -0
  69. package/esm/Tables/DataTable/components/Loader.js +40 -0
  70. package/esm/Tables/DataTable/components/index.d.ts +5 -0
  71. package/esm/Tables/DataTable/components/index.js +5 -0
  72. package/esm/Tables/DataTable/index.d.ts +3 -0
  73. package/esm/Tables/DataTable/index.js +3 -0
  74. package/esm/Tables/DataTable/types.d.ts +49 -0
  75. package/esm/Tables/DataTable/types.js +1 -0
  76. package/esm/Tables/DataTable/utils.d.ts +4 -0
  77. package/esm/Tables/DataTable/utils.js +14 -0
  78. package/esm/{Table → Tables/Table}/Table.d.ts +1 -1
  79. package/esm/{Table → Tables/Table}/Table.js +7 -6
  80. package/esm/Tables/Table/Table.tailwind.d.ts +5 -0
  81. package/esm/{Table → Tables/Table}/Table.tailwind.js +6 -20
  82. package/esm/Tables/Table/components/Footer.d.ts +8 -0
  83. package/esm/Tables/Table/components/Footer.js +20 -0
  84. package/esm/Tables/Table/index.d.ts +2 -0
  85. package/esm/Tables/Table/index.js +2 -0
  86. package/esm/Tables/index.d.ts +3 -0
  87. package/esm/Tables/index.js +3 -0
  88. package/esm/index.d.ts +1 -1
  89. package/esm/index.js +1 -1
  90. package/esm/styles/tailwind.config.js +1 -1
  91. package/esm/utils/index.d.ts +1 -0
  92. package/esm/utils/index.js +2 -1
  93. package/esm/utils/toSentenceCase.d.ts +3 -0
  94. package/esm/utils/toSentenceCase.js +9 -0
  95. package/package.json +1 -1
  96. package/satellite.css +18 -18
  97. package/satellite.min.css +1 -1
  98. package/cjs/Table/Table.tailwind.d.ts +0 -5
  99. package/cjs/Table/index.d.ts +0 -3
  100. package/esm/Table/Table.tailwind.d.ts +0 -5
  101. package/esm/Table/index.d.ts +0 -3
  102. package/esm/Table/index.js +0 -3
@@ -2,4 +2,4 @@ import { ButtonBaseProps, ButtonSize, ButtonVariant } from "./types";
2
2
  export declare const BUTTON_SIZE_CLASSNAMES: Record<ButtonSize, string>;
3
3
  export declare const BUTTON_LOADER_ICON_SIZES: Record<ButtonSize, number>;
4
4
  export declare const BUTTON_VARIANT_CLASSNAMES: Record<ButtonVariant, string>;
5
- export declare const getIconColorClassName: ({ disabled, variant }: ButtonBaseProps) => string;
5
+ export declare const getIconColorClassName: ({ disabled, variant }: Pick<ButtonBaseProps, "disabled" | "variant">) => string;
@@ -99,6 +99,7 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
99
99
  }, /*#__PURE__*/_react["default"].createElement(CheckboxIcon, {
100
100
  className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["checkbox-icon"])))
101
101
  }), /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({}, checkboxProps, {
102
+ "aria-checked": indeterminate ? "mixed" : isChecked,
102
103
  id: id,
103
104
  className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n opacity-0 absolute inset-0 cursor-pointer\n ", "\n "])), disabled && "cursor-not-allowed"),
104
105
  type: "checkbox",
@@ -32,6 +32,10 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
32
32
  textAlign: "center"
33
33
  }
34
34
  }, (0, _defineProperty2["default"])(_addComponents, prefix(".date-picker, .date-range-picker"), {
35
+ "& .DayPicker-Months": {
36
+ // Hack to align dates on the same grid
37
+ alignItems: "start"
38
+ },
35
39
  "& .DayPicker-Day": (_DayPickerDay = {
36
40
  borderRadius: defaultRadius
37
41
  }, (0, _defineProperty2["default"])(_DayPickerDay, "&--today".concat(not("outside")), {
@@ -46,8 +50,9 @@ var datePickerPlugin = function datePickerPlugin(_ref) {
46
50
  borderRadius: 9999,
47
51
  width: 32,
48
52
  height: 32,
49
- left: 2,
50
- top: 4,
53
+ left: "50%",
54
+ top: "50%",
55
+ transform: "translate(-50%, -50%)",
51
56
  zIndex: -1
52
57
  }
53
58
  }), (0, _defineProperty2["default"])(_DayPickerDay, "&--selected".concat(not("outside")), {
@@ -1,7 +1,7 @@
1
1
  import React, { FunctionComponent } from "react";
2
2
  import { ButtonProps } from "../Button";
3
3
  import { RenderTargetParams } from "./Dropdown";
4
- export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title"> {
4
+ export interface DropdownButtonProps extends Omit<ButtonProps<"button">, "title" | "endIcon"> {
5
5
  /** Title displayed in the `Dropdown` */
6
6
  title: React.ReactNode;
7
7
  renderFooter?: (args: RenderTargetParams) => React.ReactNode;
@@ -4,6 +4,7 @@ export declare type DotPaginationProps = {
4
4
  currentPage: number;
5
5
  onChange: (page: number) => void;
6
6
  nbPages: number;
7
+ size?: "small" | "medium";
7
8
  };
8
- export declare const DotPagination: ({ currentPage, onChange, nbPages }: DotPaginationProps) => JSX.Element;
9
+ export declare const DotPagination: ({ currentPage, onChange, nbPages, size }: DotPaginationProps) => JSX.Element;
9
10
  export default DotPagination;
@@ -18,7 +18,9 @@ var _templateObject, _templateObject2;
18
18
  var DotPagination = function DotPagination(_ref) {
19
19
  var currentPage = _ref.currentPage,
20
20
  onChange = _ref.onChange,
21
- nbPages = _ref.nbPages;
21
+ nbPages = _ref.nbPages,
22
+ _ref$size = _ref.size,
23
+ size = _ref$size === void 0 ? "medium" : _ref$size;
22
24
  return /*#__PURE__*/_react["default"].createElement("ul", {
23
25
  className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"])))
24
26
  }, new Array(nbPages).fill(undefined).map(function (_, idx) {
@@ -27,7 +29,7 @@ var DotPagination = function DotPagination(_ref) {
27
29
  key: idx
28
30
  }, /*#__PURE__*/_react["default"].createElement("button", {
29
31
  "aria-label": "Go to page ".concat(pageIdx),
30
- className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n h-3 w-3 rounded-full mx-1\n ", "\n "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200"),
32
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n rounded-full mx-1\n ", "\n ", "\n "])), currentPage === pageIdx ? "bg-accent-600" : "bg-grey-200", size === "medium" ? "h-3 w-3" : "h-2 w-2"),
31
33
  onClick: function onClick() {
32
34
  return onChange(pageIdx);
33
35
  }
@@ -43,6 +43,7 @@ var Group = function Group(_ref) {
43
43
  onChange = _ref.onChange;
44
44
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, group.map(function (index) {
45
45
  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
46
+ "aria-label": "Go to page ".concat(index),
46
47
  key: index,
47
48
  variant: index === currentPage ? "primary" : "neutral",
48
49
  onClick: function onClick() {
@@ -83,6 +84,7 @@ var Pagination = function Pagination(_ref2) {
83
84
  return /*#__PURE__*/_react["default"].createElement(_Button.ButtonGroup, {
84
85
  as: "nav"
85
86
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
87
+ "aria-label": "Go to previous page",
86
88
  disabled: currentPage === 1,
87
89
  onClick: function onClick() {
88
90
  return onChange(currentPage - 1);
@@ -102,6 +104,7 @@ var Pagination = function Pagination(_ref2) {
102
104
  onChange: onChange,
103
105
  group: groups[2]
104
106
  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
107
+ "aria-label": "Go to next page",
105
108
  disabled: currentPage === nbPages,
106
109
  onClick: function onClick() {
107
110
  return onChange(currentPage + 1);
@@ -42,7 +42,7 @@ var ProgressSpinner = function ProgressSpinner(_ref) {
42
42
  viewBox: "".concat(size / 2, " ").concat(size / 2, " ").concat(size, " ").concat(size),
43
43
  width: size,
44
44
  height: size
45
- }), /*#__PURE__*/_react["default"].createElement("circle", {
45
+ }), /*#__PURE__*/_react["default"].createElement("title", null, "Loading spinner"), /*#__PURE__*/_react["default"].createElement("circle", {
46
46
  cx: size,
47
47
  cy: size,
48
48
  r: (size - thickness) / 2,
@@ -0,0 +1,41 @@
1
+ import React from "react";
2
+ import type { ColumnDefinition, Row, Status, SelectMode, PaginationConfiguration, Sorting, DataConfiguration, GetItemId } from "./types";
3
+ declare type CanSelectItem<Item> = (item: Item, idx: number) => boolean;
4
+ export interface DataTableProps<Item> {
5
+ data: Item[];
6
+ itemId?: GetItemId<Item>;
7
+ pagination?: PaginationConfiguration;
8
+ sorting?: Sorting[];
9
+ onChange?(dataConfiguration: DataConfiguration): void;
10
+ status?: Status;
11
+ noDataContent?: React.ReactNode;
12
+ errorContent?: React.ReactNode;
13
+ columns: ColumnDefinition<Item>[];
14
+ selectMode?: SelectMode;
15
+ selection?: string[];
16
+ onSelectionChange?(rowId: string[]): void;
17
+ canSelectItem?: CanSelectItem<Item>;
18
+ canHoverRow?(row: Row<Item>): boolean;
19
+ onRowHoveredChanged?(row: Row<Item> | null): void;
20
+ }
21
+ /**
22
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
23
+ *
24
+ * #### Do
25
+ *
26
+ * - 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
27
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
28
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
29
+ * - Start by columns with highest value to the user, and continue with less important ones
30
+ *
31
+ * #### Do not
32
+ *
33
+ * - Center align text in cells
34
+ *
35
+ * ## Best practices
36
+ *
37
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
38
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
39
+ */
40
+ export declare const DataTable: <Item extends {}>({ data, itemId, columns, onChange, status, noDataContent, errorContent, sorting, pagination, selectMode, selection, onSelectionChange, canSelectItem, canHoverRow, onRowHoveredChanged, }: DataTableProps<Item>) => JSX.Element;
41
+ export default DataTable;
@@ -0,0 +1,278 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports["default"] = exports.DataTable = void 0;
11
+
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
+
14
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
+
16
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
17
+
18
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
+
20
+ var _react = _interopRequireWildcard(require("react"));
21
+
22
+ var _compact = _interopRequireDefault(require("lodash/compact"));
23
+
24
+ var _get = _interopRequireDefault(require("lodash/get"));
25
+
26
+ var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/satellitePrefixer"));
27
+
28
+ var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
29
+
30
+ var _RadioGroup = require("../../RadioGroup");
31
+
32
+ var _utils = require("../../utils");
33
+
34
+ var _Table = _interopRequireDefault(require("../Table"));
35
+
36
+ var _Header = _interopRequireDefault(require("./components/Header"));
37
+
38
+ var _Footer = _interopRequireDefault(require("./components/Footer"));
39
+
40
+ var _Body = _interopRequireDefault(require("./components/Body"));
41
+
42
+ var _Loader = _interopRequireDefault(require("./components/Loader"));
43
+
44
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
45
+
46
+ 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); }
47
+
48
+ 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; }
49
+
50
+ 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; }
51
+
52
+ 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; }
53
+
54
+ var DEFAULT_GET_ITEM_ID = function DEFAULT_GET_ITEM_ID(_, idx) {
55
+ return String(idx);
56
+ };
57
+ /**
58
+ * Tables are used to structure content in a grid to make it easier to see relationships and to facilitate understanding.
59
+ *
60
+ * #### Do
61
+ *
62
+ * - 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
63
+ * - Include units of measurement symbols in the header so you don't need to repeat them throughout the columns
64
+ * - Indicate sorting capabilities of a column with a chevron in the cell header
65
+ * - Start by columns with highest value to the user, and continue with less important ones
66
+ *
67
+ * #### Do not
68
+ *
69
+ * - Center align text in cells
70
+ *
71
+ * ## Best practices
72
+ *
73
+ * - If a cell is empty or unavailable, keep the cell empty to reduce noise and help with legibility.
74
+ * - Truncate long text to make it fit into a cell. However, choose column width wisely based on expected values, and adjust the table accordingly
75
+ */
76
+
77
+
78
+ var DataTable = function DataTable(_ref) {
79
+ var data = _ref.data,
80
+ itemId = _ref.itemId,
81
+ columns = _ref.columns,
82
+ onChange = _ref.onChange,
83
+ _ref$status = _ref.status,
84
+ status = _ref$status === void 0 ? "success" : _ref$status,
85
+ noDataContent = _ref.noDataContent,
86
+ errorContent = _ref.errorContent,
87
+ _ref$sorting = _ref.sorting,
88
+ sorting = _ref$sorting === void 0 ? [] : _ref$sorting,
89
+ _ref$pagination = _ref.pagination,
90
+ pagination = _ref$pagination === void 0 ? false : _ref$pagination,
91
+ _ref$selectMode = _ref.selectMode,
92
+ selectMode = _ref$selectMode === void 0 ? "none" : _ref$selectMode,
93
+ selection = _ref.selection,
94
+ onSelectionChange = _ref.onSelectionChange,
95
+ canSelectItem = _ref.canSelectItem,
96
+ canHoverRow = _ref.canHoverRow,
97
+ onRowHoveredChanged = _ref.onRowHoveredChanged;
98
+
99
+ if (process.env.NODE_ENV !== "production") {
100
+ var _selection$length;
101
+
102
+ if (itemId === undefined && (sorting.length > 0 || selectMode !== null)) {
103
+ console.warn("You did not provide a custom `itemId` function, but you have defined `sorting` and/or `selectMode`. This can lead to unexpected results.");
104
+ }
105
+
106
+ if (selectMode === "single" && ((_selection$length = selection === null || selection === void 0 ? void 0 : selection.length) !== null && _selection$length !== void 0 ? _selection$length : 0) > 1) {
107
+ console.warn("You can only have one selected item at a time in single `selectMode`.");
108
+ }
109
+
110
+ if (pagination && data.length > pagination.itemsPerPage) {
111
+ console.warn("`pagination.itemsPerPage` (".concat(pagination.itemsPerPage, ") doesn't match `data.length` (").concat(data.length, ")."));
112
+ }
113
+ }
114
+
115
+ var _useState = (0, _react.useState)(),
116
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
117
+ hoveredRowId = _useState2[0],
118
+ setHoveredRowId = _useState2[1];
119
+
120
+ (0, _react.useEffect)(function () {
121
+ // Reset hovered row when data changes to avoid inconsistent state
122
+ setHoveredRowId(undefined);
123
+ }, [data]);
124
+ var computedColumns = (0, _compact["default"])([selectMode === "single" && {
125
+ id: "singleSelect",
126
+ accessor: "singleSelect",
127
+ Header: function Header() {
128
+ return null;
129
+ },
130
+ Cell: function Cell(_ref2) {
131
+ var row = _ref2.row;
132
+ return /*#__PURE__*/_react["default"].createElement("div", {
133
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["flex"])))
134
+ }, /*#__PURE__*/_react["default"].createElement(_RadioGroup.RadioButton, {
135
+ defaultChecked: row.selected,
136
+ disabled: !row.selectable,
137
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
138
+ }));
139
+ },
140
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
141
+ }, selectMode === "multi" && {
142
+ id: "multiSelect",
143
+ accessor: "multiSelect",
144
+ Header: function Header() {
145
+ var unselectableRows = rows.filter(function (row) {
146
+ return !row.selectable;
147
+ }).map(function (r) {
148
+ return r.id;
149
+ });
150
+ var selectableRows = rows.filter(function (row) {
151
+ return row.selectable;
152
+ }).map(function (r) {
153
+ return r.id;
154
+ });
155
+ var selectionLength = (selection !== null && selection !== void 0 ? selection : []).length;
156
+ var dataLength = pagination ? pagination.itemsPerPage : data.length;
157
+ var isChecked = selectionLength === dataLength;
158
+ return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
159
+ "aria-label": "Select all",
160
+ checked: isChecked,
161
+ indeterminate: selectionLength > 0 && selectionLength !== dataLength,
162
+ onClick: function onClick() {
163
+ return isChecked ? onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(unselectableRows) : onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([].concat((0, _toConsumableArray2["default"])(unselectableRows), (0, _toConsumableArray2["default"])(selectableRows)));
164
+ }
165
+ });
166
+ },
167
+ Cell: function Cell(_ref3) {
168
+ var row = _ref3.row;
169
+ return /*#__PURE__*/_react["default"].createElement("div", {
170
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex"])))
171
+ }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
172
+ checked: row.selected,
173
+ disabled: !row.selectable,
174
+ className: (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["", ""])), row.hovered || row.selected ? "opacity-100" : "opacity-0 select-none")
175
+ }));
176
+ },
177
+ className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["w-3"])))
178
+ }].concat((0, _toConsumableArray2["default"])(columns.map(function (c) {
179
+ var _c$Header;
180
+
181
+ return typeof c === "string" ? {
182
+ id: c,
183
+ accessor: c,
184
+ Header: function Header() {
185
+ return /*#__PURE__*/_react["default"].createElement("span", null, (0, _utils.toSentenceCase)(c));
186
+ }
187
+ } : _objectSpread(_objectSpread({}, c), {}, {
188
+ Header: (_c$Header = c.Header) !== null && _c$Header !== void 0 ? _c$Header : function () {
189
+ return /*#__PURE__*/_react["default"].createElement("span", null, (0, _utils.toSentenceCase)(c.id));
190
+ }
191
+ });
192
+ }))));
193
+ var getItemIdInternal = itemId || DEFAULT_GET_ITEM_ID;
194
+ var rows = data.map(function (item, index) {
195
+ var _ref4;
196
+
197
+ var id = typeof getItemIdInternal === "string" ? String((0, _get["default"])(item, getItemIdInternal, DEFAULT_GET_ITEM_ID(item, index))) : getItemIdInternal(item, index);
198
+ var hovered = hoveredRowId === id;
199
+ var sanitizedSelection = (_ref4 = selectMode === "single" ? selection === null || selection === void 0 ? void 0 : selection.slice(0, 1) : selectMode === "none" ? [] : selection) !== null && _ref4 !== void 0 ? _ref4 : [];
200
+ var selected = sanitizedSelection.includes(id);
201
+ var selectable = selectMode !== "none" && (!canSelectItem || canSelectItem(item, index));
202
+ return {
203
+ item: item,
204
+ id: id,
205
+ hovered: hovered,
206
+ selected: selected,
207
+ selectable: selectable
208
+ };
209
+ });
210
+ var internalSorting = computedColumns.map(function (c) {
211
+ var _sorting$find$, _sorting$find;
212
+
213
+ return [c.id, c.sort ? (_sorting$find$ = (_sorting$find = sorting.find(function (_ref5) {
214
+ var _ref6 = (0, _slicedToArray2["default"])(_ref5, 1),
215
+ columnId = _ref6[0];
216
+
217
+ return columnId === c.id;
218
+ })) === null || _sorting$find === void 0 ? void 0 : _sorting$find[1]) !== null && _sorting$find$ !== void 0 ? _sorting$find$ : "desc" : "none"];
219
+ });
220
+
221
+ var onRowHoverChange = function onRowHoverChange(row) {
222
+ setHoveredRowId(row === null || row === void 0 ? void 0 : row.id);
223
+ onRowHoveredChanged === null || onRowHoveredChanged === void 0 ? void 0 : onRowHoveredChanged(row);
224
+ };
225
+
226
+ var handleToggleSort = function handleToggleSort(columnId, direction) {
227
+ var newSorting = internalSorting.map(function (_ref7) {
228
+ var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
229
+ colId = _ref8[0],
230
+ d = _ref8[1];
231
+
232
+ return columnId === colId ? [columnId, direction] : [colId, d];
233
+ });
234
+ onChange === null || onChange === void 0 ? void 0 : onChange({
235
+ pagination: pagination,
236
+ sorting: newSorting
237
+ });
238
+ };
239
+
240
+ var handlePaginationChange = function handlePaginationChange(dataConfiguration) {
241
+ return onChange === null || onChange === void 0 ? void 0 : onChange(dataConfiguration);
242
+ };
243
+
244
+ return /*#__PURE__*/_react["default"].createElement("div", {
245
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["relative"])))
246
+ }, status === "loading" && /*#__PURE__*/_react["default"].createElement("div", {
247
+ className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["absolute bg-white z-10 bg-opacity-50 w-full h-full flex items-center justify-center"])))
248
+ }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
249
+ className: (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["-mt-12"])))
250
+ })), /*#__PURE__*/_react["default"].createElement(_Table["default"], {
251
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["datatable ", " ", ""])), status === "loading" && "pointer-events-none select-none", status === "loading" && data.length === 0 && "h-48"),
252
+ highlight: false,
253
+ footer: pagination !== false && /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
254
+ pagination: pagination,
255
+ onChange: handlePaginationChange
256
+ })
257
+ }, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
258
+ disabled: status !== "success" || rows.length === 0,
259
+ columns: computedColumns,
260
+ onToggleSort: handleToggleSort,
261
+ sorting: internalSorting
262
+ }), /*#__PURE__*/_react["default"].createElement(_Body["default"], {
263
+ rows: rows,
264
+ columns: computedColumns,
265
+ status: status,
266
+ noDataContent: noDataContent,
267
+ errorContent: errorContent,
268
+ selectMode: selectMode,
269
+ selection: selection,
270
+ canHoverRow: canHoverRow,
271
+ onRowHoverChange: onRowHoverChange,
272
+ onSelectionChange: onSelectionChange
273
+ })));
274
+ };
275
+
276
+ exports.DataTable = DataTable;
277
+ var _default = DataTable;
278
+ exports["default"] = _default;
@@ -0,0 +1,5 @@
1
+ export = datatablePlugin;
2
+ /**
3
+ * @type {import('../../tailwind-types').TailwindPlugin}
4
+ */
5
+ declare const datatablePlugin: import('../../tailwind-types').TailwindPlugin;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ // purgecss whitelist: th, td, tr
4
+
5
+ /**
6
+ * @type {import('../../tailwind-types').TailwindPlugin}
7
+ */
8
+ var datatablePlugin = function datatablePlugin(_ref) {
9
+ var addComponents = _ref.addComponents,
10
+ theme = _ref.theme;
11
+ addComponents({
12
+ ".datatable": {
13
+ "tr.row-disabled td": {
14
+ cursor: "not-allowed"
15
+ },
16
+ "tr:not(.row-disabled):hover td": {
17
+ backgroundColor: theme("colors.grey.50")
18
+ }
19
+ }
20
+ });
21
+ };
22
+
23
+ module.exports = datatablePlugin;
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import type { DataTableProps } from "../DataTable";
3
+ import type { Row, AdvancedColumnDefinition, Status, SelectMode } from "../types";
4
+ export interface BodyProps<Item> extends Pick<DataTableProps<Item>, "selection" | "onSelectionChange" | "canHoverRow"> {
5
+ rows: Row<Item>[];
6
+ status?: Status;
7
+ noDataContent?: React.ReactNode;
8
+ errorContent?: React.ReactNode;
9
+ columns: AdvancedColumnDefinition<Item>[];
10
+ onRowHoverChange(row: Row<Item> | null): void;
11
+ selectMode: SelectMode;
12
+ }
13
+ export declare const Body: <Item extends {}>({ rows, columns, status, noDataContent, errorContent, selectMode, selection, onSelectionChange, onRowHoverChange, canHoverRow, }: BodyProps<Item>) => JSX.Element;
14
+ export default Body;
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = exports.Body = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
16
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
17
+
18
+ var _react = _interopRequireDefault(require("react"));
19
+
20
+ var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
21
+
22
+ var _EmptyState = _interopRequireDefault(require("../../../EmptyState"));
23
+
24
+ var _utils = require("../utils");
25
+
26
+ var _templateObject, _templateObject2, _templateObject3;
27
+
28
+ 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; }
29
+
30
+ 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; }
31
+
32
+ var Body = function Body(_ref) {
33
+ var rows = _ref.rows,
34
+ columns = _ref.columns,
35
+ status = _ref.status,
36
+ noDataContent = _ref.noDataContent,
37
+ errorContent = _ref.errorContent,
38
+ selectMode = _ref.selectMode,
39
+ _ref$selection = _ref.selection,
40
+ selection = _ref$selection === void 0 ? [] : _ref$selection,
41
+ onSelectionChange = _ref.onSelectionChange,
42
+ onRowHoverChange = _ref.onRowHoverChange,
43
+ _ref$canHoverRow = _ref.canHoverRow,
44
+ canHoverRow = _ref$canHoverRow === void 0 ? function () {
45
+ return true;
46
+ } : _ref$canHoverRow;
47
+
48
+ var handleRowSelection = function handleRowSelection(row) {
49
+ if (!onSelectionChange) return;
50
+ var rowId = row.id;
51
+ var isSelected = selection.includes(rowId);
52
+ var newSelection = isSelected ? selection.filter(function (id) {
53
+ return id !== rowId;
54
+ }) : selectMode === "multi" ? [].concat((0, _toConsumableArray2["default"])(selection), [rowId]) : [rowId];
55
+ onSelectionChange(newSelection);
56
+ };
57
+
58
+ var additionalRowProps = function additionalRowProps(row) {
59
+ return _objectSpread(_objectSpread({}, canHoverRow(row) ? {
60
+ onMouseEnter: function onMouseEnter() {
61
+ return onRowHoverChange(row);
62
+ },
63
+ onMouseLeave: function onMouseLeave() {
64
+ return onRowHoverChange(null);
65
+ },
66
+ className: "hoverable"
67
+ } : {
68
+ className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["row-disabled"])))
69
+ }), row.selectable && {
70
+ onClick: function onClick() {
71
+ return handleRowSelection(row);
72
+ }
73
+ });
74
+ };
75
+
76
+ if (status === "error") {
77
+ return /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
78
+ colSpan: columns.length
79
+ }, /*#__PURE__*/_react["default"].createElement("span", {
80
+ className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"])))
81
+ }, errorContent || /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
82
+ title: "Error",
83
+ description: "An error occurred while loading data.",
84
+ centered: true,
85
+ usageContext: "result"
86
+ })))));
87
+ }
88
+
89
+ if (rows.length === 0 && status !== "loading") {
90
+ return /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
91
+ colSpan: columns.length
92
+ }, /*#__PURE__*/_react["default"].createElement("span", {
93
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex justify-center py-6"])))
94
+ }, noDataContent || /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
95
+ title: "Empty",
96
+ description: "There is no data to display",
97
+ centered: true,
98
+ usageContext: "result"
99
+ })))));
100
+ }
101
+
102
+ return /*#__PURE__*/_react["default"].createElement("tbody", null, rows.map(function (row, rowIndex) {
103
+ return /*#__PURE__*/_react["default"].createElement("tr", (0, _extends2["default"])({}, additionalRowProps(row), {
104
+ key: rowIndex
105
+ }), columns.map(function (column) {
106
+ var value = (0, _utils.getCellValue)(column, row);
107
+ var Cell = column.Cell;
108
+ return Cell ? /*#__PURE__*/_react["default"].createElement("td", {
109
+ className: column === null || column === void 0 ? void 0 : column.className,
110
+ key: column.id
111
+ }, /*#__PURE__*/_react["default"].createElement(Cell, {
112
+ row: rows[rowIndex],
113
+ column: column,
114
+ value: value
115
+ })) : /*#__PURE__*/_react["default"].createElement("td", {
116
+ className: column === null || column === void 0 ? void 0 : column.className,
117
+ key: column.id
118
+ }, value !== null && value !== void 0 ? value : "-");
119
+ }));
120
+ }));
121
+ };
122
+
123
+ exports.Body = Body;
124
+ var _default = Body;
125
+ exports["default"] = _default;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import type { PaginationConfiguration, DataConfiguration } from "../types";
3
+ export interface FooterProps {
4
+ pagination: PaginationConfiguration;
5
+ onChange(dataConfiguration: DataConfiguration): void;
6
+ }
7
+ export declare const Footer: ({ pagination, onChange }: FooterProps) => JSX.Element | null;
8
+ export default Footer;