@semcore/ellipsis 1.0.0-0

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# Changelog
+
+CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
+
+## [1.0.0] - 2022-10-14
+
+### Added
+
+- Initial release

package/README.md

@@ -0,0 +1,67 @@
+# @semcore/ellipsis
+
+[![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)
+
+> This component is part of the Intergalactic design system
+
+[//]: # '### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/ellipsis/)'
+
+### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
+
+## Install
+
+```sh
+npm install @semcore/ui
+```
+
+## Usage
+
+```jsx
+import Ellipsis from '@semcore/ui/ellipsis';
+```
+
+<details>
+  <summary>Alternative installation and use</summary>
+
+**We do not recommend this usage path due to possible dependency and update issues.**
+
+### Install
+
+You can only install one package from the design system
+
+```sh
+npm install @semcore/ellipsis @semcore/core
+```
+
+`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
+of the components that is discussed below. There should only be one version of the package in the project._
+
+</details>
+
+### Usage
+
+You can use the package the same way but without `/ui/` in the import path.
+
+```jsx
+import Ellipsis from '@semcore/ellipsis';
+```
+
+## 👤 Author
+
+[UI-kit team](https://github.com/semrush/intergalactic/blob/master/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).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+
+This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.

package/lib/cjs/Ellipsis.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _core = _interopRequireWildcard(require("@semcore/core"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _tooltip = _interopRequireDefault(require("@semcore/tooltip"));
+
+var _flexBox = require("@semcore/flex-box");
+
+var _useResizeObserver = require("./useResizeObserver");
+
+var _reactToText = _interopRequireDefault(require("@semcore/utils/lib/reactToText"));
+
+var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/*__reshadow-styles__:"./style/ellipsis.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_core.sstyled.insert(
+/*__inner_css_start__*/
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SContainer_1b3bb_gg_,\n.___SContainerMiddle_1b3bb_gg_ {\n  overflow: hidden;\n}\n\n.___SBeginning_1b3bb_gg_,\n.___SEllipsis_1b3bb_gg_ {\n  overflow: hidden;\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.___SEllipsis_1b3bb_gg_.__maxLine_1b3bb_gg_ {\n  display: -webkit-box;\n  -webkit-line-clamp: var(--maxLine_1b3bb);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  white-space: normal;\n}\n\n.___STail_1b3bb_gg_ {\n  white-space: nowrap;\n}\n"
+/*__inner_css_end__*/
+, "1b3bb_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SContainer": "___SContainer_1b3bb_gg_",
+  "__SContainerMiddle": "___SContainerMiddle_1b3bb_gg_",
+  "__SBeginning": "___SBeginning_1b3bb_gg_",
+  "__SEllipsis": "___SEllipsis_1b3bb_gg_",
+  "_maxLine": "__maxLine_1b3bb_gg_",
+  "--maxLine": "--maxLine_1b3bb",
+  "__STail": "___STail_1b3bb_gg_"
+});
+
+var RootEllipsis = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(RootEllipsis, _Component);
+
+  var _super = _createSuper(RootEllipsis);
+
+  function RootEllipsis() {
+    (0, _classCallCheck2["default"])(this, RootEllipsis);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(RootEllipsis, [{
+    key: "render",
+    value: function render() {
+      var _ref3;
+
+      var SEllipsis = this.Root;
+      var SContainer = _flexBox.Flex;
+      var _this$asProps = this.asProps,
+          styles = _this$asProps.styles,
+          Children = _this$asProps.Children,
+          maxLine = _this$asProps.maxLine,
+          tooltip = _this$asProps.tooltip,
+          trim = _this$asProps.trim,
+          containerRect = _this$asProps.containerRect,
+          containerRef = _this$asProps.containerRef;
+      var text = (0, _reactToText["default"])((0, _getOriginChildren["default"])(Children));
+
+      if (trim === 'middle') {
+        var _ref;
+
+        return _ref = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(EllipsisMiddle, _ref.cn("EllipsisMiddle", {
+          "text": text,
+          "styles": styles,
+          "tooltip": tooltip,
+          "containerRect": containerRect,
+          "containerRef": containerRef
+        }));
+      }
+
+      if (tooltip) {
+        var _ref2;
+
+        return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainer, _ref2.cn("SContainer", {
+          "interaction": "hover",
+          "title": text,
+          "tag": _tooltip["default"]
+        }), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref2.cn("SEllipsis", {
+          "use:maxLine": maxLine,
+          "render": "div",
+          "tag": "div"
+        }), /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {}))));
+      }
+
+      return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SEllipsis, _ref3.cn("SEllipsis", {
+        "use:maxLine": maxLine,
+        "render": "div",
+        "tag": "div"
+      }), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
+    }
+  }]);
+  return RootEllipsis;
+}(_core.Component);
+
+(0, _defineProperty2["default"])(RootEllipsis, "displayName", 'Ellipsis');
+(0, _defineProperty2["default"])(RootEllipsis, "style", style);
+(0, _defineProperty2["default"])(RootEllipsis, "defaultProps", {
+  trim: 'end',
+  tooltip: true
+});
+
+var EllipsisMiddle = function EllipsisMiddle(props) {
+  var styles = props.styles,
+      text = props.text,
+      tooltip = props.tooltip,
+      containerRect = props.containerRect,
+      containerRef = props.containerRef;
+  var resizeElement = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)({
+    fontSize: '14',
+    symbolWidth: 0
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      dimension = _useState2[0],
+      setDimension = _useState2[1];
+
+  var blockWidth = (0, _useResizeObserver.useResizeObserver)(resizeElement, containerRect).width;
+  (0, _react.useLayoutEffect)(function () {
+    var _containerRef$current;
+
+    var dateSpan = document.createElement('temporary-block');
+    dateSpan.setAttribute('style', "fontSize: ".concat(dimension.fontSize, "px"));
+    dateSpan.innerHTML = 'a';
+    document.body.appendChild(dateSpan);
+    var rect = dateSpan.getBoundingClientRect();
+    dateSpan.remove();
+    setDimension({
+      fontSize: window.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
+    });
+  }, []);
+  var STail = 'span';
+  var SBeginning = 'span';
+  var SContainerMiddle = _flexBox.Flex;
+  var displayedSymbols = (0, _react.useMemo)(function () {
+    return Math.round(blockWidth / dimension.symbolWidth);
+  }, [blockWidth, dimension.symbolWidth]);
+
+  if (tooltip) {
+    var _ref4;
+
+    return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", {
+      "interaction": "hover",
+      "title": text,
+      "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement,
+      "tag": _tooltip["default"]
+    }), /*#__PURE__*/_react["default"].createElement(SBeginning, _ref4.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/_react["default"].createElement(STail, _ref4.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
+  } else {
+    var _ref5;
+
+    return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", {
+      "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement
+    }), /*#__PURE__*/_react["default"].createElement(SBeginning, _ref5.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/_react["default"].createElement(STail, _ref5.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
+  }
+};
+
+var Ellipsis = (0, _core["default"])(RootEllipsis);
+var _default = Ellipsis;
+exports["default"] = _default;
+//# sourceMappingURL=Ellipsis.js.map

package/lib/cjs/Ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsis.js","names":["RootEllipsis","SEllipsis","Root","SContainer","Flex","asProps","styles","Children","maxLine","tooltip","trim","containerRect","containerRef","text","reactToText","getOriginChildren","sstyled","Tooltip","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 { Flex } 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 = Flex;\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} tag={Tooltip}>\n          <SEllipsis use:maxLine={maxLine} render=\"div\" tag=\"div\">\n            <Children />\n          </SEllipsis>\n        </SContainer>,\n      );\n    }\n    return sstyled(styles)(\n      <SEllipsis use:maxLine={maxLine} render=\"div\" tag=\"div\">\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<RefObject<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        .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 = Flex;\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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"}

package/lib/cjs/index.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.d.js.map

package/lib/cjs/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { CProps } from '@semcore/core';\nimport { RefObject } from 'react';\n\nexport interface IEllipsisProps {\n  /**\n   * Rows count in multiline Ellipsis\n   * @default 1\n   */\n  maxLine?: number;\n  /**\n   * Trimming type\n   * @default end\n   */\n  trim?: 'end' | 'middle';\n  /**\n   * Show tooltip\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * Ref to the item that will be observed by ResizeObserver\n   */\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n  /**\n   * Explicit sizes of container text should be trimmed in\n   **/\n  containerRect?: { width: number };\n}\n\ndeclare const useResizeObserver: (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":""}

package/lib/cjs/index.js

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

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './Ellipsis';\nexport { useResizeObserver } from './useResizeObserver';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA"}

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

@@ -0,0 +1,26 @@
+@import '@semcore/utils/style/var.css';
+
+SContainer,
+SContainerMiddle {
+  overflow: hidden;
+}
+
+SBeginning,
+SEllipsis {
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+SEllipsis[maxLine] {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--maxLine);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+}
+
+STail {
+  white-space: nowrap;
+}

package/lib/cjs/useResizeObserver.js

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

package/lib/cjs/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","names":["useResizeObserver","ref","hookOverride","useState","width","setWidth","handleResize","useCallback","entries","contentRect","useEnhancedEffect","current","ro","ResizeObserver","observe","disconnect"],"sources":["../../src/useResizeObserver.tsx"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport useEnhancedEffect from '@semcore/utils/lib/use/useEnhancedEffect';\n\nexport const useResizeObserver = (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => {\n  const [width, setWidth] = useState<number>(0);\n\n  const handleResize = 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\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  }, [hookOverride]);\n\n  if (hookOverride) {\n    return hookOverride;\n  }\n  return { width };\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BC,GAD+B,EAE/BC,YAF+B,EAG5B;EACH,gBAA0B,IAAAC,eAAA,EAAiB,CAAjB,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,YAAY,GAAG,IAAAC,kBAAA,EAAY,UAACC,OAAD,EAAoC;IACnEH,QAAQ,CAACG,OAAO,CAAC,CAAD,CAAP,CAAWC,WAAX,CAAuBL,KAAxB,CAAR;EACD,CAFoB,EAElB,EAFkB,CAArB;EAIA,IAAAM,6BAAA,EAAkB,YAAM;IACtB,IAAI,CAACT,GAAG,CAACU,OAAT,EAAkB;MAChB;IACD;;IAED,IAAIT,YAAJ,EAAkB;MAChB;IACD;;IAED,IAAMU,EAAE,GAAG,IAAIC,cAAJ,CAAmB,UAACL,OAAD,EAAoC;MAChEF,YAAY,CAACE,OAAD,CAAZ;IACD,CAFU,CAAX;IAIAI,EAAE,CAACE,OAAH,CAAWb,GAAG,CAACU,OAAf;IAEA,OAAO,YAAM;MACXC,EAAE,CAACG,UAAH;IACD,CAFD;EAGD,CAlBD,EAkBG,CAACb,YAAD,CAlBH;;EAoBA,IAAIA,YAAJ,EAAkB;IAChB,OAAOA,YAAP;EACD;;EACD,OAAO;IAAEE,KAAK,EAALA;EAAF,CAAP;AACD,CAlCM"}

package/lib/es6/Ellipsis.js

@@ -0,0 +1,173 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { useRef, useMemo, useState, useLayoutEffect } from 'react';
+import createComponent, { Component, sstyled } from '@semcore/core';
+import Tooltip from '@semcore/tooltip';
+import { Flex } from '@semcore/flex-box';
+import { useResizeObserver } from './useResizeObserver';
+
+/*__reshadow-styles__:"./style/ellipsis.shadow.css"*/
+var style = (
+/*__reshadow_css_start__*/
+_sstyled.insert(
+/*__inner_css_start__*/
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SContainer_1b3bb_gg_,\n.___SContainerMiddle_1b3bb_gg_ {\n  overflow: hidden;\n}\n\n.___SBeginning_1b3bb_gg_,\n.___SEllipsis_1b3bb_gg_ {\n  overflow: hidden;\n  display: inline-block;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.___SEllipsis_1b3bb_gg_.__maxLine_1b3bb_gg_ {\n  display: -webkit-box;\n  -webkit-line-clamp: var(--maxLine_1b3bb);\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  white-space: normal;\n}\n\n.___STail_1b3bb_gg_ {\n  white-space: nowrap;\n}\n"
+/*__inner_css_end__*/
+, "1b3bb_gg_")
+/*__reshadow_css_end__*/
+, {
+  "__SContainer": "___SContainer_1b3bb_gg_",
+  "__SContainerMiddle": "___SContainerMiddle_1b3bb_gg_",
+  "__SBeginning": "___SBeginning_1b3bb_gg_",
+  "__SEllipsis": "___SEllipsis_1b3bb_gg_",
+  "_maxLine": "__maxLine_1b3bb_gg_",
+  "--maxLine": "--maxLine_1b3bb",
+  "__STail": "___STail_1b3bb_gg_"
+});
+import reactToText from '@semcore/utils/lib/reactToText';
+import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
+
+var RootEllipsis = /*#__PURE__*/function (_Component) {
+  _inherits(RootEllipsis, _Component);
+
+  var _super = _createSuper(RootEllipsis);
+
+  function RootEllipsis() {
+    _classCallCheck(this, RootEllipsis);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(RootEllipsis, [{
+    key: "render",
+    value: function render() {
+      var _ref3;
+
+      var SEllipsis = this.Root;
+      var SContainer = Flex;
+      var _this$asProps = this.asProps,
+          styles = _this$asProps.styles,
+          Children = _this$asProps.Children,
+          maxLine = _this$asProps.maxLine,
+          tooltip = _this$asProps.tooltip,
+          trim = _this$asProps.trim,
+          containerRect = _this$asProps.containerRect,
+          containerRef = _this$asProps.containerRef;
+      var text = reactToText(getOriginChildren(Children));
+
+      if (trim === 'middle') {
+        var _ref;
+
+        return _ref = sstyled(styles), /*#__PURE__*/React.createElement(EllipsisMiddle, _ref.cn("EllipsisMiddle", {
+          "text": text,
+          "styles": styles,
+          "tooltip": tooltip,
+          "containerRect": containerRect,
+          "containerRef": containerRef
+        }));
+      }
+
+      if (tooltip) {
+        var _ref2;
+
+        return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref2.cn("SContainer", {
+          "interaction": "hover",
+          "title": text,
+          "tag": Tooltip
+        }), /*#__PURE__*/React.createElement(SEllipsis, _ref2.cn("SEllipsis", {
+          "use:maxLine": maxLine,
+          "render": "div",
+          "tag": "div"
+        }), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {}))));
+      }
+
+      return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SEllipsis, _ref3.cn("SEllipsis", {
+        "use:maxLine": maxLine,
+        "render": "div",
+        "tag": "div"
+      }), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
+    }
+  }]);
+
+  return RootEllipsis;
+}(Component);
+
+_defineProperty(RootEllipsis, "displayName", 'Ellipsis');
+
+_defineProperty(RootEllipsis, "style", style);
+
+_defineProperty(RootEllipsis, "defaultProps", {
+  trim: 'end',
+  tooltip: true
+});
+
+var EllipsisMiddle = function EllipsisMiddle(props) {
+  var styles = props.styles,
+      text = props.text,
+      tooltip = props.tooltip,
+      containerRect = props.containerRect,
+      containerRef = props.containerRef;
+  var resizeElement = useRef(null);
+
+  var _useState = useState({
+    fontSize: '14',
+    symbolWidth: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimension = _useState2[0],
+      setDimension = _useState2[1];
+
+  var blockWidth = useResizeObserver(resizeElement, containerRect).width;
+  useLayoutEffect(function () {
+    var _containerRef$current;
+
+    var dateSpan = document.createElement('temporary-block');
+    dateSpan.setAttribute('style', "fontSize: ".concat(dimension.fontSize, "px"));
+    dateSpan.innerHTML = 'a';
+    document.body.appendChild(dateSpan);
+    var rect = dateSpan.getBoundingClientRect();
+    dateSpan.remove();
+    setDimension({
+      fontSize: window.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
+    });
+  }, []);
+  var STail = 'span';
+  var SBeginning = 'span';
+  var SContainerMiddle = Flex;
+  var displayedSymbols = useMemo(function () {
+    return Math.round(blockWidth / dimension.symbolWidth);
+  }, [blockWidth, dimension.symbolWidth]);
+
+  if (tooltip) {
+    var _ref4;
+
+    return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref4.cn("SContainerMiddle", {
+      "interaction": "hover",
+      "title": text,
+      "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement,
+      "tag": Tooltip
+    }), /*#__PURE__*/React.createElement(SBeginning, _ref4.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/React.createElement(STail, _ref4.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
+  } else {
+    var _ref5;
+
+    return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SContainerMiddle, _ref5.cn("SContainerMiddle", {
+      "ref": containerRef !== null && containerRef !== void 0 ? containerRef : resizeElement
+    }), /*#__PURE__*/React.createElement(SBeginning, _ref5.cn("SBeginning", {}), text.substring(0, text.length - displayedSymbols / 2 - 1)), /*#__PURE__*/React.createElement(STail, _ref5.cn("STail", {}), text.substring(text.length - displayedSymbols / 2 - 1)));
+  }
+};
+
+var Ellipsis = createComponent(RootEllipsis);
+export default Ellipsis;
+//# sourceMappingURL=Ellipsis.js.map

package/lib/es6/Ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsis.js","names":["React","useRef","useMemo","useState","useLayoutEffect","createComponent","Component","sstyled","Tooltip","Flex","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 { Flex } 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 = Flex;\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} tag={Tooltip}>\n          <SEllipsis use:maxLine={maxLine} render=\"div\" tag=\"div\">\n            <Children />\n          </SEllipsis>\n        </SContainer>,\n      );\n    }\n    return sstyled(styles)(\n      <SEllipsis use:maxLine={maxLine} render=\"div\" tag=\"div\">\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<RefObject<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        .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 = Flex;\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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"}

package/lib/es6/index.d.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.js.map

package/lib/es6/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { CProps } from '@semcore/core';\nimport { RefObject } from 'react';\n\nexport interface IEllipsisProps {\n  /**\n   * Rows count in multiline Ellipsis\n   * @default 1\n   */\n  maxLine?: number;\n  /**\n   * Trimming type\n   * @default end\n   */\n  trim?: 'end' | 'middle';\n  /**\n   * Show tooltip\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * Ref to the item that will be observed by ResizeObserver\n   */\n  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope\n  containerRef?: RefObject<HTMLElement | null>;\n  /**\n   * Explicit sizes of container text should be trimmed in\n   **/\n  containerRect?: { width: number };\n}\n\ndeclare const useResizeObserver: (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => { width: number };\n\ndeclare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;\n\nexport { useResizeObserver };\nexport default Ellipsis;\n"],"mappings":""}

package/lib/es6/index.js

@@ -0,0 +1,3 @@
+export { default } from './Ellipsis';
+export { useResizeObserver } from './useResizeObserver';
+//# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","useResizeObserver"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './Ellipsis';\nexport { useResizeObserver } from './useResizeObserver';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,YAAxB;AACA,SAASC,iBAAT,QAAkC,qBAAlC"}

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

@@ -0,0 +1,26 @@
+@import '@semcore/utils/style/var.css';
+
+SContainer,
+SContainerMiddle {
+  overflow: hidden;
+}
+
+SBeginning,
+SEllipsis {
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+SEllipsis[maxLine] {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--maxLine);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+}
+
+STail {
+  white-space: nowrap;
+}

package/lib/es6/useResizeObserver.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useState } from 'react';
+import useEnhancedEffect from '@semcore/utils/lib/use/useEnhancedEffect';
+export var useResizeObserver = function useResizeObserver(ref, hookOverride) {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var handleResize = useCallback(function (entries) {
+    setWidth(entries[0].contentRect.width);
+  }, []);
+  useEnhancedEffect(function () {
+    if (!ref.current) {
+      return;
+    }
+
+    if (hookOverride) {
+      return;
+    }
+
+    var ro = new ResizeObserver(function (entries) {
+      handleResize(entries);
+    });
+    ro.observe(ref.current);
+    return function () {
+      ro.disconnect();
+    };
+  }, [hookOverride]);
+
+  if (hookOverride) {
+    return hookOverride;
+  }
+
+  return {
+    width: width
+  };
+};
+//# sourceMappingURL=useResizeObserver.js.map

package/lib/es6/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","names":["useCallback","useState","useEnhancedEffect","useResizeObserver","ref","hookOverride","width","setWidth","handleResize","entries","contentRect","current","ro","ResizeObserver","observe","disconnect"],"sources":["../../src/useResizeObserver.tsx"],"sourcesContent":["import { RefObject, useCallback, useState } from 'react';\nimport useEnhancedEffect from '@semcore/utils/lib/use/useEnhancedEffect';\n\nexport const useResizeObserver = (\n  ref: RefObject<HTMLElement>,\n  hookOverride?: { width: number },\n) => {\n  const [width, setWidth] = useState<number>(0);\n\n  const handleResize = 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\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  }, [hookOverride]);\n\n  if (hookOverride) {\n    return hookOverride;\n  }\n  return { width };\n};\n"],"mappings":";AAAA,SAAoBA,WAApB,EAAiCC,QAAjC,QAAiD,OAAjD;AACA,OAAOC,iBAAP,MAA8B,0CAA9B;AAEA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BC,GAD+B,EAE/BC,YAF+B,EAG5B;EACH,gBAA0BJ,QAAQ,CAAS,CAAT,CAAlC;EAAA;EAAA,IAAOK,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,YAAY,GAAGR,WAAW,CAAC,UAACS,OAAD,EAAoC;IACnEF,QAAQ,CAACE,OAAO,CAAC,CAAD,CAAP,CAAWC,WAAX,CAAuBJ,KAAxB,CAAR;EACD,CAF+B,EAE7B,EAF6B,CAAhC;EAIAJ,iBAAiB,CAAC,YAAM;IACtB,IAAI,CAACE,GAAG,CAACO,OAAT,EAAkB;MAChB;IACD;;IAED,IAAIN,YAAJ,EAAkB;MAChB;IACD;;IAED,IAAMO,EAAE,GAAG,IAAIC,cAAJ,CAAmB,UAACJ,OAAD,EAAoC;MAChED,YAAY,CAACC,OAAD,CAAZ;IACD,CAFU,CAAX;IAIAG,EAAE,CAACE,OAAH,CAAWV,GAAG,CAACO,OAAf;IAEA,OAAO,YAAM;MACXC,EAAE,CAACG,UAAH;IACD,CAFD;EAGD,CAlBgB,EAkBd,CAACV,YAAD,CAlBc,CAAjB;;EAoBA,IAAIA,YAAJ,EAAkB;IAChB,OAAOA,YAAP;EACD;;EACD,OAAO;IAAEC,KAAK,EAALA;EAAF,CAAP;AACD,CAlCM"}

package/lib/types/index.d.ts

@@ -0,0 +1,39 @@
+import { CProps } from '@semcore/core';
+import { RefObject } from 'react';
+
+export interface IEllipsisProps {
+  /**
+   * Rows count in multiline Ellipsis
+   * @default 1
+   */
+  maxLine?: number;
+  /**
+   * Trimming type
+   * @default end
+   */
+  trim?: 'end' | 'middle';
+  /**
+   * Show tooltip
+   * @default true
+   */
+  tooltip?: boolean;
+  /**
+   * Ref to the item that will be observed by ResizeObserver
+   */
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+  containerRef?: RefObject<HTMLElement | null>;
+  /**
+   * Explicit sizes of container text should be trimmed in
+   **/
+  containerRect?: { width: number };
+}
+
+declare const useResizeObserver: (
+  ref: RefObject<HTMLElement>,
+  hookOverride?: { width: number },
+) => { width: number };
+
+declare const Ellipsis: <T>(props: CProps<IEllipsisProps & T>) => ReturnEl;
+
+export { useResizeObserver };
+export default Ellipsis;

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@semcore/ellipsis",
+  "description": "Semrush Ellipsis Component",
+  "version": "1.0.0-0",
+  "main": "lib/cjs/index.js",
+  "module": "lib/es6/index.js",
+  "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
+  "author": "UI-KIT team <ui-kit-team@semrush.com>",
+  "license": "MIT",
+  "scripts": {
+    "build": "pnpm semcore-builder --source=js",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@semcore/utils": "^3.15",
+    "@semcore/flex-box": "^4",
+    "@semcore/tooltip": "^5",
+    "resize-observer-polyfill": "1.5.1"
+  },
+  "peerDependencies": {
+    "@semcore/core": "^1.8.3",
+    "react": "16.8 - 17"
+  },
+  "devDependencies": {
+    "@semcore/jest-preset-ui": "1.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/ellipsis"
+  },
+  "jest": {
+    "preset": "@semcore/jest-preset-ui"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src", "lib"],
+  "compilerOptions": {
+    "strict": true
+  }
+}