@toptal/picasso 25.0.0 → 25.0.1-alpha-fx-fix-remove-tooltip-variant-codemod.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Input/Input.d.ts +6 -6
- package/Input/Input.js +8 -54
- package/Input/Input.js.map +1 -1
- package/Input/styles.d.ts +1 -1
- package/Input/styles.js +0 -21
- package/Input/styles.js.map +1 -1
- package/InputIconAdornment/InputIconAdornment.d.ts +9 -0
- package/InputIconAdornment/InputIconAdornment.js +18 -0
- package/InputIconAdornment/InputIconAdornment.js.map +1 -0
- package/InputIconAdornment/index.d.ts +4 -0
- package/InputIconAdornment/index.js +2 -0
- package/InputIconAdornment/index.js.map +1 -0
- package/InputIconAdornment/styles.d.ts +2 -0
- package/InputIconAdornment/styles.js +7 -0
- package/InputIconAdornment/styles.js.map +1 -0
- package/InputLimitAdornment/InputLimitAdornment.d.ts +12 -0
- package/InputLimitAdornment/InputLimitAdornment.js +40 -0
- package/InputLimitAdornment/InputLimitAdornment.js.map +1 -0
- package/InputLimitAdornment/index.d.ts +4 -0
- package/InputLimitAdornment/index.js +2 -0
- package/InputLimitAdornment/index.js.map +1 -0
- package/InputLimitAdornment/styles.d.ts +3 -0
- package/InputLimitAdornment/styles.js +22 -0
- package/InputLimitAdornment/styles.js.map +1 -0
- package/package.json +5 -4
package/Input/Input.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { ReactNode, ChangeEvent, InputHTMLAttributes, MouseEvent } from 'react';
|
|
2
2
|
import { BaseProps, SizeType } from '@toptal/picasso-shared';
|
|
3
3
|
import { BaseInputProps, Status } from '../OutlinedInput';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
import { InputLimitAdornmentProps } from '../InputLimitAdornment';
|
|
5
|
+
import { InputIconAdornmentProps } from '../InputIconAdornment';
|
|
6
6
|
export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
7
7
|
/** The id of the `input` element. */
|
|
8
8
|
id?: string;
|
|
@@ -26,9 +26,9 @@ export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElem
|
|
|
26
26
|
/** Width of the component */
|
|
27
27
|
width?: 'full' | 'shrink' | 'auto';
|
|
28
28
|
/** Whether icon should be placed at the beginning or end of the `Input` */
|
|
29
|
-
iconPosition?:
|
|
29
|
+
iconPosition?: InputIconAdornmentProps['position'];
|
|
30
30
|
/** Specify icon which should be rendered inside Input */
|
|
31
|
-
icon?:
|
|
31
|
+
icon?: InputIconAdornmentProps['icon'];
|
|
32
32
|
inputProps?: BaseInputProps;
|
|
33
33
|
/** Whether `Input` should be rendered as `TextArea` or not */
|
|
34
34
|
multiline?: boolean;
|
|
@@ -49,9 +49,9 @@ export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElem
|
|
|
49
49
|
/** Callback invoked when `Input` changes its state */
|
|
50
50
|
onChange?: (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement>) => void;
|
|
51
51
|
/** Adds a counter of characters (ignored in combination with `counter: entered`) */
|
|
52
|
-
limit?:
|
|
52
|
+
limit?: InputLimitAdornmentProps['limit'];
|
|
53
53
|
/** Type of the counter of characters */
|
|
54
|
-
counter?:
|
|
54
|
+
counter?: InputLimitAdornmentProps['counter'];
|
|
55
55
|
/** Component size */
|
|
56
56
|
size?: SizeType<'small' | 'medium' | 'large'>;
|
|
57
57
|
/** Whether to render reset icon when there is a value in the input */
|
package/Input/Input.js
CHANGED
|
@@ -13,79 +13,33 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import React, { forwardRef } from 'react';
|
|
14
14
|
import cx from 'classnames';
|
|
15
15
|
import { makeStyles } from '@material-ui/core/styles';
|
|
16
|
-
import InputAdornment from '../InputAdornment';
|
|
17
16
|
import OutlinedInput from '../OutlinedInput';
|
|
18
17
|
import { disableUnsupportedProps } from '../utils';
|
|
19
18
|
import styles from './styles';
|
|
20
19
|
import { usePropDeprecationWarning } from '../utils/use-deprecation-warnings';
|
|
20
|
+
import InputLimitAdornment from '../InputLimitAdornment';
|
|
21
|
+
import InputIconAdornment from '../InputIconAdornment';
|
|
21
22
|
const useStyles = makeStyles(styles, { name: 'PicassoInput' });
|
|
22
23
|
const hasRemainingCounter = ({ counter, limit }) => Boolean(counter === 'remaining' && limit);
|
|
23
24
|
const hasEnteredCounter = ({ counter }) => counter === 'entered';
|
|
24
25
|
const hasCounter = ({ counter, limit }) => hasRemainingCounter({ counter, limit }) || hasEnteredCounter({ counter });
|
|
25
|
-
const getCharsTillLimit = ({ charsLength, limit, counter }) =>
|
|
26
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
27
|
-
hasRemainingCounter({ counter, limit }) ? limit - charsLength : charsLength;
|
|
28
|
-
const getMultilineLabel = ({ multiline, charsTillLimit, counter, limit }) => {
|
|
29
|
-
if (!multiline) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
if (hasRemainingCounter({ counter, limit })) {
|
|
33
|
-
return charsTillLimit >= 0 ? 'characters left' : 'over the limit';
|
|
34
|
-
}
|
|
35
|
-
return 'characters entered';
|
|
36
|
-
};
|
|
37
|
-
const LimitAdornment = (props) => {
|
|
38
|
-
const classes = useStyles();
|
|
39
|
-
const { multiline, charsLength, counter, limit, testIds } = props;
|
|
40
|
-
const charsTillLimit = getCharsTillLimit({
|
|
41
|
-
counter,
|
|
42
|
-
limit,
|
|
43
|
-
charsLength
|
|
44
|
-
});
|
|
45
|
-
const multilineLabel = getMultilineLabel({
|
|
46
|
-
multiline,
|
|
47
|
-
counter,
|
|
48
|
-
limit,
|
|
49
|
-
charsTillLimit
|
|
50
|
-
});
|
|
51
|
-
return (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.inputAdornment, position: 'end', className: cx({
|
|
52
|
-
[classes.limiterMultiline]: multiline
|
|
53
|
-
}), disablePointerEvents: true },
|
|
54
|
-
React.createElement("span", { className: cx(classes.limiterLabel, {
|
|
55
|
-
[classes.limiterLabelError]: charsTillLimit <= 0
|
|
56
|
-
}) },
|
|
57
|
-
multiline ? Math.abs(charsTillLimit) : charsTillLimit,
|
|
58
|
-
" ",
|
|
59
|
-
multilineLabel)));
|
|
60
|
-
};
|
|
61
|
-
const IconAdornment = (props) => {
|
|
62
|
-
const { position, disabled, icon } = props;
|
|
63
|
-
const classes = useStyles();
|
|
64
|
-
const styledIcon = React.cloneElement(icon, {
|
|
65
|
-
className: classes.icon,
|
|
66
|
-
role: 'presentation'
|
|
67
|
-
});
|
|
68
|
-
return (React.createElement(InputAdornment
|
|
69
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
70
|
-
, {
|
|
71
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
72
|
-
position: position, disabled: disabled, disablePointerEvents: true }, styledIcon));
|
|
73
|
-
};
|
|
74
26
|
const StartAdornment = ({ icon, iconPosition, disabled }) => {
|
|
75
27
|
if (!icon || iconPosition !== 'start') {
|
|
76
28
|
return null;
|
|
77
29
|
}
|
|
78
|
-
return React.createElement(
|
|
30
|
+
return React.createElement(InputIconAdornment, { disabled: disabled, position: 'start', icon: icon });
|
|
79
31
|
};
|
|
80
32
|
const EndAdornment = (props) => {
|
|
81
33
|
const { icon, iconPosition, disabled, limit, multiline, charsLength, testIds, counter } = props;
|
|
82
34
|
if (icon && iconPosition === 'end') {
|
|
83
|
-
return React.createElement(
|
|
35
|
+
return React.createElement(InputIconAdornment, { disabled: disabled, position: 'end', icon: icon });
|
|
84
36
|
}
|
|
85
37
|
if (charsLength && hasCounter({ counter, limit })) {
|
|
86
|
-
return (React.createElement(
|
|
38
|
+
return (React.createElement(InputLimitAdornment, { charsLength: charsLength, multiline: multiline,
|
|
39
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
40
|
+
counter: counter,
|
|
87
41
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
88
|
-
|
|
42
|
+
limit: limit, testIds: testIds }));
|
|
89
43
|
}
|
|
90
44
|
return null;
|
|
91
45
|
};
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,8BAA8B;AAC9B,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"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"}
|
package/Input/styles.d.ts
CHANGED
|
@@ -3,5 +3,5 @@ import '../InputBase/styles';
|
|
|
3
3
|
import '../InputLabel/styles';
|
|
4
4
|
import '../OutlinedInput/styles';
|
|
5
5
|
import '../InputAdornment/styles';
|
|
6
|
-
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "
|
|
6
|
+
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "rootMultiline" | "rootMultilineLimiter" | "inputMultilineResizable">;
|
|
7
7
|
export default _default;
|
package/Input/styles.js
CHANGED
|
@@ -18,27 +18,6 @@ export default ({ palette }) => createStyles({
|
|
|
18
18
|
},
|
|
19
19
|
inputMultilineResizable: {
|
|
20
20
|
resize: 'vertical'
|
|
21
|
-
},
|
|
22
|
-
icon: {
|
|
23
|
-
flex: '1 1 0%' // fix for IE11
|
|
24
|
-
},
|
|
25
|
-
limiterLabel: {
|
|
26
|
-
color: palette.grey.main2,
|
|
27
|
-
fontSize: '0.625rem',
|
|
28
|
-
lineHeight: '1rem'
|
|
29
|
-
},
|
|
30
|
-
limiterLabelError: {
|
|
31
|
-
color: palette.red.main
|
|
32
|
-
},
|
|
33
|
-
limiterMultiline: {
|
|
34
|
-
position: 'absolute',
|
|
35
|
-
bottom: 0,
|
|
36
|
-
width: 'calc(100% - 1.25rem)',
|
|
37
|
-
height: '1.25rem',
|
|
38
|
-
justifyContent: 'flex-start',
|
|
39
|
-
margin: 0,
|
|
40
|
-
padding: '0.25rem 0',
|
|
41
|
-
borderTop: `1px solid ${palette.grey.lighter2}`
|
|
42
21
|
}
|
|
43
22
|
});
|
|
44
23
|
//# sourceMappingURL=styles.js.map
|
package/Input/styles.js.map
CHANGED
|
@@ -1 +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;
|
|
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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
declare type IconPosition = 'start' | 'end';
|
|
3
|
+
export interface Props {
|
|
4
|
+
position: IconPosition;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
declare const InputIconAdornment: (props: Props) => JSX.Element;
|
|
9
|
+
export default InputIconAdornment;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
+
import styles from './styles';
|
|
4
|
+
import InputAdornment from '../InputAdornment';
|
|
5
|
+
const useStyles = makeStyles(styles, {
|
|
6
|
+
name: 'PicassoInputIconAdornment'
|
|
7
|
+
});
|
|
8
|
+
const InputIconAdornment = (props) => {
|
|
9
|
+
const { position, disabled, icon } = props;
|
|
10
|
+
const classes = useStyles();
|
|
11
|
+
const styledIcon = React.cloneElement(icon, {
|
|
12
|
+
className: classes.icon,
|
|
13
|
+
role: 'presentation'
|
|
14
|
+
});
|
|
15
|
+
return (React.createElement(InputAdornment, { position: position, disabled: disabled, disablePointerEvents: true }, styledIcon));
|
|
16
|
+
};
|
|
17
|
+
export default InputIconAdornment;
|
|
18
|
+
//# sourceMappingURL=InputIconAdornment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputIconAdornment.js","sourceRoot":"","sources":["../../src/InputIconAdornment/InputIconAdornment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAU9C,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,2BAA2B;CAClC,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;IAC1C,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAC1C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,IAAoB,EAAE;QAC1D,SAAS,EAAE,OAAO,CAAC,IAAI;QACvB,IAAI,EAAE,cAAc;KACrB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,UAEnB,UAAU,CACI,CAClB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/InputIconAdornment/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/InputIconAdornment/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAC,eAAe;KAC/B;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
declare type CounterType = 'remaining' | 'entered';
|
|
2
|
+
export interface Props {
|
|
3
|
+
charsLength: number;
|
|
4
|
+
limit: number;
|
|
5
|
+
multiline?: boolean;
|
|
6
|
+
counter: CounterType;
|
|
7
|
+
testIds?: {
|
|
8
|
+
inputAdornment?: string;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
declare const InputLimitAdornment: (props: Props) => JSX.Element;
|
|
12
|
+
export default InputLimitAdornment;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
+
import cx from 'classnames';
|
|
4
|
+
import styles from './styles';
|
|
5
|
+
import InputAdornment from '../InputAdornment';
|
|
6
|
+
const useStyles = makeStyles(styles, {
|
|
7
|
+
name: 'PicassoInputLimitAdornment'
|
|
8
|
+
});
|
|
9
|
+
const hasRemainingCounter = (counter) => counter === 'remaining';
|
|
10
|
+
const getCharsTillLimit = (charsLength, counter, limit) => (hasRemainingCounter(counter) ? limit - charsLength : charsLength);
|
|
11
|
+
const getMultilineLabel = ({ multiline, charsTillLimit, counter }) => {
|
|
12
|
+
if (!multiline) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
if (hasRemainingCounter(counter)) {
|
|
16
|
+
return charsTillLimit >= 0 ? 'characters left' : 'over the limit';
|
|
17
|
+
}
|
|
18
|
+
return 'characters entered';
|
|
19
|
+
};
|
|
20
|
+
const InputLimitAdornment = (props) => {
|
|
21
|
+
const classes = useStyles();
|
|
22
|
+
const { multiline, charsLength, counter, limit, testIds } = props;
|
|
23
|
+
const charsTillLimit = getCharsTillLimit(charsLength, counter, limit);
|
|
24
|
+
const multilineLabel = getMultilineLabel({
|
|
25
|
+
multiline,
|
|
26
|
+
charsTillLimit,
|
|
27
|
+
counter
|
|
28
|
+
});
|
|
29
|
+
return (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.inputAdornment, position: 'end', className: cx({
|
|
30
|
+
[classes.limiterMultiline]: multiline
|
|
31
|
+
}), disablePointerEvents: true },
|
|
32
|
+
React.createElement("span", { className: cx(classes.limiterLabel, {
|
|
33
|
+
[classes.limiterLabelError]: charsTillLimit <= 0
|
|
34
|
+
}) },
|
|
35
|
+
multiline ? Math.abs(charsTillLimit) : charsTillLimit,
|
|
36
|
+
" ",
|
|
37
|
+
multilineLabel)));
|
|
38
|
+
};
|
|
39
|
+
export default InputLimitAdornment;
|
|
40
|
+
//# sourceMappingURL=InputLimitAdornment.js.map
|
|
@@ -0,0 +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;AAE7E,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,EAGR,EAAE,EAAE;IACH,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,mBAAmB,CAAC,OAAO,CAAC,EAAE;QAChC,OAAO,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAA;KAClE;IAED,OAAO,oBAAoB,CAAA;AAC7B,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/InputLimitAdornment/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
+
export default ({ palette }) => createStyles({
|
|
3
|
+
limiterLabel: {
|
|
4
|
+
color: palette.grey.main2,
|
|
5
|
+
fontSize: '0.625rem',
|
|
6
|
+
lineHeight: '1rem'
|
|
7
|
+
},
|
|
8
|
+
limiterLabelError: {
|
|
9
|
+
color: palette.red.main
|
|
10
|
+
},
|
|
11
|
+
limiterMultiline: {
|
|
12
|
+
position: 'absolute',
|
|
13
|
+
bottom: 0,
|
|
14
|
+
width: 'calc(100% - 1.25rem)',
|
|
15
|
+
height: '1.25rem',
|
|
16
|
+
justifyContent: 'flex-start',
|
|
17
|
+
margin: 0,
|
|
18
|
+
padding: '0.25rem 0',
|
|
19
|
+
borderTop: `1px solid ${palette.grey.lighter2}`
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +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,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,sBAAsB;QAC7B,MAAM,EAAE,SAAS;QACjB,cAAc,EAAE,YAAY;QAC5B,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChD;CACF,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso",
|
|
3
|
-
"version": "25.0.
|
|
3
|
+
"version": "25.0.1-alpha-fx-fix-remove-tooltip-variant-codemod.3+7d25c530",
|
|
4
4
|
"description": "Toptal UI components library",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"typescript": "4.6.x"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@toptal/picasso-provider": "
|
|
35
|
-
"@toptal/picasso-shared": "
|
|
34
|
+
"@toptal/picasso-provider": "1.1.3-alpha-fx-fix-remove-tooltip-variant-codemod.8+7d25c530",
|
|
35
|
+
"@toptal/picasso-shared": "8.2.1-alpha-fx-fix-remove-tooltip-variant-codemod.41+7d25c530",
|
|
36
36
|
"ap-style-title-case": "^1.1.2",
|
|
37
37
|
"classnames": "^2.3.1",
|
|
38
38
|
"d3": "^6.7.0",
|
|
@@ -80,5 +80,6 @@
|
|
|
80
80
|
"sideEffects": [
|
|
81
81
|
"**/styles.ts",
|
|
82
82
|
"**/styles.js"
|
|
83
|
-
]
|
|
83
|
+
],
|
|
84
|
+
"gitHead": "7d25c530ae08c11ea7ea78c0214c4f7f16f644e2"
|
|
84
85
|
}
|