@semcore/ellipsis 2.39.4 → 2.40.0-prerelease.0

package/lib/es6/utils.js

@@ -0,0 +1,46 @@
+export var setFontSettings = function setFontSettings(element, styleElement) {
+  element.style.fontFamily = styleElement.getPropertyValue('font-family');
+  element.style.fontSize = styleElement.getPropertyValue('font-size');
+  element.style.fontWeight = styleElement.getPropertyValue('font-weight');
+  element.style.lineHeight = styleElement.getPropertyValue('line-height');
+  element.style.fontFeatureSettings = styleElement.getPropertyValue('font-feature-settings');
+  element.style.fontVariantNumeric = styleElement.getPropertyValue('font-variant-numeric');
+};
+export function isTextOverflowing(element, multiline, text) {
+  if (!element) return false;
+  var _element$getBoundingC = element.getBoundingClientRect(),
+    currentHeight = _element$getBoundingC.height,
+    currentWidth = _element$getBoundingC.width;
+  var measuringElement = createMeasurerElement(element, text);
+  var isOverflowing = false;
+  document.body.appendChild(measuringElement);
+  if (multiline) {
+    measuringElement.style.width = "".concat(currentWidth, "px");
+    var width = measuringElement.scrollWidth;
+    var height = measuringElement.getBoundingClientRect().height;
+    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
+      isOverflowing = true;
+    }
+  } else {
+    measuringElement.style.whiteSpace = 'nowrap';
+    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
+  }
+  document.body.removeChild(measuringElement);
+  return isOverflowing;
+}
+function createMeasurerElement(element, text) {
+  var styleElement = window.getComputedStyle(element, null);
+  var temporaryElement = document.createElement('temporary-block');
+  temporaryElement.style.display = styleElement.getPropertyValue('display');
+  temporaryElement.style.padding = styleElement.getPropertyValue('padding');
+  temporaryElement.style.position = 'absolute';
+  temporaryElement.style.right = '0%';
+  temporaryElement.style.bottom = '0%';
+  temporaryElement.style.visibility = 'hidden';
+  temporaryElement.style.whiteSpace = styleElement.getPropertyValue('white-space');
+  temporaryElement.style.wordWrap = styleElement.getPropertyValue('word-wrap');
+  setFontSettings(temporaryElement, styleElement);
+  temporaryElement.textContent = text !== null && text !== void 0 ? text : element.textContent;
+  return temporaryElement;
+}
+//# sourceMappingURL=utils.js.map

package/lib/es6/utils.js.map

@@ -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/Ellipsis.mjs

