flipper-ui 0.31.1 → 0.31.4

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./data-table-query-paginated").DataTableProps<import("./types").Data, import("./types").RecordUnknown>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("./data-table-query-paginated").DataTableProps<import("./types").Data, import("./types").RecordUnknown>>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Empty: () => React.JSX.Element;

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

@@ -2,71 +2,21 @@ 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
-     */
     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?: 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>;
-    /**
-     * Initialize with hidden values
-     */
     hidden?: boolean;
-    /**
-     * Custom rowViews used as a Stac
-     */
     rowViews?: Record<keyof V, RowViewComponent<D>>;
-    /**
-     * Hide or show the checkbox
-     */
     checkbox?: boolean;
-    /**
-     * Handle the selected states and values
-     */
     checkboxProps?: {
         checkRow?: boolean[];
         checkAllRows?: boolean;

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

@@ -27,7 +27,7 @@ var _useRowsState2 = require("./use-rows-state");
 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; }
-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; } /* eslint-disable max-lines */
+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 defaultPagination = {
   rowsPerPage: 10,
   labelRowsPerPage: 'Rows per page:',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./data-table").DataTableProps<import("./types").Data, import("./types").RecordUnknown>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("./data-table").DataTableProps<import("./types").Data, import("./types").RecordUnknown>>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const Empty: () => React.JSX.Element;

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

@@ -1,8 +1,8 @@
 export { default } from './data-table';
-export { default as DataTableQueryPaginated } from './data-table-query-paginated';
-export type { DataTableProps } from './data-table';
-export { RowMode } from './types';
 export { DataTableAction } from './data-table-action';
 export { DataTableField } from './data-table-field';
-export type { DataTableActionProps } from './data-table-action';
+export { default as DataTableQueryPaginated } from './data-table-query-paginated';
 export type { ActionsCellProps, Align, DataTableController, PaginationOptions, ColumnType, Errors, RenderCellProps, RowAction } from './types';
+export { RowMode } from './types';
+export type { DataTableProps } from './data-table';
+export type { DataTableActionProps } from './data-table-action';

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

@@ -35,7 +35,7 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _dataTable = _interopRequireDefault(require("./data-table"));
-var _dataTableQueryPaginated = _interopRequireDefault(require("./data-table-query-paginated"));
-var _types = require("./types");
 var _dataTableAction = require("./data-table-action");
-var _dataTableField = require("./data-table-field");
+var _dataTableField = require("./data-table-field");
+var _dataTableQueryPaginated = _interopRequireDefault(require("./data-table-query-paginated"));
+var _types = require("./types");

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

@@ -1,6 +1,12 @@
 import React from 'react';
 import type { ColumnSpec, Data, Errors, PartialData } from './types';
 import { RowMode } from './types';
+type NewRowProps<D extends Data> = {
+    data: PartialData<D>;
+    errors?: Errors<D>;
+    columns: ColumnSpec<D>[];
+    onUpdate?(partial: Partial<Data>): void;
+};
 type StatefulRowProps<D extends Data> = {
     data: D;
     mode: RowMode;
@@ -10,11 +16,5 @@ type StatefulRowProps<D extends Data> = {
     onUpdate?(partial: Partial<Data>): void;
 };
 export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate, isHidden }: StatefulRowProps<D>) => React.JSX.Element;
-type NewRowProps<D extends Data> = {
-    data: PartialData<D>;
-    errors?: Errors<D>;
-    columns: ColumnSpec<D>[];
-    onUpdate?(partial: Partial<Data>): void;
-};
 export declare const NewRow: <D extends Data>({ data, columns, errors, onUpdate }: NewRowProps<D>) => React.JSX.Element;
 export {};

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

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
 var _dateTime = require("../../inputs/date-time");
-var _maskField = require("../../inputs/mask-field");
+var _maskField = _interopRequireDefault(require("../../inputs/mask-field"));
 var _textField = require("../../inputs/text-field");
 var _types = require("./types");
 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); }
