@semcore/ellipsis 1.1.8 → 1.1.10

package/CHANGELOG.md

@@ -2,19 +2,23 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [1.1.8] - 2023-01-20
+## [1.1.10] - 2023-02-09
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.45.0 ~> 3.46.0]).
+- Version patch update due to children dependencies update (`@semcore/utils` [3.46.0 ~> 3.46.1], `@semcore/tooltip` [5.3.8 ~> 5.3.9]).
 
-## [1.1.6] - 2023-01-10
+## [1.1.9] - 2023-01-24
+
+### Fixed
 
-## [1.1.5] - 2023-01-09
+- Stopped showing tooltip if text is not truncated.
+
+## [1.1.8] - 2023-01-20
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.44.1 ~> 3.44.2]).
+- Version patch update due to children dependencies update (`@semcore/utils` [3.45.0 ~> 3.46.0]).
 
 ## [1.1.4] - 2023-01-03
 

package/lib/cjs/Ellipsis.js

@@ -15,6 +15,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -50,31 +52,96 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SContainer_14o7y_gg_,.___SContainerMiddle_14o7y_gg_{display:flex;overflow:hidden}.___SBeginning_14o7y_gg_,.___SEllipsis_14o7y_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_14o7y_gg_.__maxLine_14o7y_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_14o7y);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_14o7y_gg_{white-space:nowrap}"
+".___SContainer_9xuu4_gg_,.___SContainerMiddle_9xuu4_gg_{display:flex;overflow:hidden}.___SBeginning_9xuu4_gg_,.___SEllipsis_9xuu4_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_9xuu4_gg_.__maxLine_9xuu4_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_9xuu4);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_9xuu4_gg_{white-space:nowrap}"
 /*__inner_css_end__*/
-, "14o7y_gg_")
+, "9xuu4_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SContainer": "___SContainer_14o7y_gg_",
-  "__SContainerMiddle": "___SContainerMiddle_14o7y_gg_",
-  "__SBeginning": "___SBeginning_14o7y_gg_",
-  "__SEllipsis": "___SEllipsis_14o7y_gg_",
-  "_maxLine": "__maxLine_14o7y_gg_",
-  "--maxLine": "--maxLine_14o7y",
-  "__STail": "___STail_14o7y_gg_"
+  "__SContainer": "___SContainer_9xuu4_gg_",
+  "__SContainerMiddle": "___SContainerMiddle_9xuu4_gg_",
+  "__SBeginning": "___SBeginning_9xuu4_gg_",
+  "__SEllipsis": "___SEllipsis_9xuu4_gg_",
+  "_maxLine": "__maxLine_9xuu4_gg_",
+  "--maxLine": "--maxLine_9xuu4",
+  "__STail": "___STail_9xuu4_gg_"
 });
 