@@ -3,112 +3,70 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled } from "@semcore/utils/lib/core/index";
-import createComponent, { sstyled as sstyled$1, Component, assignProps } from "@semcore/core";
-import React from "react";
+import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
+import { Box } from "@semcore/base-components";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import findComponent, { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import pick from "@semcore/core/lib/utils/pick";
+import reactToText from "@semcore/core/lib/utils/reactToText";
+import { forkRef } from "@semcore/core/lib/utils/ref";
+import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
 import Tooltip from "@semcore/tooltip";
-import { Box } from "@semcore/flex-box";
+import React from "react";
 import { useResizeObserver } from "./useResizeObserver.mjs";
-import useEnhancedEffect from "@semcore/utils/lib/use/useEnhancedEffect";
-import findComponent, { isAdvanceMode } from "@semcore/utils/lib/findComponent";
-import reactToText from "@semcore/utils/lib/reactToText";
-import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
-import pick from "@semcore/utils/lib/pick";
-import { forkRef } from "@semcore/utils/lib/ref";
-import { callAllEventHandlers } from "@semcore/utils/lib/assignProps";
-var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"], _excluded2 = ["styles", "text", "tooltip", "containerRect", "containerRef", "textRef", "tooltipProps", "children", "advanceMode"];
+import { isTextOverflowing, setFontSettings } from "./utils.mjs";
+var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"];
 /*!__reshadow-styles__:"./style/ellipsis.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SContainerMiddle_1lbz9_gg_,.___SContainer_1lbz9_gg_,.___SEllipsis_1lbz9_gg_.__middle-mod_1lbz9_gg_,.___SNoTooltipContainer_1lbz9_gg_{display:flex;overflow:hidden}.___SBeginning_1lbz9_gg_,.___SEllipsis_1lbz9_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_1lbz9_gg_.__maxLine_1lbz9_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_1lbz9);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_1lbz9_gg_>:has(.___SBeginning_1lbz9_gg_),.___SContainerMiddle_1lbz9_gg_>:has(.___STail_1lbz9_gg_){display:flex;width:100%}.___STail_1lbz9_gg_{white-space:pre}",
+    ".___SBeginning_hyasj_gg_,.___SEllipsis_hyasj_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_hyasj_gg_.__maxLine_hyasj_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_hyasj);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_hyasj_gg_,.___SContainer_hyasj_gg_,.___SEllipsis_hyasj_gg_.__middle-mod_hyasj_gg_,.___SNoTooltipContainer_hyasj_gg_{display:flex;overflow:hidden}.___SContainerMiddle_hyasj_gg_>:has(.___SBeginning_hyasj_gg_),.___SContainerMiddle_hyasj_gg_>:has(.___STail_hyasj_gg_){display:flex;width:100%}.___STail_hyasj_gg_{white-space:pre}",
     /*__inner_css_end__*/
-    "1lbz9_gg_"
+    "hyasj_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SContainer": "___SContainer_1lbz9_gg_",
-    "__SNoTooltipContainer": "___SNoTooltipContainer_1lbz9_gg_",
-    "__SContainerMiddle": "___SContainerMiddle_1lbz9_gg_",
-    "__SBeginning": "___SBeginning_1lbz9_gg_",
-    "__SEllipsis": "___SEllipsis_1lbz9_gg_",
-    "_middle-mod": "__middle-mod_1lbz9_gg_",
-    "_maxLine": "__maxLine_1lbz9_gg_",
-    "--maxLine": "--maxLine_1lbz9",
-    "__STail": "___STail_1lbz9_gg_"
+    "__SBeginning": "___SBeginning_hyasj_gg_",
+    "__SEllipsis": "___SEllipsis_hyasj_gg_",
+    "__SContainer": "___SContainer_hyasj_gg_",
+    "__SNoTooltipContainer": "___SNoTooltipContainer_hyasj_gg_",
+    "__SContainerMiddle": "___SContainerMiddle_hyasj_gg_",
+    "_maxLine": "__maxLine_hyasj_gg_",
+    "--maxLine": "--maxLine_hyasj",
+    "_middle-mod": "__middle-mod_hyasj_gg_",
+    "__STail": "___STail_hyasj_gg_"
   })
 );
 var defaultTooltipProps = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate", "cursorAnchoring"];
-var createMeasurerElement = function createMeasurerElement2(element, text) {
-  var styleElement = window.getComputedStyle(element, null);
-  var temporaryElement = document.createElement("temporary-block");
-  temporaryElement.style.display = styleElement.getPropertyValue("display");
-  temporaryElement.style.padding = styleElement.getPropertyValue("padding");
-  temporaryElement.style.position = "absolute";
-  temporaryElement.style.right = "0%";
-  temporaryElement.style.bottom = "0%";
-  temporaryElement.style.visibility = "hidden";
-  temporaryElement.style.fontFamily = styleElement.getPropertyValue("font-family");
-  temporaryElement.style.fontSize = styleElement.getPropertyValue("font-size");
-  temporaryElement.style.fontWeight = styleElement.getPropertyValue("font-weight");
-  temporaryElement.style.lineHeight = styleElement.getPropertyValue("line-height");
-  temporaryElement.style.whiteSpace = styleElement.getPropertyValue("white-space");
-  temporaryElement.style.wordWrap = styleElement.getPropertyValue("word-wrap");
-  temporaryElement.style.fontFeatureSettings = styleElement.getPropertyValue("font-feature-settings");
-  temporaryElement.style.fontVariantNumeric = styleElement.getPropertyValue("font-variant-numeric");
-  temporaryElement.innerHTML = text !== null && text !== void 0 ? text : element.innerHTML;
-  return temporaryElement;
-};
-function isTextOverflowing(element, multiline, text) {
-  if (!element) return false;
-  var _element$getBoundingC = element.getBoundingClientRect(), currentHeight = _element$getBoundingC.height, currentWidth = _element$getBoundingC.width;
-  var measuringElement = createMeasurerElement(element, text);
-  var isOverflowing = false;
-  document.body.appendChild(measuringElement);
-  if (multiline) {
-    measuringElement.style.width = "".concat(currentWidth, "px");
-    var width = measuringElement.scrollWidth;
-    var height = measuringElement.getBoundingClientRect().height;
-    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
-      isOverflowing = true;
-    }
-  } else {
-    measuringElement.style.whiteSpace = "nowrap";
-    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
-  }
-  document.body.removeChild(measuringElement);
-  return isOverflowing;
-}
 var forcedAdvancedMode = {
   forcedAdvancedMode: true
 };
 var noAdvancedMode = {};
