@toptal/picasso 28.14.2 → 29.0.1

package/FormField/FormField.d.ts

@@ -9,6 +9,10 @@ export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /** Field requirements for this specific field */
     fieldRequirements?: ReactNode;
+    /** instance of FormAutoSaveIndicator component */
+    autoSaveIndicator?: ReactNode;
+    /** whether multiline counter is visible */
+    hasMultilineCounter?: boolean;
 }
 export declare const FormField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default FormField;

package/FormField/FormField.js

@@ -12,18 +12,31 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
+import Container from '../Container';
 import FormHint from '../FormHint';
 import FormError from '../FormError';
 import styles from './styles';
 const useStyles = makeStyles(styles, { name: 'PicassoFormField' });
+const FormFieldAdornments = ({ autoSaveIndicator, children, hasMultilineCounter, }) => {
+    const classes = useStyles();
+    if (!autoSaveIndicator) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return (React.createElement(Container, { flex: true, direction: 'column', className: classes.adornment },
+        children,
+        React.createElement(Container, { className: cx(classes.autoSaveIndicator, {
+                [classes.hasMultilineCounter]: hasMultilineCounter,
+            }) }, autoSaveIndicator)));
+};
 export const FormField = forwardRef(function FormField(props, ref) {
-    const { className, style, hint, children, error, fieldRequirements } = props, rest = __rest(props, ["className", "style", "hint", "children", "error", "fieldRequirements"]);
+    const { autoSaveIndicator, className, style, hint, children, error, fieldRequirements, hasMultilineCounter } = props, rest = __rest(props, ["autoSaveIndicator", "className", "style", "hint", "children", "error", "fieldRequirements", "hasMultilineCounter"]);
     const classes = useStyles();
     return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style, "data-field-has-error": Boolean(error) }),
         children,
-        error && React.createElement(FormError, { className: classes.error }, error),
-        hint && React.createElement(FormHint, { className: classes.hint }, hint),
-        fieldRequirements));
+        React.createElement(FormFieldAdornments, { autoSaveIndicator: autoSaveIndicator, hasMultilineCounter: hasMultilineCounter },
+            error && React.createElement(FormError, { className: classes.error }, error),
+            hint && React.createElement(FormHint, { className: classes.hint }, hint),
+            fieldRequirements)));
 });
 FormField.defaultProps = {};
 FormField.displayName = 'FormField';

package/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/FormField/FormField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,MAAM,MAAM,UAAU,CAAA;AAa7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAwB,SAAS,SAAS,CAC3E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,iBAAiB,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,wEAQL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,0BACU,OAAO,CAAC,KAAK,CAAC;QAEnC,QAAQ;QACR,KAAK,IAAI,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,KAAK,CAAa;QACjE,IAAI,IAAI,oBAAC,QAAQ,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,IAAG,IAAI,CAAY;QAC5D,iBAAiB,CACd,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG,EAAE,CAAA;AAE3B,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/FormField/FormField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,MAAM,MAAM,UAAU,CAAA;AAiB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAOzE,MAAM,mBAAmB,GAAG,CAAC,EAC3B,iBAAiB,EACjB,QAAQ,EACR,mBAAmB,GACM,EAAE,EAAE;IAC7B,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,0CAAG,QAAQ,CAAI,CAAA;KACvB;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS;QAC5D,QAAQ;QACT,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE;gBACvC,CAAC,OAAO,CAAC,mBAAmB,CAAC,EAAE,mBAAmB;aACnD,CAAC,IAED,iBAAiB,CACR,CACF,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAwB,SAAS,SAAS,CAC3E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,iBAAiB,EACjB,SAAS,EACT,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,mBAAmB,KAEjB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,oHAUL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,0BACU,OAAO,CAAC,KAAK,CAAC;QAEnC,QAAQ;QACT,oBAAC,mBAAmB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB;YAEvC,KAAK,IAAI,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,KAAK,CAAa;YACjE,IAAI,IAAI,oBAAC,QAAQ,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,IAAG,IAAI,CAAY;YAC5D,iBAAiB,CACE,CAClB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG,EAAE,CAAA;AAE3B,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/FormField/styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "error" | "root" | "hint">;
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "error" | "root" | "adornment" | "autoSaveIndicator" | "hasMultilineCounter" | "hint">;
 export default _default;

package/FormField/styles.js

@@ -9,6 +9,19 @@ export default () => createStyles({
             marginTop: 0,
         },
     },
