flipper-ui 0.34.2 → 0.34.4

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

@@ -69,8 +69,8 @@ var renderEditMode = function renderEditMode(column, row, updateRow, errors) {
       decimalScale: decimalScale,
       value: numeric,
       name: column.field.toString(),
-      onChange: function onChange(event) {
-        updateRow(column.field, event.target.value);
+      onValueChange: function onValueChange(values) {
+        updateRow(column.field, values.value);
       }
     });
   }

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DefaultProps } from '../../types';
+import type { TableFooterProps } from '@mui/material/TableFooter';
+export interface ITableFooterProps extends DefaultProps, TableFooterProps {
+}
+declare const TableFooter: ({ style, margin, padding, children }: ITableFooterProps) => React.JSX.Element;
+export default TableFooter;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
+var _theme = require("../../../theme");
+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 grays = _theme.theme.colors.grays;
+var TableFooter = function TableFooter(_ref) {
+  var style = _ref.style,
+    margin = _ref.margin,
+    padding = _ref.padding,
+    children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], {
+    style: _objectSpread({
+      borderColor: grays.g7,
+      margin: margin,
+      padding: padding
+    }, style)
+  }, children);
+};
+var _default = exports["default"] = TableFooter;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ChangeEvent, CSSProperties, MouseEvent } from 'react';
+import type { TablePaginationProps } from '@mui/material/TablePagination';
+interface ITablePaginationProps extends Omit<TablePaginationProps, 'component' | 'count' | 'page' | 'rowsPerPage' | 'onPageChange' | 'onRowsPerPageChange'> {
+    count: number;
+    page: number;
+    rowsPerPage: number;
+    rowsPerPageOptions?: number[];
+    onPageChange: (event: MouseEvent<HTMLButtonElement> | null, page: number) => void;
+    onRowsPerPageChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    style?: CSSProperties;
+}
+declare const TablePagination: ({ count, page, rowsPerPage, rowsPerPageOptions, onPageChange, onRowsPerPageChange, style, padding, ...props }: ITablePaginationProps) => React.JSX.Element;
+export default TablePagination;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _TablePagination = _interopRequireDefault(require("@mui/material/TablePagination"));
+var _theme = require("../../../theme");
+var _excluded = ["count", "page", "rowsPerPage", "rowsPerPageOptions", "onPageChange", "onRowsPerPageChange", "style", "padding"];
+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 grays = _theme.theme.colors.grays;
+var TablePagination = function TablePagination(_ref) {
+  var count = _ref.count,
+    page = _ref.page,
+    rowsPerPage = _ref.rowsPerPage,
+    rowsPerPageOptions = _ref.rowsPerPageOptions,
+    onPageChange = _ref.onPageChange,
+    onRowsPerPageChange = _ref.onRowsPerPageChange,
+    style = _ref.style,
+    padding = _ref.padding,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_TablePagination["default"], (0, _extends2["default"])({
+    count: count,
+    page: page,
+    rowsPerPage: rowsPerPage,
+    rowsPerPageOptions: rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 25],
+    labelRowsPerPage: "Linhas por p\xE1gina:",
+    labelDisplayedRows: function labelDisplayedRows(_ref2) {
+      var from = _ref2.from,
+        to = _ref2.to,
+        count = _ref2.count;
+      return "".concat(from, "-").concat(to, " de ").concat(count !== -1 ? count : "mais que ".concat(to));
+    },
+    style: _objectSpread({
+      borderColor: grays.g7,
+      padding: padding
+    }, style),
+    sx: {
+      borderBottom: "1px solid ".concat(grays.g7, " !important;")
+    },
+    onPageChange: onPageChange,
+    onRowsPerPageChange: onRowsPerPageChange
+  }, props));
+};
+var _default = exports["default"] = TablePagination;

package/core/inputs/mask-field/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { ComponentType } from 'react';
-import type { NumberFormatProps } from 'react-number-format';
+import type { ComponentType, SyntheticEvent } from 'react';
+import type { NumberFormatValues, SourceInfo } from 'react-number-format';
 import type { ITextFieldProps } from '@/core/inputs/text-field';
