flipper-ui 0.31.0 → 0.31.1

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ChangeEvent, ClipboardEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent, Ref, HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
-import type { TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
+import type { InputBaseComponentProps, TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
 export interface IOption {
     label: string;
     name?: string;
@@ -27,7 +27,7 @@ export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'm
     value?: string | number;
     variant?: 'standard' | 'outlined' | 'filled';
     inputRef?: Ref<HTMLInputElement>;
-    inputProps?: object;
+    inputProps?: InputBaseComponentProps;
     InputProps?: object;
     InputLabelProps?: object;
     SelectProps?: object;
@@ -37,6 +37,7 @@ export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'm
     helperIcon?: ReactNode;
     showEdit?: boolean;
     hasClear?: boolean;
+    characters?: boolean;
     onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -63,5 +64,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, 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, characters, children, ...otherProps }: TextFieldProps) => React.JSX.Element;
 export default TextField;

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

@@ -27,15 +27,18 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _icons = require("../../../icons");
 var _iconButton = require("../icon-button");
 var _theme = require("../../../theme");
-var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "children"];
-var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "characters", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 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;
+var _theme$colors = _theme.theme.colors,
+  grays = _theme$colors.grays,
+  primary = _theme$colors.primary;
 var Helper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
-var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (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(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"])));
+var CharactersCount = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (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    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 useStyles = exports.useStyles = (0, _styles.makeStyles)({
   listOptions: {
     outline: 'none',
@@ -129,6 +132,7 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
   })));
 };
 var TextField = exports.TextField = function TextField(_ref) {
+  var _otherProps$value, _otherProps$inputProp;
   var options = _ref.options,
     margin = _ref.margin,
     padding = _ref.padding,
@@ -150,6 +154,7 @@ var TextField = exports.TextField = function TextField(_ref) {
     fullWidth = _ref.fullWidth,
     hasClear = _ref.hasClear,
     onClear = _ref.onClear,
+    characters = _ref.characters,
     children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var clearStyle = (0, _styles.makeStyles)({
@@ -199,8 +204,9 @@ var TextField = exports.TextField = function TextField(_ref) {
       classes: {
         iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
-    }, endAdornment), SelectProps)
-  }, otherProps), options ? renderOptions(options, classes) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
+    }, endAdornment), SelectProps),
+    characters: characters === null || characters === void 0 ? void 0 : characters.toString()
+  }, otherProps), options ? renderOptions(options, classes) : children), characters && /*#__PURE__*/_react["default"].createElement(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, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));

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

@@ -7,3 +7,4 @@ export declare const withHelperButton: any;
 export declare const withSelect: () => React.JSX.Element;
 export declare const useWithSelectAndClear: () => React.JSX.Element;
 export declare const combobox: () => React.JSX.Element;
+export declare const withCharacterCount: () => React.JSX.Element;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "flipper-ui",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.ngi.com.br/",
-  "author": "NG Informática",
+  "author": "NG",
   "license": "MIT",
   "repository": {
     "type": "git",

package/test/mocks/text-field-mock.d.ts

@@ -3,6 +3,7 @@ import type { TextFieldProps } from '@/core/inputs/text-field';
 interface IProps {
     initialOption?: string;
     inputProps?: TextFieldProps;
+    characters?: boolean;
 }
-declare const Default: ({ inputProps, initialOption }: IProps) => React.JSX.Element;
+declare const Default: ({ inputProps, initialOption, characters }: IProps) => React.JSX.Element;
 export default Default;

package/test/mocks/text-field-mock.js

@@ -30,8 +30,10 @@ var LIST = [{
   value: 'fable'
 }];
 var Default = function Default(_ref) {
+  var _inputProps$inputProp;
   var inputProps = _ref.inputProps,
-    initialOption = _ref.initialOption;
+    initialOption = _ref.initialOption,
+    characters = _ref.characters;
   var _React$useState = React.useState(initialOption ? initialOption : ''),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     value = _React$useState2[0],
@@ -42,8 +44,9 @@ var Default = function Default(_ref) {
   var handleClear = function handleClear() {
     setValue('');
   };
-  return /*#__PURE__*/React.createElement(_textField.TextField, (0, _extends2["default"])({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_textField.TextField, (0, _extends2["default"])({
     value: value,
+    characters: characters,
     onChange: handleChange,
     onClear: handleClear
   }, inputProps), inputProps !== null && inputProps !== void 0 && inputProps.select ? LIST.map(function (_ref2) {
@@ -53,6 +56,8 @@ var Default = function Default(_ref) {
       key: value,
       value: value
     }, label);
-  }) : undefined);
+  }) : undefined), characters && /*#__PURE__*/React.createElement("span", {
+    "data-testid": "characters-counter"
+  }, value.toString().length, "/", inputProps === null || inputProps === void 0 || (_inputProps$inputProp = inputProps.inputProps) === null || _inputProps$inputProp === void 0 ? void 0 : _inputProps$inputProp.maxLength));
 };
 var _default = exports["default"] = Default;