@toptal/picasso-typography-overflow 2.0.5 → 3.0.0
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/dist-package/src/TypographyOverflow/TypographyOverflow.d.ts +0 -3
- package/dist-package/src/TypographyOverflow/TypographyOverflow.d.ts.map +1 -1
- package/dist-package/src/TypographyOverflow/TypographyOverflow.js +4 -11
- package/dist-package/src/TypographyOverflow/TypographyOverflow.js.map +1 -1
- package/package.json +5 -5
- package/src/TypographyOverflow/TypographyOverflow.tsx +7 -17
- package/dist-package/src/TypographyOverflow/styles.d.ts +0 -3
- package/dist-package/src/TypographyOverflow/styles.d.ts.map +0 -1
- package/dist-package/src/TypographyOverflow/styles.js +0 -24
- package/dist-package/src/TypographyOverflow/styles.js.map +0 -1
- package/src/TypographyOverflow/styles.ts +0 -25
|
@@ -19,9 +19,6 @@ export interface Props extends BaseProps, TypographyProps {
|
|
|
19
19
|
export declare const TypographyOverflow: {
|
|
20
20
|
(props: Props): JSX.Element;
|
|
21
21
|
displayName: string;
|
|
22
|
-
defaultProps: {
|
|
23
|
-
noWrap: boolean;
|
|
24
|
-
};
|
|
25
22
|
};
|
|
26
23
|
export default TypographyOverflow;
|
|
27
24
|
//# sourceMappingURL=TypographyOverflow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypographyOverflow.d.ts","sourceRoot":"","sources":["../../../src/TypographyOverflow/TypographyOverflow.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TypographyOverflow.d.ts","sourceRoot":"","sources":["../../../src/TypographyOverflow/TypographyOverflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAIvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAGvE,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,eAAe;IACvD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kHAAkH;IAClH,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,gEAAgE;IAChE,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,gDAAgD;IAChD,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,aAAa,CAAA;CAC1B;AAED,eAAO,MAAM,kBAAkB;YAAW,KAAK;;CAoH9C,CAAA;AAID,eAAe,kBAAkB,CAAA"}
|
|
@@ -9,19 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import cx from 'classnames';
|
|
13
12
|
import React, { useCallback, useState } from 'react';
|
|
14
|
-
import { makeStyles } from '@material-ui/core/styles';
|
|
15
13
|
import { Tooltip } from '@toptal/picasso-tooltip';
|
|
16
14
|
import { Typography } from '@toptal/picasso-typography';
|
|
17
15
|
import { isOverflown } from '@toptal/picasso-utils';
|
|
18
|
-
import
|
|
19
|
-
const useStyles = makeStyles(styles, {
|
|
20
|
-
name: 'TypographyOverflow',
|
|
21
|
-
});
|
|
16
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge';
|
|
22
17
|
export const TypographyOverflow = (props) => {
|
|
23
18
|
const { children, lines = 1, tooltipContent, tooltipDelay, disableTooltip, className, onClick, onMouseEnter, style, placement = 'top' } = props, rest = __rest(props, ["children", "lines", "tooltipContent", "tooltipDelay", "disableTooltip", "className", "onClick", "onMouseEnter", "style", "placement"]);
|
|
24
|
-
const classes = useStyles(props);
|
|
25
19
|
const [isTooltipActive, setIsTooltipActive] = useState(false);
|
|
26
20
|
const [isTooltipOpened, setIsTooltipOpened] = useState(false);
|
|
27
21
|
const [isTooltipAnimating, setIsTooltipAnimating] = useState(false);
|
|
@@ -67,13 +61,12 @@ export const TypographyOverflow = (props) => {
|
|
|
67
61
|
const handleTransitionExited = useCallback(() => {
|
|
68
62
|
setIsTooltipAnimating(false);
|
|
69
63
|
}, []);
|
|
70
|
-
const typography = (React.createElement(Typography, Object.assign({}, rest, { style: extendedStyle,
|
|
64
|
+
const typography = (React.createElement(Typography, Object.assign({}, rest, { style: extendedStyle, noWrap: !isMultiline, className: twMerge('[-webkit-box-orient:vertical] overflow-hidden text-ellipsis pr-[0.9px]', isMultiline
|
|
65
|
+
? '[display:-webkit-box] break-words ![white-space:initial]'
|
|
66
|
+
: 'block', className), onClick: handleClick, onMouseEnter: handleMouseEnter }), children));
|
|
71
67
|
const tooltip = (React.createElement(Tooltip, { open: isTooltipOpened, content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : children, placement: placement, delay: tooltipDelay, interactive: true, disableListeners: disableTooltip, onOpen: handleTooltipOpen, onClose: handleTooltipClose, onTransitionExiting: handleTransitionExiting, onTransitionExited: handleTransitionExited }, typography));
|
|
72
68
|
return isTooltipRendered ? tooltip : typography;
|
|
73
69
|
};
|
|
74
70
|
TypographyOverflow.displayName = 'TypographyOverflow';
|
|
75
|
-
TypographyOverflow.defaultProps = {
|
|
76
|
-
noWrap: true,
|
|
77
|
-
};
|
|
78
71
|
export default TypographyOverflow;
|
|
79
72
|
//# sourceMappingURL=TypographyOverflow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypographyOverflow.js","sourceRoot":"","sources":["../../../src/TypographyOverflow/TypographyOverflow.tsx"],"names":[],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TypographyOverflow.js","sourceRoot":"","sources":["../../../src/TypographyOverflow/TypographyOverflow.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-typography-overflow",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Toptal UI components library - TypographyOverflow",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -24,20 +24,20 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@toptal/picasso-tooltip": "1.1.5",
|
|
26
26
|
"@toptal/picasso-typography": "4.0.0",
|
|
27
|
-
"@toptal/picasso-utils": "1.0.3"
|
|
28
|
-
"classnames": "^2.5.1"
|
|
27
|
+
"@toptal/picasso-utils": "1.0.3"
|
|
29
28
|
},
|
|
30
29
|
"sideEffects": [
|
|
31
30
|
"**/styles.ts",
|
|
32
31
|
"**/styles.js"
|
|
33
32
|
],
|
|
34
33
|
"peerDependencies": {
|
|
35
|
-
"@
|
|
36
|
-
"
|
|
34
|
+
"@toptal/picasso-tailwind": ">=2.7",
|
|
35
|
+
"@toptal/picasso-tailwind-merge": "^2.0.0",
|
|
37
36
|
"react": ">=16.12.0 < 19.0.0"
|
|
38
37
|
},
|
|
39
38
|
"devDependencies": {
|
|
40
39
|
"@toptal/picasso-test-utils": "1.1.1",
|
|
40
|
+
"@toptal/picasso-tailwind-merge": "2.0.0",
|
|
41
41
|
"styled-components": "^6.1.1"
|
|
42
42
|
},
|
|
43
43
|
"exports": {
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import cx from 'classnames'
|
|
2
1
|
import type { ReactNode } from 'react'
|
|
3
2
|
import React, { useCallback, useState } from 'react'
|
|
4
|
-
import type { Theme } from '@material-ui/core/styles'
|
|
5
|
-
import { makeStyles } from '@material-ui/core/styles'
|
|
6
3
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
7
4
|
import { Tooltip } from '@toptal/picasso-tooltip'
|
|
8
5
|
import { Typography } from '@toptal/picasso-typography'
|
|
9
6
|
import { isOverflown } from '@toptal/picasso-utils'
|
|
10
7
|
import type { TypographyProps } from '@toptal/picasso-typography'
|
|
11
8
|
import type { DelayType, PlacementType } from '@toptal/picasso-tooltip'
|
|
12
|
-
|
|
13
|
-
import styles from './styles'
|
|
9
|
+
import { twMerge } from '@toptal/picasso-tailwind-merge'
|
|
14
10
|
|
|
15
11
|
export interface Props extends BaseProps, TypographyProps {
|
|
16
12
|
/** A typography which can possibly overflow */
|
|
@@ -27,10 +23,6 @@ export interface Props extends BaseProps, TypographyProps {
|
|
|
27
23
|
placement?: PlacementType
|
|
28
24
|
}
|
|
29
25
|
|
|
30
|
-
const useStyles = makeStyles<Theme, Props>(styles, {
|
|
31
|
-
name: 'TypographyOverflow',
|
|
32
|
-
})
|
|
33
|
-
|
|
34
26
|
export const TypographyOverflow = (props: Props) => {
|
|
35
27
|
const {
|
|
36
28
|
children,
|
|
@@ -46,7 +38,6 @@ export const TypographyOverflow = (props: Props) => {
|
|
|
46
38
|
...rest
|
|
47
39
|
} = props
|
|
48
40
|
|
|
49
|
-
const classes = useStyles(props)
|
|
50
41
|
const [isTooltipActive, setIsTooltipActive] = useState(false)
|
|
51
42
|
const [isTooltipOpened, setIsTooltipOpened] = useState(false)
|
|
52
43
|
const [isTooltipAnimating, setIsTooltipAnimating] = useState(false)
|
|
@@ -115,9 +106,12 @@ export const TypographyOverflow = (props: Props) => {
|
|
|
115
106
|
<Typography
|
|
116
107
|
{...rest}
|
|
117
108
|
style={extendedStyle}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
109
|
+
noWrap={!isMultiline}
|
|
110
|
+
className={twMerge(
|
|
111
|
+
'[-webkit-box-orient:vertical] overflow-hidden text-ellipsis pr-[0.9px]',
|
|
112
|
+
isMultiline
|
|
113
|
+
? '[display:-webkit-box] break-words ![white-space:initial]'
|
|
114
|
+
: 'block',
|
|
121
115
|
className
|
|
122
116
|
)}
|
|
123
117
|
onClick={handleClick}
|
|
@@ -149,8 +143,4 @@ export const TypographyOverflow = (props: Props) => {
|
|
|
149
143
|
|
|
150
144
|
TypographyOverflow.displayName = 'TypographyOverflow'
|
|
151
145
|
|
|
152
|
-
TypographyOverflow.defaultProps = {
|
|
153
|
-
noWrap: true,
|
|
154
|
-
}
|
|
155
|
-
|
|
156
146
|
export default TypographyOverflow
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TypographyOverflow/styles.ts"],"names":[],"mappings":";AAEA,wBAsBI"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
export default () => createStyles({
|
|
3
|
-
multiLine: {
|
|
4
|
-
display: '-webkit-box',
|
|
5
|
-
whiteSpace: 'initial !important',
|
|
6
|
-
wordBreak: 'break-word',
|
|
7
|
-
},
|
|
8
|
-
wrapper: {
|
|
9
|
-
'-webkit-box-orient': 'vertical',
|
|
10
|
-
overflow: 'hidden',
|
|
11
|
-
textOverflow: 'ellipsis',
|
|
12
|
-
/**
|
|
13
|
-
* Workaround for `textOverflow: ellipsis`.
|
|
14
|
-
* Browser can show ellipsis at the end, even if it's not required -
|
|
15
|
-
* it's possible if the text has the very same width as the container
|
|
16
|
-
* (ellipsis width will be the same as the width of the text hidden by these ellipsis).
|
|
17
|
-
* It could be also affected by the font itself, when it has wider render bouncing borders.
|
|
18
|
-
* So to be sure, that text container in slightly wider than parent,
|
|
19
|
-
* we have to to add some super-minor space at the end.
|
|
20
|
-
*/
|
|
21
|
-
paddingRight: '0.9px',
|
|
22
|
-
},
|
|
23
|
-
});
|
|
24
|
-
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TypographyOverflow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,SAAS,EAAE;QACT,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,oBAAiC;QAC7C,SAAS,EAAE,YAAY;KACxB;IACD,OAAO,EAAE;QACP,oBAAoB,EAAE,UAAU;QAChC,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB;;;;;;;;WAQG;QACH,YAAY,EAAE,OAAO;KACtB;CACF,CAAC,CAAA"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles'
|
|
2
|
-
|
|
3
|
-
export default () =>
|
|
4
|
-
createStyles({
|
|
5
|
-
multiLine: {
|
|
6
|
-
display: '-webkit-box',
|
|
7
|
-
whiteSpace: 'initial !important' as 'initial',
|
|
8
|
-
wordBreak: 'break-word',
|
|
9
|
-
},
|
|
10
|
-
wrapper: {
|
|
11
|
-
'-webkit-box-orient': 'vertical',
|
|
12
|
-
overflow: 'hidden',
|
|
13
|
-
textOverflow: 'ellipsis',
|
|
14
|
-
/**
|
|
15
|
-
* Workaround for `textOverflow: ellipsis`.
|
|
16
|
-
* Browser can show ellipsis at the end, even if it's not required -
|
|
17
|
-
* it's possible if the text has the very same width as the container
|
|
18
|
-
* (ellipsis width will be the same as the width of the text hidden by these ellipsis).
|
|
19
|
-
* It could be also affected by the font itself, when it has wider render bouncing borders.
|
|
20
|
-
* So to be sure, that text container in slightly wider than parent,
|
|
21
|
-
* we have to to add some super-minor space at the end.
|
|
22
|
-
*/
|
|
23
|
-
paddingRight: '0.9px',
|
|
24
|
-
},
|
|
25
|
-
})
|