+var createMeasurerElement = function createMeasurerElement(element) {
+  var styleElement = window.getComputedStyle(element, null);
+  var temporaryElement = document.createElement('temporary-block');
+  temporaryElement.style.display = 'inline-block';
+  temporaryElement.style.padding = '0';
+  temporaryElement.style.position = 'absolute';
+  temporaryElement.style.right = '150%';
+  temporaryElement.style.bottom = '150%';
+  temporaryElement.style.visibility = 'hidden';
+  temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');
+  temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');
+  temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');
+  temporaryElement.innerHTML = element.innerHTML;
+  return temporaryElement;
+};
+
+function isTextOverflowing(element, multiline) {
+  if (!element) return false;
+
+  var _element$getBoundingC = element.getBoundingClientRect(),
+      currentHeight = _element$getBoundingC.height,
+      currentWidth = _element$getBoundingC.width;
+
+  var measuringElement = createMeasurerElement(element);
+  var currentSize, initialSize;
+  document.body.appendChild(measuringElement);
+
+  if (multiline) {
+    currentSize = currentHeight;
+    measuringElement.style.width = "".concat(currentWidth, "px");
+    initialSize = measuringElement.getBoundingClientRect().height;
+  } else {
+    currentSize = currentWidth;
+    measuringElement.style.whiteSpace = 'nowrap';
+    initialSize = measuringElement.getBoundingClientRect().width;
+  }
+
+  document.body.removeChild(measuringElement);
+  return currentSize < initialSize;
+}
+
 var RootEllipsis = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RootEllipsis, _Component);
 
   var _super = _createSuper(RootEllipsis);
 
   function RootEllipsis() {
+    var _this;
+
     (0, _classCallCheck2["default"])(this, RootEllipsis);
-    return _super.apply(this, arguments);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      visible: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "textRef", /*#__PURE__*/_react["default"].createRef());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handlerVisibleChange", function (visible) {
+      _this.setState({
+        visible: visible && _this.showTooltip()
+      });
+    });
+    return _this;
   }
 
   (0, _createClass2["default"])(RootEllipsis, [{
+    key: "showTooltip",
+    value: function showTooltip() {
+      var _this$asProps$maxLine = this.asProps.maxLine,
+          maxLine = _this$asProps$maxLine === void 0 ? 1 : _this$asProps$maxLine;
+      return isTextOverflowing(this.textRef.current, maxLine > 1);
+    }
+  }, {
     key: "render",
     value: function render() {
       var _ref3;
@@ -89,6 +156,7 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
           trim = _this$asProps.trim,
           containerRect = _this$asProps.containerRect,
           containerRef = _this$asProps.containerRef;
+      var visible = this.state.visible;
       var text = (0, _reactToText["default"])((0, _getOriginChildren["default"])(Children));
 
       if (trim === 'middle') {
@@ -107,10 +175,13 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
         var _ref2;
 
         return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref2.cn("SContainer", {
-          "interaction": "hover",
-          "title": text
+          "interaction": 'hover',
+          "title": text,
+          "visible": visible,
+          "onVisibleChange": this.handlerVisibleChange
         }), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref2.cn("SEllipsis", {
           "render": _flexBox.Box,
+          "ref": this.textRef,
           "maxLine": maxLine
         }), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {}))));
       }
@@ -156,12 +227,12 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
     dateSpan.innerHTML = 'a';
     document.body.appendChild(dateSpan);
     var rect = dateSpan.getBoundingClientRect();
-    dateSpan.remove();
     setDimension({
       fontSize: window // @ts-ignore
       .getComputedStyle((_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : resizeElement.current, null).getPropertyValue('font-size'),
       symbolWidth: rect.width
     });
+    document.body.removeChild(dateSpan);
   }, []);
   var STail = 'span';
   var SBeginning = 'span';
@@ -174,7 +245,7 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
     var _ref4;
 
     return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", {
-      "interaction": "hover",
+      "interaction": text.length > displayedSymbols ? 'hover' : 'none',
       "title": text,
       "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement,
       "tag": _tooltip["default"]