-export interface MaskFieldProps extends NumberFormatProps {
-    mask?: string;
+import type { SourceType } from 'react-number-format/types/types';
+export interface MaskFieldProps extends Omit<ITextFieldProps, 'size'> {
+    mask?: string | string[];
     type?: 'text' | 'tel' | 'password';
     decimalSeparator?: string;
     format?: string;
@@ -11,6 +12,17 @@ export interface MaskFieldProps extends NumberFormatProps {
     thousandSeparator?: boolean | string;
     fixedDecimalScale?: boolean;
     customInput?: ComponentType<ITextFieldProps>;
+    hasFormat?: boolean;
+    onValueChange?: (values: NumberFormatValues, sourceInfo: SourceInfo) => void;
+}
+export interface IValues {
+    value: string;
+    floatValue?: number;
+    formattedValue?: string;
+}
+export interface ISource {
+    event?: SyntheticEvent<HTMLInputElement>;
+    source: SourceType;
 }
 declare const MaskField: (props: MaskFieldProps) => React.JSX.Element;
 export default MaskField;

package/core/inputs/mask-field/index.js

@@ -6,22 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = 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 _reactNumberFormat = _interopRequireDefault(require("react-number-format"));
+var _reactNumberFormat = require("react-number-format");
 var _textField = _interopRequireDefault(require("../text-field"));
-var _excluded = ["customInput"];
+var _excluded = ["customInput", "hasFormat", "format", "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; }
 var MaskField = function MaskField(props) {
   var customInput = props.customInput,
+    hasFormat = props.hasFormat,
+    _props$format = props.format,
+    format = _props$format === void 0 ? '######' : _props$format,
+    style = props.style,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  return (
-    /*#__PURE__*/
-    // Although react-number-format allow use of additional props,
-    // shows problem with some props like have been do this
-    // actually on flipper-ui. (e.g. errors treatment)
-    _react["default"].createElement(_reactNumberFormat["default"], (0, _extends2["default"])({}, otherProps, {
-      customInput: customInput || _textField["default"]
-    }))
-  );
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasFormat ? /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.PatternFormat, (0, _extends2["default"])({}, otherProps, {
+    format: format,
+    style: _objectSpread({}, style),
+    customInput: customInput || _textField["default"]
+  })) : /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.NumericFormat, (0, _extends2["default"])({}, otherProps, {
+    style: _objectSpread({}, style),
+    customInput: customInput || _textField["default"]
+  })));
 };
 var _default = exports["default"] = MaskField;

package/core/inputs/text-field/index.js

@@ -10,14 +10,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Clear2 = _interopRequireDefault(require("@mui/icons-material/Clear"));
 var _Help2 = _interopRequireDefault(require("@mui/icons-material/Help"));
-var _propEq2 = _interopRequireDefault(require("ramda/es/propEq"));
 var _reject2 = _interopRequireDefault(require("ramda/es/reject"));
-var _zipObj2 = _interopRequireDefault(require("ramda/es/zipObj"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _map2 = _interopRequireDefault(require("ramda/es/map"));
 var _split2 = _interopRequireDefault(require("ramda/es/split"));
 var _pipe2 = _interopRequireDefault(require("ramda/es/pipe"));
-var _is2 = _interopRequireDefault(require("ramda/es/is"));
-var _when2 = _interopRequireDefault(require("ramda/es/when"));
 var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
@@ -38,7 +35,19 @@ var useStyles = (0, _makeStyles2["default"])({
     fontSize: '14px'
   }
 });
-var coerceComboOptions = (0, _when2["default"])((0, _is2["default"])(String), (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), (0, _zipObj2["default"])(['value', 'label']))), (0, _reject2["default"])((0, _propEq2["default"])('value', ''))));
+var coerceComboOptions = function coerceComboOptions(input) {
+  return (0, _pipe2["default"])((0, _split2["default"])(';'), (0, _map2["default"])((0, _pipe2["default"])((0, _split2["default"])('='), function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      value = _ref2[0],
+      label = _ref2[1];
+    return {
+      value: value,
+      label: label
+    };
+  })), (0, _reject2["default"])(function (option) {
+    return option.value === '';
+  }))(input);
+};
 var toLispCase = function toLispCase(name) {
   return name.replace(/([a-z])([A-Z])/g, function (_, first, second) {
     return first + '-' + second;
@@ -80,34 +89,34 @@ var renderEndAdornment = function renderEndAdornment(disabled, onClear) {
     fontSize: "inherit"
   })));
 };
