flipper-ui 0.34.3 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.3",
+    "version": "0.34.4",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -35,41 +35,41 @@
     "dependencies": {
         "@emotion/react": "11.13.0",
         "@emotion/styled": "11.13.0",
-        "@mui/icons-material": "5.16.5",
-        "@mui/material": "5.16.5",
-        "@mui/styles": "5.16.5",
-        "@mui/x-date-pickers": "7.11.1",
+        "@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.9",
+        "@babel/core": "7.25.2",
         "@babel/plugin-transform-runtime": "7.24.7",
-        "@babel/preset-env": "7.25.0",
+        "@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.4.0",
+        "@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": "22.0.0",
-        "@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.18.0",
-        "@typescript-eslint/parser": "7.18.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",
@@ -89,7 +89,7 @@
         "react-dom": "18.3.1",
         "storybook": "7.6.17",
         "styled-components": "6.1.12",
-        "ts-jest": "29.2.3",
+        "ts-jest": "29.2.4",
         "ts-loader": "9.5.1",
         "typescript": "5.5.4",
         "webpack": "5.93.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);
+    }
+  });
+};