@semcore/ellipsis 1.1.2 → 1.1.4
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/CHANGELOG.md +8 -2
- package/lib/cjs/Ellipsis.js +18 -20
- package/lib/cjs/Ellipsis.js.map +1 -1
- package/lib/cjs/style/ellipsis.shadow.css +1 -0
- package/lib/es6/Ellipsis.js +19 -21
- package/lib/es6/Ellipsis.js.map +1 -1
- package/lib/es6/style/ellipsis.shadow.css +1 -0
- package/lib/types/Ellipsis.d.ts +4 -0
- package/lib/types/index.d.ts +2 -39
- package/lib/types/useResizeObserver.d.ts +6 -0
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [1.1.
|
|
5
|
+
## [1.1.4] - 2023-01-03
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Remove react warning with non-html props.
|
|
10
|
+
|
|
11
|
+
## [1.1.3] - 2022-12-19
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
8
14
|
|
|
9
|
-
- Version patch update due to children dependencies update (`@semcore/utils` [3.
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.44.0 ~> 3.44.1]).
|
|
10
16
|
|
|
11
17
|
## [1.1.1] - 2022-12-13
|
|
12
18
|
|
package/lib/cjs/Ellipsis.js
CHANGED
|
@@ -50,18 +50,18 @@ var style = (
|
|
|
50
50
|
/*__reshadow_css_start__*/
|
|
51
51
|
_core.sstyled.insert(
|
|
52
52
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
53
|
+
".___SContainer_ib3xt_gg_,.___SContainerMiddle_ib3xt_gg_{display:flex;overflow:hidden}.___SBeginning_ib3xt_gg_,.___SEllipsis_ib3xt_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_ib3xt_gg_.__maxLine_ib3xt_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_ib3xt);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_ib3xt_gg_{white-space:nowrap}"
|
|
54
54
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
55
|
+
, "ib3xt_gg_")
|
|
56
56
|
/*__reshadow_css_end__*/
|
|
57
57
|
, {
|
|
58
|
-
"__SContainer": "
|
|
59
|
-
"__SContainerMiddle": "
|
|
60
|
-
"__SBeginning": "
|
|
61
|
-
"__SEllipsis": "
|
|
62
|
-
"_maxLine": "
|
|
63
|
-
"--maxLine": "--
|
|
64
|
-
"__STail": "
|
|
58
|
+
"__SContainer": "___SContainer_ib3xt_gg_",
|
|
59
|
+
"__SContainerMiddle": "___SContainerMiddle_ib3xt_gg_",
|
|
60
|
+
"__SBeginning": "___SBeginning_ib3xt_gg_",
|
|
61
|
+
"__SEllipsis": "___SEllipsis_ib3xt_gg_",
|
|
62
|
+
"_maxLine": "__maxLine_ib3xt_gg_",
|
|
63
|
+
"--maxLine": "--maxLine_ib3xt",
|
|
64
|
+
"__STail": "___STail_ib3xt_gg_"
|
|
65
65
|
});
|
|
66
66
|
|
|
67
67
|
var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
@@ -80,7 +80,7 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
80
80
|
var _ref3;
|
|
81
81
|
|
|
82
82
|
var SEllipsis = this.Root;
|
|
83
|
-
var SContainer =
|
|
83
|
+
var SContainer = _tooltip["default"];
|
|
84
84
|
var _this$asProps = this.asProps,
|
|
85
85
|
styles = _this$asProps.styles,
|
|
86
86
|
Children = _this$asProps.Children,
|
|
@@ -108,19 +108,16 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
108
108
|
|
|
109
109
|
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref2.cn("SContainer", {
|
|
110
110
|
"interaction": "hover",
|
|
111
|
-
"title": text
|
|
112
|
-
"tag": _tooltip["default"]
|
|
111
|
+
"title": text
|
|
113
112
|
}), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref2.cn("SEllipsis", {
|
|
114
|
-
"
|
|
115
|
-
"
|
|
116
|
-
"tag": "div"
|
|
113
|
+
"render": _flexBox.Box,
|
|
114
|
+
"maxLine": maxLine
|
|
117
115
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {}))));
|
|
118
116
|
}
|
|
119
117
|
|
|
120
118
|
return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref3.cn("SEllipsis", {
|
|
121
|
-
"
|
|
122
|
-
"
|
|
123
|
-
"tag": "div"
|
|
119
|
+
"render": _flexBox.Box,
|
|
120
|
+
"maxLine": maxLine
|
|
124
121
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
|
|
125
122
|
}
|
|
126
123
|
}]);
|
|
@@ -161,13 +158,14 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
|
161
158
|
var rect = dateSpan.getBoundingClientRect();
|
|
162
159
|
dateSpan.remove();
|
|
163
160
|
setDimension({
|
|
164
|
-
fontSize: window
|
|
161
|
+
fontSize: window // @ts-ignore
|
|
162
|
+
.getComputedStyle((_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : resizeElement.current, null).getPropertyValue('font-size'),
|
|
165
163
|
symbolWidth: rect.width
|
|
166
164
|
});
|
|
167
165
|
}, []);
|
|
168
166
|
var STail = 'span';
|
|
169
167
|
var SBeginning = 'span';
|
|
170
|
-
var SContainerMiddle = _flexBox.
|
|
168
|
+
var SContainerMiddle = _flexBox.Box;
|
|
171
169
|
var displayedSymbols = (0, _react.useMemo)(function () {
|
|
172
170
|
return Math.round(blockWidth / dimension.symbolWidth);
|
|
173
171
|
}, [blockWidth, dimension.symbolWidth]);
|
package/lib/cjs/Ellipsis.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ellipsis.js","names":["RootEllipsis","SEllipsis","Root","SContainer","
|
|
1
|
+
{"version":3,"file":"Ellipsis.js","names":["RootEllipsis","SEllipsis","Root","SContainer","Tooltip","asProps","styles","Children","maxLine","tooltip","trim","containerRect","containerRef","text","reactToText","getOriginChildren","sstyled","Box","Component","style","EllipsisMiddle","props","resizeElement","useRef","useState","fontSize","symbolWidth","dimension","setDimension","blockWidth","useResizeObserver","width","useLayoutEffect","dateSpan","document","createElement","setAttribute","innerHTML","body","appendChild","rect","getBoundingClientRect","remove","window","getComputedStyle","current","getPropertyValue","STail","SBeginning","SContainerMiddle","displayedSymbols","useMemo","Math","round","substring","length","Ellipsis","createComponent"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n maxLine?: number;\n trim?: 'end' | 'middle';\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n text: string;\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\nclass RootEllipsis extends Component<AsProps> {\n static displayName = 'Ellipsis';\n static style = style;\n static defaultProps: AsProps = {\n trim: 'end',\n tooltip: true,\n };\n\n render() {\n const SEllipsis = this.Root;\n const SContainer = Tooltip;\n const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n const text = reactToText(getOriginChildren(Children));\n\n if (trim === 'middle') {\n return sstyled(styles)(\n <EllipsisMiddle\n text={text}\n styles={styles}\n tooltip={tooltip}\n containerRect={containerRect}\n containerRef={containerRef}\n />,\n );\n }\n if (tooltip) {\n return sstyled(styles)(\n <SContainer interaction=\"hover\" title={text}>\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>\n </SContainer>,\n );\n }\n return sstyled(styles)(\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>,\n );\n }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n const { styles, text, tooltip, containerRect, containerRef } = props;\n const resizeElement = useRef<HTMLElement | null>(null);\n const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n fontSize: '14',\n symbolWidth: 0,\n });\n const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n useLayoutEffect(() => {\n const dateSpan = document.createElement('temporary-block');\n dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n dateSpan.innerHTML = 'a';\n document.body.appendChild(dateSpan);\n const rect = dateSpan.getBoundingClientRect();\n dateSpan.remove();\n\n setDimension({\n fontSize: window\n // @ts-ignore\n .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n .getPropertyValue('font-size'),\n symbolWidth: rect.width,\n });\n }, []);\n\n const STail = 'span';\n const SBeginning = 'span';\n const SContainerMiddle = Box;\n const displayedSymbols = useMemo(\n () => Math.round(blockWidth / dimension.symbolWidth),\n [blockWidth, dimension.symbolWidth],\n );\n\n if (tooltip) {\n return sstyled(styles)(\n <SContainerMiddle\n interaction=\"hover\"\n title={text}\n ref={containerRef ?? resizeElement}\n tag={Tooltip}\n >\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n } else {\n return sstyled(styles)(\n <SContainerMiddle ref={containerRef ?? resizeElement}>\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
|
package/lib/es6/Ellipsis.js
CHANGED
|
@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
14
14
|
import React, { useRef, useMemo, useState, useLayoutEffect } from 'react';
|
|
15
15
|
import createComponent, { Component, sstyled } from '@semcore/core';
|
|
16
16
|
import Tooltip from '@semcore/tooltip';
|
|
17
|
-
import {
|
|
17
|
+
import { Box } from '@semcore/flex-box';
|
|
18
18
|
import { useResizeObserver } from './useResizeObserver';
|
|
19
19
|
|
|
20
20
|
/*__reshadow-styles__:"./style/ellipsis.shadow.css"*/
|
|
@@ -22,18 +22,18 @@ var style = (
|
|
|
22
22
|
/*__reshadow_css_start__*/
|
|
23
23
|
_sstyled.insert(
|
|
24
24
|
/*__inner_css_start__*/
|
|
25
|
-
".
|
|
25
|
+
".___SContainer_ib3xt_gg_,.___SContainerMiddle_ib3xt_gg_{display:flex;overflow:hidden}.___SBeginning_ib3xt_gg_,.___SEllipsis_ib3xt_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_ib3xt_gg_.__maxLine_ib3xt_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_ib3xt);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_ib3xt_gg_{white-space:nowrap}"
|
|
26
26
|
/*__inner_css_end__*/
|
|
27
|
-
, "
|
|
27
|
+
, "ib3xt_gg_")
|
|
28
28
|
/*__reshadow_css_end__*/
|
|
29
29
|
, {
|
|
30
|
-
"__SContainer": "
|
|
31
|
-
"__SContainerMiddle": "
|
|
32
|
-
"__SBeginning": "
|
|
33
|
-
"__SEllipsis": "
|
|
34
|
-
"_maxLine": "
|
|
35
|
-
"--maxLine": "--
|
|
36
|
-
"__STail": "
|
|
30
|
+
"__SContainer": "___SContainer_ib3xt_gg_",
|
|
31
|
+
"__SContainerMiddle": "___SContainerMiddle_ib3xt_gg_",
|
|
32
|
+
"__SBeginning": "___SBeginning_ib3xt_gg_",
|
|
33
|
+
"__SEllipsis": "___SEllipsis_ib3xt_gg_",
|
|
34
|
+
"_maxLine": "__maxLine_ib3xt_gg_",
|
|
35
|
+
"--maxLine": "--maxLine_ib3xt",
|
|
36
|
+
"__STail": "___STail_ib3xt_gg_"
|
|
37
37
|
});
|
|
38
38
|
import reactToText from '@semcore/utils/lib/reactToText';
|
|
39
39
|
import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
|
|
@@ -55,7 +55,7 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
55
55
|
var _ref3;
|
|
56
56
|
|
|
57
57
|
var SEllipsis = this.Root;
|
|
58
|
-
var SContainer =
|
|
58
|
+
var SContainer = Tooltip;
|
|
59
59
|
var _this$asProps = this.asProps,
|
|
60
60
|
styles = _this$asProps.styles,
|
|
61
61
|
Children = _this$asProps.Children,
|
|
@@ -83,19 +83,16 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
|
|
|
83
83
|
|
|
84
84
|
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref2.cn("SContainer", {
|
|
85
85
|
"interaction": "hover",
|
|
86
|
-
"title": text
|
|
87
|
-
"tag": Tooltip
|
|
86
|
+
"title": text
|
|
88
87
|
}), /*#__PURE__*/React.createElement(SEllipsis, _ref2.cn("SEllipsis", {
|
|
89
|
-
"
|
|
90
|
-
"
|
|
91
|
-
"tag": "div"
|
|
88
|
+
"render": Box,
|
|
89
|
+
"maxLine": maxLine
|
|
92
90
|
}), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {}))));
|
|
93
91
|
}
|
|
94
92
|
|
|
95
93
|
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref3.cn("SEllipsis", {
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
-
"tag": "div"
|
|
94
|
+
"render": Box,
|
|
95
|
+
"maxLine": maxLine
|
|
99
96
|
}), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
|
|
100
97
|
}
|
|
101
98
|
}]);
|
|
@@ -139,13 +136,14 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
|
|
|
139
136
|
var rect = dateSpan.getBoundingClientRect();
|
|
140
137
|
dateSpan.remove();
|
|
141
138
|
setDimension({
|
|
142
|
-
fontSize: window
|
|
139
|
+
fontSize: window // @ts-ignore
|
|
140
|
+
.getComputedStyle((_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : resizeElement.current, null).getPropertyValue('font-size'),
|
|
143
141
|
symbolWidth: rect.width
|
|
144
142
|
});
|
|
145
143
|
}, []);
|
|
146
144
|
var STail = 'span';
|
|
147
145
|
var SBeginning = 'span';
|
|
148
|
-
var SContainerMiddle =
|
|
146
|
+
var SContainerMiddle = Box;
|
|
149
147
|
var displayedSymbols = useMemo(function () {
|
|
150
148
|
return Math.round(blockWidth / dimension.symbolWidth);
|
|
151
149
|
}, [blockWidth, dimension.symbolWidth]);
|
package/lib/es6/Ellipsis.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","
|
|
1
|
+
{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","Box","useResizeObserver","reactToText","getOriginChildren","RootEllipsis","SEllipsis","Root","SContainer","asProps","styles","Children","maxLine","tooltip","trim","containerRect","containerRef","text","style","EllipsisMiddle","props","resizeElement","fontSize","symbolWidth","dimension","setDimension","blockWidth","width","dateSpan","document","createElement","setAttribute","innerHTML","body","appendChild","rect","getBoundingClientRect","remove","window","getComputedStyle","current","getPropertyValue","STail","SBeginning","SContainerMiddle","displayedSymbols","Math","round","substring","length","Ellipsis"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n maxLine?: number;\n trim?: 'end' | 'middle';\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n text: string;\n tooltip?: boolean;\n styles?: React.CSSProperties;\n containerRect?: { width: number };\n // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n containerRef?: RefObject<HTMLElement | null>;\n};\n\nclass RootEllipsis extends Component<AsProps> {\n static displayName = 'Ellipsis';\n static style = style;\n static defaultProps: AsProps = {\n trim: 'end',\n tooltip: true,\n };\n\n render() {\n const SEllipsis = this.Root;\n const SContainer = Tooltip;\n const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n const text = reactToText(getOriginChildren(Children));\n\n if (trim === 'middle') {\n return sstyled(styles)(\n <EllipsisMiddle\n text={text}\n styles={styles}\n tooltip={tooltip}\n containerRect={containerRect}\n containerRef={containerRef}\n />,\n );\n }\n if (tooltip) {\n return sstyled(styles)(\n <SContainer interaction=\"hover\" title={text}>\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>\n </SContainer>,\n );\n }\n return sstyled(styles)(\n <SEllipsis render={Box} maxLine={maxLine}>\n <Children />\n </SEllipsis>,\n );\n }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n const { styles, text, tooltip, containerRect, containerRef } = props;\n const resizeElement = useRef<HTMLElement | null>(null);\n const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n fontSize: '14',\n symbolWidth: 0,\n });\n const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n useLayoutEffect(() => {\n const dateSpan = document.createElement('temporary-block');\n dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n dateSpan.innerHTML = 'a';\n document.body.appendChild(dateSpan);\n const rect = dateSpan.getBoundingClientRect();\n dateSpan.remove();\n\n setDimension({\n fontSize: window\n // @ts-ignore\n .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n .getPropertyValue('font-size'),\n symbolWidth: rect.width,\n });\n }, []);\n\n const STail = 'span';\n const SBeginning = 'span';\n const SContainerMiddle = Box;\n const displayedSymbols = useMemo(\n () => Math.round(blockWidth / dimension.symbolWidth),\n [blockWidth, dimension.symbolWidth],\n );\n\n if (tooltip) {\n return sstyled(styles)(\n <SContainerMiddle\n interaction=\"hover\"\n title={text}\n ref={containerRef ?? resizeElement}\n tag={Tooltip}\n >\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n } else {\n return sstyled(styles)(\n <SContainerMiddle ref={containerRef ?? resizeElement}>\n <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n </SContainerMiddle>,\n ) as any;\n }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,39 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export interface IEllipsisProps {
|
|
5
|
-
/**
|
|
6
|
-
* Rows count in multiline Ellipsis
|
|
7
|
-
* @default 1
|
|
8
|
-
*/
|
|
9
|
-
maxLine?: number;
|
|
10
|
-
/**
|
|
11
|
-
* Trimming type
|
|
12
|
-
* @default end
|
|
13
|
-
*/
|
|
14
|
-
trim?: 'end' | 'middle';
|
|
15
|
-
/**
|
|
16
|
-
* Show tooltip
|
|
17
|
-
* @default true
|
|
18
|
-
*/
|
|
19
|
-
tooltip?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Ref to the item that will be observed by ResizeObserver
|
|
22
|
-
*/
|
|
23
|
-
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
|
|
24
|
-
containerRef?: RefObject<HTMLElement | null>;
|
|
25
|
-
/**
|
|
26
|
-
* Explicit sizes of container text should be trimmed in
|
|
27
|
-
**/
|
|
28
|
-
containerRect?: { width: number };
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
declare const useResizeObserver: (
|
|
32
|
-
ref: RefObject<HTMLElement>,
|
|
33
|
-
hookOverride?: { width: number },
|
|
34
|
-
) => { width: number };
|
|
35
|
-
|
|
36
|
-
declare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;
|
|
37
|
-
|
|
38
|
-
export { useResizeObserver };
|
|
39
|
-
export default Ellipsis;
|
|
1
|
+
export { default } from './Ellipsis';
|
|
2
|
+
export { useResizeObserver } from './useResizeObserver';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/ellipsis",
|
|
3
3
|
"description": "Semrush Ellipsis Component",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.4",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"react-dom": "16.8 - 18"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
+
"@types/react": "18.0.21",
|
|
23
24
|
"@semcore/jest-preset-ui": "1.0.0"
|
|
24
25
|
},
|
|
25
26
|
"repository": {
|
|
@@ -31,7 +32,7 @@
|
|
|
31
32
|
"preset": "@semcore/jest-preset-ui"
|
|
32
33
|
},
|
|
33
34
|
"scripts": {
|
|
34
|
-
"build": "pnpm semcore-builder
|
|
35
|
+
"build": "pnpm semcore-builder",
|
|
35
36
|
"test": "jest"
|
|
36
37
|
}
|
|
37
38
|
}
|