-var TextField = function TextField(_ref) {
+var TextField = function TextField(_ref3) {
   var _otherProps$value, _otherProps$inputProp;
-  var options = _ref.options,
-    size = _ref.size,
-    margin = _ref.margin,
-    padding = _ref.padding,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    error = _ref.error,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
-    _ref$InputLabelProps = _ref.InputLabelProps,
-    InputLabelProps = _ref$InputLabelProps === void 0 ? {} : _ref$InputLabelProps,
-    _ref$InputProps = _ref.InputProps,
-    InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
-    _ref$SelectProps = _ref.SelectProps,
-    SelectProps = _ref$SelectProps === void 0 ? {} : _ref$SelectProps,
-    _ref$autoComplete = _ref.autoComplete,
-    autoComplete = _ref$autoComplete === void 0 ? 'off' : _ref$autoComplete,
-    onHelperClick = _ref.onHelperClick,
-    helperIcon = _ref.helperIcon,
-    fullWidth = _ref.fullWidth,
-    hasClear = _ref.hasClear,
-    onClear = _ref.onClear,
-    onChange = _ref.onChange,
-    characters = _ref.characters,
-    children = _ref.children,
-    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var options = _ref3.options,
+    size = _ref3.size,
+    margin = _ref3.margin,
+    padding = _ref3.padding,
+    _ref3$style = _ref3.style,
+    style = _ref3$style === void 0 ? {} : _ref3$style,
+    error = _ref3.error,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'outlined' : _ref3$variant,
+    _ref3$InputLabelProps = _ref3.InputLabelProps,
+    InputLabelProps = _ref3$InputLabelProps === void 0 ? {} : _ref3$InputLabelProps,
+    _ref3$InputProps = _ref3.InputProps,
+    InputProps = _ref3$InputProps === void 0 ? {} : _ref3$InputProps,
+    _ref3$SelectProps = _ref3.SelectProps,
+    SelectProps = _ref3$SelectProps === void 0 ? {} : _ref3$SelectProps,
+    _ref3$autoComplete = _ref3.autoComplete,
+    autoComplete = _ref3$autoComplete === void 0 ? 'off' : _ref3$autoComplete,
+    onHelperClick = _ref3.onHelperClick,
+    helperIcon = _ref3.helperIcon,
+    fullWidth = _ref3.fullWidth,
+    hasClear = _ref3.hasClear,
+    onClear = _ref3.onClear,
+    onChange = _ref3.onChange,
+    characters = _ref3.characters,
+    children = _ref3.children,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
   var classes = useStyles();
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {

package/index.d.ts

@@ -20,6 +20,8 @@ export { default as TableBody } from './core/data-display/table/table-body';
 export { default as TableCell } from './core/data-display/table/table-cell';
 export { default as TableHead } from './core/data-display/table/table-head';
 export { default as TableRow } from './core/data-display/table/table-row';
+export { default as TableFooter } from './core/data-display/table/table-footer';
+export { default as TablePagination } from './core/data-display/table/table-pagination';
 export { default as Typography } from './core/data-display/typography';
 export { default as Collapse } from './core/feedback/collapse';
 export { default as Dialog } from './core/feedback/dialog';

package/index.js

@@ -24,6 +24,8 @@ var _exportNames = {
   TableCell: true,
   TableHead: true,
   TableRow: true,
+  TableFooter: true,
+  TablePagination: true,
   Typography: true,
   Collapse: true,
   Dialog: true,
@@ -377,12 +379,24 @@ Object.defineProperty(exports, "TableCell", {
     return _tableCell["default"];
   }
 });
+Object.defineProperty(exports, "TableFooter", {
+  enumerable: true,
+  get: function get() {
+    return _tableFooter["default"];
+  }
+});
 Object.defineProperty(exports, "TableHead", {
   enumerable: true,
   get: function get() {
     return _tableHead["default"];
   }
 });
+Object.defineProperty(exports, "TablePagination", {
+  enumerable: true,
+  get: function get() {
+    return _tablePagination["default"];
+  }
+});
 Object.defineProperty(exports, "TableRow", {
   enumerable: true,
   get: function get() {
@@ -474,6 +488,8 @@ var _tableBody = _interopRequireDefault(require("./core/data-display/table/table
 var _tableCell = _interopRequireDefault(require("./core/data-display/table/table-cell"));
 var _tableHead = _interopRequireDefault(require("./core/data-display/table/table-head"));
 var _tableRow = _interopRequireDefault(require("./core/data-display/table/table-row"));
+var _tableFooter = _interopRequireDefault(require("./core/data-display/table/table-footer"));
+var _tablePagination = _interopRequireDefault(require("./core/data-display/table/table-pagination"));
 var _typography = _interopRequireDefault(require("./core/data-display/typography"));
 var _collapse = _interopRequireDefault(require("./core/feedback/collapse"));
 var _dialog = _interopRequireDefault(require("./core/feedback/dialog"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.2",
+    "version": "0.34.4",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -33,43 +33,43 @@
         "test": "jest --verbose --silent --passWithNoTests --noStackTrace --runInBand --updateSnapshot"
     },
     "dependencies": {
-        "@emotion/react": "11.11.4",
-        "@emotion/styled": "11.11.5",
-        "@mui/icons-material": "5.16.0",
-        "@mui/material": "5.16.0",
-        "@mui/styles": "5.16.0",
-        "@mui/x-date-pickers": "7.10.0",
+        "@emotion/react": "11.13.0",
+        "@emotion/styled": "11.13.0",
+        "@mui/icons-material": "5.16.6",
+        "@mui/material": "5.16.6",
+        "@mui/styles": "5.16.6",
+        "@mui/x-date-pickers": "7.12.0",
         "date-fns": "2.30.0",
-        "ramda": "0.25.0",
+        "ramda": "0.30.1",
         "react-loading-skeleton": "3.4.0",
-        "react-number-format": "4.4.1",
+        "react-number-format": "5.4.0",
         "sprintf-js": "1.1.3",
         "uuid": "10.0.0"
     },
     "devDependencies": {
         "@babel/cli": "7.24.8",
-        "@babel/core": "7.24.8",
+        "@babel/core": "7.25.2",
         "@babel/plugin-transform-runtime": "7.24.7",
-        "@babel/preset-env": "7.24.8",
+        "@babel/preset-env": "7.25.3",
         "@babel/preset-typescript": "7.24.7",
         "@faker-js/faker": "8.4.1",
         "@storybook/addon-essentials": "7.6.17",
         "@storybook/addon-styling-webpack": "1.0.0",
         "@storybook/react": "7.6.17",
         "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "2.3.0",
-        "@testing-library/dom": "10.3.1",
-        "@testing-library/jest-dom": "6.4.6",
+        "@stylistic/eslint-plugin": "2.6.1",
+        "@testing-library/dom": "10.4.0",
+        "@testing-library/jest-dom": "6.4.8",
         "@testing-library/react": "16.0.0",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.12",
-        "@types/node": "20.14.10",
-        "@types/ramda": "0.25.36",
+        "@types/node": "22.1.0",
+        "@types/ramda": "0.30.1",
         "@types/react": "18.3.3",
         "@types/sprintf-js": "1.1.4",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "7.16.0",
-        "@typescript-eslint/parser": "7.16.0",
+        "@typescript-eslint/eslint-plugin": "8.0.0",
+        "@typescript-eslint/parser": "8.0.0",
         "babel-loader": "9.1.3",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -77,22 +77,22 @@
         "eslint-config-prettier": "9.1.0",
         "eslint-import-resolver-typescript": "3.6.1",
         "eslint-plugin-import": "2.29.1",
-        "eslint-plugin-prettier": "5.1.3",
-        "eslint-plugin-react": "7.34.3",
+        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-react": "7.35.0",
         "eslint-plugin-react-hooks": "4.6.2",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.3.2",
+        "prettier": "3.3.3",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "storybook": "7.6.17",
-        "styled-components": "6.1.11",
-        "ts-jest": "29.2.2",
+        "styled-components": "6.1.12",
+        "ts-jest": "29.2.4",
         "ts-loader": "9.5.1",
-        "typescript": "5.5.3",
-        "webpack": "5.92.1"
+        "typescript": "5.5.4",
+        "webpack": "5.93.0"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",

package/test/mocks/mask-field.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MaskFieldWrapper: () => React.JSX.Element;

package/test/mocks/mask-field.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MaskFieldWrapper = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _maskField = _interopRequireDefault(require("../../core/inputs/mask-field"));
+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 && {}.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; }
+var MaskFieldWrapper = exports.MaskFieldWrapper = function MaskFieldWrapper() {
+  var _useState = (0, _react.useState)('1234567,89'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var handleChange = function handleChange(value) {
+    setValue(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_maskField["default"], {
+    fixedDecimalScale: true,
+    value: value,
+    decimalScale: 2,
+    decimalSeparator: ",",
+    thousandSeparator: ".",
+    placeholder: "Description",
+    onValueChange: function onValueChange(values) {
+      return handleChange(values.value);
+    }
+  });
+};