@semcore/ellipsis 2.39.0-prerelease.4 → 2.39.0

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [2.39.0] - 2025-02-27
+## [2.39.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/tooltip` [6.47.3 ~> 6.48.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [2.38.1] - 2025-02-05
 

package/lib/esm/Ellipsis.mjs

@@ -0,0 +1,204 @@
+import J from "@babel/runtime/helpers/esm/slicedToArray";
+import I from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import d from "@babel/runtime/helpers/esm/objectSpread2";
+import K from "@babel/runtime/helpers/esm/classCallCheck";
+import Q from "@babel/runtime/helpers/esm/createClass";
+import z from "@babel/runtime/helpers/esm/assertThisInitialized";
+import X from "@babel/runtime/helpers/esm/inherits";
+import Y from "@babel/runtime/helpers/esm/createSuper";
+import E from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as Z } from "@semcore/utils/lib/core/index";
+import ee, { sstyled as h, Component as te, assignProps as F } from "@semcore/core";
+import i from "react";
+import R from "@semcore/tooltip";
+import { Box as L } from "@semcore/flex-box";
+import { useResizeObserver as ie } from "./useResizeObserver.mjs";
+import ne from "@semcore/utils/lib/use/useEnhancedEffect";
+import re, { isAdvanceMode as oe } from "@semcore/utils/lib/findComponent";
+import N from "@semcore/utils/lib/reactToText";
+import W from "@semcore/utils/lib/getOriginChildren";
+import D from "@semcore/utils/lib/pick";
+import { forkRef as ae } from "@semcore/utils/lib/ref";
+import { callAllEventHandlers as le } from "@semcore/utils/lib/assignProps";
+var se = ["styles", "Children", "maxLine", "tooltip", "trim", "containerRect", "containerRef", "includeTooltipProps", "children"], de = ["styles", "text", "tooltip", "containerRect", "containerRef", "textRef", "tooltipProps", "children", "advanceMode"], ce = (
+  /*__reshadow_css_start__*/
+  (Z.insert(
+    /*__inner_css_start__*/
+    ".___SContainerMiddle_jtu7a_gg_,.___SContainer_jtu7a_gg_,.___SEllipsis_jtu7a_gg_.__middle-mod_jtu7a_gg_,.___SNoTooltipContainer_jtu7a_gg_{display:flex;overflow:hidden}.___SBeginning_jtu7a_gg_,.___SEllipsis_jtu7a_gg_{overflow:hidden;display:inline-block;text-overflow:ellipsis;white-space:pre}.___SEllipsis_jtu7a_gg_.__maxLine_jtu7a_gg_{display:-webkit-box;-webkit-line-clamp:var(--maxLine_jtu7a);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;word-wrap:break-word}.___SContainerMiddle_jtu7a_gg_>:has(.___SBeginning_jtu7a_gg_),.___SContainerMiddle_jtu7a_gg_>:has(.___STail_jtu7a_gg_){display:flex;width:100%}.___STail_jtu7a_gg_{white-space:pre}",
+    "jtu7a_gg_"
+  ), {
+    __SContainer: "___SContainer_jtu7a_gg_",
+    __SNoTooltipContainer: "___SNoTooltipContainer_jtu7a_gg_",
+    __SContainerMiddle: "___SContainerMiddle_jtu7a_gg_",
+    __SBeginning: "___SBeginning_jtu7a_gg_",
+    __SEllipsis: "___SEllipsis_jtu7a_gg_",
+    "_middle-mod": "__middle-mod_jtu7a_gg_",
+    _maxLine: "__maxLine_jtu7a_gg_",
+    "--maxLine": "--maxLine_jtu7a",
+    __STail: "___STail_jtu7a_gg_"
+  })
+), pe = ["title", "theme", "strategy", "modifiers", "placement", "interaction", "timeout", "visible", "defaultVisible", "onVisibleChange", "offset", "preventOverflow", "arrow", "flip", "computeStyles", "eventListeners", "onFirstUpdate", "cursorAnchoring"], _e = function(o, a) {
+  var t = window.getComputedStyle(o, null), e = document.createElement("temporary-block");
+  return e.style.display = t.getPropertyValue("display"), e.style.padding = t.getPropertyValue("padding"), e.style.position = "absolute", e.style.right = "0%", e.style.bottom = "0%", e.style.visibility = "hidden", e.style.fontFamily = t.getPropertyValue("font-family"), e.style.fontSize = t.getPropertyValue("font-size"), e.style.fontWeight = t.getPropertyValue("font-weight"), e.style.lineHeight = t.getPropertyValue("line-height"), e.style.whiteSpace = t.getPropertyValue("white-space"), e.style.wordWrap = t.getPropertyValue("word-wrap"), e.style.fontFeatureSettings = t.getPropertyValue("font-feature-settings"), e.style.fontVariantNumeric = t.getPropertyValue("font-variant-numeric"), e.innerHTML = a ?? o.innerHTML, e;
+};
+function ue(g, o, a) {
+  if (!g) return !1;
+  var t = g.getBoundingClientRect(), e = t.height, l = t.width, r = _e(g, a), n = !1;
+  if (document.body.appendChild(r), o) {
+    r.style.width = "".concat(l, "px");
+    var _ = r.scrollWidth, s = r.getBoundingClientRect().height;
+    (Math.ceil(e) < s || Math.ceil(l) < _) && (n = !0);
+  } else
+    r.style.whiteSpace = "nowrap", n = Math.ceil(l) < r.getBoundingClientRect().width;
+  return document.body.removeChild(r), n;
+}
+var U = {
+  forcedAdvancedMode: !0
+}, me = {}, B = /* @__PURE__ */ function(g) {
+  X(a, g);
+  var o = Y(a);
+  function a() {
+    var t;
+    K(this, a);
+    for (var e = arguments.length, l = new Array(e), r = 0; r < e; r++)
+      l[r] = arguments[r];
+    return t = o.call.apply(o, [this].concat(l)), E(z(t), "state", {
+      visible: !1
+    }), E(z(t), "textRef", /* @__PURE__ */ i.createRef()), E(z(t), "handlerVisibleChange", function(n) {
+      t.setState({
+        visible: n && t.showTooltip()
+      });
+    }), t;
+  }
+  return Q(a, [{
+    key: "showTooltip",
+    value: function() {
+      var e = this.asProps, l = e.maxLine, r = l === void 0 ? 1 : l, n = e.Children, _ = N(W(n));
+      return ue(this.textRef.current, r > 1, _);
+    }
+  }, {
+    key: "getContentProps",
+    value: function() {
+      return {
+        ref: this.textRef,
+        maxLine: this.asProps.maxLine
+      };
+    }
+  }, {
+    key: "getPopperProps",
+    value: function() {
+      var e = this.asProps, l = e.Children, r = e.includeTooltipProps, n = N(W(l)), _ = D(this.asProps, r);
+      return d({
+        children: n
+      }, _);
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var e, l, r = this.Root, n = R, _ = L, s = this.asProps, u = s.styles, c = s.Children, y = s.maxLine, m = s.tooltip, k = s.trim, M = s.containerRect, P = s.containerRef, A = s.includeTooltipProps;
+      s.children;
+      var C = I(s, se), T = this.state.visible, j = re(c, [$.Content.displayName]), x = N(j || W(c)), f = oe(c, [$.Content.displayName, $.Popper.displayName]), p = D(this.asProps, A);
+      if (p.visible = (l = p.visible) !== null && l !== void 0 ? l : T, p.onVisibleChange = p.onVisibleChange ? le(p.onVisibleChange, this.handlerVisibleChange) : this.handlerVisibleChange, k === "middle") {
+        var S;
+        return S = h(u), /* @__PURE__ */ i.createElement(ge, S.cn("EllipsisMiddle", d({
+          text: x,
+          styles: u,
+          tooltip: m,
+          containerRect: M,
+          containerRef: P,
+          textRef: this.textRef,
+          tooltipProps: p,
+          advanceMode: f
+        }, C)), /* @__PURE__ */ i.createElement(c, S.cn("Children", {})));
+      }
+      if (m) {
+        var v;
+        return v = h(u), /* @__PURE__ */ i.createElement(n, v.cn("SContainer", d(d({
+          interaction: "hover",
+          title: f ? void 0 : x
+        }, p), f ? U : me)), f ? /* @__PURE__ */ i.createElement(c, v.cn("Children", {})) : /* @__PURE__ */ i.createElement(r, v.cn("SEllipsis", d({
+          render: L,
+          ref: this.textRef,
+          maxLine: y
+        }, C)), /* @__PURE__ */ i.createElement(c, v.cn("Children", {}))));
+      }
+      return e = h(u), /* @__PURE__ */ i.createElement(_, e.cn("SNoTooltipContainer", {}), f ? /* @__PURE__ */ i.createElement(c, e.cn("Children", {})) : /* @__PURE__ */ i.createElement(r, e.cn("SEllipsis", d({
+        render: L,
+        ref: this.textRef,
+        maxLine: y
+      }, C)), /* @__PURE__ */ i.createElement(c, e.cn("Children", {}))));
+    }
+  }]), a;
+}(te);
+E(B, "displayName", "Ellipsis");
+E(B, "style", ce);
+E(B, "defaultProps", {
+  trim: "end",
+  tooltip: !0,
+  includeTooltipProps: pe,
+  __excludeProps: ["title"]
+});
+var q = /* @__PURE__ */ i.createContext(null), ge = function(o) {
+  var a, t = o.styles, e = o.text, l = o.tooltip, r = o.containerRect, n = o.containerRef, _ = o.textRef, s = o.tooltipProps, u = o.children, c = o.advanceMode, y = I(o, de), m = i.useRef(null), k = i.useState({
+    fontSize: "14",
+    symbolWidth: 0
+  }), M = J(k, 2), P = M[0], A = M[1], C = ie(m, r).width;
+  ne(function() {
+    var O = (n == null ? void 0 : n.current) || (m == null ? void 0 : m.current);
+    if (O) {
+      var w = document.createElement("temporary-block");
+      w.setAttribute("style", "fontSize: ".concat(P.fontSize, "px")), w.innerHTML = "a", document.body.appendChild(w);
+      var G = w.getBoundingClientRect();
+      A({
+        fontSize: window.getComputedStyle(O, null).getPropertyValue("font-size"),
+        symbolWidth: G.width
+      }), document.body.removeChild(w);
+    }
+  }, []);
+  var T = "span", j = "span", x = o.tag || L, f = R, p = i.useMemo(function() {
+    return Math.round(C / P.symbolWidth);
+  }, [C, P.symbolWidth]), S = e.length > p ? "hover" : "none", v = n ?? m, b = i.useMemo(function() {
+    return {
+      begining: e.substring(0, e.length - p / 2 - 1),
+      tail: e.substring(e.length - p / 2 - 1),
+      ref: v
+    };
+  }, [e, p]);
+  if (c) {
+    var H;
+    return H = h(t), /* @__PURE__ */ i.createElement(f, H.cn("SAdvancedModeContainerMiddle", d(d({
+      interaction: S
+    }, s), U)), /* @__PURE__ */ i.createElement(q.Provider, {
+      value: b
+    }, u));
+  }
+  if (l) {
+    var V;
+    return V = h(t), /* @__PURE__ */ i.createElement(x, V.cn("SContainerMiddle", d({
+      interaction: S,
+      title: e,
+      ref: ae(v, _),
+      tag: R,
+      __excludeProps: ["title"]
+    }, s)), /* @__PURE__ */ i.createElement(j, V.cn("SBeginning", {}), b.begining), /* @__PURE__ */ i.createElement(T, V.cn("STail", {}), b.tail));
+  }
+  return a = h(t), /* @__PURE__ */ i.createElement(x, a.cn("SContainerMiddle", d(d({}, y), {}, {
+    ref: n ?? m
+  })), /* @__PURE__ */ i.createElement(j, a.cn("SBeginning", {}), b.begining), /* @__PURE__ */ i.createElement(T, a.cn("STail", {}), b.tail));
+}, ve = function(o) {
+  var a = arguments[0], t, e = o.styles, l = o.Children, r = R.Trigger, n = i.useContext(q), _ = "span", s = "span";
+  if (n) {
+    var u, c = n.begining, y = n.tail, m = n.ref;
+    return u = h(e), /* @__PURE__ */ i.createElement(r, u.cn("SEllipsis", d({}, F({
+      "middle-mod": !0,
+      ref: m
+    }, a))), /* @__PURE__ */ i.createElement(s, u.cn("SBeginning", {}), c), /* @__PURE__ */ i.createElement(_, u.cn("STail", {}), y));
+  }
+  return t = h(e), /* @__PURE__ */ i.createElement(r, t.cn("SEllipsis", d({}, F({}, a))), /* @__PURE__ */ i.createElement(l, t.cn("Children", {})));
+}, $ = ee(B, {
+  Content: ve,
+  Popper: R.Popper
+});
+export {
+  $ as default
+};