-var RootEllipsis = /* @__PURE__ */ function(_Component) {
-  _inherits(RootEllipsis2, _Component);
-  var _super = _createSuper(RootEllipsis2);
+var RootEllipsis = /* @__PURE__ */ (function(_Component) {
   function RootEllipsis2() {
     var _this;
     _classCallCheck(this, RootEllipsis2);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    _this = _callSuper(this, RootEllipsis2, [].concat(args));
+    _defineProperty(_this, "state", {
       visible: false
     });
-    _defineProperty(_assertThisInitialized(_this), "textRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "handlerVisibleChange", function(visible) {
+    _defineProperty(_this, "textRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "handlerVisibleChange", function(visible) {
       _this.setState({
         visible: visible && _this.showTooltip()
       });
     });
     return _this;
   }
-  _createClass(RootEllipsis2, [{
+  _inherits(RootEllipsis2, _Component);
+  return _createClass(RootEllipsis2, [{
     key: "showTooltip",
     value: function showTooltip() {
       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;
@@ -136,13 +94,10 @@ var RootEllipsis = /* @__PURE__ */ function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref4, _tooltipProps$visible;
+      var _ref3, _tooltipProps$visible;
       var SEllipsis = this.Root;
       var SContainer = Tooltip;
-      var SNoTooltipContainer = Box;
-      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;
-      _this$asProps3.children;
-      var other = _objectWithoutProperties(_this$asProps3, _excluded);
+      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, _children = _this$asProps3.children, other = _objectWithoutProperties(_this$asProps3, _excluded);
       var visible = this.state.visible;
       var advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
       var text = reactToText(advancedContent || getOriginChildren(Children));
@@ -152,7 +107,7 @@ var RootEllipsis = /* @__PURE__ */ function(_Component) {
       tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
       if (trim === "middle") {
         var _ref2;
-        return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
+        return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
           "text": text,
           "styles": styles,
           "tooltip": tooltip,
@@ -163,26 +118,17 @@ var RootEllipsis = /* @__PURE__ */ function(_Component) {
           "advanceMode": advanceMode
         }, other)), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
       }
-      if (tooltip) {
-        var _ref3;
-        return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainer, _ref3.cn("SContainer", _objectSpread(_objectSpread({
-          "interaction": "hover",
-          "title": !advanceMode ? text : void 0
-        }, tooltipProps), advanceMode ? forcedAdvancedMode : noAdvancedMode)), advanceMode ? /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})) : /* @__PURE__ */ React.createElement(SEllipsis, _ref3.cn("SEllipsis", _objectSpread({
-          "render": Box,
-          "ref": this.textRef,
-          "maxLine": maxLine
-        }, other)), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
-      }
-      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({
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref3.cn("SContainer", _objectSpread(_objectSpread({
+        "interaction": tooltip ? "hover" : "none",
+        "title": !advanceMode ? text : void 0
+      }, tooltipProps), advanceMode ? forcedAdvancedMode : noAdvancedMode)), advanceMode ? /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {})) : /* @__PURE__ */ React.createElement(SEllipsis, _ref3.cn("SEllipsis", _objectSpread({
         "render": Box,
         "ref": this.textRef,
         "maxLine": maxLine
-      }, other)), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {}))));
+      }, other)), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
     }
   }]);
