@semcore/ellipsis 16.0.12-prerelease.37 → 16.1.0-prerelease.0

package/lib/cjs/index.js

@@ -1,18 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () {
-    return _Ellipsis.default;
+  get: function get() {
+    return _Ellipsis["default"];
   }
 });
 Object.defineProperty(exports, "useResizeObserver", {
   enumerable: true,
-  get: function () {
+  get: function get() {
     return _useResizeObserver.useResizeObserver;
   }
 });

package/lib/cjs/useResizeObserver.js

@@ -1,31 +1,35 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResizeObserver = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
 var _useEnhancedEffect = _interopRequireDefault(require("@semcore/core/lib/utils/use/useEnhancedEffect"));
 var _react = _interopRequireDefault(require("react"));
-const useResizeObserver = (ref, hookOverride) => {
-  const [width, setWidth] = _react.default.useState(0);
-  const handleResize = _react.default.useCallback(entries => {
+var useResizeObserver = exports.useResizeObserver = function useResizeObserver(ref, hookOverride) {
+  var _React$useState = _react["default"].useState(0),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var handleResize = _react["default"].useCallback(function (entries) {
     setWidth(entries[0].contentRect.width);
   }, []);
-  (0, _useEnhancedEffect.default)(() => {
+  (0, _useEnhancedEffect["default"])(function () {
     if (!ref.current) {
       return;
     }
     if (hookOverride) {
       return;
     }
-    if ((0, _canUseDOM.default)()) {
-      const ro = new ResizeObserver(entries => {
+    if ((0, _canUseDOM["default"])()) {
+      var ro = new ResizeObserver(function (entries) {
         handleResize(entries);
       });
       ro.observe(ref.current);
-      return () => {
+      return function () {
         ro.disconnect();
       };
     }
@@ -34,8 +38,7 @@ const useResizeObserver = (ref, hookOverride) => {
     return hookOverride;
   }
   return {
-    width
+    width: width
   };
 };
-exports.useResizeObserver = useResizeObserver;
 //# sourceMappingURL=useResizeObserver.js.map

package/lib/cjs/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","names":["_canUseDOM","_interopRequireDefault","require","_useEnhancedEffect","_react","useResizeObserver","ref","hookOverride","width","setWidth","React","useState","handleResize","useCallback","entries","contentRect","useEnhancedEffect","current","canUseDOM","ro","ResizeObserver","observe","disconnect","exports"],"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,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEO,MAAMG,iBAAiB,GAAGA,CAC/BC,GAA2B,EAC3BC,YAAgC,KAC7B;EACH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;EAEnD,MAAMC,YAAY,GAAGF,cAAK,CAACG,WAAW,CAAEC,OAA8B,IAAK;IACzEL,QAAQ,CAACK,OAAO,CAAC,CAAC,CAAC,CAACC,WAAW,CAACP,KAAK,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAQ,0BAAiB,EAAC,MAAM;IACtB,IAAI,CAACV,GAAG,CAACW,OAAO,EAAE;MAChB;IACF;IAEA,IAAIV,YAAY,EAAE;MAChB;IACF;IACA,IAAI,IAAAW,kBAAS,EAAC,CAAC,EAAE;MACf,MAAMC,EAAE,GAAG,IAAIC,cAAc,CAAEN,OAA8B,IAAK;QAChEF,YAAY,CAACE,OAAO,CAAC;MACvB,CAAC,CAAC;MAEFK,EAAE,CAACE,OAAO,CAACf,GAAG,CAACW,OAAO,CAAC;MAEvB,OAAO,MAAM;QACXE,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;IAAEC;EAAM,CAAC;AAClB,CAAC;AAACe,OAAA,CAAAlB,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"file":"useResizeObserver.js","names":["_canUseDOM","_interopRequireDefault","require","_useEnhancedEffect","_react","useResizeObserver","exports","ref","hookOverride","_React$useState","React","useState","_React$useState2","_slicedToArray2","width","setWidth","handleResize","useCallback","entries","contentRect","useEnhancedEffect","current","canUseDOM","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,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEO,IAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAC5BE,GAA2B,EAC3BC,YAAgC,EAC7B;EACH,IAAAC,eAAA,GAA0BC,iBAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAJ,eAAA;IAA5CK,KAAK,GAAAF,gBAAA;IAAEG,QAAQ,GAAAH,gBAAA;EAEtB,IAAMI,YAAY,GAAGN,iBAAK,CAACO,WAAW,CAAC,UAACC,OAA8B,EAAK;IACzEH,QAAQ,CAACG,OAAO,CAAC,CAAC,CAAC,CAACC,WAAW,CAACL,KAAK,CAAC;EACxC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAM,6BAAiB,EAAC,YAAM;IACtB,IAAI,CAACb,GAAG,CAACc,OAAO,EAAE;MAChB;IACF;IAEA,IAAIb,YAAY,EAAE;MAChB;IACF;IACA,IAAI,IAAAc,qBAAS,EAAC,CAAC,EAAE;MACf,IAAMC,EAAE,GAAG,IAAIC,cAAc,CAAC,UAACN,OAA8B,EAAK;QAChEF,YAAY,CAACE,OAAO,CAAC;MACvB,CAAC,CAAC;MAEFK,EAAE,CAACE,OAAO,CAAClB,GAAG,CAACc,OAAO,CAAC;MAEvB,OAAO,YAAM;QACXE,EAAE,CAACG,UAAU,CAAC,CAAC;MACjB,CAAC;IACH;EACF,CAAC,EAAE,CAAClB,YAAY,CAAC,CAAC;EAElB,IAAIA,YAAY,EAAE;IAChB,OAAOA,YAAY;EACrB;EACA,OAAO;IAAEM,KAAK,EAALA;EAAM,CAAC;AAClB,CAAC","ignoreList":[]}

package/lib/es6/Ellipsis.js

@@ -1,8 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _callSuper from "@babel/runtime/helpers/callSuper";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-import { Box } from '@semcore/base-components';
+var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"];
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
 import findComponent, { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
@@ -11,120 +18,172 @@ 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';
 /*!__reshadow-styles__:"./style/ellipsis.shadow.css"*/
-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}", /*__inner_css_end__*/"4aonj_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SBeginning_bcnty_gg_,.___SEllipsis_bcnty_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_bcnty_gg_.__maxLine_bcnty_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_bcnty);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_bcnty_gg_,.___SContainer_bcnty_gg_,.___SEllipsis_bcnty_gg_.__middle-mod_bcnty_gg_,.___SNoTooltipContainer_bcnty_gg_{display:flex;overflow:hidden}.___SContainerMiddle_bcnty_gg_>:has(.___SBeginning_bcnty_gg_),.___SContainerMiddle_bcnty_gg_>:has(.___STail_bcnty_gg_){display:flex;width:100%}.___STail_bcnty_gg_{white-space:pre}", /*__inner_css_end__*/"bcnty_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_bcnty_gg_",
+  "__SEllipsis": "___SEllipsis_bcnty_gg_",
+  "__SContainer": "___SContainer_bcnty_gg_",
+  "__SNoTooltipContainer": "___SNoTooltipContainer_bcnty_gg_",
+  "__SContainerMiddle": "___SContainerMiddle_bcnty_gg_",
+  "_maxLine": "__maxLine_bcnty_gg_",
+  "--maxLine": "--maxLine_bcnty",
+  "_middle-mod": "__middle-mod_bcnty_gg_",
+  "__STail": "___STail_bcnty_gg_"
 });
 import { useResizeObserver } from './useResizeObserver';
-import { isTextOverflowing, setFontSettings } from './utils';
-const defaultTooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate', 'cursorAnchoring'];
-const forcedAdvancedMode = {
+var defaultTooltipProps = ['title', 'theme', 'strategy', 'modifiers', 'placement', 'interaction', 'timeout', 'visible', 'defaultVisible', 'onVisibleChange', 'offset', 'preventOverflow', 'arrow', 'flip', 'computeStyles', 'eventListeners', 'onFirstUpdate', 'cursorAnchoring'];
+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');
+};
+var createMeasurerElement = 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;
+};
+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
 };
-const noAdvancedMode = {};
-class RootEllipsis extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
+var noAdvancedMode = {};
+var RootEllipsis = /*#__PURE__*/function (_Component) {
+  function RootEllipsis() {
+    var _this;
+    _classCallCheck(this, RootEllipsis);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, RootEllipsis, [].concat(args));
+    _defineProperty(_this, "state", {
       visible: false
     });
-    _defineProperty(this, "textRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "handlerVisibleChange", visible => {
-      this.setState({
-        visible: visible && this.showTooltip()
+    _defineProperty(_this, "textRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "handlerVisibleChange", function (visible) {
+      _this.setState({
+        visible: visible && _this.showTooltip()
       });
     });
+    return _this;
   }
-  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", {})));
+  _inherits(RootEllipsis, _Component);
+  return _createClass(RootEllipsis, [{
+    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);
     }
-    return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref3.cn("SContainer", {
-      "interaction": tooltip ? 'hover' : 'none',
-      "title": !advanceMode ? text : undefined,
-      ...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", {}))));
-  }
-}
+  }, {
+    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,
+        _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));
+      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 : undefined
+      }, 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", {}))));
+    }
+  }]);
+}(Component);
 _defineProperty(RootEllipsis, "displayName", 'Ellipsis');
 _defineProperty(RootEllipsis, "style", style);
 _defineProperty(RootEllipsis, "defaultProps", {
@@ -133,99 +192,92 @@ _defineProperty(RootEllipsis, "defaultProps", {
   includeTooltipProps: defaultTooltipProps,
   __excludeProps: ['title']
 });
-const EllipsisMiddleContext = /*#__PURE__*/React.createContext(null);
+var EllipsisMiddleContext = /*#__PURE__*/React.createContext(null);
 function EllipsisMiddle(props) {
   var _ref5;
-  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?.current || resizeElement?.current;
+  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);
     if (!node) return;
-    const styleElement = window.getComputedStyle(node);
-    const dateSpan = document.createElement('temporary-block');
+    var styleElement = window.getComputedStyle(node);
+    var dateSpan = document.createElement('temporary-block');
     setFontSettings(dateSpan, styleElement);
     dateSpan.textContent = 'a';
     document.body.appendChild(dateSpan);
-    const rect = dateSpan.getBoundingClientRect();
+    var rect = dateSpan.getBoundingClientRect();
     setSymbolWidth(rect.width);
     document.body.removeChild(dateSpan);
   }, []);
-  const STail = 'span';
-  const SBeginning = 'span';
-  const SContainerMiddle = Tooltip;
-  const SAdvancedModeContainerMiddle = Tooltip;
-  const displayedSymbols = React.useMemo(() => {
-    const displayedSymbols = Math.round(blockWidth / symbolWidth);
+  var STail = 'span';
+  var SBeginning = 'span';
+  var SContainerMiddle = Tooltip;
+  var SAdvancedModeContainerMiddle = Tooltip;
+  var displayedSymbols = React.useMemo(function () {
+    var displayedSymbols = Math.round(blockWidth / symbolWidth);
     return displayedSymbols % 2 === 0 ? displayedSymbols : displayedSymbols - 1;
   }, [blockWidth, symbolWidth]);
-  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]);
+  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: ref
+    };
+  }, [text, displayedSymbols]);
   if (advanceMode) {
     var _ref4;
-    return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", {
-      "interaction": tooltip ? interaction : 'none',
-      ...tooltipProps,
-      ...forcedAdvancedMode
-    }), /*#__PURE__*/React.createElement(EllipsisMiddleContext.Provider, {
+    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));
   }
-  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", {
+  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));
+    "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
-}) {
+function Content(_ref8) {
   var _ref = arguments[0],
     _ref7;
-  const SEllipsis = Tooltip.Trigger;
-  const ellipsisMiddleContext = React.useContext(EllipsisMiddleContext);
-  const STail = 'span';
-  const SBeginning = 'span';
+  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 _ref6;
-    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));
+    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));
   }
-  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref7.cn("SEllipsis", {
-    ..._assignProps2({}, _ref)
-  }), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})));
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref7.cn("SEllipsis", _objectSpread({}, _assignProps2({}, _ref))), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})));
 }
-const Ellipsis = createComponent(RootEllipsis, {
-  Content,
+var Ellipsis = createComponent(RootEllipsis, {
+  Content: Content,
   Popper: Tooltip.Popper
 });
 export default Ellipsis;