package/lib/esm/index.mjs

@@ -0,0 +1,6 @@
+import { default as o } from "./Ellipsis.mjs";
+import { useResizeObserver as s } from "./useResizeObserver.mjs";
+export {
+  o as default,
+  s as useResizeObserver
+};

package/lib/esm/useResizeObserver.mjs

@@ -0,0 +1,24 @@
+import o from "@babel/runtime/helpers/esm/slicedToArray";
+import c from "react";
+import m from "@semcore/utils/lib/use/useEnhancedEffect";
+import R from "@semcore/utils/lib/canUseDOM";
+var z = function(r, e) {
+  var i = c.useState(0), n = o(i, 2), s = n[0], u = n[1], a = c.useCallback(function(t) {
+    u(t[0].contentRect.width);
+  }, []);
+  return m(function() {
+    if (r.current && !e && R()) {
+      var t = new ResizeObserver(function(f) {
+        a(f);
+      });
+      return t.observe(r.current), function() {
+        t.disconnect();
+      };
+    }
+  }, [e]), e || {
+    width: s
+  };
+};
+export {
+  z as useResizeObserver
+};

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@semcore/ellipsis",
   "description": "Semrush Ellipsis Component",
-  "version": "2.39.0-prerelease.4",
+  "version": "2.39.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",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/utils": "4.47.1-prerelease.4",
-    "@semcore/flex-box": "5.41.0-prerelease.4",
-    "@semcore/tooltip": "6.48.0-prerelease.4"
+    "@semcore/utils": "4.48.0",
+    "@semcore/flex-box": "5.41.0",
+    "@semcore/tooltip": "6.49.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.4",
+    "@semcore/core": "^2.17.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -28,6 +33,6 @@
     "directory": "semcore/ellipsis"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);