flipper-ui 0.30.10 → 0.31.0

package/core/context/theme-provider/index.d.ts

@@ -1,8 +1,9 @@
-import { ThemeOptions } from '@material-ui/core/styles';
 import React from 'react';
+import type { ReactNode } from 'react';
+import type { ThemeOptions } from '@material-ui/core/styles';
 interface ThemeProviderProps {
     options?: ThemeOptions;
-    children: React.ReactNode;
+    children: ReactNode;
 }
 declare const ThemeProviderFlipper: ({ options, children }: ThemeProviderProps) => React.JSX.Element;
 export default ThemeProviderFlipper;

package/core/context/theme-provider/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _styles = require("@material-ui/core/styles");
 var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
 var ThemeProviderFlipper = function ThemeProviderFlipper(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? {} : _ref$options,

package/core/data-display/advertise/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { CSSProperties } from 'react';
 import type { DefaultProps } from '../../types';
 export interface AdvertiseProps extends DefaultProps {
     /**
@@ -13,12 +14,12 @@ export interface AdvertiseProps extends DefaultProps {
      * The style of the comment
      * @optional
      */
-    commentStyle?: React.CSSProperties;
+    commentStyle?: CSSProperties;
     /**
      * The style of the author
      * @optional
      */
-    authorStyle?: React.CSSProperties;
+    authorStyle?: CSSProperties;
 }
 declare const Advertise: ({ comment, author, padding, commentStyle, authorStyle, ...otherProps }: AdvertiseProps) => React.JSX.Element;
 export default Advertise;

package/core/data-display/advertise/index.js

@@ -11,8 +11,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = require("../typography");
 var _paper = _interopRequireDefault(require("../../surfaces/paper"));
-var _typography = _interopRequireDefault(require("../typography"));
 var _theme = require("../../../theme");
 var _excluded = ["comment", "author", "padding", "commentStyle", "authorStyle"];
 var _templateObject;
@@ -37,11 +37,11 @@ var Advertise = function Advertise(_ref) {
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Paper, (0, _extends2["default"])({
     padding: padding
-  }, otherProps), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+  }, otherProps), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
     margin: "0 12px",
     padding: "6px 18px",
     style: _objectSpread(_objectSpread({}, styles.border), commentStyle)
-  }, comment), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+  }, comment), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
     margin: "0px 12px",
     padding: "6px 18px",
     variant: "caption",

package/core/data-display/avatar/index.d.ts

@@ -1,12 +1,13 @@
-import { AvatarProps as MuiAvatarProps } from '@material-ui/core';
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
+import type { AvatarProps as MuiAvatarProps } from '@material-ui/core';
 export interface AvatarProps extends DefaultProps, MuiAvatarProps {
     /**
      * If true, the avatar will have a primary color background.
      */
     primary?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     'data-testid'?: string;
 }
 export declare const Avatar: ({ children, primary, className, ...otherProps }: AvatarProps) => React.JSX.Element;

package/core/data-display/avatar/index.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.Avatar = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
 var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
 var _styles = require("@material-ui/core/styles");