-  return RootEllipsis2;
-}(Component);
+})(Component);
 _defineProperty(RootEllipsis, "displayName", "Ellipsis");
 _defineProperty(RootEllipsis, "style", style);
 _defineProperty(RootEllipsis, "defaultProps", {
@@ -192,36 +138,32 @@ _defineProperty(RootEllipsis, "defaultProps", {
   __excludeProps: ["title"]
 });
 var EllipsisMiddleContext = /* @__PURE__ */ React.createContext(null);
-var EllipsisMiddle = function EllipsisMiddle2(props) {
-  var _ref7;
-  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);
+function EllipsisMiddle(props) {
+  var _ref5;
+  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, tag = props.tag;
   var resizeElement = React.useRef(null);
-  var _React$useState = React.useState({
-    fontSize: "14",
-    symbolWidth: 0
-  }), _React$useState2 = _slicedToArray(_React$useState, 2), dimension = _React$useState2[0], setDimension = _React$useState2[1];
+  var _React$useState = React.useState(0), _React$useState2 = _slicedToArray(_React$useState, 2), symbolWidth = _React$useState2[0], setSymbolWidth = _React$useState2[1];
   var blockWidth = useResizeObserver(resizeElement, containerRect).width;
   useEnhancedEffect(function() {
     var node = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || (resizeElement === null || resizeElement === void 0 ? void 0 : resizeElement.current);
     if (!node) return;
+    var styleElement = window.getComputedStyle(node);
     var dateSpan = document.createElement("temporary-block");
-    dateSpan.setAttribute("style", "fontSize: ".concat(dimension.fontSize, "px"));
-    dateSpan.innerHTML = "a";
+    setFontSettings(dateSpan, styleElement);
+    dateSpan.textContent = "a";
     document.body.appendChild(dateSpan);
     var rect = dateSpan.getBoundingClientRect();
-    setDimension({
-      fontSize: window.getComputedStyle(node, null).getPropertyValue("font-size"),
-      symbolWidth: rect.width
-    });
+    setSymbolWidth(rect.width);
     document.body.removeChild(dateSpan);
   }, []);
   var STail = "span";
   var SBeginning = "span";
-  var SContainerMiddle = props.tag || Box;
+  var SContainerMiddle = Tooltip;
   var SAdvancedModeContainerMiddle = Tooltip;
   var displayedSymbols = React.useMemo(function() {
-    return Math.round(blockWidth / dimension.symbolWidth);
-  }, [blockWidth, dimension.symbolWidth]);
+    var displayedSymbols2 = Math.round(blockWidth / symbolWidth);
+    return displayedSymbols2 % 2 === 0 ? displayedSymbols2 : displayedSymbols2 - 1;
+  }, [blockWidth, symbolWidth]);
   var interaction = text.length > displayedSymbols ? "hover" : "none";
   var ref = containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement;
   var contextValue = React.useMemo(function() {
@@ -232,44 +174,37 @@ var EllipsisMiddle = function EllipsisMiddle2(props) {
     };
   }, [text, displayedSymbols]);
   if (advanceMode) {
-    var _ref5;
-    return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SAdvancedModeContainerMiddle, _ref5.cn("SAdvancedModeContainerMiddle", _objectSpread(_objectSpread({
-      "interaction": interaction
+    var _ref4;
+    return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", _objectSpread(_objectSpread({
+      "interaction": tooltip ? interaction : "none"
     }, tooltipProps), forcedAdvancedMode)), /* @__PURE__ */ React.createElement(EllipsisMiddleContext.Provider, {
       value: contextValue
     }, children));
   }