+    adornment: {
+        position: 'relative',
+        paddingRight: '2rem',
+    },
+    autoSaveIndicator: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        '&$hasMultilineCounter': {
+            top: '-0.875rem',
+        },
+    },
+    hasMultilineCounter: {},
     hint: {},
     error: {},
 });

package/FormField/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/FormField/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAEhB,OAAO,EAAE;YACP,SAAS,EAAE,KAAK;SACjB;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,CAAC;SACb;KACF;IAED,IAAI,EAAE,EAAE;IAER,KAAK,EAAE,EAAE;CACV,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/FormField/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAEhB,OAAO,EAAE;YACP,SAAS,EAAE,KAAK;SACjB;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,CAAC;SACb;KACF;IAED,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,YAAY,EAAE,MAAM;KACrB;IACD,iBAAiB,EAAE;QACjB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QAER,uBAAuB,EAAE;YACvB,GAAG,EAAE,WAAW;SACjB;KACF;IAED,mBAAmB,EAAE,EAAE;IAEvB,IAAI,EAAE,EAAE;IAER,KAAK,EAAE,EAAE;CACV,CAAC,CAAA"}

package/Input/Input.d.ts

@@ -65,6 +65,7 @@ export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElem
         resetButton?: string;
         validIcon?: string;
     };
+    setHasMultilineCounter?: (name: string, hasCounter: boolean) => void;
 }
 export declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/Input/Input.js

@@ -13,13 +13,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef, } from 'react';
 import cx from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
+import { useHasMultilineCounter, } from '@toptal/picasso-shared';
 import OutlinedInput from '../OutlinedInput';
 import { disableUnsupportedProps } from '../utils';
 import styles from './styles';
 import { usePropDeprecationWarning } from '../utils/use-deprecation-warnings';
 import InputLimitAdornment from '../InputLimitAdornment';
 import InputIconAdornment from '../InputIconAdornment';
-import InputMultilineAdornment from '../InputMultilineAdornment';
+import Container from '../Container';
+import InputValidIconAdornment from '../InputValidIconAdornment';
 const useStyles = makeStyles(styles, { name: 'PicassoInput' });
 const hasRemainingCounter = ({ counter, limit, }) => Boolean(counter === 'remaining' && limit);
 const hasEnteredCounter = ({ counter }) => counter === 'entered';
