@semcore/ellipsis 16.0.12 → 17.0.0-prerelease.18

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [17.0.0] - 2026-02-18
+
+### BREAK
+
+- Deprecated component. Use the new `ellipsis` prop that's built into various components.
+
 ## [16.0.12] - 2025-11-14
 
 ### Changed

package/README.md

@@ -2,7 +2,7 @@
 
 [![version](https://img.shields.io/npm/v/@semcore/ellipsis.svg)](https://www.npmjs.com/@semcore/ellipsis)
 [![downloads](https://img.shields.io/npm/dt/@semcore/ellipsis.svg)](https://www.npmjs.com/package/@semcore/ellipsis)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE)
 
 > This component is part of the Intergalactic Design System
 
@@ -20,13 +20,13 @@ npm install @semcore/ellipsis
 
 ## 👤 Author
 
-[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [other ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+[UI-kit team](https://github.com/semrush/intergalactic/blob/HEAD/MAINTAINERS) and [other ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!
 
-Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/HEAD/CONTRIBUTING.md).
 
 ## Show your support
 
@@ -34,4 +34,4 @@ Give a ⭐️ if this project helped you!
 
 ## 📝 License
 
-This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
+This project is [MIT](https://github.com/semrush/intergalactic/blob/HEAD/LICENSE) licensed.

package/lib/cjs/Ellipsis.js

@@ -1,289 +1,237 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
+var _baseComponents = require("@semcore/base-components");
 var _assignProps3 = require("@semcore/core/lib/utils/assignProps");
 var _findComponent = _interopRequireWildcard(require("@semcore/core/lib/utils/findComponent"));
 var _getOriginChildren = _interopRequireDefault(require("@semcore/core/lib/utils/getOriginChildren"));
 var _pick = _interopRequireDefault(require("@semcore/core/lib/utils/pick"));
 var _reactToText = _interopRequireDefault(require("@semcore/core/lib/utils/reactToText"));
-var _ref9 = require("@semcore/core/lib/utils/ref");
+var _ref8 = require("@semcore/core/lib/utils/ref");
 var _useEnhancedEffect = _interopRequireDefault(require("@semcore/core/lib/utils/use/useEnhancedEffect"));
-var _flexBox = require("@semcore/flex-box");
 var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
 var _react = _interopRequireDefault(require("react"));
 var _useResizeObserver = require("./useResizeObserver");
-var _excluded = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"];
+var _utils = require("./utils");
 /*!__reshadow-styles__:"./style/ellipsis.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"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 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 = {
+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 RootEllipsis() {
-    var _this;
-    (0, _classCallCheck2["default"])(this, RootEllipsis);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = (0, _callSuper2["default"])(this, RootEllipsis, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "state", {
+const noAdvancedMode = {};
+class RootEllipsis extends _core.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {
       visible: false
     });
-    (0, _defineProperty2["default"])(_this, "textRef", /*#__PURE__*/_react["default"].createRef());
-    (0, _defineProperty2["default"])(_this, "handlerVisibleChange", function (visible) {
-      _this.setState({
-        visible: visible && _this.showTooltip()
+    (0, _defineProperty2.default)(this, "textRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(this, "handlerVisibleChange", visible => {
+      this.setState({
+        visible: visible && this.showTooltip()
       });
     });
-    return _this;
   }
-  (0, _inherits2["default"])(RootEllipsis, _Component);
-  return (0, _createClass2["default"])(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 = (0, _reactToText["default"])((0, _getOriginChildren["default"])(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 = (0, _reactToText["default"])((0, _getOriginChildren["default"])(Children));
-      var tooltipProps = (0, _pick["default"])(this.asProps, includeTooltipProps);
-      return (0, _objectSpread2["default"])({
-        children: text
-      }, tooltipProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref3, _tooltipProps$visible;
-      var SEllipsis = this.Root;
-      var SContainer = _tooltip["default"];
-      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 = (0, _objectWithoutProperties2["default"])(_this$asProps3, _excluded);
-      var visible = this.state.visible;
-      var advancedContent = (0, _findComponent["default"])(Children, [Ellipsis.Content.displayName]);
-      var text = (0, _reactToText["default"])(advancedContent || (0, _getOriginChildren["default"])(Children));
-      var advanceMode = (0, _findComponent.isAdvanceMode)(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
-      var tooltipProps = (0, _pick["default"])(this.asProps, includeTooltipProps);
-      tooltipProps.visible = (_tooltipProps$visible = tooltipProps.visible) !== null && _tooltipProps$visible !== void 0 ? _tooltipProps$visible : visible;
-      tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? (0, _assignProps3.callAllEventHandlers)(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
-      if (trim === 'middle') {
-        var _ref2;
-        return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(EllipsisMiddle, _ref2.cn("EllipsisMiddle", (0, _objectSpread2["default"])({
-          "text": text,
-          "styles": styles,
-          "tooltip": tooltip,
-          "containerRect": containerRect,
-          "containerRef": containerRef,
-          "textRef": this.textRef,
-          "tooltipProps": tooltipProps,
-          "advanceMode": advanceMode
-        }, other)), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})));
-      }
-      return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref3.cn("SContainer", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-        "interaction": tooltip ? 'hover' : 'none',
-        "title": !advanceMode ? text : undefined
-      }, tooltipProps), advanceMode ? forcedAdvancedMode : noAdvancedMode)), advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref3.cn("SEllipsis", (0, _objectSpread2["default"])({
-        "render": _flexBox.Box,
-        "ref": this.textRef,
-        "maxLine": maxLine
-      }, other)), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {}))));
+  showTooltip() {
+    const {
+      maxLine = 1,
+      Children
+    } = this.asProps;
+    const text = (0, _reactToText.default)((0, _getOriginChildren.default)(Children));
+    return (0, _utils.isTextOverflowing)(this.textRef.current, maxLine > 1, text);
+  }
+  getContentProps() {
+    return {
+      ref: this.textRef,
+      maxLine: this.asProps.maxLine
+    };
+  }
+  getPopperProps() {
+    const {
+      Children,
+      includeTooltipProps
+    } = this.asProps;
+    const text = (0, _reactToText.default)((0, _getOriginChildren.default)(Children));
+    const tooltipProps = (0, _pick.default)(this.asProps, includeTooltipProps);
+    return {
+      children: text,
+      ...tooltipProps
+    };
+  }
+  render() {
+    var _ref3;
+    const SEllipsis = this.Root;
+    const SContainer = _tooltip.default;
+    const {
+      styles,
+      Children,
+      maxLine,
+      tooltip,
+      trim,
+      containerRect,
+      containerRef,
+      includeTooltipProps,
+      children: _children,
+      ...other
+    } = this.asProps;
+    const {
+      visible
+    } = this.state;
+    const advancedContent = (0, _findComponent.default)(Children, [Ellipsis.Content.displayName]);
+    const text = (0, _reactToText.default)(advancedContent || (0, _getOriginChildren.default)(Children));
+    const advanceMode = (0, _findComponent.isAdvanceMode)(Children, [Ellipsis.Content.displayName, Ellipsis.Popper.displayName]);
+    const tooltipProps = (0, _pick.default)(this.asProps, includeTooltipProps);
+    tooltipProps.visible = tooltipProps.visible ?? visible;
+    tooltipProps.onVisibleChange = tooltipProps.onVisibleChange ? (0, _assignProps3.callAllEventHandlers)(tooltipProps.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange;
+    if (trim === 'middle') {
+      var _ref2;
+      return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.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.default.createElement(Children, _ref2.cn("Children", {})));
     }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(RootEllipsis, "displayName", 'Ellipsis');
-(0, _defineProperty2["default"])(RootEllipsis, "style", style);
-(0, _defineProperty2["default"])(RootEllipsis, "defaultProps", {
+    return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SContainer, _ref3.cn("SContainer", {
+      "interaction": tooltip ? 'hover' : 'none',
+      "title": !advanceMode ? text : undefined,
+      ...tooltipProps,
+      ...(advanceMode ? forcedAdvancedMode : noAdvancedMode)
+    }), advanceMode ? /*#__PURE__*/_react.default.createElement(Children, _ref3.cn("Children", {})) : /*#__PURE__*/_react.default.createElement(SEllipsis, _ref3.cn("SEllipsis", {
+      "render": _baseComponents.Box,
+      "ref": this.textRef,
+      "maxLine": maxLine,
+      ...other
+    }), /*#__PURE__*/_react.default.createElement(Children, _ref3.cn("Children", {}))));
+  }
+}
+(0, _defineProperty2.default)(RootEllipsis, "displayName", 'Ellipsis');
+(0, _defineProperty2.default)(RootEllipsis, "style", style);
+(0, _defineProperty2.default)(RootEllipsis, "defaultProps", {
   trim: 'end',
   tooltip: true,
   includeTooltipProps: defaultTooltipProps,
   __excludeProps: ['title']
 });
-var EllipsisMiddleContext = /*#__PURE__*/_react["default"].createContext(null);
-var EllipsisMiddle = function EllipsisMiddle(props) {
+const EllipsisMiddleContext = /*#__PURE__*/_react.default.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["default"].useRef(null);
-  var _React$useState = _react["default"].useState(0),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    symbolWidth = _React$useState2[0],
-    setSymbolWidth = _React$useState2[1];
-  var blockWidth = (0, _useResizeObserver.useResizeObserver)(resizeElement, containerRect).width;
-  (0, _useEnhancedEffect["default"])(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.default.useRef(null);
+  const [symbolWidth, setSymbolWidth] = _react.default.useState(0);
+  const blockWidth = (0, _useResizeObserver.useResizeObserver)(resizeElement, containerRect).width;
+  (0, _useEnhancedEffect.default)(() => {
+    const node = containerRef?.current || resizeElement?.current;
     if (!node) return;
-    var styleElement = window.getComputedStyle(node);
-    var dateSpan = document.createElement('temporary-block');
-    setFontSettings(dateSpan, styleElement);
+    const styleElement = window.getComputedStyle(node);
+    const dateSpan = document.createElement('temporary-block');
+    (0, _utils.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["default"];
-  var SAdvancedModeContainerMiddle = _tooltip["default"];
-  var displayedSymbols = _react["default"].useMemo(function () {
-    var displayedSymbols = Math.round(blockWidth / symbolWidth);
+  const STail = 'span';
+  const SBeginning = 'span';
+  const SContainerMiddle = _tooltip.default;
+  const SAdvancedModeContainerMiddle = _tooltip.default;
+  const displayedSymbols = _react.default.useMemo(() => {
+    const displayedSymbols = Math.round(blockWidth / symbolWidth);
     return displayedSymbols % 2 === 0 ? displayedSymbols : displayedSymbols - 1;
   }, [blockWidth, symbolWidth]);
-  var interaction = text.length > displayedSymbols ? 'hover' : 'none';
-  var ref = containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement;
-  var contextValue = _react["default"].useMemo(function () {
-    return {
-      begining: text.substring(0, text.length - displayedSymbols / 2 - 1),
-      tail: text.substring(text.length - displayedSymbols / 2 - 1),
-      ref: ref
-    };
-  }, [text, displayedSymbols]);
+  const interaction = text.length > displayedSymbols ? 'hover' : 'none';
+  const ref = containerRef ?? resizeElement;
+  const contextValue = _react.default.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 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-      "interaction": tooltip ? interaction : 'none'
-    }, tooltipProps), forcedAdvancedMode)), /*#__PURE__*/_react["default"].createElement(EllipsisMiddleContext.Provider, {
+    return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SAdvancedModeContainerMiddle, _ref4.cn("SAdvancedModeContainerMiddle", {
+      "interaction": tooltip ? interaction : 'none',
+      ...tooltipProps,
+      ...forcedAdvancedMode
+    }), /*#__PURE__*/_react.default.createElement(EllipsisMiddleContext.Provider, {
       value: contextValue
     }, children));
   }
-  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", (0, _objectSpread2["default"])({
+  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", {
     "interaction": tooltip ? interaction : 'none',
     "title": text,
-    "ref": (0, _ref9.forkRef)(ref, textRef),
-    "tag": tag
-  }, tooltipProps)), /*#__PURE__*/_react["default"].createElement(SBeginning, _ref5.cn("SBeginning", {}), contextValue.begining), /*#__PURE__*/_react["default"].createElement(STail, _ref5.cn("STail", {}), contextValue.tail));
-};
-var Content = function Content(_ref8) {
+    "ref": (0, _ref8.forkRef)(ref, textRef),
+    "tag": tag,
+    ...tooltipProps
+  }), /*#__PURE__*/_react.default.createElement(SBeginning, _ref5.cn("SBeginning", {}), contextValue.begining), /*#__PURE__*/_react.default.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["default"].Trigger;
-  var ellipsisMiddleContext = _react["default"].useContext(EllipsisMiddleContext);
-  var STail = 'span';
-  var SBeginning = 'span';
+  const SEllipsis = _tooltip.default.Trigger;
+  const ellipsisMiddleContext = _react.default.useContext(EllipsisMiddleContext);
+  const STail = 'span';
+  const SBeginning = 'span';
   if (ellipsisMiddleContext) {
     var _ref6;
-    var begining = ellipsisMiddleContext.begining,
-      tail = ellipsisMiddleContext.tail,
-      ref = ellipsisMiddleContext.ref;
-    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref6.cn("SEllipsis", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-      "middle-mod": true,
-      "ref": ref
-    }, _ref))), /*#__PURE__*/_react["default"].createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /*#__PURE__*/_react["default"].createElement(STail, _ref6.cn("STail", {}), tail));
+    const {
+      begining,
+      tail,
+      ref
+    } = ellipsisMiddleContext;
+    return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SEllipsis, _ref6.cn("SEllipsis", {
+      ...(0, _core.assignProps)({
+        "middle-mod": true,
+        "ref": ref
+      }, _ref)
+    }), /*#__PURE__*/_react.default.createElement(SBeginning, _ref6.cn("SBeginning", {}), begining), /*#__PURE__*/_react.default.createElement(STail, _ref6.cn("STail", {}), tail));
   }
-  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref7.cn("SEllipsis", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})));
-};
-var Ellipsis = (0, _core.createComponent)(RootEllipsis, {
-  Content: Content,
-  Popper: _tooltip["default"].Popper
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react.default.createElement(SEllipsis, _ref7.cn("SEllipsis", {
+    ...(0, _core.assignProps)({}, _ref)
+  }), /*#__PURE__*/_react.default.createElement(Children, _ref7.cn("Children", {})));
+}
+const Ellipsis = (0, _core.createComponent)(RootEllipsis, {
+  Content,
+  Popper: _tooltip.default.Popper
 });
-var _default = exports["default"] = Ellipsis;
+var _default = exports.default = Ellipsis;
 //# sourceMappingURL=Ellipsis.js.map