@versini/ui-truncate 5.1.7 → 5.2.0

package/dist/index.d.ts

@@ -1,37 +1,37 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-type TruncateProps = {
-	/**
-	 * The children to render.
-	 */
-	children: React.ReactNode;
-	/**
-	 * The maximum length of the text.
-	 * @default 200
-	 */
-	length?: number;
-	/**
-	 * Opt-in flag to enable truncation of rich React nodes (HTML / nested elements).
-	 * When false (default), only plain string children are truncated; non-string
-	 * children are rendered as-is. When true, the component will traverse the
-	 * React node tree, measure the concatenated textual content, and rebuild a
-	 * structurally equivalent subtree truncated at the calculated boundary.
-	 * @default false
-	 */
-	enableRichTruncation?: boolean;
-	/**
-	 * The mode of Button. This will change the color of the Button.
-	 * @default "system"
-	 */
-	mode?: "dark" | "light" | "system" | "alt-system";
-	/**
-	 * The type of focus for the Button. This will change the color
-	 * of the focus ring around the Button.
-	 * @default "system"
-	 */
-	focusMode?: "dark" | "light" | "system" | "alt-system";
-};
-
-declare const Truncate: ({ children, length, mode, focusMode, enableRichTruncation, }: TruncateProps) => react_jsx_runtime.JSX.Element;
-
-export { Truncate };
+import { JSX } from 'react/jsx-runtime';
+
+export declare const Truncate: ({ children, length, mode, focusMode, enableRichTruncation, }: TruncateProps) => JSX.Element;
+
+declare type TruncateProps = {
+    /**
+     * The children to render.
+     */
+    children: React.ReactNode;
+    /**
+     * The maximum length of the text.
+     * @default 200
+     */
+    length?: number;
+    /**
+     * Opt-in flag to enable truncation of rich React nodes (HTML / nested elements).
+     * When false (default), only plain string children are truncated; non-string
+     * children are rendered as-is. When true, the component will traverse the
+     * React node tree, measure the concatenated textual content, and rebuild a
+     * structurally equivalent subtree truncated at the calculated boundary.
+     * @default false
+     */
+    enableRichTruncation?: boolean;
+    /**
+     * The mode of Button. This will change the color of the Button.
+     * @default "system"
+     */
+    mode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * The type of focus for the Button. This will change the color
+     * of the focus ring around the Button.
+     * @default "system"
+     */
+    focusMode?: "dark" | "light" | "system" | "alt-system";
+};
+
+export { }

package/dist/index.js

@@ -1,17 +1,212 @@
-import { Truncate as o } from "./components/Truncate/Truncate.js";
 /*!
-  @versini/ui-truncate v5.1.7
+  @versini/ui-truncate v5.2.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_TRUNCATE__ || (window.__VERSINI_UI_TRUNCATE__ = {
-    version: "5.1.7",
-    buildTime: "11/04/2025 09:51 AM EST",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_TRUNCATE__) {
+    window.__VERSINI_UI_TRUNCATE__ = {
+      version: "5.2.0",
+      buildTime: "11/04/2025 03:45 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  o as Truncate
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@versini/ui-button";
+import { isValidElement, useMemo, useState } from "react";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-button"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/Truncate/utilities.ts
+const DEFAULT_LENGTH = 200;
+/**
+ * This function will truncate the string at the last word boundary
+ * before the ideal length.
+ * - If ideal length ends up in the middle of a word, truncate at the next space.
+ * - If ideal length ends up on a space, truncate at the ideal length.
+ */ const truncate = ({ string, idealLength = DEFAULT_LENGTH })=>{
+    const strLength = string.length;
+    if (strLength <= idealLength) {
+        return {
+            string: string,
+            isTruncated: false
+        };
+    }
+    const originalTrunc = string.charAt(idealLength);
+    if (originalTrunc === " ") {
+        return {
+            string: string.slice(0, idealLength),
+            isTruncated: true
+        };
+    }
+    const nextSpace = string.slice(idealLength).search(" ");
+    return {
+        string: string.slice(0, idealLength + nextSpace),
+        isTruncated: true
+    };
 };
