@semcore/ellipsis 16.0.12 → 17.0.0-prerelease.17

package/lib/es6/useResizeObserver.js

@@ -1,16 +1,12 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
 import useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';
 import React from 'react';
-export var useResizeObserver = function useResizeObserver(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) {
+export const useResizeObserver = (ref, hookOverride) => {
+  const [width, setWidth] = React.useState(0);
+  const handleResize = React.useCallback(entries => {
     setWidth(entries[0].contentRect.width);
   }, []);
-  useEnhancedEffect(function () {
+  useEnhancedEffect(() => {
     if (!ref.current) {
       return;
     }
@@ -18,11 +14,11 @@ export var useResizeObserver = function useResizeObserver(ref, hookOverride) {
       return;
     }
     if (canUseDOM()) {
-      var ro = new ResizeObserver(function (entries) {
+      const ro = new ResizeObserver(entries => {
         handleResize(entries);
       });
       ro.observe(ref.current);
-      return function () {
+      return () => {
         ro.disconnect();
       };
     }
@@ -31,7 +27,7 @@ export var useResizeObserver = function useResizeObserver(ref, hookOverride) {
     return hookOverride;
   }
   return {
-    width: width
+    width
   };
 };
 //# sourceMappingURL=useResizeObserver.js.map

package/lib/es6/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","names":["canUseDOM","useEnhancedEffect","React","useResizeObserver","ref","hookOverride","_React$useState","useState","_React$useState2","_slicedToArray","width","setWidth","handleResize","useCallback","entries","contentRect","current","ro","ResizeObserver","observe","disconnect"],"sources":["../../src/useResizeObserver.tsx"],"sourcesContent":["import canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';\nimport React, { type RefObject } from 'react';\n\nexport const useResizeObserver = (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => {\n  const [width, setWidth] = React.useState<number>(0);\n\n  const handleResize = React.useCallback((entries: ResizeObserverEntry[]) => {\n    setWidth(entries[0].contentRect.width);\n  }, []);\n\n  useEnhancedEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (hookOverride) {\n      return;\n    }\n    if (canUseDOM()) {\n      const ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        handleResize(entries);\n      });\n\n      ro.observe(ref.current);\n\n      return () => {\n        ro.disconnect();\n      };\n    }\n  }, [hookOverride]);\n\n  if (hookOverride) {\n    return hookOverride;\n  }\n  return { width };\n};\n"],"mappings":";AAAA,OAAOA,SAAS,MAAM,mCAAmC;AACzD,OAAOC,iBAAiB,MAAM,+CAA+C;AAC7E,OAAOC,KAAK,MAA0B,OAAO;AAE7C,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAC5BC,GAA2B,EAC3BC,YAAgC,EAC7B;EACH,IAAAC,eAAA,GAA0BJ,KAAK,CAACK,QAAQ,CAAS,CAAC,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA5CI,KAAK,GAAAF,gBAAA;IAAEG,QAAQ,GAAAH,gBAAA;EAEtB,IAAMI,YAAY,GAAGV,KAAK,CAACW,WAAW,CAAC,UAACC,OAA8B,EAAK;IACzEH,QAAQ,CAACG,OAAO,CAAC,CAAC,CAAC,CAACC,WAAW,CAACL,KAAK,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAENT,iBAAiB,CAAC,YAAM;IACtB,IAAI,CAACG,GAAG,CAACY,OAAO,EAAE;MAChB;IACF;IAEA,IAAIX,YAAY,EAAE;MAChB;IACF;IACA,IAAIL,SAAS,CAAC,CAAC,EAAE;MACf,IAAMiB,EAAE,GAAG,IAAIC,cAAc,CAAC,UAACJ,OAA8B,EAAK;QAChEF,YAAY,CAACE,OAAO,CAAC;MACvB,CAAC,CAAC;MAEFG,EAAE,CAACE,OAAO,CAACf,GAAG,CAACY,OAAO,CAAC;MAEvB,OAAO,YAAM;QACXC,EAAE,CAACG,UAAU,CAAC,CAAC;MACjB,CAAC;IACH;EACF,CAAC,EAAE,CAACf,YAAY,CAAC,CAAC;EAElB,IAAIA,YAAY,EAAE;IAChB,OAAOA,YAAY;EACrB;EACA,OAAO;IAAEK,KAAK,EAALA;EAAM,CAAC;AAClB,CAAC","ignoreList":[]}
+{"version":3,"file":"useResizeObserver.js","names":["canUseDOM","useEnhancedEffect","React","useResizeObserver","ref","hookOverride","width","setWidth","useState","handleResize","useCallback","entries","contentRect","current","ro","ResizeObserver","observe","disconnect"],"sources":["../../src/useResizeObserver.tsx"],"sourcesContent":["import canUseDOM from '@semcore/core/lib/utils/canUseDOM';\nimport useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';\nimport React, { type RefObject } from 'react';\n\nexport const useResizeObserver = (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => {\n  const [width, setWidth] = React.useState<number>(0);\n\n  const handleResize = React.useCallback((entries: ResizeObserverEntry[]) => {\n    setWidth(entries[0].contentRect.width);\n  }, []);\n\n  useEnhancedEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    if (hookOverride) {\n      return;\n    }\n    if (canUseDOM()) {\n      const ro = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        handleResize(entries);\n      });\n\n      ro.observe(ref.current);\n\n      return () => {\n        ro.disconnect();\n      };\n    }\n  }, [hookOverride]);\n\n  if (hookOverride) {\n    return hookOverride;\n  }\n  return { width };\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,mCAAmC;AACzD,OAAOC,iBAAiB,MAAM,+CAA+C;AAC7E,OAAOC,KAAK,MAA0B,OAAO;AAE7C,OAAO,MAAMC,iBAAiB,GAAGA,CAC/BC,GAA2B,EAC3BC,YAAgC,KAC7B;EACH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGL,KAAK,CAACM,QAAQ,CAAS,CAAC,CAAC;EAEnD,MAAMC,YAAY,GAAGP,KAAK,CAACQ,WAAW,CAAEC,OAA8B,IAAK;IACzEJ,QAAQ,CAACI,OAAO,CAAC,CAAC,CAAC,CAACC,WAAW,CAACN,KAAK,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAENL,iBAAiB,CAAC,MAAM;IACtB,IAAI,CAACG,GAAG,CAACS,OAAO,EAAE;MAChB;IACF;IAEA,IAAIR,YAAY,EAAE;MAChB;IACF;IACA,IAAIL,SAAS,CAAC,CAAC,EAAE;MACf,MAAMc,EAAE,GAAG,IAAIC,cAAc,CAAEJ,OAA8B,IAAK;QAChEF,YAAY,CAACE,OAAO,CAAC;MACvB,CAAC,CAAC;MAEFG,EAAE,CAACE,OAAO,CAACZ,GAAG,CAACS,OAAO,CAAC;MAEvB,OAAO,MAAM;QACXC,EAAE,CAACG,UAAU,CAAC,CAAC;MACjB,CAAC;IACH;EACF,CAAC,EAAE,CAACZ,YAAY,CAAC,CAAC;EAElB,IAAIA,YAAY,EAAE;IAChB,OAAOA,YAAY;EACrB;EACA,OAAO;IAAEC;EAAM,CAAC;AAClB,CAAC","ignoreList":[]}

package/lib/es6/utils.js

@@ -0,0 +1,47 @@
+export const 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;
+  const {
+    height: currentHeight,
+    width: currentWidth
+  } = element.getBoundingClientRect();
+  const measuringElement = createMeasurerElement(element, text);
+  let isOverflowing = false;
+  document.body.appendChild(measuringElement);
+  if (multiline) {
+    measuringElement.style.width = `${currentWidth}px`;
+    const width = measuringElement.scrollWidth;
+    const 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) {
+  const styleElement = window.getComputedStyle(element, null);
+  const 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 ?? 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","height","currentHeight","width","currentWidth","getBoundingClientRect","measuringElement","createMeasurerElement","isOverflowing","document","body","appendChild","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

@@ -1,12 +1,6 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } 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";
@@ -14,165 +8,127 @@ 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 { Box } from "@semcore/flex-box";
 import Tooltip from "@semcore/tooltip";
 import React from "react";
 import { useResizeObserver } from "./useResizeObserver.mjs";
-var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"];
+import { isTextOverflowing, setFontSettings } from "./utils.mjs";
 /*!__reshadow-styles__:"./style/ellipsis.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SBeginning_4aonj_gg_,.___SEllipsis_4aonj_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_4aonj_gg_.__maxLine_4aonj_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_4aonj);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_4aonj_gg_,.___SContainer_4aonj_gg_,.___SEllipsis_4aonj_gg_.__middle-mod_4aonj_gg_,.___SNoTooltipContainer_4aonj_gg_{display:flex;overflow:hidden}.___SContainerMiddle_4aonj_gg_>:has(.___SBeginning_4aonj_gg_),.___SContainerMiddle_4aonj_gg_>:has(.___STail_4aonj_gg_){display:flex;width:100%}.___STail_4aonj_gg_{white-space:pre}",
+    ".___SBeginning_1x34o_gg_,.___SEllipsis_1x34o_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_1x34o_gg_.__maxLine_1x34o_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_1x34o);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_1x34o_gg_,.___SContainer_1x34o_gg_,.___SEllipsis_1x34o_gg_.__middle-mod_1x34o_gg_,.___SNoTooltipContainer_1x34o_gg_{display:flex;overflow:hidden}.___SContainerMiddle_1x34o_gg_>:has(.___SBeginning_1x34o_gg_),.___SContainerMiddle_1x34o_gg_>:has(.___STail_1x34o_gg_){display:flex;width:100%}.___STail_1x34o_gg_{white-space:pre}",
     /*__inner_css_end__*/
-    "4aonj_gg_"
+    "1x34o_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SBeginning": "___SBeginning_4aonj_gg_",
-    "__SEllipsis": "___SEllipsis_4aonj_gg_",
-    "__SContainer": "___SContainer_4aonj_gg_",
-    "__SNoTooltipContainer": "___SNoTooltipContainer_4aonj_gg_",
-    "__SContainerMiddle": "___SContainerMiddle_4aonj_gg_",
-    "_maxLine": "__maxLine_4aonj_gg_",
-    "--maxLine": "--maxLine_4aonj",
-    "_middle-mod": "__middle-mod_4aonj_gg_",
-    "__STail": "___STail_4aonj_gg_"
+    "__SBeginning": "___SBeginning_1x34o_gg_",
+    "__SEllipsis": "___SEllipsis_1x34o_gg_",
+    "__SContainer": "___SContainer_1x34o_gg_",
+    "__SNoTooltipContainer": "___SNoTooltipContainer_1x34o_gg_",
+    "__SContainerMiddle": "___SContainerMiddle_1x34o_gg_",
+    "_maxLine": "__maxLine_1x34o_gg_",
+    "--maxLine": "--maxLine_1x34o",
+    "_middle-mod": "__middle-mod_1x34o_gg_",
+    "__STail": "___STail_1x34o_gg_"
   })
 );
-var defaultTooltipProps = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate", "cursorAnchoring"];
-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");
-};
-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.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;
-};
-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 = {
+const defaultTooltipProps = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate", "cursorAnchoring"];
+const forcedAdvancedMode = {
   forcedAdvancedMode: true
 };
-var noAdvancedMode = {};
-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 = _callSuper(this, RootEllipsis2, [].concat(args));
-    _defineProperty(_this, "state", {
+const noAdvancedMode = {};
+class RootEllipsis extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       visible: false
     });
-    _defineProperty(_this, "textRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "handlerVisibleChange", function(visible) {
-      _this.setState({
-        visible: visible && _this.showTooltip()
+    _defineProperty(this, "textRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "handlerVisibleChange", (visible) => {
+      this.setState({
+        visible: visible && this.showTooltip()
       });
     });
-    return _this;
   }
-  _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;
-      var text = reactToText(getOriginChildren(Children));
-      return isTextOverflowing(this.textRef.current, maxLine > 1, text);
-    }
-  }, {
-    key: "getContentProps",
-    value: function getContentProps() {
-      return {
-        ref: this.textRef,
-        maxLine: this.asProps.maxLine
-      };
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, includeTooltipProps = _this$asProps2.includeTooltipProps;
-      var text = reactToText(getOriginChildren(Children));
-      var tooltipProps = pick(this.asProps, includeTooltipProps);
-      return _objectSpread({
-        children: text
-      }, tooltipProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref3, _tooltipProps$visible;
-      var SEllipsis = this.Root;
-      var SContainer = Tooltip;
-      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 visible = this.state.visible;
-      var advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
-      var text = reactToText(advancedContent || getOriginChildren(Children));
-      var advanceMode = isAdvanceMode(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
-      var tooltipProps = pick(this.asProps, includeTooltipProps);
-      tooltipProps.visible = (_tooltipProps$visible = tooltipProps.visible) !== null && _tooltipProps$visible !== void 0 ? _tooltipProps$visible : visible;
-      tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
-      if (trim === "middle") {
-        var _ref2;
-        return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", _objectSpread({
-          "text": text,
-          "styles": styles,
-          "tooltip": tooltip,
-          "containerRect": containerRect,
-          "containerRef": containerRef,
-          "textRef": this.textRef,
-          "tooltipProps": tooltipProps,
-          "advanceMode": advanceMode
-        }, other)), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
-      }
-      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, _ref3.cn("Children", {}))));
+  showTooltip() {
+    const {
+      maxLine = 1,
+      Children
+    } = this.asProps;
+    const text = reactToText(getOriginChildren(Children));
+    return isTextOverflowing(this.textRef.current, maxLine > 1, text);
+  }
+  getContentProps() {
+    return {
+      ref: this.textRef,
+      maxLine: this.asProps.maxLine
+    };
+  }
+  getPopperProps() {
+    const {
+      Children,
+      includeTooltipProps
+    } = this.asProps;
+    const text = reactToText(getOriginChildren(Children));
+    const tooltipProps = pick(this.asProps, includeTooltipProps);
+    return {
+      children: text,
+      ...tooltipProps
+    };
+  }
+  render() {
+    var _ref3;
+    const SEllipsis = this.Root;
+    const SContainer = Tooltip;
+    const {
+      styles,
+      Children,
+      maxLine,
+      tooltip,
+      trim,
+      containerRect,
+      containerRef,
+      includeTooltipProps,
+      children: _children,
+      ...other
+    } = this.asProps;
+    const {
+      visible
+    } = this.state;
+    const advancedContent = findComponent(Children, [Ellipsis.Content.displayName]);
+    const text = reactToText(advancedContent || getOriginChildren(Children));
+    const advanceMode = isAdvanceMode(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
+    const tooltipProps = pick(this.asProps, includeTooltipProps);
+    tooltipProps.visible = tooltipProps.visible ?? visible;
+    tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? callAllEventHandlers(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
+    if (trim === "middle") {
+      var _ref2;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", {
+        "text": text,
+        "styles": styles,
+        "tooltip": tooltip,
+        "containerRect": containerRect,
+        "containerRef": containerRef,
+        "textRef": this.textRef,
+        "tooltipProps": tooltipProps,
+        "advanceMode": advanceMode,
+        ...other
+      }), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
     }
-  }]);
-})(Component);
+    return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainer, _ref3.cn("SContainer", {
+      "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", {
+      "render": Box,
+      "ref": this.textRef,
+      "maxLine": maxLine,
+      ...other
+    }), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
+  }
+}
 _defineProperty(RootEllipsis, "displayName", "Ellipsis");
 _defineProperty(RootEllipsis, "style", style);
 _defineProperty(RootEllipsis, "defaultProps", {
@@ -181,75 +137,97 @@ _defineProperty(RootEllipsis, "defaultProps", {
   includeTooltipProps: defaultTooltipProps,
   __excludeProps: ["title"]
 });
-var EllipsisMiddleContext = /* @__PURE__ */ React.createContext(null);
-var EllipsisMiddle = function EllipsisMiddle2(props) {
+const EllipsisMiddleContext = /* @__PURE__ */ React.createContext(null);
+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(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);
+  const {
+    styles,
+    text,
+    tooltip,
+    containerRect,
+    containerRef,
+    textRef,
+    tooltipProps,
+    children,
+    advanceMode,
+    tag
+  } = props;
+  const resizeElement = React.useRef(null);
+  const [symbolWidth, setSymbolWidth] = React.useState(0);
+  const blockWidth = useResizeObserver(resizeElement, containerRect).width;
+  useEnhancedEffect(() => {
+    const node = (containerRef == null ? void 0 : containerRef.current) || (resizeElement == null ? void 0 : resizeElement.current);
     if (!node) return;
-    var styleElement = window.getComputedStyle(node);
-    var dateSpan = document.createElement("temporary-block");
+    const styleElement = window.getComputedStyle(node);
+    const dateSpan = document.createElement("temporary-block");
     setFontSettings(dateSpan, styleElement);
     dateSpan.textContent = "a";
     document.body.appendChild(dateSpan);
-    var rect = dateSpan.getBoundingClientRect();
+    const rect = dateSpan.getBoundingClientRect();
     setSymbolWidth(rect.width);
     document.body.removeChild(dateSpan);
   }, []);
-  var STail = "span";
-  var SBeginning = "span";
-  var SContainerMiddle = Tooltip;
-  var SAdvancedModeContainerMiddle = Tooltip;
-  var displayedSymbols = React.useMemo(function() {
-    var displayedSymbols2 = Math.round(blockWidth / symbolWidth);
+  const STail = "span";
+  const SBeginning = "span";
+  const SContainerMiddle = Tooltip;
+  const SAdvancedModeContainerMiddle = Tooltip;
+  const displayedSymbols = React.useMemo(() => {
+    const 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() {
-    return {
-      begining: text.substring(0, text.length - displayedSymbols / 2 - 1),
-      tail: text.substring(text.length - displayedSymbols / 2 - 1),
-      ref
-    };
-  }, [text, displayedSymbols]);
+  const interaction = text.length > displayedSymbols ? "hover" : "none";
+  const ref = containerRef ?? resizeElement;
+  const contextValue = React.useMemo(() => ({
+    begining: text.substring(0, text.length - displayedSymbols / 2 - 1),
+    tail: text.substring(text.length - displayedSymbols / 2 - 1),
+    ref
+  }), [text, displayedSymbols]);
   if (advanceMode) {
     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, {
+    return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", {
+      "interaction": tooltip ? interaction : "none",
+      ...tooltipProps,
+      ...forcedAdvancedMode
+    }), /* @__PURE__ */ React.createElement(EllipsisMiddleContext.Provider, {
       value: contextValue
     }, children));
   }
-  return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", _objectSpread({
+  return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", {
     "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));
-};
-var Content = function Content2(_ref8) {
+    "tag": tag,
+    ...tooltipProps
+  }), /* @__PURE__ */ React.createElement(SBeginning, _ref5.cn("SBeginning", {}), contextValue.begining), /* @__PURE__ */ React.createElement(STail, _ref5.cn("STail", {}), contextValue.tail));
+}
+function Content({
+  styles,
+  Children
+}) {
   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";
+  const SEllipsis = Tooltip.Trigger;
+  const ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
+  const STail = "span";
+  const SBeginning = "span";
   if (ellipsisMiddleContext) {
     var _ref6;
-    var begining = ellipsisMiddleContext.begining, tail = ellipsisMiddleContext.tail, ref = ellipsisMiddleContext.ref;
-    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref6.cn("SEllipsis", _objectSpread({}, assignProps({
-      "middle-mod": true,
-      "ref": ref
-    }, _ref))), /* @__PURE__ */ React.createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /* @__PURE__ */ React.createElement(STail, _ref6.cn("STail", {}), tail));
+    const {
+      begining,
+      tail,
+      ref
+    } = ellipsisMiddleContext;
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref6.cn("SEllipsis", {
+      ...assignProps({
+        "middle-mod": true,
+        "ref": ref
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /* @__PURE__ */ React.createElement(STail, _ref6.cn("STail", {}), tail));
   }
-  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, {
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SEllipsis, _ref7.cn("SEllipsis", {
+    ...assignProps({}, _ref)
+  }), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
+}
+const Ellipsis = createComponent(RootEllipsis, {
   Content,
   Popper: Tooltip.Popper
 });

package/lib/esm/useResizeObserver.mjs

@@ -1,13 +1,12 @@
-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";
-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) {
+const useResizeObserver = (ref, hookOverride) => {
+  const [width, setWidth] = React.useState(0);
+  const handleResize = React.useCallback((entries) => {
     setWidth(entries[0].contentRect.width);
   }, []);
-  useEnhancedEffect(function() {
+  useEnhancedEffect(() => {
     if (!ref.current) {
       return;
     }
@@ -15,11 +14,11 @@ var useResizeObserver = function useResizeObserver2(ref, hookOverride) {
       return;
     }
     if (canUseDOM()) {
-      var ro = new ResizeObserver(function(entries) {
+      const ro = new ResizeObserver((entries) => {
         handleResize(entries);
       });
       ro.observe(ref.current);
-      return function() {
+      return () => {
         ro.disconnect();
       };
     }

package/lib/esm/utils.mjs

@@ -0,0 +1,50 @@
+const 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");
+};
+function isTextOverflowing(element, multiline, text) {
+  if (!element) return false;
+  const {
+    height: currentHeight,
+    width: currentWidth
+  } = element.getBoundingClientRect();
+  const measuringElement = createMeasurerElement(element, text);
+  let isOverflowing = false;
+  document.body.appendChild(measuringElement);
+  if (multiline) {
+    measuringElement.style.width = `${currentWidth}px`;
+    const width = measuringElement.scrollWidth;
+    const 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) {
+  const styleElement = window.getComputedStyle(element, null);
+  const 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 ?? element.textContent;
+  return temporaryElement;
+}
+export {
+  isTextOverflowing,
+  setFontSettings
+};