@semcore/ellipsis 2.40.0-prerelease.5 → 2.40.0-prerelease.6
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/lib/cjs/Ellipsis.js +142 -75
- package/lib/cjs/Ellipsis.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/ellipsis.shadow.css +8 -8
- package/lib/cjs/useResizeObserver.js +5 -4
- package/lib/cjs/useResizeObserver.js.map +1 -1
- package/lib/es6/Ellipsis.js +136 -71
- package/lib/es6/Ellipsis.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/ellipsis.shadow.css +8 -8
- package/lib/es6/useResizeObserver.js +2 -2
- package/lib/es6/useResizeObserver.js.map +1 -1
- package/lib/esm/Ellipsis.mjs +135 -70
- package/lib/esm/style/ellipsis.shadow.css +8 -8
- package/lib/esm/useResizeObserver.mjs +2 -2
- package/lib/types/index.d.ts +9 -12
- package/package.json +5 -5
- package/lib/cjs/utils.js +0 -53
- package/lib/cjs/utils.js.map +0 -1
- package/lib/es6/utils.js +0 -46
- package/lib/es6/utils.js.map +0 -1
- package/lib/esm/utils.mjs +0 -47
package/lib/esm/Ellipsis.mjs
CHANGED
|
@@ -3,70 +3,112 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
|
|
|
3
3
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
4
4
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
5
5
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
6
|
-
import
|
|
6
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
7
7
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
8
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
8
9
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
9
|
-
import { sstyled
|
|
10
|
-
import {
|
|
11
|
-
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
12
|
-
import findComponent, { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
|
|
13
|
-
import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
|
|
14
|
-
import pick from "@semcore/core/lib/utils/pick";
|
|
15
|
-
import reactToText from "@semcore/core/lib/utils/reactToText";
|
|
16
|
-
import { forkRef } from "@semcore/core/lib/utils/ref";
|
|
17
|
-
import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
|
|
18
|
-
import Tooltip from "@semcore/tooltip";
|
|
10
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
11
|
+
import createComponent, { sstyled as sstyled$1, Component, assignProps } from "@semcore/core";
|
|
19
12
|
import React from "react";
|
|
13
|
+
import Tooltip from "@semcore/tooltip";
|
|
14
|
+
import { Box } from "@semcore/flex-box";
|
|
20
15
|
import { useResizeObserver } from "./useResizeObserver.mjs";
|
|
21
|
-
import
|
|
22
|
-
|
|
16
|
+
import useEnhancedEffect from "@semcore/utils/lib/use/useEnhancedEffect";
|
|
17
|
+
import findComponent, { isAdvanceMode } from "@semcore/utils/lib/findComponent";
|
|
18
|
+
import reactToText from "@semcore/utils/lib/reactToText";
|
|
19
|
+
import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
|
|
20
|
+
import pick from "@semcore/utils/lib/pick";
|
|
21
|
+
import { forkRef } from "@semcore/utils/lib/ref";
|
|
22
|
+
import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
|
|
23
|
+
var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"], _excluded2 = ["styles", "text", "tooltip", "containerRect", "containerRef", "textRef", "tooltipProps", "children", "advanceMode"];
|
|
23
24
|
/*!__reshadow-styles__:"./style/ellipsis.shadow.css"*/
|
|
24
25
|
var style = (
|
|
25
26
|
/*__reshadow_css_start__*/
|
|
26
27
|
(sstyled.insert(
|
|
27
28
|
/*__inner_css_start__*/
|
|
28
|
-
".
|
|
29
|
+
".___SContainerMiddle_vwpmx_gg_,.___SContainer_vwpmx_gg_,.___SEllipsis_vwpmx_gg_.__middle-mod_vwpmx_gg_,.___SNoTooltipContainer_vwpmx_gg_{display:flex;overflow:hidden}.___SBeginning_vwpmx_gg_,.___SEllipsis_vwpmx_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_vwpmx_gg_.__maxLine_vwpmx_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_vwpmx);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_vwpmx_gg_>:has(.___SBeginning_vwpmx_gg_),.___SContainerMiddle_vwpmx_gg_>:has(.___STail_vwpmx_gg_){display:flex;width:100%}.___STail_vwpmx_gg_{white-space:pre}",
|
|
29
30
|
/*__inner_css_end__*/
|
|
30
|
-
"
|
|
31
|
+
"vwpmx_gg_"
|
|
31
32
|
), /*__reshadow_css_end__*/
|
|
32
33
|
{
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"__STail": "
|
|
34
|
+
"__SContainer": "___SContainer_vwpmx_gg_",
|
|
35
|
+
"__SNoTooltipContainer": "___SNoTooltipContainer_vwpmx_gg_",
|
|
36
|
+
"__SContainerMiddle": "___SContainerMiddle_vwpmx_gg_",
|
|
37
|
+
"__SBeginning": "___SBeginning_vwpmx_gg_",
|
|
38
|
+
"__SEllipsis": "___SEllipsis_vwpmx_gg_",
|
|
39
|
+
"_middle-mod": "__middle-mod_vwpmx_gg_",
|
|
40
|
+
"_maxLine": "__maxLine_vwpmx_gg_",
|
|
41
|
+
"--maxLine": "--maxLine_vwpmx",
|
|
42
|
+
"__STail": "___STail_vwpmx_gg_"
|
|
42
43
|
})
|
|
43
44
|
);
|
|
44
45
|
var defaultTooltipProps = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate", "cursorAnchoring"];
|
|
46
|
+
var createMeasurerElement = function createMeasurerElement2(element, text) {
|
|
47
|
+
var styleElement = window.getComputedStyle(element, null);
|
|
48
|
+
var temporaryElement = document.createElement("temporary-block");
|
|
49
|
+
temporaryElement.style.display = styleElement.getPropertyValue("display");
|
|
50
|
+
temporaryElement.style.padding = styleElement.getPropertyValue("padding");
|
|
51
|
+
temporaryElement.style.position = "absolute";
|
|
52
|
+
temporaryElement.style.right = "0%";
|
|
53
|
+
temporaryElement.style.bottom = "0%";
|
|
54
|
+
temporaryElement.style.visibility = "hidden";
|
|
55
|
+
temporaryElement.style.fontFamily = styleElement.getPropertyValue("font-family");
|
|
56
|
+
temporaryElement.style.fontSize = styleElement.getPropertyValue("font-size");
|
|
57
|
+
temporaryElement.style.fontWeight = styleElement.getPropertyValue("font-weight");
|
|
58
|
+
temporaryElement.style.lineHeight = styleElement.getPropertyValue("line-height");
|
|
59
|
+
temporaryElement.style.whiteSpace = styleElement.getPropertyValue("white-space");
|
|
60
|
+
temporaryElement.style.wordWrap = styleElement.getPropertyValue("word-wrap");
|
|
61
|
+
temporaryElement.style.fontFeatureSettings = styleElement.getPropertyValue("font-feature-settings");
|
|
62
|
+
temporaryElement.style.fontVariantNumeric = styleElement.getPropertyValue("font-variant-numeric");
|
|
63
|
+
temporaryElement.innerHTML = text !== null && text !== void 0 ? text : element.innerHTML;
|
|
64
|
+
return temporaryElement;
|
|
65
|
+
};
|
|
66
|
+
function isTextOverflowing(element, multiline, text) {
|
|
67
|
+
if (!element) return false;
|
|
68
|
+
var _element$getBoundingC = element.getBoundingClientRect(), currentHeight = _element$getBoundingC.height, currentWidth = _element$getBoundingC.width;
|
|
69
|
+
var measuringElement = createMeasurerElement(element, text);
|
|
70
|
+
var isOverflowing = false;
|
|
71
|
+
document.body.appendChild(measuringElement);
|
|
72
|
+
if (multiline) {
|
|
73
|
+
measuringElement.style.width = "".concat(currentWidth, "px");
|
|
74
|
+
var width = measuringElement.scrollWidth;
|
|
75
|
+
var height = measuringElement.getBoundingClientRect().height;
|
|
76
|
+
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
77
|
+
isOverflowing = true;
|
|
78
|
+
}
|
|
79
|
+
} else {
|
|
80
|
+
measuringElement.style.whiteSpace = "nowrap";
|
|
81
|
+
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
82
|
+
}
|
|
83
|
+
document.body.removeChild(measuringElement);
|
|
84
|
+
return isOverflowing;
|
|
85
|
+
}
|
|
45
86
|
var forcedAdvancedMode = {
|
|
46
87
|
forcedAdvancedMode: true
|
|
47
88
|
};
|
|
48
89
|
var noAdvancedMode = {};
|
|
49
|
-
var RootEllipsis = /* @__PURE__ */
|
|
90
|
+
var RootEllipsis = /* @__PURE__ */ function(_Component) {
|
|
91
|
+
_inherits(RootEllipsis2, _Component);
|
|
92
|
+
var _super = _createSuper(RootEllipsis2);
|
|
50
93
|
function RootEllipsis2() {
|
|
51
94
|
var _this;
|
|
52
95
|
_classCallCheck(this, RootEllipsis2);
|
|
53
96
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
54
97
|
args[_key] = arguments[_key];
|
|
55
98
|
}
|
|
56
|
-
_this =
|
|
57
|
-
_defineProperty(_this, "state", {
|
|
99
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
100
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
58
101
|
visible: false
|
|
59
102
|
});
|
|
60
|
-
_defineProperty(_this, "textRef", /* @__PURE__ */ React.createRef());
|
|
61
|
-
_defineProperty(_this, "handlerVisibleChange", function(visible) {
|
|
103
|
+
_defineProperty(_assertThisInitialized(_this), "textRef", /* @__PURE__ */ React.createRef());
|
|
104
|
+
_defineProperty(_assertThisInitialized(_this), "handlerVisibleChange", function(visible) {
|
|
62
105
|
_this.setState({
|
|
63
106
|
visible: visible && _this.showTooltip()
|
|
64
107
|
});
|
|
65
108
|
});
|
|
66
109
|
return _this;
|
|
67
110
|
}
|
|
68
|
-
|
|
69
|
-
return _createClass(RootEllipsis2, [{
|
|
111
|
+
_createClass(RootEllipsis2, [{
|
|
70
112
|
key: "showTooltip",
|
|
71
113
|
value: function showTooltip() {
|
|
72
114
|
var _this$asProps = this.asProps, _this$asProps$maxLine = _this$asProps.maxLine, maxLine = _this$asProps$maxLine === void 0 ? 1 : _this$asProps$maxLine, Children = _this$asProps.Children;
|
|
@@ -94,10 +136,13 @@ var RootEllipsis = /* @__PURE__ */ (function(_Component) {
|
|
|
94
136
|
}, {
|
|
95
137
|
key: "render",
|
|
96
138
|
value: function render() {
|
|
97
|
-
var
|
|
139
|
+
var _ref4, _tooltipProps$visible;
|
|
98
140
|
var SEllipsis = this.Root;
|
|
99
141
|
var SContainer = Tooltip;
|
|
100
|
-
var
|
|
142
|
+
var SNoTooltipContainer = Box;
|
|
143
|
+
var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, Children = _this$asProps3.Children, maxLine = _this$asProps3.maxLine, tooltip = _this$asProps3.tooltip, trim = _this$asProps3.trim, containerRect = _this$asProps3.containerRect, containerRef = _this$asProps3.containerRef, includeTooltipProps = _this$asProps3.includeTooltipProps;
|
|
144
|
+
_this$asProps3.children;
|
|
145
|
+
var other = _objectWithoutProperties(_this$asProps3, _excluded);
|
|
101
146
|
var visible = this.state.visible;
|
|
102
147
|
var advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
|
|
103
148
|
var text = reactToText(advancedContent || getOriginChildren(Children));
|
|
@@ -107,7 +152,7 @@ var RootEllipsis = /* @__PURE__ */ (function(_Component) {
|
|
|
107
152
|
tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
|
|
108
153
|
if (trim === "middle") {
|
|
109
154
|
var _ref2;
|
|
110
|
-
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
|
|
155
|
+
return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
|
|
111
156
|
"text": text,
|
|
112
157
|
"styles": styles,
|
|
113
158
|
"tooltip": tooltip,
|
|
@@ -118,17 +163,26 @@ var RootEllipsis = /* @__PURE__ */ (function(_Component) {
|
|
|
118
163
|
"advanceMode": advanceMode
|
|
119
164
|
}, other)), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
|
|
120
165
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
166
|
+
if (tooltip) {
|
|
167
|
+
var _ref3;
|
|
168
|
+
return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainer, _ref3.cn("SContainer", _objectSpread(_objectSpread({
|
|
169
|
+
"interaction": "hover",
|
|
170
|
+
"title": !advanceMode ? text : void 0
|
|
171
|
+
}, tooltipProps), advanceMode ? forcedAdvancedMode : noAdvancedMode)), advanceMode ? /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})) : /* @__PURE__ */ React.createElement(SEllipsis, _ref3.cn("SEllipsis", _objectSpread({
|
|
172
|
+
"render": Box,
|
|
173
|
+
"ref": this.textRef,
|
|
174
|
+
"maxLine": maxLine
|
|
175
|
+
}, other)), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
|
|
176
|
+
}
|
|
177
|
+
return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SNoTooltipContainer, _ref4.cn("SNoTooltipContainer", {}), advanceMode ? /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})) : /* @__PURE__ */ React.createElement(SEllipsis, _ref4.cn("SEllipsis", _objectSpread({
|
|
125
178
|
"render": Box,
|
|
126
179
|
"ref": this.textRef,
|
|
127
180
|
"maxLine": maxLine
|
|
128
|
-
}, other)), /* @__PURE__ */ React.createElement(Children,
|
|
181
|
+
}, other)), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))));
|
|
129
182
|
}
|
|
130
183
|
}]);
|
|
131
|
-
|
|
184
|
+
return RootEllipsis2;
|
|
185
|
+
}(Component);
|
|
132
186
|
_defineProperty(RootEllipsis, "displayName", "Ellipsis");
|
|
133
187
|
_defineProperty(RootEllipsis, "style", style);
|
|
134
188
|
_defineProperty(RootEllipsis, "defaultProps", {
|
|
@@ -138,32 +192,36 @@ _defineProperty(RootEllipsis, "defaultProps", {
|
|
|
138
192
|
__excludeProps: ["title"]
|
|
139
193
|
});
|
|
140
194
|
var EllipsisMiddleContext = /* @__PURE__ */ React.createContext(null);
|
|
141
|
-
function
|
|
142
|
-
var
|
|
143
|
-
var styles = props.styles, text = props.text, tooltip = props.tooltip, containerRect = props.containerRect, containerRef = props.containerRef, textRef = props.textRef, tooltipProps = props.tooltipProps, children = props.children, advanceMode = props.advanceMode,
|
|
195
|
+
var EllipsisMiddle = function EllipsisMiddle2(props) {
|
|
196
|
+
var _ref7;
|
|
197
|
+
var styles = props.styles, text = props.text, tooltip = props.tooltip, containerRect = props.containerRect, containerRef = props.containerRef, textRef = props.textRef, tooltipProps = props.tooltipProps, children = props.children, advanceMode = props.advanceMode, otherProps = _objectWithoutProperties(props, _excluded2);
|
|
144
198
|
var resizeElement = React.useRef(null);
|
|
145
|
-
var _React$useState = React.useState(
|
|
199
|
+
var _React$useState = React.useState({
|
|
200
|
+
fontSize: "14",
|
|
201
|
+
symbolWidth: 0
|
|
202
|
+
}), _React$useState2 = _slicedToArray(_React$useState, 2), dimension = _React$useState2[0], setDimension = _React$useState2[1];
|
|
146
203
|
var blockWidth = useResizeObserver(resizeElement, containerRect).width;
|
|
147
204
|
useEnhancedEffect(function() {
|
|
148
205
|
var node = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || (resizeElement === null || resizeElement === void 0 ? void 0 : resizeElement.current);
|
|
149
206
|
if (!node) return;
|
|
150
|
-
var styleElement = window.getComputedStyle(node);
|
|
151
207
|
var dateSpan = document.createElement("temporary-block");
|
|
152
|
-
|
|
153
|
-
dateSpan.
|
|
208
|
+
dateSpan.setAttribute("style", "fontSize: ".concat(dimension.fontSize, "px"));
|
|
209
|
+
dateSpan.innerHTML = "a";
|
|
154
210
|
document.body.appendChild(dateSpan);
|
|
155
211
|
var rect = dateSpan.getBoundingClientRect();
|
|
156
|
-
|
|
212
|
+
setDimension({
|
|
213
|
+
fontSize: window.getComputedStyle(node, null).getPropertyValue("font-size"),
|
|
214
|
+
symbolWidth: rect.width
|
|
215
|
+
});
|
|
157
216
|
document.body.removeChild(dateSpan);
|
|
158
217
|
}, []);
|
|
159
218
|
var STail = "span";
|
|
160
219
|
var SBeginning = "span";
|
|
161
|
-
var SContainerMiddle =
|
|
220
|
+
var SContainerMiddle = props.tag || Box;
|
|
162
221
|
var SAdvancedModeContainerMiddle = Tooltip;
|
|
163
222
|
var displayedSymbols = React.useMemo(function() {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}, [blockWidth, symbolWidth]);
|
|
223
|
+
return Math.round(blockWidth / dimension.symbolWidth);
|
|
224
|
+
}, [blockWidth, dimension.symbolWidth]);
|
|
167
225
|
var interaction = text.length > displayedSymbols ? "hover" : "none";
|
|
168
226
|
var ref = containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement;
|
|
169
227
|
var contextValue = React.useMemo(function() {
|
|
@@ -174,37 +232,44 @@ function EllipsisMiddle(props) {
|
|
|
174
232
|
};
|
|
175
233
|
}, [text, displayedSymbols]);
|
|
176
234
|
if (advanceMode) {
|
|
177
|
-
var
|
|
178
|
-
return
|
|
179
|
-
"interaction":
|
|
235
|
+
var _ref5;
|
|
236
|
+
return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAdvancedModeContainerMiddle, _ref5.cn("SAdvancedModeContainerMiddle", _objectSpread(_objectSpread({
|
|
237
|
+
"interaction": interaction
|
|
180
238
|
}, tooltipProps), forcedAdvancedMode)), /* @__PURE__ */ React.createElement(EllipsisMiddleContext.Provider, {
|
|
181
239
|
value: contextValue
|
|
182
240
|
}, children));
|
|
183
241
|
}
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
"
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
242
|
+
if (tooltip) {
|
|
243
|
+
var _ref6;
|
|
244
|
+
return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref6.cn("SContainerMiddle", _objectSpread({
|
|
245
|
+
"interaction": interaction,
|
|
246
|
+
"title": text,
|
|
247
|
+
"ref": forkRef(ref, textRef),
|
|
248
|
+
"tag": Tooltip,
|
|
249
|
+
"__excludeProps": ["title"]
|
|
250
|
+
}, tooltipProps)), /* @__PURE__ */ React.createElement(SBeginning, _ref6.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref6.cn("STail", {}), contextValue.tail));
|
|
251
|
+
}
|
|
252
|
+
return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref7.cn("SContainerMiddle", _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
253
|
+
"ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement
|
|
254
|
+
})), /* @__PURE__ */ React.createElement(SBeginning, _ref7.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref7.cn("STail", {}), contextValue.tail));
|
|
255
|
+
};
|
|
256
|
+
var Content = function Content2(_ref10) {
|
|
257
|
+
var _ref = arguments[0], _ref9;
|
|
258
|
+
var styles = _ref10.styles, Children = _ref10.Children;
|
|
194
259
|
var SEllipsis = Tooltip.Trigger;
|
|
195
260
|
var ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
|
|
196
261
|
var STail = "span";
|
|
197
262
|
var SBeginning = "span";
|
|
198
263
|
if (ellipsisMiddleContext) {
|
|
199
|
-
var
|
|
264
|
+
var _ref8;
|
|
200
265
|
var begining = ellipsisMiddleContext.begining, tail = ellipsisMiddleContext.tail, ref = ellipsisMiddleContext.ref;
|
|
201
|
-
return
|
|
266
|
+
return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref8.cn("SEllipsis", _objectSpread({}, assignProps({
|
|
202
267
|
"middle-mod": true,
|
|
203
268
|
"ref": ref
|
|
204
|
-
}, _ref))), /* @__PURE__ */ React.createElement(SBeginning,
|
|
269
|
+
}, _ref))), /* @__PURE__ */ React.createElement(SBeginning, _ref8.cn("SBeginning", {}), begining), /* @__PURE__ */ React.createElement(STail, _ref8.cn("STail", {}), tail));
|
|
205
270
|
}
|
|
206
|
-
return
|
|
207
|
-
}
|
|
271
|
+
return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref9.cn("SEllipsis", _objectSpread({}, assignProps({}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
|
|
272
|
+
};
|
|
208
273
|
var Ellipsis = createComponent(RootEllipsis, {
|
|
209
274
|
Content,
|
|
210
275
|
Popper: Tooltip.Popper
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
SContainer,
|
|
2
|
+
SNoTooltipContainer,
|
|
3
|
+
SContainerMiddle {
|
|
4
|
+
display: flex;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
|
|
1
8
|
SBeginning,
|
|
2
9
|
SEllipsis {
|
|
3
10
|
overflow: hidden;
|
|
@@ -6,9 +13,7 @@ SEllipsis {
|
|
|
6
13
|
white-space: pre;
|
|
7
14
|
}
|
|
8
15
|
|
|
9
|
-
|
|
10
|
-
SNoTooltipContainer,
|
|
11
|
-
SContainerMiddle {
|
|
16
|
+
SEllipsis[middle-mod] {
|
|
12
17
|
display: flex;
|
|
13
18
|
overflow: hidden;
|
|
14
19
|
}
|
|
@@ -22,11 +27,6 @@ SEllipsis[maxLine] {
|
|
|
22
27
|
overflow-wrap: break-word;
|
|
23
28
|
}
|
|
24
29
|
|
|
25
|
-
SEllipsis[middle-mod] {
|
|
26
|
-
display: flex;
|
|
27
|
-
overflow: hidden;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
30
|
SContainerMiddle> :has(SBeginning),
|
|
31
31
|
SContainerMiddle> :has(STail) {
|
|
32
32
|
display: flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
|
|
3
|
-
import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
|
|
4
2
|
import React from "react";
|
|
3
|
+
import useEnhancedEffect from "@semcore/utils/lib/use/useEnhancedEffect";
|
|
4
|
+
import canUseDOM from "@semcore/utils/lib/canUseDOM";
|
|
5
5
|
var useResizeObserver = function useResizeObserver2(ref, hookOverride) {
|
|
6
6
|
var _React$useState = React.useState(0), _React$useState2 = _slicedToArray(_React$useState, 2), width = _React$useState2[0], setWidth = _React$useState2[1];
|
|
7
7
|
var handleResize = React.useCallback(function(entries) {
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import type { RefObject } from 'react';
|
|
1
|
+
import { UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import { RefObject } from 'react';
|
|
3
|
+
import { Box, BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import Tooltip, { TooltipProps } from '@semcore/tooltip';
|
|
6
5
|
|
|
6
|
+
/** @deprecated */
|
|
7
|
+
export interface IEllipsisProps extends EllipsisProps, UnknownProperties {}
|
|
7
8
|
export type EllipsisProps = BoxProps &
|
|
8
9
|
Partial<TooltipProps> & {
|
|
9
10
|
/**
|
|
10
|
-
* Rows count in multiline Ellipsis
|
|
11
|
-
* Applies only for `trim = end`
|
|
11
|
+
* Rows count in multiline Ellipsis
|
|
12
12
|
* @default 1
|
|
13
13
|
*/
|
|
14
14
|
maxLine?: number;
|
|
@@ -40,14 +40,11 @@ declare const useResizeObserver: (
|
|
|
40
40
|
ref: RefObject<HTMLElement>,
|
|
41
41
|
hookOverride?: { width: number },
|
|
42
42
|
) => { width: number };
|
|
43
|
-
|
|
44
|
-
* @deprecated. Use Text with ellipsis property for @semcore/typography.
|
|
45
|
-
*/
|
|
43
|
+
|
|
46
44
|
declare const Ellipsis: Intergalactic.Component<'div', EllipsisProps> & {
|
|
47
45
|
Content: typeof Box;
|
|
48
46
|
Popper: typeof Tooltip.Popper;
|
|
49
47
|
};
|
|
50
48
|
|
|
51
|
-
export default Ellipsis;
|
|
52
|
-
|
|
53
49
|
export { useResizeObserver };
|
|
50
|
+
export default Ellipsis;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/ellipsis",
|
|
3
3
|
"description": "Semrush Ellipsis Component",
|
|
4
|
-
"version": "2.40.0-prerelease.
|
|
4
|
+
"version": "2.40.0-prerelease.6",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
18
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
19
|
-
"@semcore/tooltip": "6.50.0-prerelease.
|
|
17
|
+
"@semcore/utils": "4.49.0-prerelease.6",
|
|
18
|
+
"@semcore/flex-box": "5.42.0-prerelease.6",
|
|
19
|
+
"@semcore/tooltip": "6.50.0-prerelease.6"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
22
|
+
"@semcore/core": "^2.40.0-prerelease.6",
|
|
23
23
|
"react": "16.8 - 18",
|
|
24
24
|
"react-dom": "16.8 - 18"
|
|
25
25
|
},
|
package/lib/cjs/utils.js
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.isTextOverflowing = isTextOverflowing;
|
|
7
|
-
exports.setFontSettings = void 0;
|
|
8
|
-
var setFontSettings = exports.setFontSettings = function setFontSettings(element, styleElement) {
|
|
9
|
-
element.style.fontFamily = styleElement.getPropertyValue('font-family');
|
|
10
|
-
element.style.fontSize = styleElement.getPropertyValue('font-size');
|
|
11
|
-
element.style.fontWeight = styleElement.getPropertyValue('font-weight');
|
|
12
|
-
element.style.lineHeight = styleElement.getPropertyValue('line-height');
|
|
13
|
-
element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
|
|
14
|
-
element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
|
|
15
|
-
};
|
|
16
|
-
function isTextOverflowing(element, multiline, text) {
|
|
17
|
-
if (!element) return false;
|
|
18
|
-
var _element$getBoundingC = element.getBoundingClientRect(),
|
|
19
|
-
currentHeight = _element$getBoundingC.height,
|
|
20
|
-
currentWidth = _element$getBoundingC.width;
|
|
21
|
-
var measuringElement = createMeasurerElement(element, text);
|
|
22
|
-
var isOverflowing = false;
|
|
23
|
-
document.body.appendChild(measuringElement);
|
|
24
|
-
if (multiline) {
|
|
25
|
-
measuringElement.style.width = "".concat(currentWidth, "px");
|
|
26
|
-
var width = measuringElement.scrollWidth;
|
|
27
|
-
var height = measuringElement.getBoundingClientRect().height;
|
|
28
|
-
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
29
|
-
isOverflowing = true;
|
|
30
|
-
}
|
|
31
|
-
} else {
|
|
32
|
-
measuringElement.style.whiteSpace = 'nowrap';
|
|
33
|
-
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
34
|
-
}
|
|
35
|
-
document.body.removeChild(measuringElement);
|
|
36
|
-
return isOverflowing;
|
|
37
|
-
}
|
|
38
|
-
function createMeasurerElement(element, text) {
|
|
39
|
-
var styleElement = window.getComputedStyle(element, null);
|
|
40
|
-
var temporaryElement = document.createElement('temporary-block');
|
|
41
|
-
temporaryElement.style.display = styleElement.getPropertyValue('display');
|
|
42
|
-
temporaryElement.style.padding = styleElement.getPropertyValue('padding');
|
|
43
|
-
temporaryElement.style.position = 'absolute';
|
|
44
|
-
temporaryElement.style.right = '0%';
|
|
45
|
-
temporaryElement.style.bottom = '0%';
|
|
46
|
-
temporaryElement.style.visibility = 'hidden';
|
|
47
|
-
temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
|
|
48
|
-
temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
|
|
49
|
-
setFontSettings(temporaryElement, styleElement);
|
|
50
|
-
temporaryElement.textContent = text !== null && text !== void 0 ? text : element.textContent;
|
|
51
|
-
return temporaryElement;
|
|
52
|
-
}
|
|
53
|
-
//# sourceMappingURL=utils.js.map
|
package/lib/cjs/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["setFontSettings","exports","element","styleElement","style","fontFamily","getPropertyValue","fontSize","fontWeight","lineHeight","fontFeatureSettings","fontVariantNumeric","isTextOverflowing","multiline","text","_element$getBoundingC","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","createMeasurerElement","isOverflowing","document","body","appendChild","concat","scrollWidth","Math","ceil","whiteSpace","removeChild","window","getComputedStyle","temporaryElement","createElement","display","padding","position","right","bottom","visibility","wordWrap","textContent"],"sources":["../../src/utils.ts"],"sourcesContent":["export const setFontSettings = (element: HTMLElement, styleElement: CSSStyleDeclaration): void => {\n element.style.fontFamily = styleElement.getPropertyValue('font-family');\n element.style.fontSize = styleElement.getPropertyValue('font-size');\n element.style.fontWeight = styleElement.getPropertyValue('font-weight');\n element.style.lineHeight = styleElement.getPropertyValue('line-height');\n element.style.fontFeatureSettings =\n styleElement.getPropertyValue('font-feature-settings');\n element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');\n};\n\nexport function isTextOverflowing(element: HTMLElement | null, multiline: boolean, text: string): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element, text);\n let isOverflowing = false;\n\n document.body.appendChild(measuringElement);\n if (multiline) {\n measuringElement.style.width = `${currentWidth}px`;\n\n const width = measuringElement.scrollWidth;\n const height = measuringElement.getBoundingClientRect().height;\n\n if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {\n isOverflowing = true;\n }\n } else {\n measuringElement.style.whiteSpace = 'nowrap';\n isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;\n }\n\n document.body.removeChild(measuringElement);\n\n return isOverflowing;\n}\n\nfunction createMeasurerElement(element: HTMLElement, text?: string) {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = styleElement.getPropertyValue('display');\n temporaryElement.style.padding = styleElement.getPropertyValue('padding');\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '0%';\n temporaryElement.style.bottom = '0%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');\n temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');\n\n setFontSettings(temporaryElement, styleElement);\n\n temporaryElement.textContent = text ?? element.textContent;\n return temporaryElement;\n}\n"],"mappings":"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","ignoreList":[]}
|
package/lib/es6/utils.js
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
export var setFontSettings = function setFontSettings(element, styleElement) {
|
|
2
|
-
element.style.fontFamily = styleElement.getPropertyValue('font-family');
|
|
3
|
-
element.style.fontSize = styleElement.getPropertyValue('font-size');
|
|
4
|
-
element.style.fontWeight = styleElement.getPropertyValue('font-weight');
|
|
5
|
-
element.style.lineHeight = styleElement.getPropertyValue('line-height');
|
|
6
|
-
element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
|
|
7
|
-
element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
|
|
8
|
-
};
|
|
9
|
-
export function isTextOverflowing(element, multiline, text) {
|
|
10
|
-
if (!element) return false;
|
|
11
|
-
var _element$getBoundingC = element.getBoundingClientRect(),
|
|
12
|
-
currentHeight = _element$getBoundingC.height,
|
|
13
|
-
currentWidth = _element$getBoundingC.width;
|
|
14
|
-
var measuringElement = createMeasurerElement(element, text);
|
|
15
|
-
var isOverflowing = false;
|
|
16
|
-
document.body.appendChild(measuringElement);
|
|
17
|
-
if (multiline) {
|
|
18
|
-
measuringElement.style.width = "".concat(currentWidth, "px");
|
|
19
|
-
var width = measuringElement.scrollWidth;
|
|
20
|
-
var height = measuringElement.getBoundingClientRect().height;
|
|
21
|
-
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
22
|
-
isOverflowing = true;
|
|
23
|
-
}
|
|
24
|
-
} else {
|
|
25
|
-
measuringElement.style.whiteSpace = 'nowrap';
|
|
26
|
-
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
27
|
-
}
|
|
28
|
-
document.body.removeChild(measuringElement);
|
|
29
|
-
return isOverflowing;
|
|
30
|
-
}
|
|
31
|
-
function createMeasurerElement(element, text) {
|
|
32
|
-
var styleElement = window.getComputedStyle(element, null);
|
|
33
|
-
var temporaryElement = document.createElement('temporary-block');
|
|
34
|
-
temporaryElement.style.display = styleElement.getPropertyValue('display');
|
|
35
|
-
temporaryElement.style.padding = styleElement.getPropertyValue('padding');
|
|
36
|
-
temporaryElement.style.position = 'absolute';
|
|
37
|
-
temporaryElement.style.right = '0%';
|
|
38
|
-
temporaryElement.style.bottom = '0%';
|
|
39
|
-
temporaryElement.style.visibility = 'hidden';
|
|
40
|
-
temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
|
|
41
|
-
temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
|
|
42
|
-
setFontSettings(temporaryElement, styleElement);
|
|
43
|
-
temporaryElement.textContent = text !== null && text !== void 0 ? text : element.textContent;
|
|
44
|
-
return temporaryElement;
|
|
45
|
-
}
|
|
46
|
-
//# sourceMappingURL=utils.js.map
|
package/lib/es6/utils.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":["setFontSettings","element","styleElement","style","fontFamily","getPropertyValue","fontSize","fontWeight","lineHeight","fontFeatureSettings","fontVariantNumeric","isTextOverflowing","multiline","text","_element$getBoundingC","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","createMeasurerElement","isOverflowing","document","body","appendChild","concat","scrollWidth","Math","ceil","whiteSpace","removeChild","window","getComputedStyle","temporaryElement","createElement","display","padding","position","right","bottom","visibility","wordWrap","textContent"],"sources":["../../src/utils.ts"],"sourcesContent":["export const setFontSettings = (element: HTMLElement, styleElement: CSSStyleDeclaration): void => {\n element.style.fontFamily = styleElement.getPropertyValue('font-family');\n element.style.fontSize = styleElement.getPropertyValue('font-size');\n element.style.fontWeight = styleElement.getPropertyValue('font-weight');\n element.style.lineHeight = styleElement.getPropertyValue('line-height');\n element.style.fontFeatureSettings =\n styleElement.getPropertyValue('font-feature-settings');\n element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');\n};\n\nexport function isTextOverflowing(element: HTMLElement | null, multiline: boolean, text: string): boolean {\n if (!element) return false;\n\n const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n const measuringElement = createMeasurerElement(element, text);\n let isOverflowing = false;\n\n document.body.appendChild(measuringElement);\n if (multiline) {\n measuringElement.style.width = `${currentWidth}px`;\n\n const width = measuringElement.scrollWidth;\n const height = measuringElement.getBoundingClientRect().height;\n\n if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {\n isOverflowing = true;\n }\n } else {\n measuringElement.style.whiteSpace = 'nowrap';\n isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;\n }\n\n document.body.removeChild(measuringElement);\n\n return isOverflowing;\n}\n\nfunction createMeasurerElement(element: HTMLElement, text?: string) {\n const styleElement = window.getComputedStyle(element, null);\n const temporaryElement = document.createElement('temporary-block');\n temporaryElement.style.display = styleElement.getPropertyValue('display');\n temporaryElement.style.padding = styleElement.getPropertyValue('padding');\n temporaryElement.style.position = 'absolute';\n temporaryElement.style.right = '0%';\n temporaryElement.style.bottom = '0%';\n temporaryElement.style.visibility = 'hidden';\n temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');\n temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');\n\n setFontSettings(temporaryElement, styleElement);\n\n temporaryElement.textContent = text ?? element.textContent;\n return temporaryElement;\n}\n"],"mappings":"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","ignoreList":[]}
|
package/lib/esm/utils.mjs
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
var setFontSettings = function setFontSettings2(element, styleElement) {
|
|
2
|
-
element.style.fontFamily = styleElement.getPropertyValue("font-family");
|
|
3
|
-
element.style.fontSize = styleElement.getPropertyValue("font-size");
|
|
4
|
-
element.style.fontWeight = styleElement.getPropertyValue("font-weight");
|
|
5
|
-
element.style.lineHeight = styleElement.getPropertyValue("line-height");
|
|
6
|
-
element.style.fontFeatureSettings = styleElement.getPropertyValue("font-feature-settings");
|
|
7
|
-
element.style.fontVariantNumeric = styleElement.getPropertyValue("font-variant-numeric");
|
|
8
|
-
};
|
|
9
|
-
function isTextOverflowing(element, multiline, text) {
|
|
10
|
-
if (!element) return false;
|
|
11
|
-
var _element$getBoundingC = element.getBoundingClientRect(), currentHeight = _element$getBoundingC.height, currentWidth = _element$getBoundingC.width;
|
|
12
|
-
var measuringElement = createMeasurerElement(element, text);
|
|
13
|
-
var isOverflowing = false;
|
|
14
|
-
document.body.appendChild(measuringElement);
|
|
15
|
-
if (multiline) {
|
|
16
|
-
measuringElement.style.width = "".concat(currentWidth, "px");
|
|
17
|
-
var width = measuringElement.scrollWidth;
|
|
18
|
-
var height = measuringElement.getBoundingClientRect().height;
|
|
19
|
-
if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
|
|
20
|
-
isOverflowing = true;
|
|
21
|
-
}
|
|
22
|
-
} else {
|
|
23
|
-
measuringElement.style.whiteSpace = "nowrap";
|
|
24
|
-
isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
|
|
25
|
-
}
|
|
26
|
-
document.body.removeChild(measuringElement);
|
|
27
|
-
return isOverflowing;
|
|
28
|
-
}
|
|
29
|
-
function createMeasurerElement(element, text) {
|
|
30
|
-
var styleElement = window.getComputedStyle(element, null);
|
|
31
|
-
var temporaryElement = document.createElement("temporary-block");
|
|
32
|
-
temporaryElement.style.display = styleElement.getPropertyValue("display");
|
|
33
|
-
temporaryElement.style.padding = styleElement.getPropertyValue("padding");
|
|
34
|
-
temporaryElement.style.position = "absolute";
|
|
35
|
-
temporaryElement.style.right = "0%";
|
|
36
|
-
temporaryElement.style.bottom = "0%";
|
|
37
|
-
temporaryElement.style.visibility = "hidden";
|
|
38
|
-
temporaryElement.style.whiteSpace = styleElement.getPropertyValue("white-space");
|
|
39
|
-
temporaryElement.style.wordWrap = styleElement.getPropertyValue("word-wrap");
|
|
40
|
-
setFontSettings(temporaryElement, styleElement);
|
|
41
|
-
temporaryElement.textContent = text !== null && text !== void 0 ? text : element.textContent;
|
|
42
|
-
return temporaryElement;
|
|
43
|
-
}
|
|
44
|
-
export {
|
|
45
|
-
isTextOverflowing,
|
|
46
|
-
setFontSettings
|
|
47
|
-
};
|