-var _react = _interopRequireDefault(require("react"));
 var _excluded = ["children", "primary", "className"];
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return (0, _styles.createStyles)({

package/core/data-display/badge/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
+import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
+import type { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
 export interface BadgeProps extends DefaultProps, MuiBadgeProps {
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * The number to display in the badge.
      */

package/core/data-display/badge/index.js

@@ -8,8 +8,8 @@ exports["default"] = exports.Badge = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
 var _react = _interopRequireDefault(require("react"));
+var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
 var _styles = require("@material-ui/core/styles");
 var _excluded = ["children", "counter", "padding", "margin", "position", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

package/core/data-display/chapter/index.d.ts

@@ -1,5 +1,6 @@
-import React, { CSSProperties } from 'react';
-import { DefaultProps } from '../../types';
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { DefaultProps } from '../../types';
 import type { TypographyProps } from '@material-ui/core/Typography';
 export interface LineProps extends DefaultProps {
     /**
@@ -21,7 +22,7 @@ export interface LineProps extends DefaultProps {
     /**
      * The children of the component.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     'data-testid'?: string;
 }
 export declare const Chapter: ({ padding, margin, style, childrenStyle, children, variant, primary, ...otherProps }: LineProps) => React.JSX.Element;

package/core/data-display/chapter/index.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _typography = _interopRequireDefault(require("../typography"));
+var _typography = require("../typography");
 var _theme = require("../../../theme");
 var _excluded = ["padding", "margin", "style", "childrenStyle", "children", "variant", "primary"];
 var _templateObject, _templateObject2;
@@ -41,7 +41,7 @@ var Chapter = exports.Chapter = function Chapter(_ref) {
   };
   return /*#__PURE__*/_react["default"].createElement(Container, otherProps, /*#__PURE__*/_react["default"].createElement(Line, {
     primary: primary
-  }), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_typography.Typography, {
     variant: variant,
     style: _objectSpread({}, childrenStyle)
   }, children), /*#__PURE__*/_react["default"].createElement(Line, {

package/core/data-display/chip/index.d.ts

@@ -1,6 +1,6 @@
-import { ChipProps as MuiChipProps } from '@material-ui/core';
 import React from 'react';
-import { DefaultProps } from '../../types';
+import type { DefaultProps } from '../../types';
+import type { ChipProps as MuiChipProps } from '@material-ui/core';
 export interface IChipProps extends MuiChipProps, Omit<DefaultProps, 'children'> {
     /**
      * If `true`, the chip will be squared.

package/core/data-display/chip/index.js

@@ -8,9 +8,9 @@ exports["default"] = exports.Chip = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
 var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
 var _styles = require("@material-ui/core/styles");
-var _react = _interopRequireDefault(require("react"));
 var _excluded = ["square", "padding", "margin", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }

package/core/data-display/data-table/data-table-action.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 export type DataTableActionProps = {
     label: string;
     children: ReactNode;

package/core/data-display/data-table/data-table-field.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+interface IHeader {
+    title: string;
+    field: string;
+    type?: string;
+    editable?: boolean;
+}
+interface ITable<D extends Record<string, unknown>> {
+    rows: D[];
+    setRows: Dispatch<SetStateAction<D[]>>;
+    header: IHeader[];
+    checkbox?: boolean;
+    checkboxProps?: {
+        checkRow?: boolean[];
+        checkAllRows?: boolean;
+        setSelectedRow?: Dispatch<SetStateAction<boolean[]>>;
+        setSelectedAllRows?: Dispatch<SetStateAction<boolean>>;
+    };
+}
+export declare const DataTableField: <D extends Record<string, unknown>>(props: ITable<D>) => React.JSX.Element;
+export {};

package/core/data-display/data-table/data-table-field.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTableField = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ = require("../../..");
+var _templateObject, _templateObject2; // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TableCellRows = (0, _styledComponents["default"])(_material.TableCell)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
+var RowTable = (0, _styledComponents["default"])(_material.TableRow)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    cursor: pointer;\n\n    &:hover {\n        background: -moz-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: -webkit-linear-gradient(\n            left,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n        background: linear-gradient(\n            to right,\n            rgba(189, 189, 189, 0) 0%,\n            rgba(189, 189, 189, 1) 100%\n        );\n    }\n\n    &.no-hover {\n        background: none;\n    }\n"])));
+var DataTableField = exports.DataTableField = function DataTableField(props) {
+  var rows = props.rows,
+    header = props.header,
+    checkbox = props.checkbox,
+    checkboxProps = props.checkboxProps,
+    setRows = props.setRows;
+  var handleFieldChange = function handleFieldChange(event, fieldName, rowIndex, setRows) {
+    var value = event.target.value;
+    setRows(function (prevRows) {
+      var updatedRows = prevRows.map(function (row, i) {
+        if (i === rowIndex) {
+          return _objectSpread(_objectSpread({}, row), {}, (0, _defineProperty2["default"])({}, fieldName, value));
+        }
+        return row;
+      });
+      return updatedRows;
+    });
+  };
+  var handleSelectCheckbox = function handleSelectCheckbox(index, setSelected, setSelectedAll) {
+    setSelected(function (state) {
+      var newState = state.map(function (row, i) {
+        return index === i ? !row : row;
+      });
+      if (newState.includes(false)) {
+        setSelectedAll(false);
+      }
+      if (newState.every(function (item) {
+        return item === true;
+      })) {
+        setSelectedAll(true);
+      }
+      return newState;
+    });
+  };
+  var handleSelectAllCheckbox = function handleSelectAllCheckbox(setSelected, setSelectedAll) {
+    setSelectedAll(function (selectedAll) {
+      return !selectedAll;
+    });
+    setSelected(function (state) {
+      return state.map(function () {
+        return checkboxProps !== undefined ? !checkboxProps.checkAllRows : false;
+      });
+    });
+  };
+  var handleSelect = function handleSelect(index) {
+    if (checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.setSelectedRow && checkboxProps.setSelectedAllRows) {
+      handleSelectCheckbox(index, checkboxProps.setSelectedRow, checkboxProps.setSelectedAllRows);
+    }
+  };
+  var handleTableRow = function handleTableRow(event, index) {
+    var isCheckboxClick = event.target.closest('input[type="checkbox"]') !== null;
+    if (!isCheckboxClick && (!(checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.checkRow) || !checkboxProps.checkRow[index])) {
+      handleSelect(index);
+    }
+  };
+  var tableBody = function tableBody(rows, header) {
+    return rows.map(function (row, index) {
+      var _checkboxProps$checkR2;
+      var columns = header.map(function (column, i) {
+        if (Object.keys(row).includes(column.field)) {
+          var _checkboxProps$checkR;
+          return /*#__PURE__*/_react["default"].createElement(TableCellRows, {
+            key: i,
+            align: "center"
+          }, column.editable && checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.checkRow && checkboxProps.checkRow[index] ? /*#__PURE__*/_react["default"].createElement(_.TextField, {
+            fullWidth: true,
+            key: "".concat(column.field, "-").concat(i),
+            type: column.type,
+            value: row[column.field] || '',
+            onClick: function onClick(event) {
+              return event.stopPropagation();
+            },
+            onChange: function onChange(event) {
+              return handleFieldChange(event, column.field, index, setRows);
+            }
+          }) : /*#__PURE__*/_react["default"].createElement("span", null, column.editable ? checkboxProps !== null && checkboxProps !== void 0 && (_checkboxProps$checkR = checkboxProps.checkRow) !== null && _checkboxProps$checkR !== void 0 && _checkboxProps$checkR[index] ? row[column.field] : '' : row[column.field]));
+        }
+        return;
+      });
+      return /*#__PURE__*/_react["default"].createElement(RowTable, {
+        key: index,
+        className: checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.checkRow && checkboxProps.checkRow[index] ? 'no-hover' : '',
+        onClick: function onClick(event) {
+          return handleTableRow(event, index);
+        }
+      }, checkbox && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        padding: "checkbox"
+      }, /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+        color: "primary",
+        checked: (checkboxProps === null || checkboxProps === void 0 || (_checkboxProps$checkR2 = checkboxProps.checkRow) === null || _checkboxProps$checkR2 === void 0 ? void 0 : _checkboxProps$checkR2[index]) !== undefined ? checkboxProps.checkRow[index] : false,
+        onChange: function onChange() {
+          return handleSelect(index);
+        }
+      })), columns);
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_material.Table, null, /*#__PURE__*/_react["default"].createElement(_material.TableHead, null, checkbox && /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+    padding: "checkbox"
+  }, /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
+    color: "primary",
+    checked: (checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.checkAllRows) !== undefined ? checkboxProps.checkAllRows : false,
+    onChange: function onChange() {
+      if (checkboxProps !== null && checkboxProps !== void 0 && checkboxProps.setSelectedRow && checkboxProps.setSelectedAllRows) {
+        handleSelectAllCheckbox(checkboxProps.setSelectedRow, checkboxProps.setSelectedAllRows);
+      }
+    }
+  })), header.map(function (item, i) {
+    return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+      key: i,
+      align: "center"
+    }, item.title);
+  })), /*#__PURE__*/_react["default"].createElement(_material.TableBody, null, tableBody(rows, header)));
+};