@@ -32,26 +34,33 @@ const StartAdornment = ({ icon, iconPosition, disabled, }) => {
     return React.createElement(InputIconAdornment, { disabled: disabled, position: 'start', icon: icon });
 };
 const EndAdornment = (props) => {
-    const { icon, iconPosition, disabled, limit, multiline, charsLength, testIds, counter, status, } = props;
+    const { icon, iconPosition, disabled, limit, multiline, charsLength, testIds, counter, showCounter, } = props;
     if (icon && iconPosition === 'end') {
         return React.createElement(InputIconAdornment, { disabled: disabled, position: 'end', icon: icon });
     }
-    const showCounter = !!charsLength && hasCounter({ counter, limit });
     if (!multiline && showCounter) {
-        return (React.createElement(InputLimitAdornment, { charsLength: charsLength, multiline: multiline, 
+        return (React.createElement(InputLimitAdornment
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        , { 
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            charsLength: charsLength, multiline: multiline, 
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             counter: counter, 
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             limit: limit, testIds: testIds }));
     }
-    if (hasMultilineAdornment({ multiline, status, counter, limit })) {
-        return (React.createElement(InputMultilineAdornment, { status: status, testIds: testIds }, showCounter && (React.createElement(InputLimitAdornment, { charsLength: charsLength, 
+    return null;
+};
+const MultilineAdornment = ({ charsLength, counter, limit, showCounter, status, testIds, }) => {
+    return (React.createElement(Container, null,
+        showCounter && (React.createElement(InputLimitAdornment, { testIds: testIds, 
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            charsLength: charsLength, 
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             counter: counter, 
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            limit: limit, multiline: multiline }))));
-    }
-    return null;
+            limit: limit, multiline: true })),
+        status === 'success' && (React.createElement(InputValidIconAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.validIcon, multiline: true }))));
 };
 const purifyProps = (props) => {
     const sizeOptions = {
@@ -69,7 +78,7 @@ const purifyProps = (props) => {
     return disableUnsupportedProps('Input', props, sizeOptions);
 };
 export const Input = forwardRef(function Input(props, ref) {
-    const _a = purifyProps(props), { id, name, defaultValue, value, placeholder, error, status, disabled, icon, iconPosition, inputProps, children, multiline, multilineResizable, autoFocus, width, className, style, rows, rowsMax, type, onChange, onClick, startAdornment, endAdornment, limit, counter, size, enableReset, onResetClick, outlineRef, testIds } = _a, rest = __rest(_a, ["id", "name", "defaultValue", "value", "placeholder", "error", "status", "disabled", "icon", "iconPosition", "inputProps", "children", "multiline", "multilineResizable", "autoFocus", "width", "className", "style", "rows", "rowsMax", "type", "onChange", "onClick", "startAdornment", "endAdornment", "limit", "counter", "size", "enableReset", "onResetClick", "outlineRef", "testIds"]);
+    const _a = purifyProps(props), { id, name, defaultValue, value, placeholder, error, status, disabled, icon, iconPosition, inputProps, children, multiline, multilineResizable, autoFocus, width, className, style, rows, rowsMax, type, onChange, onClick, startAdornment, endAdornment, limit, counter, size, enableReset, onResetClick, outlineRef, testIds, setHasMultilineCounter } = _a, rest = __rest(_a, ["id", "name", "defaultValue", "value", "placeholder", "error", "status", "disabled", "icon", "iconPosition", "inputProps", "children", "multiline", "multilineResizable", "autoFocus", "width", "className", "style", "rows", "rowsMax", "type", "onChange", "onClick", "startAdornment", "endAdornment", "limit", "counter", "size", "enableReset", "onResetClick", "outlineRef", "testIds", "setHasMultilineCounter"]);
     usePropDeprecationWarning({
         props,
         name: 'error',
@@ -78,22 +87,25 @@ export const Input = forwardRef(function Input(props, ref) {
     });
     const charsLength = value ? value.length : 0;
     const classes = useStyles();
-    return (React.createElement(OutlinedInput, { ref: outlineRef, inputRef: ref, className: className, style: style, classes: {
-            root: cx(classes.root, {
-                [classes.rootMultiline]: multiline,
-                [classes.rootMultilineLimiter]: hasMultilineAdornment({
-                    multiline,
-                    status,
-                    limit,
-                    counter,
+    const showCounter = !!charsLength && hasCounter({ counter, limit });
+    useHasMultilineCounter(name, showCounter && multiline, setHasMultilineCounter);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OutlinedInput, { ref: outlineRef, inputRef: ref, className: className, style: style, classes: {
+                root: cx(classes.root, {
+                    [classes.rootMultiline]: multiline,
+                }),
+                input: cx(classes.input, {
+                    [classes.inputMultilineResizable]: multiline && multilineResizable,
                 }),
-            }),
-            input: cx(classes.input, {
-                [classes.inputMultilineResizable]: multiline && multilineResizable,
-            }),
-        }, id: id, name: name, defaultValue: defaultValue, value: value, placeholder: placeholder, status: error ? 'error' : status, disabled: disabled, multiline: multiline, autoFocus: autoFocus, rows: rows, rowsMax: rowsMax, type: type, width: width, size: size, onClick: onClick, 
-        // html attributes
-        inputProps: Object.assign(Object.assign({}, rest), inputProps), startAdornment: startAdornment || (React.createElement(StartAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled })), endAdornment: endAdornment || (React.createElement(EndAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled, limit: limit, charsLength: charsLength, multiline: multiline, counter: counter, status: status, testIds: testIds })), onChange: onChange, enableReset: enableReset, onResetClick: onResetClick, testIds: testIds }, children));
+            }, id: id, name: name, defaultValue: defaultValue, value: value, placeholder: placeholder, status: error ? 'error' : status, disabled: disabled, multiline: multiline, autoFocus: autoFocus, rows: rows, rowsMax: rowsMax, type: type, width: width, size: size, onClick: onClick, 
+            // html attributes
+            inputProps: Object.assign(Object.assign({}, rest), inputProps), startAdornment: startAdornment || (React.createElement(StartAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled })), endAdornment: endAdornment || (React.createElement(EndAdornment, { icon: icon, iconPosition: iconPosition, disabled: disabled, limit: limit, charsLength: charsLength, multiline: multiline, counter: counter, status: status, testIds: testIds, showCounter: showCounter })), onChange: onChange, enableReset: enableReset, onResetClick: onResetClick, testIds: testIds }, children),
+        hasMultilineAdornment({
+            multiline,
+            status,
+            limit,
+            counter,
+        }) && (React.createElement(MultilineAdornment, { charsLength: charsLength, status: status, testIds: testIds, showCounter: showCounter, counter: counter, limit: limit }))));
 });
 Input.defaultProps = {
     autoComplete: 'none',

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"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"}

package/Input/styles.d.ts

@@ -3,5 +3,5 @@ import '../InputBase/styles';
 import '../InputLabel/styles';
 import '../OutlinedInput/styles';
 import '../InputAdornment/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "rootMultiline" | "rootMultilineLimiter" | "inputMultilineResizable">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "rootMultiline" | "inputMultilineResizable">;
 export default _default;

package/Input/styles.js

@@ -12,10 +12,6 @@ export default ({ palette }) => createStyles({
     rootMultiline: {
         height: 'auto',
     },
-    rootMultilineLimiter: {
-        minHeight: '3.75rem',
-        paddingBottom: '1.875rem',
-    },
     inputMultilineResizable: {
         resize: 'vertical',
     },

package/Input/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,yBAAyB,CAAA;AAChC,OAAO,0BAA0B,CAAA;AAEjC,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,MAAM,EAAE,MAAM;KACf;IACD,aAAa,EAAE;QACb,MAAM,EAAE,MAAM;KACf;IACD,oBAAoB,EAAE;QACpB,SAAS,EAAE,SAAS;QACpB,aAAa,EAAE,UAAU;KAC1B;IACD,uBAAuB,EAAE;QACvB,MAAM,EAAE,UAAU;KACnB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,yBAAyB,CAAA;AAChC,OAAO,0BAA0B,CAAA;AAEjC,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,MAAM,EAAE,MAAM;KACf;IACD,aAAa,EAAE;QACb,MAAM,EAAE,MAAM;KACf;IACD,uBAAuB,EAAE;QACvB,MAAM,EAAE,UAAU;KACnB;CACF,CAAC,CAAA"}

package/InputLimitAdornment/InputLimitAdornment.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
+import { InputAdornment } from '@material-ui/core';
 import styles from './styles';
-import InputAdornment from '../InputAdornment';
+import InputMultilineAdornment from '../InputMultilineAdornment';
 const useStyles = makeStyles(styles, {
     name: 'PicassoInputLimitAdornment',
 });
@@ -29,15 +30,19 @@ const InputLimitAdornment = (props) => {
         charsTillLimit,
         counter,
     });
-    return (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.inputAdornment, position: 'end', className: cx({
-            [classes.limiterMultiline]: multiline,
-        }), disablePointerEvents: true },
-        React.createElement("span", { className: cx(classes.limiterLabel, {
-                [classes.limiterLabelError]: charsTillLimit <= 0,
-            }) },
-            multiline ? Math.abs(charsTillLimit) : charsTillLimit,
+    const error = charsTillLimit <= 0;
+    if (multiline) {
+        return (React.createElement(InputMultilineAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.inputAdornment, error: error },
+            Math.abs(charsTillLimit),
             " ",
-            multilineLabel)));
+            multilineLabel));
+    }
+    return (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.inputAdornment, position: 'end', disablePointerEvents: true, className: cx(classes.limiterLabel, {
+            [classes.limiterLabelError]: error,
+        }) },
+        charsTillLimit,
+        " ",
+        multilineLabel));
 };
 export default InputLimitAdornment;
 //# sourceMappingURL=InputLimitAdornment.js.map