package/lib/cjs/Ellipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsis.js","names":["RootEllipsis","SEllipsis","Root","SContainer","Tooltip","asProps","styles","Children","maxLine","tooltip","trim","containerRect","containerRef","text","reactToText","getOriginChildren","sstyled","Box","Component","style","EllipsisMiddle","props","resizeElement","useRef","useState","fontSize","symbolWidth","dimension","setDimension","blockWidth","useResizeObserver","width","useLayoutEffect","dateSpan","document","createElement","setAttribute","innerHTML","body","appendChild","rect","getBoundingClientRect","remove","window","getComputedStyle","current","getPropertyValue","STail","SBeginning","SContainerMiddle","displayedSymbols","useMemo","Math","round","substring","length","Ellipsis","createComponent"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n  maxLine?: number;\n  trim?: 'end' | 'middle';\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n  text: string;\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\nclass RootEllipsis extends Component<AsProps> {\n  static displayName = 'Ellipsis';\n  static style = style;\n  static defaultProps: AsProps = {\n    trim: 'end',\n    tooltip: true,\n  };\n\n  render() {\n    const SEllipsis = this.Root;\n    const SContainer = Tooltip;\n    const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n    const text = reactToText(getOriginChildren(Children));\n\n    if (trim === 'middle') {\n      return sstyled(styles)(\n        <EllipsisMiddle\n          text={text}\n          styles={styles}\n          tooltip={tooltip}\n          containerRect={containerRect}\n          containerRef={containerRef}\n        />,\n      );\n    }\n    if (tooltip) {\n      return sstyled(styles)(\n        <SContainer interaction=\"hover\" title={text}>\n          <SEllipsis render={Box} maxLine={maxLine}>\n            <Children />\n          </SEllipsis>\n        </SContainer>,\n      );\n    }\n    return sstyled(styles)(\n      <SEllipsis render={Box} maxLine={maxLine}>\n        <Children />\n      </SEllipsis>,\n    );\n  }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n  const { styles, text, tooltip, containerRect, containerRef } = props;\n  const resizeElement = useRef<HTMLElement | null>(null);\n  const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n    fontSize: '14',\n    symbolWidth: 0,\n  });\n  const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n  useLayoutEffect(() => {\n    const dateSpan = document.createElement('temporary-block');\n    dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n    dateSpan.innerHTML = 'a';\n    document.body.appendChild(dateSpan);\n    const rect = dateSpan.getBoundingClientRect();\n    dateSpan.remove();\n\n    setDimension({\n      fontSize: window\n        // @ts-ignore\n        .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n        .getPropertyValue('font-size'),\n      symbolWidth: rect.width,\n    });\n  }, []);\n\n  const STail = 'span';\n  const SBeginning = 'span';\n  const SContainerMiddle = Box;\n  const displayedSymbols = useMemo(\n    () => Math.round(blockWidth / dimension.symbolWidth),\n    [blockWidth, dimension.symbolWidth],\n  );\n\n  if (tooltip) {\n    return sstyled(styles)(\n      <SContainerMiddle\n        interaction=\"hover\"\n        title={text}\n        ref={containerRef ?? resizeElement}\n        tag={Tooltip}\n      >\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  } else {\n    return sstyled(styles)(\n      <SContainerMiddle ref={containerRef ?? resizeElement}>\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
+{"version":3,"file":"Ellipsis.js","names":["createMeasurerElement","element","styleElement","window","getComputedStyle","temporaryElement","document","createElement","style","display","padding","position","right","bottom","visibility","fontFamily","getPropertyValue","fontSize","fontWeight","innerHTML","isTextOverflowing","multiline","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","currentSize","initialSize","body","appendChild","whiteSpace","removeChild","RootEllipsis","visible","React","createRef","setState","showTooltip","asProps","maxLine","textRef","current","SEllipsis","Root","SContainer","Tooltip","styles","Children","tooltip","trim","containerRect","containerRef","state","text","reactToText","getOriginChildren","sstyled","handlerVisibleChange","Box","Component","EllipsisMiddle","props","resizeElement","useRef","useState","symbolWidth","dimension","setDimension","blockWidth","useResizeObserver","useLayoutEffect","dateSpan","setAttribute","rect","STail","SBeginning","SContainerMiddle","displayedSymbols","useMemo","Math","round","length","substring","Ellipsis","createComponent"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n  maxLine?: number;\n  trim?: 'end' | 'middle';\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n  text: string;\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\nconst createMeasurerElement = (element: HTMLElement) => {\n  const styleElement = window.getComputedStyle(element, null);\n  const temporaryElement = document.createElement('temporary-block');\n  temporaryElement.style.display = 'inline-block';\n  temporaryElement.style.padding = '0';\n  temporaryElement.style.position = 'absolute';\n  temporaryElement.style.right = '150%';\n  temporaryElement.style.bottom = '150%';\n  temporaryElement.style.visibility = 'hidden';\n  temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');\n  temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');\n  temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');\n\n  temporaryElement.innerHTML = element.innerHTML;\n  return temporaryElement;\n};\n\nfunction isTextOverflowing(element: HTMLElement | null, multiline: boolean): boolean {\n  if (!element) return false;\n\n  const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n  const measuringElement = createMeasurerElement(element);\n  let currentSize, initialSize;\n  document.body.appendChild(measuringElement);\n  if (multiline) {\n    currentSize = currentHeight;\n    measuringElement.style.width = `${currentWidth}px`;\n    initialSize = measuringElement.getBoundingClientRect().height;\n  } else {\n    currentSize = currentWidth;\n    measuringElement.style.whiteSpace = 'nowrap';\n    initialSize = measuringElement.getBoundingClientRect().width;\n  }\n  document.body.removeChild(measuringElement);\n  return currentSize < initialSize;\n}\n\n\nclass RootEllipsis extends Component<AsProps> {\n  static displayName = 'Ellipsis';\n  static style = style;\n  static defaultProps: AsProps = {\n    trim: 'end',\n    tooltip: true,\n  };\n\n  state = {\n    visible: false,\n  };\n\n  textRef = React.createRef<HTMLElement>();\n\n  showTooltip() {\n    const { maxLine = 1 } = this.asProps;\n    return isTextOverflowing(this.textRef.current, maxLine > 1)\n  };\n\n  handlerVisibleChange = (visible: boolean) => {\n    this.setState({ visible: visible && this.showTooltip() });\n  };\n\n  render() {\n    const SEllipsis = this.Root;\n    const SContainer = Tooltip;\n    const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n    const { visible } = this.state;\n    const text = reactToText(getOriginChildren(Children));\n\n    if (trim === 'middle') {\n      return sstyled(styles)(\n        <EllipsisMiddle\n          text={text}\n          styles={styles}\n          tooltip={tooltip}\n          containerRect={containerRect}\n          containerRef={containerRef}\n        />,\n      );\n    }\n    if (tooltip) {\n      return sstyled(styles)(\n        <SContainer interaction='hover' title={text} visible={visible} onVisibleChange={this.handlerVisibleChange}>\n          <SEllipsis render={Box} ref={this.textRef} maxLine={maxLine}>\n            <Children />\n          </SEllipsis>\n        </SContainer>,\n      );\n    }\n    return sstyled(styles)(\n      <SEllipsis render={Box} maxLine={maxLine}>\n        <Children />\n      </SEllipsis>,\n    );\n  }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n  const { styles, text, tooltip, containerRect, containerRef } = props;\n  const resizeElement = useRef<HTMLElement | null>(null);\n  const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n    fontSize: '14',\n    symbolWidth: 0,\n  });\n  const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n  useLayoutEffect(() => {\n    const dateSpan = document.createElement('temporary-block');\n    dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n    dateSpan.innerHTML = 'a';\n    document.body.appendChild(dateSpan);\n    const rect = dateSpan.getBoundingClientRect();\n\n    setDimension({\n      fontSize: window\n        // @ts-ignore\n        .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n        .getPropertyValue('font-size'),\n      symbolWidth: rect.width,\n    });\n    document.body.removeChild(dateSpan);\n  }, []);\n\n  const STail = 'span';\n  const SBeginning = 'span';\n  const SContainerMiddle = Box;\n  const displayedSymbols = useMemo(\n    () => Math.round(blockWidth / dimension.symbolWidth),\n    [blockWidth, dimension.symbolWidth],\n  );\n\n  if (tooltip) {\n    return sstyled(styles)(\n      <SContainerMiddle\n        interaction={text.length > displayedSymbols ? 'hover' : 'none'}\n        title={text}\n        ref={containerRef ?? resizeElement}\n        tag={Tooltip}\n      >\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  } else {\n    return sstyled(styles)(\n      <SContainerMiddle ref={containerRef ?? resizeElement}>\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}

package/lib/es6/Ellipsis.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
@@ -22,34 +23,102 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SContainer_14o7y_gg_,.___SContainerMiddle_14o7y_gg_{display:flex;overflow:hidden}.___SBeginning_14o7y_gg_,.___SEllipsis_14o7y_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_14o7y_gg_.__maxLine_14o7y_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_14o7y);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_14o7y_gg_{white-space:nowrap}"
+".___SContainer_9xuu4_gg_,.___SContainerMiddle_9xuu4_gg_{display:flex;overflow:hidden}.___SBeginning_9xuu4_gg_,.___SEllipsis_9xuu4_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.___SEllipsis_9xuu4_gg_.__maxLine_9xuu4_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_9xuu4);-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.___STail_9xuu4_gg_{white-space:nowrap}"
 /*__inner_css_end__*/
-, "14o7y_gg_")
+, "9xuu4_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SContainer": "___SContainer_14o7y_gg_",
-  "__SContainerMiddle": "___SContainerMiddle_14o7y_gg_",
-  "__SBeginning": "___SBeginning_14o7y_gg_",
-  "__SEllipsis": "___SEllipsis_14o7y_gg_",
-  "_maxLine": "__maxLine_14o7y_gg_",
-  "--maxLine": "--maxLine_14o7y",
-  "__STail": "___STail_14o7y_gg_"
+  "__SContainer": "___SContainer_9xuu4_gg_",
+  "__SContainerMiddle": "___SContainerMiddle_9xuu4_gg_",
+  "__SBeginning": "___SBeginning_9xuu4_gg_",
+  "__SEllipsis": "___SEllipsis_9xuu4_gg_",
+  "_maxLine": "__maxLine_9xuu4_gg_",
+  "--maxLine": "--maxLine_9xuu4",
+  "__STail": "___STail_9xuu4_gg_"
 });
 import reactToText from '@semcore/utils/lib/reactToText';
 import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
 