-  if (tooltip) {
-    var _ref6;
-    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref6.cn("SContainerMiddle", _objectSpread({
-      "interaction": interaction,
-      "title": text,
-      "ref": forkRef(ref, textRef),
-      "tag": Tooltip,
-      "__excludeProps": ["title"]
-    }, tooltipProps)), /* @__PURE__ */ React.createElement(SBeginning, _ref6.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref6.cn("STail", {}), contextValue.tail));
-  }
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref7.cn("SContainerMiddle", _objectSpread(_objectSpread({}, otherProps), {}, {
-    "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement
-  })), /* @__PURE__ */ React.createElement(SBeginning, _ref7.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref7.cn("STail", {}), contextValue.tail));
-};
-var Content = function Content2(_ref10) {
-  var _ref = arguments[0], _ref9;
-  var styles = _ref10.styles, Children = _ref10.Children;
+  return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", _objectSpread({
+    "interaction": tooltip ? interaction : "none",
+    "title": text,
+    "ref": forkRef(ref, textRef),
+    "tag": tag
+  }, tooltipProps)), /* @__PURE__ */ React.createElement(SBeginning, _ref5.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref5.cn("STail", {}), contextValue.tail));
+}
+function Content(_ref8) {
+  var _ref = arguments[0], _ref7;
+  var styles = _ref8.styles, Children = _ref8.Children;
   var SEllipsis = Tooltip.Trigger;
   var ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
   var STail = "span";
   var SBeginning = "span";
   if (ellipsisMiddleContext) {
-    var _ref8;
+    var _ref6;
     var begining = ellipsisMiddleContext.begining, tail = ellipsisMiddleContext.tail, ref = ellipsisMiddleContext.ref;
-    return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref8.cn("SEllipsis", _objectSpread({}, assignProps({
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref6.cn("SEllipsis", _objectSpread({}, assignProps({
       "middle-mod": true,
       "ref": ref
-    }, _ref))), /* @__PURE__ */ React.createElement(SBeginning, _ref8.cn("SBeginning", {}), begining), /* @__PURE__ */ React.createElement(STail, _ref8.cn("STail", {}), tail));
+    }, _ref))), /* @__PURE__ */ React.createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /* @__PURE__ */ React.createElement(STail, _ref6.cn("STail", {}), tail));
   }