package/core/data-display/data-table/data-table-pagination-actions.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { MouseEvent } from 'react';
 interface DataTablePaginationActionsProps {
     count: number;
     page: number;
     rowsPerPage: number;
-    onPageChange(event: React.MouseEvent<HTMLButtonElement>, newPage: number): void;
+    onPageChange(event: MouseEvent<HTMLButtonElement>, newPage: number): void;
 }
 interface DataTablePaginationActionsBuilder {
     showFirstButton?: boolean;

package/core/data-display/data-table/data-table-pagination-actions.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.makeDataTablePaginationActions = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
+var _iconButton = require("../../inputs/icon-button");
 var _icons = require("../../../icons");
 var PAGINATION_WRAPPER_STYLE = {
   display: 'flex',
@@ -36,22 +36,22 @@ var makeDataTablePaginationActions = exports.makeDataTablePaginationActions = fu
     };
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: PAGINATION_WRAPPER_STYLE
-    }, showFirstButton && /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-      onClick: handleFirstPageButtonClick,
+    }, showFirstButton && /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
       disabled: page === 0 || clickable,
-      "aria-label": "first page"
-    }, /*#__PURE__*/_react["default"].createElement(_icons.FirstPage, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-      onClick: handleBackButtonClick,
+      "aria-label": "first page",
+      onClick: handleFirstPageButtonClick
+    }, /*#__PURE__*/_react["default"].createElement(_icons.FirstPage, null)), /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
       disabled: page === 0 || clickable,
-      "aria-label": "previous page"
-    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, null)), /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-      onClick: handleNextButtonClick,
+      "aria-label": "previous page",
+      onClick: handleBackButtonClick
+    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowLeft, null)), /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
       disabled: page >= totalPages || clickable,
-      "aria-label": "next page"
-    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, null)), showLastButton && /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
-      onClick: handleLastPageButtonClick,
+      "aria-label": "next page",
+      onClick: handleNextButtonClick
+    }, /*#__PURE__*/_react["default"].createElement(_icons.KeyboardArrowRight, null)), showLastButton && /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
       disabled: page >= totalPages || clickable,
-      "aria-label": "last page"
+      "aria-label": "last page",
+      onClick: handleLastPageButtonClick
     }, /*#__PURE__*/_react["default"].createElement(_icons.LastPage, null)));
   };
 };

package/core/data-display/data-table/data-table-query-paginated.d.ts

@@ -1,5 +1,6 @@
-import React, { MutableRefObject, CSSProperties } from 'react';
-import { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
+import React from 'react';
+import type { MouseEvent, MutableRefObject, CSSProperties, ReactNode } from 'react';
+import type { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
 export type DataTableProps<D extends Data, V extends StackView = Record<string, unknown>> = {
     /**
      * The data to be shown in the table
@@ -41,7 +42,7 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
     /**
      * Component to show when there are no data
      */
-    componentForEmpty?: React.ReactNode;
+    componentForEmpty?: ReactNode;
     /**
      * Custom style to be applied to the table body
      */
@@ -79,7 +80,7 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
      * Custom rowViews used as a Stac
      */
     rowViews?: Record<keyof V, RowViewComponent<D>>;
-    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, rowData: D) => void;
+    onRowClick?: (event: MouseEvent<HTMLTableRowElement>, rowData: D) => void;
 };
 export declare const DataTableQueryPaginated: <D extends Data, V extends import("./types").RecordUnknown>(props: DataTableProps<D, V>) => React.JSX.Element;
 export default DataTableQueryPaginated;

package/core/data-display/data-table/data-table-query-paginated.js

@@ -9,20 +9,20 @@ exports["default"] = exports.DataTableQueryPaginated = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _last = _interopRequireDefault(require("ramda/es/last"));
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 var _Table = _interopRequireDefault(require("@material-ui/core/Table"));
 var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));
 var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
 var _TableContainer = _interopRequireDefault(require("@material-ui/core/TableContainer"));
+var _TableFooter = _interopRequireDefault(require("@material-ui/core/TableFooter"));
 var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
-var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
-var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));
-var _TableFooter = _interopRequireDefault(require("@material-ui/core/TableFooter"));
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _last = _interopRequireDefault(require("ramda/es/last"));
+var _dataTablePaginationActions = require("./data-table-pagination-actions");
+var _rows = require("./rows");
 var _types = require("./types");
 var _useRowsState2 = require("./use-rows-state");
-var _rows = require("./rows");
-var _dataTablePaginationActions = require("./data-table-pagination-actions");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -198,13 +198,13 @@ var DataTableQueryPaginated = exports.DataTableQueryPaginated = function DataTab
     rowsPerPage: perPage,
     labelRowsPerPage: pagination.labelRowsPerPage,
     labelDisplayedRows: pagination.labelDisplayedRows,
+    ActionsComponent: paginationActionsComponent,
     onPageChange: function onPageChange(_, page) {
       handleChangePage(page);
     },
     onRowsPerPageChange: function onRowsPerPageChange(event) {
       handleChangePerPage(parseInt(event.target.value, 10));
-    },
-    ActionsComponent: paginationActionsComponent
+    }
   })))));
 };
 var _default = exports["default"] = DataTableQueryPaginated;

package/core/data-display/data-table/data-table.d.ts

@@ -1,5 +1,6 @@
-import React, { MutableRefObject, CSSProperties } from 'react';
-import { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
+import React from 'react';
+import type { MouseEvent, MutableRefObject, CSSProperties, ReactNode, Dispatch, SetStateAction } from 'react';
+import type { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
 export type DataTableProps<D extends Data, V extends StackView = Record<string, unknown>> = {
     /**
      * The data to be shown in the table
@@ -21,7 +22,7 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
     /**
      * Component to show when there are no data
      */
-    componentForEmpty?: React.ReactNode;
+    componentForEmpty?: ReactNode;
     /**
      * Custom style to be applied to the table body
      */
@@ -59,7 +60,20 @@ export type DataTableProps<D extends Data, V extends StackView = Record<string,
      * Custom rowViews used as a Stac
      */
     rowViews?: Record<keyof V, RowViewComponent<D>>;
-    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, rowData: D) => void;
+    /**
+     * Hide or show the checkbox
+     */
+    checkbox?: boolean;
+    /**
+     * Handle the selected states and values
+     */
+    checkboxProps?: {
+        checkRow?: boolean[];
+        checkAllRows?: boolean;
+        setSelectedRow?: Dispatch<SetStateAction<boolean[]>>;
+        setSelectedAllRows?: Dispatch<SetStateAction<boolean>>;
+    };
+    onRowClick?: (event: MouseEvent<HTMLTableRowElement>, rowData: D) => void;
 };
 export declare const DataTable: <D extends Data, V extends import("./types").RecordUnknown>(props: DataTableProps<D, V>) => React.JSX.Element;
 export default DataTable;