+
+;// CONCATENATED MODULE: ./src/components/Truncate/Truncate.tsx
+
+
+
+
+/**
+ * Recursively extract concatenated textual content from arbitrary React nodes.
+ * This is defined outside the component to keep a stable reference and avoid
+ * unnecessary re-creation on each render.
+ *
+ * NOTE: we are keeping this function here instead of utilities because it
+ * relies on React.
+ *
+ */ const extractText = (node)=>{
+    if (node == null || typeof node === "boolean") {
+        return "";
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractText).join("");
+    }
+    if (/*#__PURE__*/ isValidElement(node)) {
+        return extractText(node.props.children);
+    }
+    /* c8 ignore next 1 */ return ""; // Unsupported node type fallback
+};
+/**
+ * Block-level HTML tag detection (upper-case because React string element types
+ * are lowercase).
+ */ const BLOCK_TAGS = new Set([
+    "P",
+    "DIV",
+    "UL",
+    "OL",
+    "LI",
+    "SECTION",
+    "ARTICLE",
+    "HEADER",
+    "FOOTER",
+    "MAIN",
+    "ASIDE",
+    "TABLE",
+    "THEAD",
+    "TBODY",
+    "TFOOT",
+    "TR",
+    "TD",
+    "TH",
+    "BLOCKQUOTE",
+    "PRE",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6"
+]);
+/**
+ * Detect whether a React node tree contains any block-level HTML elements. Used
+ * to decide if inline spacing (margin-left) should be suppressed when expanded
+ * rich content is displayed on its own line(s).
+ */ const hasBlockLike = (node)=>{
+    if (node == null || typeof node === "boolean") {
+        return false;
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        return false;
+    }
+    if (Array.isArray(node)) {
+        return node.some(hasBlockLike);
+    }
+    if (/*#__PURE__*/ isValidElement(node)) {
+        const el = node;
+        if (typeof el.type === "string" && BLOCK_TAGS.has(el.type.toUpperCase())) {
+            return true;
+        }
+        return hasBlockLike(el.props.children);
+    }
+    /* c8 ignore next 1 */ return false; // Unsupported node types treated as non-block for spacing
+};
+const Truncate = ({ children, length = 200, mode = "system", focusMode = "system", enableRichTruncation = false })=>{
+    const [isExpanded, setIsExpanded] = useState(false);
+    const nonStringBypass = typeof children !== "string" && !enableRichTruncation;
+    const fullText = useMemo(()=>{
+        return typeof children === "string" ? children : extractText(children);
+    }, [
+        children
+    ]);
+    const { string: truncatedText, isTruncated } = useMemo(()=>{
+        return truncate({
+            string: fullText,
+            idealLength: length
+        });
+    }, [
+        fullText,
+        length
+    ]);
+    /**
+	 * We flatten rich truncated output to raw text so styling doesn't cause the
+	 * toggle button to wrap onto a new line.
+	 */ const showPlainTruncated = enableRichTruncation && isTruncated && !isExpanded;
+    const handleToggleExpanded = (e)=>{
+        e.preventDefault();
+        setIsExpanded(!isExpanded);
+    };
+    if (nonStringBypass) {
+        return /*#__PURE__*/ jsx(Fragment, {
+            children: children
+        });
+    }
+    let displayContent;
+    if (!isTruncated) {
+        displayContent = children; // Nothing to truncate
+    } else if (isExpanded) {
+        displayContent = children; // Show full rich content
+    } else if (showPlainTruncated) {
+        displayContent = truncatedText; // Plain flattened version
+    } else {
+        displayContent = truncatedText; // String case
+    }
+    /**
+	 * Spacing strategy:
+	 * - Always keep margin for classic string truncation (maintains original behavior).
+	 * - Keep margin for collapsed flattened rich text (button inline with plain snippet).
+	 * - When expanded AND rich truncation enabled: remove margin ONLY if the rich content
+	 *   tree actually contains a block-level element that likely puts the button on a new line.
+	 */ const contentHasBlock = enableRichTruncation ? hasBlockLike(children) : false;
+    const removeMargin = enableRichTruncation && isExpanded && contentHasBlock;
+    const needsInlineSpacing = !removeMargin;
+    return /*#__PURE__*/ jsxs("span", {
+        style: {
+            wordBreak: "break-word"
+        },
+        "data-testid": "truncate-root",
+        "aria-expanded": isTruncated ? isExpanded : undefined,
+        children: [
+            displayContent,
+            isTruncated && /*#__PURE__*/ jsx(Button, {
+                mode: mode,
+                focusMode: focusMode,
+                className: needsInlineSpacing ? "ml-2" : undefined,
+                size: "small",
+                onClick: handleToggleExpanded,
+                "aria-label": isExpanded ? "Show less" : "Show more",
+                children: isExpanded ? "less..." : "more..."
+            })
+        ]
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+export { Truncate };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-truncate",
-	"version": "5.1.7",
+	"version": "5.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -39,11 +39,11 @@
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-button": "8.2.0",
+		"@versini/ui-button": "8.3.1",
 		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "d43a776558072976e0920ab60f28f45a9efd3848"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/components/Truncate/Truncate.js

@@ -1,95 +0,0 @@
-import { jsx as p, Fragment as H, jsxs as O } from "react/jsx-runtime";
-import { Button as B } from "@versini/ui-button";
-import { useState as I, useMemo as T, isValidElement as m } from "react";
-const L = 200, D = ({
-  string: t,
-  idealLength: e = L
-}) => {
-  if (t.length <= e)
-    return { string: t, isTruncated: !1 };
-  if (t.charAt(e) === " ")
-    return { string: t.slice(0, e), isTruncated: !0 };
-  const s = t.slice(e).search(" ");
-  return {
-    string: t.slice(0, e + s),
-    isTruncated: !0
-  };
-}, o = (t) => t == null || typeof t == "boolean" ? "" : typeof t == "string" || typeof t == "number" ? String(t) : Array.isArray(t) ? t.map(o).join("") : m(t) ? o(t.props.children) : "", C = /* @__PURE__ */ new Set([
-  "P",
-  "DIV",
-  "UL",
-  "OL",
-  "LI",
-  "SECTION",
-  "ARTICLE",
-  "HEADER",
-  "FOOTER",
-  "MAIN",
-  "ASIDE",
-  "TABLE",
-  "THEAD",
-  "TBODY",
-  "TFOOT",
-  "TR",
-  "TD",
-  "TH",
-  "BLOCKQUOTE",
-  "PRE",
-  "H1",
-  "H2",
-  "H3",
-  "H4",
-  "H5",
-  "H6"
-]), i = (t) => {
-  if (t == null || typeof t == "boolean" || typeof t == "string" || typeof t == "number")
-    return !1;
-  if (Array.isArray(t))
-    return t.some(i);
-  if (m(t)) {
-    const e = t;
-    return typeof e.type == "string" && C.has(e.type.toUpperCase()) ? !0 : i(e.props.children);
-  }
-  return !1;
-}, N = ({
-  children: t,
-  length: e = 200,
-  mode: u = "system",
-  focusMode: f = "system",
-  enableRichTruncation: s = !1
-}) => {
-  const [r, y] = I(!1), E = typeof t != "string" && !s, l = T(() => typeof t == "string" ? t : o(t), [t]), { string: c, isTruncated: a } = T(() => D({ string: l, idealLength: e }), [l, e]), g = s && a && !r, A = (S) => {
-    S.preventDefault(), y(!r);
-  };
-  if (E)
-    return /* @__PURE__ */ p(H, { children: t });
-  let n;
-  a ? r ? n = t : n = c : n = t;
-  const x = s ? i(t) : !1;
-  return /* @__PURE__ */ O(
-    "span",
-    {
-      style: { wordBreak: "break-word" },
-      "data-testid": "truncate-root",
-      "aria-expanded": a ? r : void 0,
-      children: [
-        n,
-        a && /* @__PURE__ */ p(
-          B,
-          {
-            mode: u,
-            focusMode: f,
-            className: !(s && r && x) ? "ml-2" : void 0,
-            size: "small",
-            onClick: A,
-            "aria-label": r ? "Show less" : "Show more",
-            children: r ? "less..." : "more..."
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  N as Truncate
-};