flipper-ui 0.24.12 → 0.25.2

package/core/DataTable/Rows.d.ts

@@ -0,0 +1,17 @@
+import { ColumnSpec, Data, Errors, PartialData, RowMode } from './types';
+declare type StatefulRowProps<D extends Data> = {
+    data: D;
+    mode: RowMode;
+    errors?: Errors<D>;
+    columns: ColumnSpec<D>[];
+    onUpdate?(partial: Partial<Data>): void;
+};
+export declare const StatefulRow: <D extends Data>({ data, mode, errors, columns, onUpdate }: StatefulRowProps<D>) => JSX.Element;
+declare 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>) => JSX.Element;
+export {};

package/core/DataTable/Rows.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewRow = exports.StatefulRow = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _types = require("./types");
+
+var _TextField = _interopRequireDefault(require("../TextField"));
+
+var _MaskField = _interopRequireDefault(require("../MaskField"));
+
+var _DateTime = _interopRequireDefault(require("../DateTime"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+
+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 isEditable = function isEditable(column) {
+  return column.type === 'actions' || column.editable;
+};
+
+var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
+  var _errors$row$id, _column$type;
+
+  var isNew = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+
+  if (column.type === 'actions') {
+    return column.renderCell({
+      data: row,
+      rowMode: _types.RowMode.Edit,
+      isNew: isNew
+    });
+  }
+
+  var hasError = errors === null || errors === void 0 ? void 0 : (_errors$row$id = errors[row.id]) === null || _errors$row$id === void 0 ? void 0 : _errors$row$id.has(column.field);
+
+  if (column.renderCell) {
+    var _value = row[column.field];
+    return column.renderCell({
+      data: row,
+      rowMode: _types.RowMode.Edit,
+      isNew: isNew,
+      hasError: hasError,
+      value: _value
+    });
+  }
+
+  if (column.type === 'datetime') {
+    var date = row[column.field];
+    return /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+      type: "datetime",
+      value: date,
+      fullWidth: true,
+      error: hasError,
+      onChange: function onChange(value) {
+        updateRow(column.field, value);
+      }
+    });
+  }
+
+  if ((_column$type = column.type) !== null && _column$type !== void 0 && _column$type.includes('numeric')) {
+    var decimalScale = column.type === 'numeric-int' ? 0 : 2;
+    var numeric = row[column.field];
+    return /*#__PURE__*/_react["default"].createElement(_MaskField["default"], {
+      fixedDecimalScale: true,
+      type: "text",
+      fullWidth: true,
+      error: hasError,
+      thousandSeparator: ".",
+      decimalSeparator: ",",
+      decimalScale: decimalScale,
+      value: numeric,
+      name: column.field.toString(),
+      onChange: function onChange(event) {
+        var _event$target$value;
+
+        var rawValue = (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.replace('.', '').replace(',', '.');
+        var value = decimalScale === 0 ? parseInt(rawValue) : parseFloat(rawValue);
+        updateRow(column.field, value);
+      }
+    });
+  }
+
+  var type = column.type === 'number' ? 'number' : 'text';
+  var value = row[column.field];
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    defaultValue: value,
+    type: type,
+    fullWidth: true,
+    error: hasError,
+    name: column.field.toString(),
+    onChange: function onChange(event) {
+      return updateRow(column.field, event.target.value);
+    }
+  });
+};
+
+var renderViewMode = function renderViewMode(column, row) {
+  var _column$getValue;
+
+  if (column.type === 'actions') {
+    return column.renderCell({
+      data: row,
+      rowMode: _types.RowMode.View
+    });
+  }
+
+  var rawValue = row[column.field];
+
+  if (column.renderCell) {
+    return column.renderCell({
+      data: row,
+      rowMode: _types.RowMode.View,
+      value: rawValue
+    });
+  }
+
+  return ((_column$getValue = column.getValue) === null || _column$getValue === void 0 ? void 0 : _column$getValue.call(column, rawValue)) || rawValue;
+};
+
+var StatefulRow = function StatefulRow(_ref) {
+  var data = _ref.data,
+      mode = _ref.mode,
+      errors = _ref.errors,
+      columns = _ref.columns,
+      onUpdate = _ref.onUpdate;
+
+  var _useState = (0, _react.useState)(function () {
+    return data;
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      editableState = _useState2[0],
+      setEditableState = _useState2[1];
+
+  var partialUpdate = (0, _react.useCallback)(function (field, value) {
+    setEditableState(function (values) {
+      return _objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2["default"])({}, "".concat(field), value));
+    });
+    var patch = {};
+    patch[field] = value;
+    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(patch);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, columns.map(function (column) {
+    return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+      align: column.align,
+      key: column.title,
+      style: column.cellStyle
+    }, mode === _types.RowMode.Edit && isEditable(column) ? renderEditMode(column, editableState, partialUpdate, errors) : renderViewMode(column, data));
+  }));
+};
+
+exports.StatefulRow = StatefulRow;
+
+var NewRow = function NewRow(_ref2) {
+  var data = _ref2.data,
+      columns = _ref2.columns,
+      errors = _ref2.errors,
+      onUpdate = _ref2.onUpdate;
+
+  var _useState3 = (0, _react.useState)(function () {
+    return data;
+  }),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      editableState = _useState4[0],
+      setEditableState = _useState4[1];
+
+  var partialUpdate = (0, _react.useCallback)(function (field, value) {
+    setEditableState(function (values) {
+      return _objectSpread(_objectSpread({}, values), {}, (0, _defineProperty2["default"])({}, field, value));
+    });
+    onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate((0, _defineProperty2["default"])({}, field, value));
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], null, columns.map(function (column) {
+    return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+      style: column.cellStyle,
+      align: column.align,
+      key: column.title
+    }, isEditable(column) ? renderEditMode(column, editableState, partialUpdate, errors, true) : renderViewMode(column, editableState));
+  }));
+};
+
+exports.NewRow = NewRow;