package/InputLimitAdornment/InputLimitAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputLimitAdornment.js","sourceRoot":"","sources":["../../src/InputLimitAdornment/InputLimitAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAc9C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,4BAA4B;CACnC,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,KAAK,WAAW,CAAA;AAC7E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CACzC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAA;AAE1C,MAAM,iBAAiB,GAAG,CACxB,WAAmB,EACnB,OAAoB,EACpB,KAAa,EACb,EAAE,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;AAEvE,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,cAAc,EACd,OAAO,GAGR,EAAE,EAAE;IACH,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE;QAChC,OAAO,cAAc,IAAI,CAAC;YACxB,CAAC,CAAC,GAAG,gBAAgB,CAAC,cAAc,CAAC,OAAO;YAC5C,CAAC,CAAC,gBAAgB,CAAA;KACrB;IAED,OAAO,GAAG,gBAAgB,CAAC,cAAc,CAAC,UAAU,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAEjE,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;IACrE,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,SAAS;QACT,cAAc;QACd,OAAO;KACR,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,cAAc,mBACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,EACpC,QAAQ,EAAC,KAAK,EACd,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,SAAS;SACtC,CAAC,EACF,oBAAoB;QAEpB,8BACE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE;gBAClC,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,cAAc,IAAI,CAAC;aACjD,CAAC;YAED,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc;;YAAG,cAAc,CAClE,CACQ,CAClB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"InputLimitAdornment.js","sourceRoot":"","sources":["../../src/InputLimitAdornment/InputLimitAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,uBAAuB,MAAM,4BAA4B,CAAA;AAchE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,4BAA4B;CACnC,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAE,EAAE,CAAC,OAAO,KAAK,WAAW,CAAA;AAC7E,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,EAAE,CACzC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAA;AAE1C,MAAM,iBAAiB,GAAG,CACxB,WAAmB,EACnB,OAAoB,EACpB,KAAa,EACb,EAAE,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;AAEvE,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,cAAc,EACd,OAAO,GAGR,EAAE,EAAE;IACH,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE;QAChC,OAAO,cAAc,IAAI,CAAC;YACxB,CAAC,CAAC,GAAG,gBAAgB,CAAC,cAAc,CAAC,OAAO;YAC5C,CAAC,CAAC,gBAAgB,CAAA;KACrB;IAED,OAAO,GAAG,gBAAgB,CAAC,cAAc,CAAC,UAAU,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,mBAAmB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAEjE,MAAM,cAAc,GAAG,iBAAiB,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,CAAC,CAAA;IACrE,MAAM,cAAc,GAAG,iBAAiB,CAAC;QACvC,SAAS;QACT,cAAc;QACd,OAAO;KACR,CAAC,CAAA;IACF,MAAM,KAAK,GAAG,cAAc,IAAI,CAAC,CAAA;IAEjC,IAAI,SAAS,EAAE;QACb,OAAO,CACL,oBAAC,uBAAuB,mBACT,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,EACpC,KAAK,EAAE,KAAK;YAEX,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC;;YAAG,cAAc,CAClB,CAC3B,CAAA;KACF;IAED,OAAO,CACL,oBAAC,cAAc,mBACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,EACpC,QAAQ,EAAC,KAAK,EACd,oBAAoB,QACpB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE;YAClC,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,KAAK;SACnC,CAAC;QAED,cAAc;;QAAG,cAAc,CACjB,CAClB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/InputLimitAdornment/styles.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "limiterLabel" | "limiterLabelError" | "limiterMultiline">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "limiterLabel" | "limiterLabelError">;
 export default _default;

package/InputLimitAdornment/styles.js

@@ -8,9 +8,5 @@ export default ({ palette }) => createStyles({
     limiterLabelError: {
         color: palette.red.main,
     },
-    limiterMultiline: {
-        justifyContent: 'unset',
-        marginLeft: 'unset',
-    },
 });
 //# sourceMappingURL=styles.js.map

package/InputLimitAdornment/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/InputLimitAdornment/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,MAAM;KACnB;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;KACxB;IACD,gBAAgB,EAAE;QAChB,cAAc,EAAE,OAAO;QACvB,UAAU,EAAE,OAAO;KACpB;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/InputLimitAdornment/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,MAAM;KACnB;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;KACxB;CACF,CAAC,CAAA"}

package/InputMultilineAdornment/InputMultilineAdornment.d.ts

@@ -1,11 +1,8 @@
 import { ReactNode } from 'react';
-import { Status } from '../OutlinedInput';
 export interface Props {
     children: ReactNode;
-    status?: Status;
-    testIds?: {
-        inputAdornment?: string;
-    };
+    error?: boolean;
+    'data-testid'?: string;
 }
 declare const InputMultilineAdornment: (props: Props) => JSX.Element;
 export default InputMultilineAdornment;

package/InputMultilineAdornment/InputMultilineAdornment.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import Container from '../Container';
 import styles from './styles';
-import InputAdornment from '../InputAdornment';
-import InputValidIconAdornment from '../InputValidIconAdornment';
 const useStyles = makeStyles(styles, {
     name: 'PicassoInputMultilineAdornment',
 });
 const InputMultilineAdornment = (props) => {
-    const { children, status, testIds } = props;
+    const { children, error, 'data-testid': dataTestId } = props;
     const classes = useStyles();
-    return (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.inputAdornment, position: 'end', className: classes.multilineAdornment, disablePointerEvents: true },
-        children,
-        status === 'success' && React.createElement(InputValidIconAdornment, null)));
+    return (React.createElement(Container, { flex: true, "data-testid": dataTestId, className: cx(classes.root, {
+            [classes.error]: error,
+        }) }, children));
 };
 export default InputMultilineAdornment;
 //# sourceMappingURL=InputMultilineAdornment.js.map

