@0xchain/expandable-text 1.1.0-beta.2 → 1.1.0-beta.20

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present 0xchain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -1,35 +1,51 @@
 'use client';
-import { jsxs as S, jsx as u } from "react/jsx-runtime";
-import { useState as b, useRef as G, useEffect as te } from "react";
-import { useTranslations as ne } from "next-intl";
-import { twMerge as F } from "tailwind-merge";
-const le = ({
-  text: s,
-  maxLines: f = 2,
-  expandText: W,
-  collapseText: z,
-  className: J,
-  showToggle: g = !0,
-  ellipsis: w = "...",
-  loading: K,
-  onExpand: y,
-  onCollapse: $,
-  expandSymbol: H,
-  collapseSymbol: P,
-  onEllipsis: x,
-  suffix: i = "",
-  expandable: k = !0
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { twMerge } from "tailwind-merge";
+const ExpandableText = ({
+  text,
+  maxLines = 2,
+  expandText,
+  collapseText,
+  className,
+  showToggle = true,
+  ellipsis = "...",
+  loading,
+  onExpand,
+  onCollapse,
+  expandSymbol,
+  collapseSymbol,
+  onEllipsis,
+  suffix = "",
+  expandable = true
 }) => {
-  const [t, Q] = b(!1), [l, U] = b(!1), [c, V] = b(!1), [I, C] = b(null), j = G(null), B = G(null), h = ne("common.expandableText"), M = W || h("expand");
-  te(() => {
-    const a = j.current, e = B.current;
-    if (!a || !e) return;
-    const m = !g || !k ? "" : typeof H == "string" ? String(H) : W || h("expand"), L = g && k && !t, q = (n) => {
-      const r = getComputedStyle(n), o = parseFloat(r.lineHeight);
-      return isNaN(o) ? parseFloat(r.fontSize) * 1.2 : o;
-    }, Y = () => {
-      const n = getComputedStyle(a);
-      [
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [truncatedText, setTruncatedText] = useState(null);
+  const textRef = useRef(null);
+  const measureRef = useRef(null);
+  const t = useTranslations("common.expandableText");
+  const defaultExpandText = expandText || t("expand");
+  useEffect(() => {
+    const element = textRef.current;
+    const measurer = measureRef.current;
+    if (!element || !measurer) return;
+    const expandLabelCandidate = (() => {
+      if (!showToggle || !expandable) return "";
+      if (typeof expandSymbol === "string") return String(expandSymbol);
+      return expandText || t("expand");
+    })();
+    const shouldReserveToggle = showToggle && expandable && !isExpanded;
+    const computeLineHeight = (el) => {
+      const cs = getComputedStyle(el);
+      const lh = parseFloat(cs.lineHeight);
+      return isNaN(lh) ? parseFloat(cs.fontSize) * 1.2 : lh;
+    };
+    const syncMeasureStyles = () => {
+      const cs = getComputedStyle(element);
+      const props = [
         "font",
         "fontFamily",
         "fontSize",
@@ -42,51 +58,80 @@ const le = ({
         "textTransform",
         "textIndent",
         "textRendering"
-      ].forEach((o) => {
-        e.style[o] = n[o];
-      }), e.style.width = `${a.clientWidth}px`;
-    }, Z = (n) => {
-      const r = L && m ? `${n} ${m}` : n;
-      e.textContent = r;
-      const T = q(e) * f;
-      return e.scrollHeight <= T + 0.5;
-    }, A = () => {
-      Y();
-      const n = `${s ?? ""}${i || ""}`, r = L && m ? `${n} ${m}` : n;
-      e.textContent = r;
-      const T = q(e) * f, v = e.scrollHeight > T + 0.5;
-      if (U((d) => (d !== v && (x == null || x(v)), v)), v && !t && s) {
-        const d = `${s}${i || ""}`;
-        let O = 0, R = d.length, D = 0;
-        for (; O <= R; ) {
-          const p = Math.floor((O + R) / 2), ee = `${d.slice(0, p)}${w || ""}`;
-          Z(ee) ? (D = p, O = p + 1) : R = p - 1;
+      ];
+      props.forEach((p) => {
+        measurer.style[p] = cs[p];
+      });
+      measurer.style.width = `${element.clientWidth}px`;
+    };
+    const doesFit = (candidate) => {
+      const withToggle = shouldReserveToggle && expandLabelCandidate ? `${candidate} ${expandLabelCandidate}` : candidate;
+      measurer.textContent = withToggle;
+      const lineHeight = computeLineHeight(measurer);
+      const maxHeight = lineHeight * maxLines;
+      return measurer.scrollHeight <= maxHeight + 0.5;
+    };
+    const measure = () => {
+      syncMeasureStyles();
+      const fullForOverflowBase = `${text ?? ""}${suffix ? suffix : ""}`;
+      const fullForOverflow = shouldReserveToggle && expandLabelCandidate ? `${fullForOverflowBase} ${expandLabelCandidate}` : fullForOverflowBase;
+      measurer.textContent = fullForOverflow;
+      const lineHeight = computeLineHeight(measurer);
+      const maxHeight = lineHeight * maxLines;
+      const overflowing = measurer.scrollHeight > maxHeight + 0.5;
+      setIsOverflowing((prev) => {
+        if (prev !== overflowing) onEllipsis?.(overflowing);
+        return overflowing;
+      });
+      if (overflowing && !isExpanded && text) {
+        const full = `${text}${suffix ? suffix : ""}`;
+        let low = 0;
+        let high = full.length;
+        let best = 0;
+        while (low <= high) {
+          const mid = Math.floor((low + high) / 2);
+          const candidate = `${full.slice(0, mid)}${ellipsis || ""}`;
+          if (doesFit(candidate)) {
+            best = mid;
+            low = mid + 1;
+          } else {
+            high = mid - 1;
+          }
         }
-        const E = `${d.slice(0, D)}${w || ""}`;
-        C(E);
-      } else
-        C(null);
-      V(!0);
-    }, _ = setTimeout(A, 0), N = new ResizeObserver(A);
-    return N.observe(a), N.observe(e), () => {
-      clearTimeout(_), N.disconnect();
+        const finalText = `${full.slice(0, best)}${ellipsis || ""}`;
+        setTruncatedText(finalText);
+      } else {
+        setTruncatedText(null);
+      }
+      setIsReady(true);
+    };
+    const id = setTimeout(measure, 0);
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(element);
+    resizeObserver.observe(measurer);
+    return () => {
+      clearTimeout(id);
+      resizeObserver.disconnect();
     };
-  }, [s, f, i, w, t]);
-  const X = () => {
-    Q((a) => {
-      const e = !a;
-      return e ? y == null || y() : $ == null || $(), e;
+  }, [text, maxLines, suffix, ellipsis, isExpanded]);
+  const handleExpand = () => {
+    setIsExpanded((prev) => {
+      const next = !prev;
+      if (next) onExpand?.();
+      else onCollapse?.();
+      return next;
     });
   };
-  return s ? /* @__PURE__ */ S("div", { className: F("relative", J), children: [
-    (K || !c) && /* @__PURE__ */ S("div", { className: F("animate-pulse"), children: [
-      /* @__PURE__ */ u("div", { className: "h-4 bg-card rounded w-full mb-2" }),
-      /* @__PURE__ */ u("div", { className: "h-4 bg-card rounded w-3/4" })
+  if (!text) return null;
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("relative", className), children: [
+    (loading || !isReady) && /* @__PURE__ */ jsxs("div", { className: twMerge("animate-pulse"), children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-card rounded w-full mb-2" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-card rounded w-3/4" })
     ] }),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        ref: B,
+        ref: measureRef,
         className: "absolute left-0 top-0 pointer-events-none whitespace-pre-wrap break-words",
         style: {
           visibility: "hidden",
@@ -99,45 +144,45 @@ const le = ({
         }
       }
     ),
-    /* @__PURE__ */ S(
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: j,
-        className: F(
+        ref: textRef,
+        className: twMerge(
           "transition-all duration-300 ease-in-out align-justify space-x-1"
         ),
         style: {
-          visibility: c ? "visible" : "hidden",
-          position: c ? "static" : "absolute",
-          left: c ? void 0 : 0,
-          top: c ? void 0 : 0,
-          width: c ? void 0 : "100%",
-          display: !t && l ? "-webkit-box" : "block",
-          WebkitLineClamp: !t && l ? f : "unset",
+          visibility: isReady ? "visible" : "hidden",
+          position: isReady ? "static" : "absolute",
+          left: isReady ? void 0 : 0,
+          top: isReady ? void 0 : 0,
+          width: isReady ? void 0 : "100%",
+          display: !isExpanded && isOverflowing ? "-webkit-box" : "block",
+          WebkitLineClamp: !isExpanded && isOverflowing ? maxLines : "unset",
           WebkitBoxOrient: "vertical",
-          overflow: !t && l ? "hidden" : "visible",
-          textOverflow: !t && l ? "ellipsis" : "clip"
+          overflow: !isExpanded && isOverflowing ? "hidden" : "visible",
+          textOverflow: !isExpanded && isOverflowing ? "ellipsis" : "clip"
         },
-        "aria-label": s,
+        "aria-label": text,
         children: [
-          /* @__PURE__ */ u("span", { children: !t && l && I != null ? I : `${s ?? ""}${t && i ? i : ""}` }),
-          l && g && k && /* @__PURE__ */ u(
+          /* @__PURE__ */ jsx("span", { children: !isExpanded && isOverflowing && truncatedText != null ? truncatedText : `${text ?? ""}${isExpanded && suffix ? suffix : ""}` }),
+          isOverflowing && (showToggle && expandable) && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: X,
+              onClick: handleExpand,
               className: "text-primary hover:underline focus:outline-none text-sm",
-              "aria-expanded": t,
-              "aria-label": t ? z || h("collapse") : M,
-              children: t ? P ?? z ?? h("collapse") : H ?? M
+              "aria-expanded": isExpanded,
+              "aria-label": isExpanded ? collapseText || t("collapse") : defaultExpandText,
+              children: isExpanded ? collapseSymbol ?? collapseText ?? t("collapse") : expandSymbol ?? defaultExpandText
             }
           )
         ]
       }
     )
-  ] }) : null;
+  ] });
 };
 export {
-  le as ExpandableText,
-  le as default
+  ExpandableText,
+  ExpandableText as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xchain/expandable-text",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0-beta.20",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -13,18 +13,27 @@
       "default": "./dist/index.js"
     }
   },
-  "devDependencies": {
-    "rollup-plugin-preserve-use-client": "3.0.1"
-  },
   "files": [
     "dist",
     "!**/*.tsbuildinfo"
   ],
-  "dependencies": {
+  "peerDependencies": {
+    "next-intl": "4.8.2",
     "react": "19.1.1",
     "react-dom": "19.1.1",
-    "tailwind-merge": "3.3.1",
-    "next-intl": "4.6.1"
+    "tailwind-merge": "3.3.1"
+  },
+  "devDependencies": {
+    "next-intl": "4.8.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "rollup-plugin-preserve-use-client": "3.0.1",
+    "tailwind-merge": "3.3.1"
+  },
+  "nx": {
+    "tags": [
+      "type:ui"
+    ]
   },
   "publishConfig": {
     "access": "public"