package/core/DataTable/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './DataTable';
+export type { DataTableProps } from './DataTable';
+export { RowMode } from './types';
+export { DataTableAction } from './DataTableAction';
+export type { DataTableActionProps } from './DataTableAction';
+export type { ActionsCellProps, Align, DataTableController, PaginationOptions, ColumnType, Errors, RenderCellProps, RowAction } from './types';

package/core/DataTable/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _DataTable["default"];
+  }
+});
+Object.defineProperty(exports, "RowMode", {
+  enumerable: true,
+  get: function get() {
+    return _types.RowMode;
+  }
+});
+Object.defineProperty(exports, "DataTableAction", {
+  enumerable: true,
+  get: function get() {
+    return _DataTableAction.DataTableAction;
+  }
+});
+
+var _DataTable = _interopRequireDefault(require("./DataTable"));
+
+var _types = require("./types");
+
+var _DataTableAction = require("./DataTableAction");

package/core/DataTable/types.d.ts

@@ -0,0 +1,103 @@
+import type { CSSProperties, FunctionComponent } from 'react';
+declare type RecordUnknown = Record<string, unknown>;
+export declare type StackView = RecordUnknown;
+export declare type Identifier = string | number;
+export interface Data extends RecordUnknown {
+    id: Identifier;
+}
+export declare type PartialData<D extends RecordUnknown> = Partial<D> & {
+    id: Identifier;
+};
+export declare type ColumnType = 'datetime' | 'text' | 'number' | 'numeric-float' | 'numeric-int';
+export declare type Align = 'right' | 'left' | 'center' | 'justify' | 'inherit';
+declare type ColumnSpecBase<F = {}> = {
+    title: string;
+    type: string;
+    cellStyle?: CSSProperties;
+    headerStyle?: CSSProperties;
+    align?: Align;
+    renderCell?: FunctionComponent<F>;
+};
+export declare type RenderCellProps<D extends Data> = {
+    data: D;
+    rowMode: RowMode;
+    value: unknown;
+    hasError?: boolean;
+    isNew?: boolean;
+};
+interface ColumnSpecDefault<D extends Data> extends ColumnSpecBase<RenderCellProps<PartialData<D>>> {
+    type: ColumnType;
+    field: keyof D;
+    editable?: boolean;
+    getValue?(value: unknown): string;
+}
+export declare type ActionsCellProps<D extends Data> = {
+    data: PartialData<D>;
+    rowMode: RowMode;
+    isNew?: boolean;
+};
+interface ColumnSpecActions<D extends Data> extends ColumnSpecBase<ActionsCellProps<D>> {
+    type: 'actions';
+    renderCell: FunctionComponent<ActionsCellProps<D>>;
+}
+export declare type ColumnSpec<D extends Data> = ColumnSpecDefault<D> | ColumnSpecActions<D>;
+export declare type PaginationOptions = {
+    rowsPerPage: number;
+    labelRowsPerPage: string;
+    labelDisplayedRows: (param: {
+        from: number;
+        to: number;
+        count: number;
+    }) => string;
+    rowsPerPageOptions: number[];
+    showFirstButton?: boolean;
+    showLastButton?: boolean;
+    disabled: boolean;
+};
+export declare type RowAction<D> = {
+    type: 'add' | 'delete' | 'update';
+    data: D;
+};
+export declare enum RowMode {
+    View = 0,
+    Edit = 1
+}
+export declare type RowState<D extends Data, S extends StackView> = {
+    mode: RowMode;
+    stackView: (keyof S)[];
+    currentState?: D;
+    editableState: Partial<D>;
+};
+export declare type RowViewComponent<D> = FunctionComponent<{
+    popRowView?: () => void;
+    data: D;
+}>;
+export declare 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;
+    /**
+     * 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;
+    };
+    pushRowView(id: Identifier, view: keyof V): void;
+    popRowView(id: Identifier): void;
+};
+export declare type Errors<D> = Partial<Record<Identifier, Set<keyof D>>>;
+export {};

package/core/DataTable/types.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowMode = void 0;
+
+/* eslint-disable @typescript-eslint/interface-name-prefix */
+var RowMode;
+exports.RowMode = RowMode;
+
+(function (RowMode) {
+  RowMode[RowMode["View"] = 0] = "View";
+  RowMode[RowMode["Edit"] = 1] = "Edit";
+})(RowMode || (exports.RowMode = RowMode = {}));