package/InputMultilineAdornment/InputMultilineAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputMultilineAdornment.js","sourceRoot":"","sources":["../../src/InputMultilineAdornment/InputMultilineAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAE9C,OAAO,uBAAuB,MAAM,4BAA4B,CAAA;AAUhE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,gCAAgC;CACvC,CAAC,CAAA;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC/C,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAC3C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,cAAc,mBACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc,EACpC,QAAQ,EAAC,KAAK,EACd,SAAS,EAAE,OAAO,CAAC,kBAAkB,EACrC,oBAAoB;QAEnB,QAAQ;QACR,MAAM,KAAK,SAAS,IAAI,oBAAC,uBAAuB,OAAG,CACrC,CAClB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"InputMultilineAdornment.js","sourceRoot":"","sources":["../../src/InputMultilineAdornment/InputMultilineAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,MAAM,MAAM,UAAU,CAAA;AAQ7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,gCAAgC;CACvC,CAAC,CAAA;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC/C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,uBACS,UAAU,EACvB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1B,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK;SACvB,CAAC,IAED,QAAQ,CACC,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/InputMultilineAdornment/styles.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "multilineAdornment">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "error" | "root">;
 export default _default;

package/InputMultilineAdornment/styles.js

@@ -1,14 +1,16 @@
 import { createStyles } from '@material-ui/core/styles';
+import { rem } from '@toptal/picasso-shared';
 export default ({ palette }) => createStyles({
-    multilineAdornment: {
-        position: 'absolute',
-        bottom: 0,
-        width: 'calc(100% - 1.25rem)',
-        height: '1.25rem',
-        justifyContent: 'space-between',
-        margin: 0,
-        padding: '0.25rem 0',
-        borderTop: `1px solid ${palette.grey.lighter2}`,
+    root: {
+        fontSize: '0.625rem',
+        lineHeight: 1,
+        marginTop: '0.25rem',
+        color: palette.grey.main2,
+        marginRight: rem('2px'),
+        '&$error': {
+            color: palette.red.main,
+        },
     },
+    error: {},
 });
 //# sourceMappingURL=styles.js.map

package/InputMultilineAdornment/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/InputMultilineAdornment/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,kBAAkB,EAAE;QAClB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,sBAAsB;QAC7B,MAAM,EAAE,SAAS;QACjB,cAAc,EAAE,eAAe;QAC/B,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChD;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/InputMultilineAdornment/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,SAAS;QACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC;QAEvB,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;SACxB;KACF;IAED,KAAK,EAAE,EAAE;CACV,CAAC,CAAA"}

package/InputValidIconAdornment/InputValidIconAdornment.d.ts

@@ -1,5 +1,6 @@
 export interface Props {
     'data-testid'?: string;
+    multiline?: boolean;
 }
-declare const InputValidIconAdornment: ({ "data-testid": dataTestId }: Props) => JSX.Element;
+declare const InputValidIconAdornment: ({ "data-testid": dataTestId, multiline, }: Props) => JSX.Element;
 export default InputValidIconAdornment;

package/InputValidIconAdornment/InputValidIconAdornment.js

@@ -1,7 +1,12 @@
 import React from 'react';
-import { CheckMinor24 } from '../Icon';
+import { CheckMinor24, CheckMinor16 } from '../Icon';
 import InputAdornment from '../InputAdornment';
-const InputValidIconAdornment = ({ 'data-testid': dataTestId }) => (React.createElement(InputAdornment, { position: 'end' },
-    React.createElement(CheckMinor24, { color: 'green', "data-testid": dataTestId })));
+const InputValidIconAdornment = ({ 'data-testid': dataTestId, multiline, }) => {
+    if (multiline) {
+        return React.createElement(CheckMinor16, { color: 'green', "data-testid": dataTestId });
+    }
+    return (React.createElement(InputAdornment, { position: 'end' },
+        React.createElement(CheckMinor24, { color: 'green', "data-testid": dataTestId })));
+};
 export default InputValidIconAdornment;
 //# sourceMappingURL=InputValidIconAdornment.js.map

package/InputValidIconAdornment/InputValidIconAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputValidIconAdornment.js","sourceRoot":"","sources":["../../src/InputValidIconAdornment/InputValidIconAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAM9C,MAAM,uBAAuB,GAAG,CAAC,EAAE,aAAa,EAAE,UAAU,EAAS,EAAE,EAAE,CAAC,CACxE,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;IAC5B,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,iBAAc,UAAU,GAAI,CACxC,CAClB,CAAA;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"InputValidIconAdornment.js","sourceRoot":"","sources":["../../src/InputValidIconAdornment/InputValidIconAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACpD,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAO9C,MAAM,uBAAuB,GAAG,CAAC,EAC/B,aAAa,EAAE,UAAU,EACzB,SAAS,GACH,EAAE,EAAE;IACV,IAAI,SAAS,EAAE;QACb,OAAO,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,iBAAc,UAAU,GAAI,CAAA;KAC/D;IAED,OAAO,CACL,oBAAC,cAAc,IAAC,QAAQ,EAAC,KAAK;QAC5B,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,iBAAc,UAAU,GAAI,CACxC,CAClB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,uBAAuB,CAAA"}

package/MenuItem/styles.js

@@ -97,6 +97,7 @@ export default ({ typography, palette, shadows }) => createStyles({
     },
     itemWrapper: {
         flex: 1,
+        maxWidth: '100%',
     },
     content: {
         flex: 1,

package/MenuItem/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/MenuItem/styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/MenuItem/styles.ts"],"names":[],"mappings":"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"}

package/RichTextEditor/RichTextEditor.d.ts

@@ -34,6 +34,8 @@ export interface Props extends BaseProps {
      * The minimum number of characters required that the user should enter.
      */
     minLength?: number;
+    /** Name attribute of the input element */
+    name?: string;
     /**
      * Custom counter message for minLength
      */
@@ -58,6 +60,7 @@ export interface Props extends BaseProps {
     placeholder?: string;
     /** List of plugins to enable on the editor */
     plugins?: EditorPlugin[];
+    setHasMultilineCounter?: (name: string, hasCounter: boolean) => void;
     testIds?: {
         wrapper?: string;
         editor?: string;

package/RichTextEditor/RichTextEditor.js

@@ -1,13 +1,14 @@
 import React, { forwardRef, useMemo, useRef, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import { useHasMultilineCounter } from '@toptal/picasso-shared';
 import cx from 'classnames';
 import hastUtilToHtml from 'hast-util-to-html';
 import hastSanitize from 'hast-util-sanitize';
 import noop from '../utils/noop';
 import Container from '../Container';
 import QuillEditor from '../QuillEditor';
+import InputMultilineAdornment from '../InputMultilineAdornment';
 import Toolbar from '../RichTextEditorToolbar';
-import Counter from '../RichTextEditorCounter';
 import styles from './styles';
 import { useTextEditorState, useOnSelectionChange, useOnTextFormat, useOnFocus, useToolbarHandlers, useCounter, } from './hooks';
 import { usePropDeprecationWarning } from '../utils/use-deprecation-warnings';
@@ -15,7 +16,7 @@ const useStyles = makeStyles(styles, {
     name: 'RichTextEditor',
 });
 export const RichTextEditor = forwardRef(function RichTextEditor(props, ref) {
-    const { 'data-testid': dataTestId, plugins, autoFocus = false, className, defaultValue, disabled, id, onChange = noop, onFocus = noop, onBlur = noop, placeholder, minLength, maxLength, minLengthMessage, maxLengthMessage, style, status, testIds, hiddenInputId, } = props;
+    const { 'data-testid': dataTestId, plugins, autoFocus = false, className, defaultValue, disabled, id, onChange = noop, onFocus = noop, onBlur = noop, placeholder, minLength, maxLength, minLengthMessage, maxLengthMessage, style, status, testIds, hiddenInputId, setHasMultilineCounter, name, } = props;
     const classes = useStyles();
     const toolbarRef = useRef(null);
     const editorRef = useRef(null);
@@ -55,29 +56,31 @@ export const RichTextEditor = forwardRef(function RichTextEditor(props, ref) {
     // declare the array outside the component level
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const memoizedPlugins = useMemo(() => plugins, []);
-    return (React.createElement(Container, { className: cx(classes.editorWrapper, {
-            [classes.disabled]: disabled,
-            [classes.focused]: isEditorFocused,
-            [classes.error]: status === 'error',
-        }, className), tabIndex: -1, style: style, ref: node => {
-            if (typeof ref === 'function') {
-                ref(node);
-            }
-            else if (ref != null) {
-                ref.current = node;
-            }
-            wrapperRef.current = node;
-        }, "data-testid": (testIds === null || testIds === void 0 ? void 0 : testIds.wrapper) || dataTestId, onFocus: handleFocus, onBlur: handleBlur },
-        React.createElement(Toolbar, { ref: toolbarRef, disabled: disabled || state.toolbar.disabled, id: id, format: state.toolbar.format, onBoldClick: handleBold, onItalicClick: handleItalic, onUnorderedClick: handleUnordered, onOrderedClick: handleOrdered, onHeaderChange: handleHeader, onLinkClick: handleLink, plugins: memoizedPlugins, testIds: {
-                headerSelect: testIds === null || testIds === void 0 ? void 0 : testIds.headerSelect,
-                boldButton: testIds === null || testIds === void 0 ? void 0 : testIds.boldButton,
-                italicButton: testIds === null || testIds === void 0 ? void 0 : testIds.italicButton,
-                unorderedListButton: testIds === null || testIds === void 0 ? void 0 : testIds.unorderedListButton,
-                orderedListButton: testIds === null || testIds === void 0 ? void 0 : testIds.orderedListButton,
-            } }),
-        React.createElement(QuillEditor, { ref: editorRef, disabled: !!disabled, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.editor, id: id, isFocused: isEditorFocused, placeholder: placeholder, onTextLengthChange: handleCounterMessage, onTextFormat: handleTextFormat, onSelectionChange: handleSelectionChange, onTextChange: onChange, defaultValue: defaultValueInHtml, plugins: memoizedPlugins }),
-        counterMessage && (React.createElement(Counter, { error: counterError, message: counterMessage })),
-        hiddenInputId && enableFocusOnLabelClick(hiddenInputId)));
+    useHasMultilineCounter(name, !!counterMessage, setHasMultilineCounter);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, { className: cx(classes.editorWrapper, {
+                [classes.disabled]: disabled,
+                [classes.focused]: isEditorFocused,
+                [classes.error]: status === 'error',
+            }, className), tabIndex: -1, style: style, ref: node => {
+                if (typeof ref === 'function') {
+                    ref(node);
+                }
+                else if (ref != null) {
+                    ref.current = node;
+                }
+                wrapperRef.current = node;
+            }, "data-testid": (testIds === null || testIds === void 0 ? void 0 : testIds.wrapper) || dataTestId, onFocus: handleFocus, onBlur: handleBlur },
+            React.createElement(Toolbar, { ref: toolbarRef, disabled: disabled || state.toolbar.disabled, id: id, format: state.toolbar.format, onBoldClick: handleBold, onItalicClick: handleItalic, onUnorderedClick: handleUnordered, onOrderedClick: handleOrdered, onHeaderChange: handleHeader, onLinkClick: handleLink, plugins: memoizedPlugins, testIds: {
+                    headerSelect: testIds === null || testIds === void 0 ? void 0 : testIds.headerSelect,
+                    boldButton: testIds === null || testIds === void 0 ? void 0 : testIds.boldButton,
+                    italicButton: testIds === null || testIds === void 0 ? void 0 : testIds.italicButton,
+                    unorderedListButton: testIds === null || testIds === void 0 ? void 0 : testIds.unorderedListButton,
+                    orderedListButton: testIds === null || testIds === void 0 ? void 0 : testIds.orderedListButton,
+                } }),
+            React.createElement(QuillEditor, { ref: editorRef, disabled: !!disabled, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.editor, id: id, isFocused: isEditorFocused, placeholder: placeholder, onTextLengthChange: handleCounterMessage, onTextFormat: handleTextFormat, onSelectionChange: handleSelectionChange, onTextChange: onChange, defaultValue: defaultValueInHtml, plugins: memoizedPlugins }),
+            hiddenInputId && enableFocusOnLabelClick(hiddenInputId)),
+        counterMessage && (React.createElement(InputMultilineAdornment, { error: counterError }, counterMessage))));
 });
 const hiddenInputStyle = {
     position: 'absolute',