flipper-ui 0.31.4 → 0.31.6

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

@@ -158,10 +158,10 @@ var StatefulRow = exports.StatefulRow = function StatefulRow(_ref) {
     }
     return renderHidenMode(column, data);
   };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, columns.map(function (column) {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, columns.map(function (column, i) {
     return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
       align: column.align,
-      key: column.title,
+      key: "".concat(column.title, "-").concat(i),
       style: column.cellStyle
     }, getCorrectViewMode(column, mode, isEditable(column)));
   }));
@@ -188,11 +188,11 @@ var NewRow = exports.NewRow = function NewRow(_ref2) {
   []);
   return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], {
     "data-testid": "table-row"
-  }, columns.map(function (column) {
+  }, columns.map(function (column, i) {
     return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
       style: column.cellStyle,
       align: column.align,
-      key: column.title
+      key: "".concat(column.title, "-").concat(i)
     }, isEditable(column) ? renderEditMode(column, editableState, partialUpdate, errors, true) : renderViewMode(column, editableState));
   }));
 };

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

@@ -62,5 +62,5 @@ export declare const toLispCase: (name: string) => string;
 export declare const HelperBox: (props: IHelperProps) => React.JSX.Element;
 export declare const renderOptions: (options: TextFieldProps['options'], classes: Record<string, string>) => "" | React.JSX.Element[] | undefined;
 export declare const EditBox: (props: IEditProps) => React.JSX.Element;
-export declare const TextField: ({ options, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, characters, children, ...otherProps }: TextFieldProps) => React.JSX.Element;
+export declare const TextField: ({ options, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, onChange, characters, children, ...otherProps }: TextFieldProps) => React.JSX.Element;
 export default TextField;

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

@@ -26,7 +26,7 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _styles2 = require("./styles");
 var _icons = require("../../../icons");
 var _theme = require("../../../theme");
-var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "characters", "children"];
+var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "onChange", "characters", "children"];
 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 primary = _theme.theme.colors.primary;
@@ -143,6 +143,7 @@ var TextField = exports.TextField = function TextField(_ref) {
     fullWidth = _ref.fullWidth,
     hasClear = _ref.hasClear,
     onClear = _ref.onClear,
+    onChange = _ref.onChange,
     characters = _ref.characters,
     children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -153,18 +154,30 @@ var TextField = exports.TextField = function TextField(_ref) {
       marginLeft: '-20px'
     }
   });
+  var classes = useStyles();
+  var clearClass = clearStyle();
   var hasValue = !!otherProps.value;
   var endAdornment = hasValue && hasClear ? {
     endAdornment: renderEndAdornment(onClear)
   } : {};
-  var classes = useStyles();
-  var clearClass = clearStyle();
   var handleClick = function handleClick() {
     if (onHelperClick) {
       onHelperClick();
     }
   };
   var Wrapper = hasClear ? _styles2.StaticTextFieldWrapper : _styles2.TextFieldWrapper;
+  var emojiRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g;
+  var handleInputChange = function handleInputChange(event) {
+    if (onChange) {
+      var inputValue = event.target.value;
+      if (emojiRegex.test(inputValue)) {
+        var newValue = inputValue.replace(emojiRegex, '');
+        event.target.value = newValue;
+        return onChange(event);
+      }
+      return onChange(event);
+    }
+  };
   return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     title: "",
     select: !!(options !== null && options !== void 0 && options.length),
@@ -187,15 +200,17 @@ var TextField = exports.TextField = function TextField(_ref) {
       classes: {
         input: variant === 'outlined' ? classes.outlinedInput : '',
         multiline: variant === 'outlined' ? classes.outlinedMultiline : ''
-      }
+      },
+      endAdornment: characters && /*#__PURE__*/_react["default"].createElement(_styles2.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength)
     }, InputProps),
     SelectProps: _objectSpread(_objectSpread({
       classes: {
         iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
     }, endAdornment), SelectProps),
-    characters: characters === null || characters === void 0 ? void 0 : characters.toString()
-  }, otherProps), options ? renderOptions(options, classes) : children), characters && /*#__PURE__*/_react["default"].createElement(_styles2.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
+    characters: characters === null || characters === void 0 ? void 0 : characters.toString(),
+    onChange: handleInputChange
+  }, otherProps), options ? renderOptions(options, classes) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));

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

@@ -12,6 +12,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var grays = _theme.theme.colors.grays;
 var Wrapper = exports.Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 var Helper = exports.Helper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
-var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
-var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"])));
-var CharactersCount = exports.CharactersCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    margin-left: -35px;\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), grays.g3);
+var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
+var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: rows;\n    align-items: center;\n"])));
+var CharactersCount = exports.CharactersCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), grays.g3);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.31.4",
+    "version": "0.31.6",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.ngi.com.br/",