package/core/DataTable/useRowsState.d.ts

@@ -0,0 +1,8 @@
+import { Data, Identifier, RowState } from './types';
+export declare const useRowsState: <D extends Data, V extends Record<string, unknown>>(rows: D[], newRow?: Partial<D> | undefined) => {
+    getRowState: (id: Identifier) => RowState<D, V> | undefined;
+    setEditableRowState: (id: Identifier) => (patch: Partial<D>) => void;
+    setRowState: (id: Identifier, partial: Partial<RowState<D, V>>) => void;
+    pushRowView: (id: Identifier, view: keyof V) => void;
+    popRowView: (id: Identifier) => void;
+};

package/core/DataTable/useRowsState.js

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowsState = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _types = require("./types");
+
+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; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var useRowsState = function useRowsState(rows, newRow) {
+  var _useState = (0, _react.useState)(function () {
+    return {
+      internal: new Map()
+    };
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1]; // TODO: lazy inicialization
+
+
+  (0, _react.useEffect)(function () {
+    var nextState = new Map();
+
+    var _iterator = _createForOfIteratorHelper(rows),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var row = _step.value;
+        var elem = state.internal.get(row.id);
+
+        if (elem) {
+          nextState.set(row.id, elem);
+        } else {
+          nextState.set(row.id, {
+            editableState: {},
+            mode: _types.RowMode.View,
+            stackView: [],
+            currentState: row
+          });
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    if (newRow !== null && newRow !== void 0 && newRow.id) {
+      nextState.set(newRow.id, {
+        editableState: _objectSpread({}, newRow),
+        mode: _types.RowMode.View,
+        stackView: []
+      });
+    }
+
+    setState({
+      internal: nextState
+    });
+  }, [rows, !!newRow]);
+  var setRowState = (0, _react.useCallback)(function (id, partial) {
+    setState(function (state) {
+      var elem = state.internal.get(id);
+
+      if (elem) {
+        state.internal.set(id, _objectSpread(_objectSpread({}, elem), partial));
+      }
+
+      return {
+        internal: state.internal
+      };
+    });
+  }, []);
+  var pushRowView = (0, _react.useCallback)(function (id, view) {
+    setState(function (state) {
+      var elem = state.internal.get(id);
+
+      if (elem) {
+        elem.stackView.push(view);
+        state.internal.set(id, elem);
+      }
+
+      return {
+        internal: state.internal
+      };
+    });
+  }, []);
+  var popRowView = (0, _react.useCallback)(function (id) {
+    setState(function (state) {
+      var elem = state.internal.get(id);
+
+      if (elem) {
+        elem === null || elem === void 0 ? void 0 : elem.stackView.pop();
+        state.internal.set(id, elem);
+      }
+
+      return {
+        internal: state.internal
+      };
+    });
+  }, []);
+  var getRowState = (0, _react.useCallback)(function (id) {
+    return state.internal.get(id);
+  }, [state]);
+  var setEditableRowState = (0, _react.useCallback)(function (id) {
+    return function (patch) {
+      setState(function (state) {
+        var elem = state.internal.get(id);
+
+        if (elem) {
+          elem.editableState = _objectSpread(_objectSpread({}, elem.editableState), patch);
+        } else {
+          state.internal.set(id, {
+            editableState: patch,
+            mode: _types.RowMode.View,
+            stackView: []
+          });
+        }
+
+        return {
+          internal: state.internal
+        };
+      });
+    };
+  }, []);
+  return {
+    getRowState: getRowState,
+    setEditableRowState: setEditableRowState,
+    setRowState: setRowState,
+    pushRowView: pushRowView,
+    popRowView: popRowView
+  };
+};
+
+exports.useRowsState = useRowsState;

package/core/DateTime.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import DateFnsUtils from '@date-io/date-fns';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { KeyboardDatePickerProps } from '@material-ui/pickers/DatePicker';
 import { KeyboardDateTimePickerProps } from '@material-ui/pickers/DateTimePicker';
 import { KeyboardTimePickerProps } from '@material-ui/pickers/TimePicker';
@@ -14,6 +14,6 @@ interface IProps {
     onAuxClickCapture?(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
     onChange(date: MaterialUiPickersDate | null, value?: string): void;
 }
-declare type TProps = Omit<KeyboardDatePickerProps, 'margin' | 'onChange'> & Omit<KeyboardDateTimePickerProps, 'margin' | 'onChange'> & Omit<KeyboardTimePickerProps, 'margin' | 'onChange'> & IProps & IDefault;
-declare const DateTime: FC<TProps>;
+declare type DateTimeProps = Omit<KeyboardDatePickerProps, 'margin' | 'onChange'> & Omit<KeyboardDateTimePickerProps, 'margin' | 'onChange'> & Omit<KeyboardTimePickerProps, 'margin' | 'onChange'> & IProps & DefaultProps;
+declare const DateTime: FC<DateTimeProps>;
 export default DateTime;

package/core/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode, FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface DialogProps extends DefaultProps {
     open: boolean;
     fullScreen?: boolean;
     fullWidth?: boolean;
@@ -23,5 +23,5 @@ interface IProps extends IDefault {
     scroll?: 'body' | 'paper' | 'unset-paper' | 'unset-body';
     onClose?: () => void;
 }
-declare const Dialog: FC<IProps>;
+declare const Dialog: FC<DialogProps>;
 export default Dialog;

package/core/Divider.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface DividerProps extends DefaultProps {
     inset?: boolean;
     light?: boolean;
 }
-declare const Divider: FC<IProps>;
+declare const Divider: FC<DividerProps>;
 export default Divider;

package/core/Drawer.d.ts

@@ -1,9 +1,9 @@
-import { DrawerProps } from '@material-ui/core/Drawer';
+import { DrawerProps as MuiDrawerProps } from '@material-ui/core/Drawer';
 import { FC } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends DrawerProps, IDefault {
+import { DefaultProps } from './types';
+interface DrawerProps extends MuiDrawerProps, DefaultProps {
     top?: number;
     width?: number;
 }
-declare const Drawer: FC<IProps>;
+declare const Drawer: FC<DrawerProps>;
 export default Drawer;

package/core/EditableTable.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Column, Options } from 'material-table';
-interface IProps<T extends object> {
+interface EditableTableProps<T extends object> {
     title?: string;
     color?: 'primary' | 'inherit' | 'secondary' | 'disabled';
     columns?: Column<object>[];
@@ -26,5 +26,5 @@ export declare type TSuggestion = {
     label: string;
     value: string;
 };
-declare const EditableTable: <T extends object>(props: IProps<T>) => JSX.Element;
+declare const EditableTable: <T extends object>(props: EditableTableProps<T>) => JSX.Element;
 export default EditableTable;

package/core/EditableTable.js

@@ -159,9 +159,9 @@ var 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["default"], {
+    return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_MaskField["default"], (0, _extends2["default"])({}, item, {
       fixedDecimalScale: true,
-      error: error,
+      error: props.errors ? error : item.error,
       type: "text",
       thousandSeparator: ".",
       decimalSeparator: ",",
@@ -174,14 +174,12 @@ var EditableTable = function EditableTable(props) {
         item.onChange(event.target.value);
         valueRef.current = event.target.value;
       }
-    }));
+    })));
   };
 
-  var renderAddComponent = function renderAddComponent() {
-    return /*#__PURE__*/_react["default"].createElement(AddRowButton, {
-      "data-id": "add-row"
-    }, /*#__PURE__*/_react["default"].createElement(_NoteAdd["default"], null), /*#__PURE__*/_react["default"].createElement(AddRowText, null, " Adicionar ", props.title, " "));
-  };
+  var renderAddComponent = /*#__PURE__*/_react["default"].createElement(AddRowButton, {
+    "data-id": "add-row"
+  }, /*#__PURE__*/_react["default"].createElement(_NoteAdd["default"], null), /*#__PURE__*/_react["default"].createElement(AddRowText, null, " Adicionar ", props.title, " "));
 
   var pagination = !props.paginationInfo ? {
     Pagination: function Pagination() {
@@ -273,7 +271,7 @@ var EditableTable = function EditableTable(props) {
       EditField: function EditField(localProps) {
         if (localProps.columnDef.type === 'datetime') {
           return /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
-            error: getErrors(localProps.columnDef.field),
+            error: props.errors ? getErrors(localProps.columnDef.field) : localProps.error,
             name: localProps.columnDef.field + '-input',
             type: localProps.columnDef.type,
             value: localProps.value,
@@ -299,7 +297,7 @@ var EditableTable = function EditableTable(props) {
     localization: (0, _localization.getLocalization)(props.title),
     icons: {
       Add: (0, _react.forwardRef)(function () {
-        return renderAddComponent();
+        return renderAddComponent;
       }),
       Delete: (0, _react.forwardRef)(function () {
         return /*#__PURE__*/_react["default"].createElement(_Delete["default"], {