+var createMeasurerElement = function createMeasurerElement(element) {
+  var styleElement = window.getComputedStyle(element, null);
+  var temporaryElement = document.createElement('temporary-block');
+  temporaryElement.style.display = 'inline-block';
+  temporaryElement.style.padding = '0';
+  temporaryElement.style.position = 'absolute';
+  temporaryElement.style.right = '150%';
+  temporaryElement.style.bottom = '150%';
+  temporaryElement.style.visibility = 'hidden';
+  temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');
+  temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');
+  temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');
+  temporaryElement.innerHTML = element.innerHTML;
+  return temporaryElement;
+};
+
+function isTextOverflowing(element, multiline) {
+  if (!element) return false;
+
+  var _element$getBoundingC = element.getBoundingClientRect(),
+      currentHeight = _element$getBoundingC.height,
+      currentWidth = _element$getBoundingC.width;
+
+  var measuringElement = createMeasurerElement(element);
+  var currentSize, initialSize;
+  document.body.appendChild(measuringElement);
+
+  if (multiline) {
+    currentSize = currentHeight;
+    measuringElement.style.width = "".concat(currentWidth, "px");
+    initialSize = measuringElement.getBoundingClientRect().height;
+  } else {
+    currentSize = currentWidth;
+    measuringElement.style.whiteSpace = 'nowrap';
+    initialSize = measuringElement.getBoundingClientRect().width;
+  }
+
+  document.body.removeChild(measuringElement);
+  return currentSize < initialSize;
+}
+
 var RootEllipsis = /*#__PURE__*/function (_Component) {
   _inherits(RootEllipsis, _Component);
 
   var _super = _createSuper(RootEllipsis);
 
   function RootEllipsis() {
+    var _this;
+
     _classCallCheck(this, RootEllipsis);
 
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      visible: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "textRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "handlerVisibleChange", function (visible) {
+      _this.setState({
+        visible: visible && _this.showTooltip()
+      });
+    });
+
+    return _this;
   }
 
   _createClass(RootEllipsis, [{
+    key: "showTooltip",
+    value: function showTooltip() {
+      var _this$asProps$maxLine = this.asProps.maxLine,
+          maxLine = _this$asProps$maxLine === void 0 ? 1 : _this$asProps$maxLine;
+      return isTextOverflowing(this.textRef.current, maxLine > 1);
+    }
+  }, {
     key: "render",
     value: function render() {
       var _ref3;
@@ -64,6 +133,7 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
           trim = _this$asProps.trim,
           containerRect = _this$asProps.containerRect,
           containerRef = _this$asProps.containerRef;
+      var visible = this.state.visible;
       var text = reactToText(getOriginChildren(Children));
 
       if (trim === 'middle') {
@@ -82,10 +152,13 @@ var RootEllipsis = /*#__PURE__*/function (_Component) {
         var _ref2;
 
         return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref2.cn("SContainer", {
-          "interaction": "hover",
-          "title": text
+          "interaction": 'hover',
+          "title": text,
+          "visible": visible,
+          "onVisibleChange": this.handlerVisibleChange
         }), /*#__PURE__*/React.createElement(SEllipsis, _ref2.cn("SEllipsis", {
           "render": Box,
+          "ref": this.textRef,
           "maxLine": maxLine
         }), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {}))));
       }
@@ -134,12 +207,12 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
     dateSpan.innerHTML = 'a';
     document.body.appendChild(dateSpan);
     var rect = dateSpan.getBoundingClientRect();
-    dateSpan.remove();
     setDimension({
       fontSize: window // @ts-ignore
       .getComputedStyle((_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : resizeElement.current, null).getPropertyValue('font-size'),
       symbolWidth: rect.width
     });
+    document.body.removeChild(dateSpan);
   }, []);
   var STail = 'span';
   var SBeginning = 'span';
@@ -152,7 +225,7 @@ var EllipsisMiddle = function EllipsisMiddle(props) {
     var _ref4;
 
     return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", {
-      "interaction": "hover",
+      "interaction": text.length > displayedSymbols ? 'hover' : 'none',
       "title": text,
       "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement,
       "tag": Tooltip

package/lib/es6/Ellipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","Box","useResizeObserver","reactToText","getOriginChildren","RootEllipsis","SEllipsis","Root","SContainer","asProps","styles","Children","maxLine","tooltip","trim","containerRect","containerRef","text","style","EllipsisMiddle","props","resizeElement","fontSize","symbolWidth","dimension","setDimension","blockWidth","width","dateSpan","document","createElement","setAttribute","innerHTML","body","appendChild","rect","getBoundingClientRect","remove","window","getComputedStyle","current","getPropertyValue","STail","SBeginning","SContainerMiddle","displayedSymbols","Math","round","substring","length","Ellipsis"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n  maxLine?: number;\n  trim?: 'end' | 'middle';\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n  text: string;\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\nclass RootEllipsis extends Component<AsProps> {\n  static displayName = 'Ellipsis';\n  static style = style;\n  static defaultProps: AsProps = {\n    trim: 'end',\n    tooltip: true,\n  };\n\n  render() {\n    const SEllipsis = this.Root;\n    const SContainer = Tooltip;\n    const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n    const text = reactToText(getOriginChildren(Children));\n\n    if (trim === 'middle') {\n      return sstyled(styles)(\n        <EllipsisMiddle\n          text={text}\n          styles={styles}\n          tooltip={tooltip}\n          containerRect={containerRect}\n          containerRef={containerRef}\n        />,\n      );\n    }\n    if (tooltip) {\n      return sstyled(styles)(\n        <SContainer interaction=\"hover\" title={text}>\n          <SEllipsis render={Box} maxLine={maxLine}>\n            <Children />\n          </SEllipsis>\n        </SContainer>,\n      );\n    }\n    return sstyled(styles)(\n      <SEllipsis render={Box} maxLine={maxLine}>\n        <Children />\n      </SEllipsis>,\n    );\n  }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n  const { styles, text, tooltip, containerRect, containerRef } = props;\n  const resizeElement = useRef<HTMLElement | null>(null);\n  const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n    fontSize: '14',\n    symbolWidth: 0,\n  });\n  const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n  useLayoutEffect(() => {\n    const dateSpan = document.createElement('temporary-block');\n    dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n    dateSpan.innerHTML = 'a';\n    document.body.appendChild(dateSpan);\n    const rect = dateSpan.getBoundingClientRect();\n    dateSpan.remove();\n\n    setDimension({\n      fontSize: window\n        // @ts-ignore\n        .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n        .getPropertyValue('font-size'),\n      symbolWidth: rect.width,\n    });\n  }, []);\n\n  const STail = 'span';\n  const SBeginning = 'span';\n  const SContainerMiddle = Box;\n  const displayedSymbols = useMemo(\n    () => Math.round(blockWidth / dimension.symbolWidth),\n    [blockWidth, dimension.symbolWidth],\n  );\n\n  if (tooltip) {\n    return sstyled(styles)(\n      <SContainerMiddle\n        interaction=\"hover\"\n        title={text}\n        ref={containerRef ?? resizeElement}\n        tag={Tooltip}\n      >\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  } else {\n    return sstyled(styles)(\n      <SContainerMiddle ref={containerRef ?? resizeElement}>\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}
+{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","Box","useResizeObserver","reactToText","getOriginChildren","createMeasurerElement","element","styleElement","window","getComputedStyle","temporaryElement","document","createElement","style","display","padding","position","right","bottom","visibility","fontFamily","getPropertyValue","fontSize","fontWeight","innerHTML","isTextOverflowing","multiline","getBoundingClientRect","currentHeight","height","currentWidth","width","measuringElement","currentSize","initialSize","body","appendChild","whiteSpace","removeChild","RootEllipsis","visible","createRef","setState","showTooltip","asProps","maxLine","textRef","current","SEllipsis","Root","SContainer","styles","Children","tooltip","trim","containerRect","containerRef","state","text","handlerVisibleChange","EllipsisMiddle","props","resizeElement","symbolWidth","dimension","setDimension","blockWidth","dateSpan","setAttribute","rect","STail","SBeginning","SContainerMiddle","displayedSymbols","Math","round","length","substring","Ellipsis"],"sources":["../../src/Ellipsis.tsx"],"sourcesContent":["import React, { RefObject, useRef, useMemo, useState, useLayoutEffect } from 'react';\nimport createComponent, { Component, sstyled } from '@semcore/core';\nimport Tooltip from '@semcore/tooltip';\nimport { Box } from '@semcore/flex-box';\nimport { useResizeObserver } from './useResizeObserver';\n\nimport style from './style/ellipsis.shadow.css';\nimport reactToText from '@semcore/utils/lib/reactToText';\nimport getOriginChildren from '@semcore/utils/lib/getOriginChildren';\n\ntype AsProps = {\n  maxLine?: number;\n  trim?: 'end' | 'middle';\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\ntype AsPropsMiddle = {\n  text: string;\n  tooltip?: boolean;\n  styles?: React.CSSProperties;\n  containerRect?: { width: number };\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n};\n\nconst createMeasurerElement = (element: HTMLElement) => {\n  const styleElement = window.getComputedStyle(element, null);\n  const temporaryElement = document.createElement('temporary-block');\n  temporaryElement.style.display = 'inline-block';\n  temporaryElement.style.padding = '0';\n  temporaryElement.style.position = 'absolute';\n  temporaryElement.style.right = '150%';\n  temporaryElement.style.bottom = '150%';\n  temporaryElement.style.visibility = 'hidden';\n  temporaryElement.style.fontFamily = styleElement.getPropertyValue('font-family');\n  temporaryElement.style.fontSize = styleElement.getPropertyValue('font-size');\n  temporaryElement.style.fontWeight = styleElement.getPropertyValue('font-weight');\n\n  temporaryElement.innerHTML = element.innerHTML;\n  return temporaryElement;\n};\n\nfunction isTextOverflowing(element: HTMLElement | null, multiline: boolean): boolean {\n  if (!element) return false;\n\n  const { height: currentHeight, width: currentWidth } = element.getBoundingClientRect();\n  const measuringElement = createMeasurerElement(element);\n  let currentSize, initialSize;\n  document.body.appendChild(measuringElement);\n  if (multiline) {\n    currentSize = currentHeight;\n    measuringElement.style.width = `${currentWidth}px`;\n    initialSize = measuringElement.getBoundingClientRect().height;\n  } else {\n    currentSize = currentWidth;\n    measuringElement.style.whiteSpace = 'nowrap';\n    initialSize = measuringElement.getBoundingClientRect().width;\n  }\n  document.body.removeChild(measuringElement);\n  return currentSize < initialSize;\n}\n\n\nclass RootEllipsis extends Component<AsProps> {\n  static displayName = 'Ellipsis';\n  static style = style;\n  static defaultProps: AsProps = {\n    trim: 'end',\n    tooltip: true,\n  };\n\n  state = {\n    visible: false,\n  };\n\n  textRef = React.createRef<HTMLElement>();\n\n  showTooltip() {\n    const { maxLine = 1 } = this.asProps;\n    return isTextOverflowing(this.textRef.current, maxLine > 1)\n  };\n\n  handlerVisibleChange = (visible: boolean) => {\n    this.setState({ visible: visible && this.showTooltip() });\n  };\n\n  render() {\n    const SEllipsis = this.Root;\n    const SContainer = Tooltip;\n    const { styles, Children, maxLine, tooltip, trim, containerRect, containerRef } = this.asProps;\n    const { visible } = this.state;\n    const text = reactToText(getOriginChildren(Children));\n\n    if (trim === 'middle') {\n      return sstyled(styles)(\n        <EllipsisMiddle\n          text={text}\n          styles={styles}\n          tooltip={tooltip}\n          containerRect={containerRect}\n          containerRef={containerRef}\n        />,\n      );\n    }\n    if (tooltip) {\n      return sstyled(styles)(\n        <SContainer interaction='hover' title={text} visible={visible} onVisibleChange={this.handlerVisibleChange}>\n          <SEllipsis render={Box} ref={this.textRef} maxLine={maxLine}>\n            <Children />\n          </SEllipsis>\n        </SContainer>,\n      );\n    }\n    return sstyled(styles)(\n      <SEllipsis render={Box} maxLine={maxLine}>\n        <Children />\n      </SEllipsis>,\n    );\n  }\n}\n\nconst EllipsisMiddle: React.FC<AsPropsMiddle> = (props) => {\n  const { styles, text, tooltip, containerRect, containerRef } = props;\n  const resizeElement = useRef<HTMLElement | null>(null);\n  const [dimension, setDimension] = useState<{ fontSize: string; symbolWidth: number }>({\n    fontSize: '14',\n    symbolWidth: 0,\n  });\n  const blockWidth = useResizeObserver(resizeElement, containerRect).width;\n\n  useLayoutEffect(() => {\n    const dateSpan = document.createElement('temporary-block');\n    dateSpan.setAttribute('style', `fontSize: ${dimension.fontSize}px`);\n    dateSpan.innerHTML = 'a';\n    document.body.appendChild(dateSpan);\n    const rect = dateSpan.getBoundingClientRect();\n\n    setDimension({\n      fontSize: window\n        // @ts-ignore\n        .getComputedStyle(containerRef?.current ?? resizeElement.current, null)\n        .getPropertyValue('font-size'),\n      symbolWidth: rect.width,\n    });\n    document.body.removeChild(dateSpan);\n  }, []);\n\n  const STail = 'span';\n  const SBeginning = 'span';\n  const SContainerMiddle = Box;\n  const displayedSymbols = useMemo(\n    () => Math.round(blockWidth / dimension.symbolWidth),\n    [blockWidth, dimension.symbolWidth],\n  );\n\n  if (tooltip) {\n    return sstyled(styles)(\n      <SContainerMiddle\n        interaction={text.length > displayedSymbols ? 'hover' : 'none'}\n        title={text}\n        ref={containerRef ?? resizeElement}\n        tag={Tooltip}\n      >\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  } else {\n    return sstyled(styles)(\n      <SContainerMiddle ref={containerRef ?? resizeElement}>\n        <SBeginning>{text.substring(0, text.length - displayedSymbols / 2 - 1)}</SBeginning>\n        <STail>{text.substring(text.length - displayedSymbols / 2 - 1)}</STail>\n      </SContainerMiddle>,\n    ) as any;\n  }\n};\n\nconst Ellipsis = createComponent(RootEllipsis);\n\nexport default Ellipsis;\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/ellipsis",
   "description": "Semrush Ellipsis Component",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",