@@ -59,7 +59,7 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
   if (column.type.includes('numeric')) {
     var decimalScale = column.type === 'numeric-int' ? 0 : 2;
     var numeric = row[column.field];
-    return /*#__PURE__*/_react["default"].createElement(_maskField.MaskField, {
+    return /*#__PURE__*/_react["default"].createElement(_maskField["default"], {
       fixedDecimalScale: true,
       fullWidth: true,
       type: "text",
@@ -145,7 +145,10 @@ var StatefulRow = exports.StatefulRow = function StatefulRow(_ref) {
     var patch = {};
     patch[field] = value;
     onUpdate === null || onUpdate === void 0 || onUpdate(patch);
-  }, []);
+  },
+  // it works fine
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
   var getCorrectViewMode = function getCorrectViewMode(column, mode, isEditable) {
     if (mode === _types.RowMode.Edit && isEditable) {
       return renderEditMode(column, editableState, partialUpdate, errors);
@@ -179,7 +182,10 @@ var NewRow = exports.NewRow = function NewRow(_ref2) {
       return _objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2["default"])({}, field, value));
     });
     onUpdate === null || onUpdate === void 0 || onUpdate((0, _defineProperty2["default"])({}, field, value));
-  }, []);
+  },
+  // it works fine
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
   return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
     "data-testid": "table-row"
   }, columns.map(function (column) {

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TableCell } from '@mui/material';
+export declare const FieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const PaginationWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const TableCellRows: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("@mui/material").TableCellProps, never>> & Omit<typeof TableCell, keyof import("react").Component<any, {}, any>>;
+export declare const RowTable: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "selected" | "sx" | "hover">, never>> & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TableRowTypeMap<{}, "tr">>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableCellRows = exports.RowTable = exports.PaginationWrapper = exports.FieldWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _material = require("@mui/material");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var FieldWrapper = exports.FieldWrapper = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var PaginationWrapper = exports.PaginationWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    margin-left: 12px;\n"])));
+var TableCellRows = exports.TableCellRows = (0, _styledComponents["default"])(_material.TableCell)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 400px;\n        height: 60px;\n        padding: 0 10px;\n    }\n"])));
+var RowTable = exports.RowTable = (0, _styledComponents["default"])(_material.TableRow)(_templateObject4 || (_templateObject4 = (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"])));

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

@@ -77,29 +77,11 @@ export type RowViewComponent<D> = FunctionComponent<{
     data: D;
 }>;
 export type DataTableController<D extends Data, V extends StackView> = {
-    /**
-     * Actives the edit mode for a row
-     */
     editRow(id: Identifier): void;
-    /**
-     * Actives the view mode for a row
-     */
     viewRow(id: Identifier): void;
-    /**
-     * Hides the view mode for a row
-     */
     hideRow(id: Identifier): void;
-    /**
-     * Adds a new row on the DataTable
-     */
     addRow(data: PartialData<D>): void;
-    /**
-     * Returns only the edited properties of a row in edit mode
-     */
     getEditedRowData(id: Identifier): PartialData<D>;
-    /**
-     * Returns the edited properties and the old data of a row in edit mode
-     */
     getRowData(id: Identifier): {
         edited: PartialData<D>;
         current?: D;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { Dispatch, SetStateAction } from 'react';
 import type { Data } from './types';
 export interface IDataProps {
     id: string;
@@ -10,7 +10,7 @@ export interface IDataProps {
 export declare const generateRandomDate: (size: number) => Data[];
 export declare const usePaginated: () => {
     data: Data[];
-    setData: import("react").Dispatch<import("react").SetStateAction<Data[]>>;
+    setData: Dispatch<SetStateAction<Data[]>>;
     totalElements: number;
     actualPage: number;
     size: number;

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

@@ -12,8 +12,6 @@ var _faker = _interopRequireDefault(require("faker"));
 var _splitEvery = _interopRequireDefault(require("ramda/es/splitEvery"));
 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; }
-// import { v4 as uuid } from 'uuid'
-
 var generateRandomDate = exports.generateRandomDate = function generateRandomDate(size) {
   var content = [];
   for (var i = 0; i < size; i++) {
@@ -33,13 +31,10 @@ var generateRandomDate = exports.generateRandomDate = function generateRandomDat
   }
   return content;
 };
-var MOCK_DELAY_VALUE = 1000;
-var DEFAULT_PAGE_SIZE = 5;
-var DEFAULT_MOCK_LENGTH = 35;
-var mockData = generateRandomDate(DEFAULT_MOCK_LENGTH);
+var mockData = generateRandomDate(35);
 var INITIAL_STATE = {
   items: [],
-  size: DEFAULT_PAGE_SIZE,
+  size: 5,
   actualPage: 0,
   totalItens: 0
 };
@@ -63,7 +58,7 @@ var usePaginated = exports.usePaginated = function usePaginated() {
     });
     setTimeout(function () {
       setLoading(false);
-    }, MOCK_DELAY_VALUE);
+    }, 1000);
   }, []);
   (0, _react.useEffect)(function () {
     if (splitData[state.actualPage]) {
@@ -80,6 +75,8 @@ var usePaginated = exports.usePaginated = function usePaginated() {
         });
       });
     }
+    // it works fine
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.size]);
   (0, _react.useEffect)(function () {
     setState(function (prev) {
@@ -87,6 +84,8 @@ var usePaginated = exports.usePaginated = function usePaginated() {
         items: splitData[state.actualPage]
       });
     });
+    // it works fine
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.actualPage]);
   var handleChangePage = function handleChangePage(newPage) {
     setLoading(true);
@@ -97,7 +96,7 @@ var usePaginated = exports.usePaginated = function usePaginated() {
     });
     setTimeout(function () {
       setLoading(false);
-    }, MOCK_DELAY_VALUE);
+    }, 1000);
   };
   var handleChangePerPage = function handleChangePerPage(value) {
     setLoading(true);
@@ -108,10 +107,8 @@ var usePaginated = exports.usePaginated = function usePaginated() {
     });
     setTimeout(function () {
       setLoading(false);
-    }, MOCK_DELAY_VALUE);
+    }, 1000);
   };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var setData = function setData(data) {
     setState(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {

package/core/data-display/data-table/use-rows-state.d.ts

@@ -1,5 +1,5 @@
 import type { Data, Identifier, RowState } from './types';
-export declare const useRowsState: <D extends Data, V extends import("./types").RecordUnknown>(rows: D[], isHidden?: boolean, newRow?: Partial<D> | undefined) => {
+export declare const useRowsState: <D extends Data, V extends import("./types").RecordUnknown>(rows: D[], isHidden?: boolean, newRow?: Partial<D>) => {
     getRowState: (id: Identifier) => RowState<D, V> | undefined;
     setEditableRowState: (id: Identifier) => (patch: Partial<D>) => void;
     setRowState: (id: Identifier, partial: Partial<RowState<D, V>>) => void;

package/core/data-display/data-table/use-rows-state.js

@@ -61,6 +61,8 @@ var useRowsState = exports.useRowsState = function useRowsState(rows) {
     setState({
       internal: nextState
     });
+    // it works fine
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rows, !!newRow]);
   var setRowState = (0, _react.useCallback)(function (id, partial) {
     setState(function (state) {

package/core/data-display/divider/divider.stories.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").DividerProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").DividerProps>;
 export default _default;
 export declare const Default: () => React.JSX.Element;
 export declare const WithDisabledFields: () => React.JSX.Element;

package/core/data-display/editable-table/{editTable.stories.d.ts → editable-table.stories.d.ts}

@@ -1,4 +1,4 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import(".").EditableTableProps<object>>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").EditableTableProps<object>>;
 export default _default;
 export declare const Default: any;
 export declare const WithAutocomplete: any;

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

@@ -66,7 +66,5 @@ export type TSuggestion = {
     label: string;
     value: string;
 };
-export declare const DARK = "rgba(189,189,189,0)";
-export declare const GREY = "rgba(189,189,189,1)";
-export declare const EditableTable: <T extends object>(props: EditableTableProps<T>) => React.JSX.Element;
+declare const EditableTable: <T extends object>(props: EditableTableProps<T>) => React.JSX.Element;
 export default EditableTable;

package/core/data-display/editable-table/index.js

@@ -5,48 +5,46 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.GREY = exports.EditableTable = exports.DARK = void 0;
+exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _ptBR = _interopRequireDefault(require("date-fns/locale/pt-BR"));
 var _materialTable = _interopRequireWildcard(require("material-table"));
 var _omit = _interopRequireDefault(require("ramda/es/omit"));
 var _contains = _interopRequireDefault(require("ramda/es/contains"));
 var _propOr = _interopRequireDefault(require("ramda/es/propOr"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _listItem = _interopRequireDefault(require("../list-item"));
-var _typography = require("../typography");
-var _autoComplete = require("../../inputs/auto-complete");
-var _button = require("../../inputs/button");
+var _autoComplete = _interopRequireDefault(require("../../inputs/auto-complete"));
+var _button = _interopRequireDefault(require("../../inputs/button"));
 var _dateTime = require("../../inputs/date-time");
-var _maskField = require("../../inputs/mask-field");
+var _maskField = _interopRequireDefault(require("../../inputs/mask-field"));
 var _textField = require("../../inputs/text-field");
-var _icons = require("../../../icons");
 var _localization = require("../../../lib/localization");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable max-lines */
+var _styles = require("./styles");
+var _icons = require("../../../icons");
 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; }
-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 DARK = exports.DARK = 'rgba(189,189,189,0)';
-var GREY = exports.GREY = 'rgba(189,189,189,1)';
-var AddRowButton = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n"])));
-var AddRowText = (0, _styledComponents["default"])(_typography.Typography)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    margin-left: 4px;\n    font-weight: 500 !important;\n"])));
-var FullWidthButton = (0, _styledComponents["default"])(_button.Button)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: calc(100% - 24px);\n    margin: 12px !important;\n"])));
-var CustomRemove = (0, _styledComponents["default"])(_materialTable.MTableEditRow)({
-  '& h6': {
-    fontSize: '0.85em'
-  }
-});
-var CustomRows = (0, _styledComponents["default"])(_materialTable.MTableBodyRow)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    transition: opacity 200ms ease;\n    button {\n        display: none;\n    }\n    &:hover {\n        background: -moz-linear-gradient(left, ", " 0%, ", " 100%);\n        background: -webkit-linear-gradient(left, ", " 0%, ", " 100%);\n        background: linear-gradient(to right, ", " 0%, ", " 100%);\n    }\n    &:hover button {\n        display: inline-block !important;\n    }\n    td {\n        min-width: 64px;\n    }\n"])), DARK, GREY, DARK, GREY, DARK, GREY);
-var RightPagination = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        display: block;\n        float: right;\n    }\n"])));
-var Wrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        justify-content: flex-end;\n    }\n"])));
-var EditableTable = exports.EditableTable = function EditableTable(props) {
+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; } /* eslint-disable @typescript-eslint/no-explicit-any */
+var handlePagination = function handlePagination(paginationInfo, noRowsExpand, title) {
+  var pagination = !paginationInfo ? {
+    Pagination: function Pagination() {
+      return null;
+    }
+  } : noRowsExpand && {
+    Pagination: function Pagination(item) {
+      return /*#__PURE__*/_react["default"].createElement(_styles.RightPagination, {
+        "data-id": "pagination"
+      }, /*#__PURE__*/_react["default"].createElement(_materialTable.MTablePagination, (0, _extends2["default"])({}, (0, _omit["default"])(['classes'], item), {
+        localization: (0, _localization.getLocalization)(title).pagination
+      })));
+    }
+  };
+  return pagination;
+};
+var EditableTable = function EditableTable(props) {
   var _props$data;
   var addButtonColor = props.color !== 'disabled' && props.color || 'primary';
   var valueRef = (0, _react.useRef)();
@@ -55,7 +53,7 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
   };
   var renderMaskField = function renderMaskField(item, error) {
     var _item$value;
-    return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_maskField.MaskField, (0, _extends2["default"])({}, item, {
+    return /*#__PURE__*/_react["default"].createElement(_styles.Wrapper, null, /*#__PURE__*/_react["default"].createElement(_maskField["default"], (0, _extends2["default"])({}, item, {
       fixedDecimalScale: true,
       error: props.errors ? error : item.error,
       type: "text",
@@ -73,29 +71,16 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
       }
     })));
   };
-  var renderAddComponent = /*#__PURE__*/_react["default"].createElement(AddRowButton, {
+  var renderAddComponent = /*#__PURE__*/_react["default"].createElement(_styles.AddRowButton, {
     "data-id": "add-row"
-  }, /*#__PURE__*/_react["default"].createElement(_icons.NoteAdd, null), /*#__PURE__*/_react["default"].createElement(AddRowText, null, " Adicionar ", props.title, " "));
-  var pagination = !props.paginationInfo ? {
-    Pagination: function Pagination() {
-      return null;
-    }
-  } : props.noRowsExpand && {
-    Pagination: function Pagination(item) {
-      return /*#__PURE__*/_react["default"].createElement(RightPagination, {
-        "data-id": "pagination"
-      }, /*#__PURE__*/_react["default"].createElement(_materialTable.MTablePagination, (0, _extends2["default"])({}, (0, _omit["default"])(['classes'], item), {
-        localization: (0, _localization.getLocalization)(props.title).pagination
-      })));
-    }
-  };
+  }, /*#__PURE__*/_react["default"].createElement(_icons.NoteAdd, null), /*#__PURE__*/_react["default"].createElement(_styles.AddRowText, null, " Adicionar ", props.title, " "));
   var toolbar = props.noHeader && {
     Toolbar: function Toolbar() {
       return null;
     }
   };
   var renderAutoComplete = function renderAutoComplete(inputProps) {
-    return /*#__PURE__*/_react["default"].createElement(_autoComplete.AutoComplete, {
+    return /*#__PURE__*/_react["default"].createElement(_autoComplete["default"], {
       openOnFocus: true,
       selectTextOnFocus: true,
       "data-testid": "autocomplete-container",
@@ -114,7 +99,7 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
           name: inputProps.columnDef.field + '-input'
         }, itemProps));
       },
-      actions: props.onClickAdd && /*#__PURE__*/_react["default"].createElement(FullWidthButton, {
+      actions: props.onClickAdd && /*#__PURE__*/_react["default"].createElement(_styles.FullWidthButton, {
         color: addButtonColor,
         name: "dialog-add",
         "data-testid": "dialog-add",
@@ -124,17 +109,13 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
       onChange: inputProps.onChange
     });
   };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_materialTable["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_styles.Container, null, /*#__PURE__*/_react["default"].createElement(_materialTable["default"], {
     components: _objectSpread(_objectSpread({
       EditRow: function EditRow(props) {
-        return /*#__PURE__*/_react["default"].createElement(CustomRemove, props);
+        return /*#__PURE__*/_react["default"].createElement(_styles.CustomRemove, props);
       },
       Row: function Row(props) {
-        return /*#__PURE__*/_react["default"].createElement(CustomRows, props);
+        return /*#__PURE__*/_react["default"].createElement(_styles.CustomRows, props);
       },
       Toolbar: function Toolbar(props) {
         var _props$actions = (0, _slicedToArray2["default"])(props.actions, 1),
@@ -153,7 +134,7 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
         var isDisabled = !!disabled;
         var renderToolbarButton = function renderToolbarButton() {
           var ActionIcon = localProps.action.icon;
-          return /*#__PURE__*/_react["default"].createElement(_button.Button, {
+          return /*#__PURE__*/_react["default"].createElement(_button["default"], {
             fullWidth: true,
             disabled: props.disableAddHeader,
             variant: "dashed",
@@ -172,28 +153,11 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
             action: localProps.action
           });
         };
-
-        // const renderDefault = () => (
-        //     <MTableAction
-        //         disabled
-        //         action={() => {}}
-        //         size={0}
-        //         data={[]}
-        //     />
-        // )
-
-        // const hasData = !!localProps.action && size && data
         var isToolbar = localProps.action && 'position' in localProps.action && localProps.action.position === 'toolbar';
         if (isToolbar) {
           return renderToolbarButton();
         }
         return renderActionButton();
-
-        // return cond([
-        //     [isToolbar, renderToolbarButton],
-        //     [hasData, renderActionButton],
-        //     [T, renderDefault]
-        // ])(localProps)
       },
       EditField: function EditField(localProps) {
         if (localProps.columnDef.type === 'datetime') {
@@ -219,7 +183,7 @@ var EditableTable = exports.EditableTable = function EditableTable(props) {
           name: localProps.columnDef.field + '-input'
         }, localProps));
       }
-    }, pagination), toolbar),
+    }, handlePagination(props.paginationInfo, props.noRowsExpand, props.title)), toolbar),
     localization: (0, _localization.getLocalization)(props.title),
     icons: {
       Add: /*#__PURE__*/(0, _react.forwardRef)(function () {