-  return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref9.cn("SEllipsis", _objectSpread({}, assignProps({}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
-};
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref7.cn("SEllipsis", _objectSpread({}, assignProps({}, _ref))), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
+}
 var Ellipsis = createComponent(RootEllipsis, {
   Content,
   Popper: Tooltip.Popper

package/lib/esm/style/ellipsis.shadow.css

@@ -1,10 +1,3 @@
-SContainer,
-SNoTooltipContainer,
-SContainerMiddle {
-  display: flex;
-  overflow: hidden;
-}
-
 SBeginning,
 SEllipsis {
   overflow: hidden;
@@ -13,7 +6,9 @@ SEllipsis {
   white-space: pre;
 }
 
-SEllipsis[middle-mod] {
+SContainer,
+SNoTooltipContainer,
+SContainerMiddle {
   display: flex;
   overflow: hidden;
 }
@@ -27,6 +22,11 @@ SEllipsis[maxLine] {
   overflow-wrap: break-word;
 }
 
+SEllipsis[middle-mod] {
+  display: flex;
+  overflow: hidden;
+}
+
 SContainerMiddle> :has(SBeginning),
 SContainerMiddle> :has(STail) {
   display: flex;

package/lib/esm/useResizeObserver.mjs

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import useEnhancedEffect from "@semcore/core/lib/utils/use/useEnhancedEffect";
 import React from "react";
-import useEnhancedEffect from "@semcore/utils/lib/use/useEnhancedEffect";
-import canUseDOM from "@semcore/utils/lib/canUseDOM";
 var useResizeObserver = function useResizeObserver2(ref, hookOverride) {
   var _React$useState = React.useState(0), _React$useState2 = _slicedToArray(_React$useState, 2), width = _React$useState2[0], setWidth = _React$useState2[1];
   var handleResize = React.useCallback(function(entries) {

package/lib/esm/utils.mjs

@@ -0,0 +1,47 @@
+var setFontSettings = function setFontSettings2(element, styleElement) {
+  element.style.fontFamily = styleElement.getPropertyValue("font-family");
+  element.style.fontSize = styleElement.getPropertyValue("font-size");
+  element.style.fontWeight = styleElement.getPropertyValue("font-weight");
+  element.style.lineHeight = styleElement.getPropertyValue("line-height");
+  element.style.fontFeatureSettings = styleElement.getPropertyValue("font-feature-settings");
+  element.style.fontVariantNumeric = styleElement.getPropertyValue("font-variant-numeric");
+};
+function isTextOverflowing(element, multiline, text) {
+  if (!element) return false;
+  var _element$getBoundingC = element.getBoundingClientRect(), currentHeight = _element$getBoundingC.height, currentWidth = _element$getBoundingC.width;
+  var measuringElement = createMeasurerElement(element, text);
+  var isOverflowing = false;
+  document.body.appendChild(measuringElement);
+  if (multiline) {
+    measuringElement.style.width = "".concat(currentWidth, "px");
+    var width = measuringElement.scrollWidth;
+    var height = measuringElement.getBoundingClientRect().height;
+    if (Math.ceil(currentHeight) < height || Math.ceil(currentWidth) < width) {
+      isOverflowing = true;
+    }
+  } else {
+    measuringElement.style.whiteSpace = "nowrap";
+    isOverflowing = Math.ceil(currentWidth) < measuringElement.getBoundingClientRect().width;
+  }
+  document.body.removeChild(measuringElement);
+  return isOverflowing;
+}
+function createMeasurerElement(element, text) {
+  var styleElement = window.getComputedStyle(element, null);
+  var temporaryElement = document.createElement("temporary-block");
+  temporaryElement.style.display = styleElement.getPropertyValue("display");
+  temporaryElement.style.padding = styleElement.getPropertyValue("padding");
+  temporaryElement.style.position = "absolute";
+  temporaryElement.style.right = "0%";
+  temporaryElement.style.bottom = "0%";
+  temporaryElement.style.visibility = "hidden";
+  temporaryElement.style.whiteSpace = styleElement.getPropertyValue("white-space");
+  temporaryElement.style.wordWrap = styleElement.getPropertyValue("word-wrap");
+  setFontSettings(temporaryElement, styleElement);
+  temporaryElement.textContent = text !== null && text !== void 0 ? text : element.textContent;
+  return temporaryElement;
+}
+export {
+  isTextOverflowing,
+  setFontSettings
+};

package/lib/types/index.d.ts

@@ -1,14 +1,14 @@
-import { UnknownProperties, Intergalactic } from '@semcore/core';
-import { RefObject } from 'react';
-import { Box, BoxProps } from '@semcore/flex-box';
-import Tooltip, { TooltipProps } from '@semcore/tooltip';
+import type { Box, BoxProps } from '@semcore/base-components';
+import type { UnknownProperties, Intergalactic } from '@semcore/core';
+import type { TooltipProps } from '@semcore/tooltip';
+import type Tooltip from '@semcore/tooltip';
+import type { RefObject } from 'react';
 
-/** @deprecated */
-export interface IEllipsisProps extends EllipsisProps, UnknownProperties {}
 export type EllipsisProps = BoxProps &
   Partial<TooltipProps> & {
     /**
-     * Rows count in multiline Ellipsis
+     * Rows count in multiline Ellipsis.
+     * Applies only for `trim = end`
      * @default 1
      */
     maxLine?: number;
@@ -40,11 +40,14 @@ declare const useResizeObserver: (
   ref: RefObject<HTMLElement>,
   hookOverride?: { width: number },
 ) => { width: number };
-
+/**
+ * @deprecated. Use Text with ellipsis property for @semcore/typography.
+ */
 declare const Ellipsis: Intergalactic.Component<'div', EllipsisProps> & {
   Content: typeof Box;
   Popper: typeof Tooltip.Popper;
 };
 
-export { useResizeObserver };
 export default Ellipsis;
+
+export { useResizeObserver };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/ellipsis",
   "description": "Semrush Ellipsis Component",
-  "version": "2.39.4",
+  "version": "2.40.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.48.5",
-    "@semcore/flex-box": "5.41.4",
-    "@semcore/tooltip": "6.49.4"
+    "@semcore/utils": "4.49.0-prerelease.0",
+    "@semcore/flex-box": "5.42.0-prerelease.0",
+    "@semcore/tooltip": "6.50.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
+    "@semcore/core": "^2.40.0-prerelease.0",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },