flipper-ui 0.24.12 → 0.25.2

package/core/Advertise.d.ts

@@ -1,17 +1,10 @@
-import { FC, CSSProperties } from 'react';
-export interface IDefault {
-    style?: CSSProperties;
-    className?: string;
-    margin?: number | string;
-    padding?: number | string;
-    name?: string;
-    id?: string;
-}
-interface IProps extends IDefault {
+import { FC } from 'react';
+import type { DefaultProps } from './types';
+interface AdvertiseProps extends DefaultProps {
     comment: string;
     author: string;
     commentStyle?: object;
     authorStyle?: object;
 }
-declare const Advertise: FC<IProps>;
+declare const Advertise: FC<AdvertiseProps>;
 export default Advertise;

package/core/AutoComplete.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC, ChangeEvent, KeyboardEvent, CSSProperties, Ref, FocusEvent } from 'react';
-interface IProps {
+interface AutoCompleteProps {
     autoFocus?: boolean;
     defaultIsOpen?: boolean;
     openOnFocus?: boolean;
@@ -8,7 +8,7 @@ interface IProps {
     fade?: boolean;
     focusDelay?: number;
     suggestions: ISelected[];
-    value: TSelected;
+    value?: TSelected;
     defaultValue?: string;
     style?: CSSProperties;
     maxHeight?: number;
@@ -36,5 +36,5 @@ interface ISelected {
     subheader?: boolean;
 }
 declare type TSelected = ISelected | string;
-declare const AutoComplete: FC<IProps>;
+declare const AutoComplete: FC<AutoCompleteProps>;
 export default AutoComplete;

package/core/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import type { DefaultProps } from './types';
+interface AvatarProps extends DefaultProps {
     name?: string;
     id?: string;
     sizes?: string;
@@ -8,5 +8,5 @@ interface IProps extends IDefault {
     imgProps?: object;
     primary?: boolean;
 }
-declare const Avatar: FC<IProps>;
+declare const Avatar: FC<AvatarProps>;
 export default Avatar;

package/core/Badge.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-import { BadgeProps } from '@material-ui/core/Badge';
-interface IProps extends IDefault, BadgeProps {
+import { BadgeProps as MuiBadgeProps } from '@material-ui/core/Badge';
+import type { DefaultProps } from './types';
+interface BadgeProps extends DefaultProps, MuiBadgeProps {
     max?: number;
     counter: number | string;
     position?: {
@@ -11,5 +11,5 @@ interface IProps extends IDefault, BadgeProps {
         right?: number;
     };
 }
-declare const Badge: FC<IProps>;
+declare const Badge: FC<BadgeProps>;
 export default Badge;

package/core/Box.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import type { DefaultProps } from './types';
+interface BoxProps extends DefaultProps {
     minHeight?: number;
 }
-declare const Box: FC<IProps>;
+declare const Box: FC<BoxProps>;
 export default Box;

package/core/Button.d.ts

@@ -1,6 +1,6 @@
 import { FC, ElementType, MouseEvent } from 'react';
-import { IDefault } from './Advertise';
-export interface IProps extends IDefault {
+import { DefaultProps } from './types';
+export interface ButtonProps extends DefaultProps {
     disabled?: boolean;
     selected?: boolean;
     disableTouchRipple?: boolean;
@@ -13,5 +13,5 @@ export interface IProps extends IDefault {
     target?: string;
     onClick?(event: MouseEvent<HTMLButtonElement>): void;
 }
-declare const Button: FC<IProps>;
+declare const Button: FC<ButtonProps>;
 export default Button;

package/core/Card.d.ts

@@ -1,15 +1,15 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { CardProps } from '@material-ui/core/Card';
 import { CardActionAreaProps } from '@material-ui/core/CardActionArea';
 import { CardActionsProps } from '@material-ui/core/CardActions';
 import { CardContentProps } from '@material-ui/core/CardContent';
 import { CardMediaProps } from '@material-ui/core/CardMedia';
 import { CardHeaderProps } from '@material-ui/core/CardHeader';
-export declare const CardActionArea: FC<IDefault & CardActionAreaProps>;
-export declare const CardActions: FC<IDefault & CardActionsProps>;
-export declare const CardContent: FC<IDefault & CardContentProps>;
-export declare const CardMedia: FC<IDefault & CardMediaProps>;
-export declare const CardHeader: FC<IDefault & CardHeaderProps>;
-declare const Card: FC<IDefault & CardProps>;
+export declare const CardActionArea: FC<DefaultProps & CardActionAreaProps>;
+export declare const CardActions: FC<DefaultProps & CardActionsProps>;
+export declare const CardContent: FC<DefaultProps & CardContentProps>;
+export declare const CardMedia: FC<DefaultProps & CardMediaProps>;
+export declare const CardHeader: FC<DefaultProps & CardHeaderProps>;
+declare const Card: FC<DefaultProps & CardProps>;
 export default Card;

package/core/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, ReactNode } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface CheckboxProps extends DefaultProps {
     name: string;
     label?: ReactNode;
     color?: 'primary' | 'secondary' | 'default';
@@ -13,5 +13,5 @@ interface IProps extends IDefault {
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
 }
-declare const Checkbox: (props: IProps) => JSX.Element;
+declare const Checkbox: (props: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/core/Chip.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { ChipProps } from '@material-ui/core/Chip';
-interface IProps extends IDefault {
+interface IChipProps extends DefaultProps {
     square?: boolean;
 }
-declare const Chip: FC<ChipProps & IProps>;
+declare const Chip: FC<ChipProps & IChipProps>;
 export default Chip;

package/core/ChipField.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChipRenderer } from 'material-ui-chip-input';
 import { InputLabelProps } from '@material-ui/core';
-interface IProps<T extends TChipValues> {
+interface ChipFieldProps<T extends TChipValues> {
     allowDuplicates?: boolean;
     values: T[];
     variant?: 'outlined' | 'standard' | 'filled';
@@ -20,5 +20,5 @@ interface IProps<T extends TChipValues> {
 export declare type TChipValues = {
     value: string | number;
 };
-declare const ChipField: <T extends TChipValues>(props: IProps<T>) => JSX.Element;
+declare const ChipField: <T extends TChipValues>(props: ChipFieldProps<T>) => JSX.Element;
 export default ChipField;

package/core/Collapse.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface CollapseProps extends DefaultProps {
     collapsedHeight?: string;
     in: boolean;
     timeout?: number | {
@@ -8,5 +8,5 @@ interface IProps extends IDefault {
         exit?: number;
     } | 'auto';
 }
-declare const Collapse: FC<IProps>;
+declare const Collapse: FC<CollapseProps>;
 export default Collapse;

package/core/Container.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-declare const Container: FC<IDefault>;
+import { DefaultProps } from './types';
+declare const Container: FC<DefaultProps>;
 export default Container;

package/core/Content.d.ts

@@ -1,4 +1,4 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-declare const Content: FC<IDefault>;
+import { DefaultProps } from './types';
+declare const Content: FC<DefaultProps>;
 export default Content;

package/core/DataTable/DataTable.d.ts

@@ -0,0 +1,61 @@
+import React, { MutableRefObject, CSSProperties } from 'react';
+import { ColumnSpec, Data, DataTableController, Errors, PaginationOptions, RowViewComponent, StackView } from './types';
+export declare type DataTableProps<D extends Data, V extends StackView = {}> = {
+    /**
+     * The data to be shown in the table
+     */
+    data: D[];
+    /**
+     * Errors as an object where the key is the ID of the row and the value is
+     * a Set with the fields of error
+     */
+    errors?: Errors<D>;
+    /**
+     * The columns specification
+     */
+    columns: ColumnSpec<D>[];
+    /**
+     * Hide the table header
+     */
+    noHeader?: boolean;
+    /**
+     * Component to show when there are no data
+     */
+    componentForEmpty?: React.ReactNode;
+    /**
+     * Custom style to be applied to the table body
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Custom style to be applied to the table head
+     */
+    headStyle?: CSSProperties;
+    /**
+     * Custom style to be applied to all rows of the table body
+     */
+    bodyRowStyle?: CSSProperties;
+    /**
+     * Custom style to be applied to all rows of the table head
+     */
+    headRowStyle?: CSSProperties;
+    /**
+     * Height of a hidden row, when you need to have some blank space in case
+     * you fill in the pagination.rowsPerPage
+     */
+    hiddenRowHeight?: number;
+    /**
+     * The pagination configuration
+     */
+    pagination?: Partial<PaginationOptions>;
+    /**
+     * A React MutableRefObject for the row controller
+     */
+    controllerRef?: MutableRefObject<DataTableController<D, V> | undefined>;
+    /**
+     * Custom rowViews used as a Stac
+     */
+    rowViews?: Record<keyof V, RowViewComponent<D>>;
+    onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>, rowData: D) => void;
+};
+export declare const DataTable: <D extends Data, V extends Record<string, unknown>>(props: DataTableProps<D, V>) => JSX.Element;
+export default DataTable;

package/core/DataTable/DataTable.js

@@ -0,0 +1,254 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DataTable = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _last = _interopRequireDefault(require("ramda/es/last"));
+
+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 _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 _types = require("./types");
+
+var _useRowsState2 = require("./useRowsState");
+
+var _Rows = require("./Rows");
+
+var _DataTablePaginationActions = require("./DataTablePaginationActions");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var defaultPagination = {
+  rowsPerPage: 10,
+  labelRowsPerPage: 'Rows per page:',
+  labelDisplayedRows: function labelDisplayedRows(_ref) {
+    var from = _ref.from,
+        to = _ref.to,
+        count = _ref.count;
+    return "".concat(from, "-").concat(to, " of ").concat(count !== -1 ? count : "more than ".concat(to));
+  },
+  disabled: false,
+  showFirstButton: false,
+  showLastButton: false,
+  rowsPerPageOptions: [5, 10, 20]
+};
+
+var sliceData = function sliceData(data, page, rowsPerPage) {
+  var start = page * rowsPerPage;
+  var end = start + rowsPerPage;
+  return data.slice(start, end);
+};
+
+var DataTable = function DataTable(props) {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      page = _useState2[0],
+      setPage = _useState2[1];
+
+  var pagination = _objectSpread(_objectSpread({}, defaultPagination), props.pagination);
+
+  var _useState3 = (0, _react.useState)(pagination.rowsPerPage),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      rowsPerPage = _useState4[0],
+      setRowsPerPage = _useState4[1];
+
+  var data = props.data,
+      columns = props.columns,
+      rowViews = props.rowViews,
+      onRowClick = props.onRowClick,
+      controllerRef = props.controllerRef,
+      noHeader = props.noHeader,
+      bodyRowStyle = props.bodyRowStyle,
+      headRowStyle = props.headRowStyle,
+      errors = props.errors,
+      componentForEmpty = props.componentForEmpty,
+      bodyStyle = props.bodyStyle,
+      headStyle = props.headStyle,
+      hiddenRowHeight = props.hiddenRowHeight;
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      newRow = _useState6[0],
+      setNewRow = _useState6[1];
+
+  var rows = (0, _react.useMemo)(function () {
+    if (pagination.disabled) {
+      return data;
+    } // this case is not good for the useRowsMode hook
+
+
+    if (newRow && page === 0) {
+      return sliceData(data, page, rowsPerPage - 1);
+    }
+
+    return sliceData(data, page, rowsPerPage);
+  }, [pagination.disabled, data, rowsPerPage, page, newRow]);
+
+  var _useRowsState = (0, _useRowsState2.useRowsState)(rows, newRow),
+      getRowState = _useRowsState.getRowState,
+      setEditableRowState = _useRowsState.setEditableRowState,
+      setRowState = _useRowsState.setRowState,
+      pushRowView = _useRowsState.pushRowView,
+      popRowView = _useRowsState.popRowView;
+
+  var controller = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var nextController = {
+      editRow: function editRow(id) {
+        setRowState(id, {
+          mode: _types.RowMode.Edit
+        });
+      },
+      viewRow: function viewRow(id) {
+        setRowState(id, {
+          mode: _types.RowMode.View
+        });
+        setNewRow(undefined);
+      },
+      addRow: function addRow(partial) {
+        setPage(0);
+        setNewRow(partial);
+      },
+      getEditedRowData: function getEditedRowData(id) {
+        var _getRowState;
+
+        return _objectSpread({
+          id: id
+        }, (_getRowState = getRowState(id)) === null || _getRowState === void 0 ? void 0 : _getRowState.editableState);
+      },
+      getRowData: function getRowData(id) {
+        var raw = getRowState(id);
+        return {
+          edited: _objectSpread({
+            id: id
+          }, raw === null || raw === void 0 ? void 0 : raw.editableState),
+          current: raw === null || raw === void 0 ? void 0 : raw.currentState
+        };
+      },
+      pushRowView: pushRowView,
+      popRowView: popRowView
+    };
+    controller.current = nextController;
+
+    if (controllerRef) {
+      controllerRef.current = nextController;
+    }
+  }, [setRowState, pushRowView, popRowView, getRowState, controllerRef]);
+  var rowsList = (0, _react.useMemo)(function () {
+    return rows.map(function (row) {
+      var rowState = getRowState(row.id);
+      var lastView = (rowState === null || rowState === void 0 ? void 0 : rowState.stackView) && (0, _last["default"])(rowState.stackView);
+      var view = lastView && (rowViews === null || rowViews === void 0 ? void 0 : rowViews[lastView]);
+      var mode = (rowState === null || rowState === void 0 ? void 0 : rowState.mode) || _types.RowMode.View;
+      return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+        key: row.id,
+        "data-id": row.id,
+        style: bodyRowStyle,
+        onClick: function onClick(event) {
+          return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+        }
+      }, view ? view({
+        data: row
+      }) : /*#__PURE__*/_react["default"].createElement(_Rows.StatefulRow, {
+        columns: columns,
+        data: row,
+        errors: errors,
+        mode: mode,
+        onUpdate: setEditableRowState(row.id)
+      }));
+    });
+  }, [rows, getRowState, onRowClick, setEditableRowState, errors, rowViews, bodyRowStyle, columns]);
+  var columnsList = (0, _react.useMemo)(function () {
+    return columns.map(function (column) {
+      return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+        key: column.title,
+        variant: "head",
+        style: column.headerStyle,
+        align: column.align
+      }, column.title);
+    });
+  }, [columns]);
+  var currentRowsNumber = rows.length + (newRow ? 1 : 0);
+  var hiddenRowsNumber = pagination.disabled ? 0 : rowsPerPage - currentRowsNumber;
+
+  var hiddenRowFiller = hiddenRowsNumber !== 0 && /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+    style: bodyRowStyle
+  }, /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+    colSpan: columns.length,
+    padding: "none",
+    style: {
+      height: hiddenRowHeight && "".concat(hiddenRowHeight * hiddenRowsNumber, "px")
+    }
+  }));
+
+  var rowsElements = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (newRow === null || newRow === void 0 ? void 0 : newRow.id) && /*#__PURE__*/_react["default"].createElement(_Rows.NewRow, {
+    data: newRow,
+    errors: errors,
+    columns: columns,
+    onUpdate: setEditableRowState(newRow.id)
+  }), rowsList);
+
+  var paginationActionsComponent = (0, _react.useMemo)(function () {
+    return (0, _DataTablePaginationActions.makeDataTablePaginationActions)({
+      showFirstButton: pagination.showFirstButton,
+      showLastButton: pagination.showLastButton
+    });
+  }, [pagination.showFirstButton, pagination.showLastButton]);
+  return /*#__PURE__*/_react["default"].createElement(_TableContainer["default"], {
+    component: _Paper["default"]
+  }, /*#__PURE__*/_react["default"].createElement(_Table["default"], null, !noHeader && /*#__PURE__*/_react["default"].createElement(_TableHead["default"], {
+    style: headStyle
+  }, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
+    style: headRowStyle
+  }, columnsList)), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], {
+    style: bodyStyle
+  }, currentRowsNumber === 0 ? componentForEmpty : rowsElements, hiddenRowFiller), !pagination.disabled && /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], null, /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, /*#__PURE__*/_react["default"].createElement(_TablePagination["default"], {
+    count: data.length,
+    page: page,
+    rowsPerPageOptions: pagination.rowsPerPageOptions,
+    rowsPerPage: rowsPerPage,
+    labelRowsPerPage: pagination.labelRowsPerPage,
+    labelDisplayedRows: pagination.labelDisplayedRows,
+    onChangePage: function onChangePage(_, page) {
+      setPage(page);
+    },
+    onChangeRowsPerPage: function onChangeRowsPerPage(event) {
+      setRowsPerPage(parseInt(event.target.value, 10));
+      setPage(0);
+    },
+    ActionsComponent: paginationActionsComponent
+  })))));
+};
+
+exports.DataTable = DataTable;
+var _default = DataTable;
+exports["default"] = _default;

package/core/DataTable/DataTableAction.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type DataTableActionProps = {
+    label: string;
+    children: ReactNode;
+    color?: 'primary' | 'secondary' | 'inherit' | 'default';
+    onClick(): void;
+};
+export declare const DataTableAction: ({ label, children, color, onClick }: DataTableActionProps) => JSX.Element;

package/core/DataTable/DataTableAction.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataTableAction = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var DataTableAction = function DataTableAction(_ref) {
+  var label = _ref.label,
+      children = _ref.children,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    size: "small",
+    color: color,
+    "aria-label": label,
+    onClick: onClick
+  }, children);
+};
+
+exports.DataTableAction = DataTableAction;

package/core/DataTable/DataTablePaginationActions.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface DataTablePaginationActionsProps {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    onChangePage(event: React.MouseEvent<HTMLButtonElement>, newPage: number): void;
+}
+interface DataTablePaginationActionsBuilder {
+    showFirstButton?: boolean;
+    showLastButton?: boolean;
+}
+export declare const makeDataTablePaginationActions: ({ showFirstButton, showLastButton }: DataTablePaginationActionsBuilder) => ({ count, page, rowsPerPage, onChangePage }: DataTablePaginationActionsProps) => JSX.Element;
+export {};

package/core/DataTable/DataTablePaginationActions.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeDataTablePaginationActions = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton/IconButton"));
+
+var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"));
+
+var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));
+
+var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));
+
+var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));
+
+/* eslint-disable @typescript-eslint/interface-name-prefix */
+var PAGINATION_WRAPPER_STYLE = {
+  display: 'flex',
+  marginLeft: '12px'
+};
+
+var makeDataTablePaginationActions = function makeDataTablePaginationActions(_ref) {
+  var showFirstButton = _ref.showFirstButton,
+      showLastButton = _ref.showLastButton;
+  return function (_ref2) {
+    var count = _ref2.count,
+        page = _ref2.page,
+        rowsPerPage = _ref2.rowsPerPage,
+        onChangePage = _ref2.onChangePage;
+    var totalPages = Math.ceil(count / rowsPerPage) - 1;
+
+    var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
+      onChangePage(event, 0);
+    };
+
+    var handleBackButtonClick = function handleBackButtonClick(event) {
+      onChangePage(event, page - 1);
+    };
+
+    var handleNextButtonClick = function handleNextButtonClick(event) {
+      onChangePage(event, page + 1);
+    };
+
+    var handleLastPageButtonClick = function handleLastPageButtonClick(event) {
+      onChangePage(event, Math.max(0, totalPages));
+    };
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: PAGINATION_WRAPPER_STYLE
+    }, showFirstButton && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      onClick: handleFirstPageButtonClick,
+      disabled: page === 0,
+      "aria-label": "first page"
+    }, /*#__PURE__*/_react["default"].createElement(_FirstPage["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      onClick: handleBackButtonClick,
+      disabled: page === 0,
+      "aria-label": "previous page"
+    }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null)), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      onClick: handleNextButtonClick,
+      disabled: page >= totalPages,
+      "aria-label": "next page"
+    }, /*#__PURE__*/_react["default"].createElement(_KeyboardArrowRight["default"], null)), showLastButton && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+      onClick: handleLastPageButtonClick,
+      disabled: page >= totalPages,
+      "aria-label": "last page"
+    }, /*#__PURE__*/_react["default"].createElement(_LastPage["default"], null)));
+  };
+};
+
+exports.makeDataTablePaginationActions = makeDataTablePaginationActions;