@seed-design/react-middle-truncate 0.0.0-alpha-20260416134952

package/lib/MiddleTruncate-12s-BfA2DiuS.cjs

@@ -0,0 +1,26 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var reactPrimitive = require('@seed-design/react-primitive');
+var domUtils = require('@seed-design/dom-utils');
+var react = require('react');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+var useMiddleTruncate12s = require('./useMiddleTruncate-12s-PfK603TV.cjs');
+
+// Visual behavior is verified in Storybook: docs/stories/MiddleTruncate.stories.tsx
+
+const MiddleTruncate = /*#__PURE__*/ react.forwardRef(({ children, end, ellipsis, maxLines, onTruncate, ...otherProps }, ref)=>{
+    const api = useMiddleTruncate12s.useMiddleTruncate({
+        children,
+        end,
+        ellipsis,
+        maxLines,
+        onTruncate
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.span, {
+        ref: reactComposeRefs.composeRefs(ref, api.contentRef),
+        ...domUtils.mergeProps(api.contentProps, otherProps)
+    });
+});
+MiddleTruncate.displayName = "MiddleTruncate";
+
+exports.MiddleTruncate = MiddleTruncate;

package/lib/MiddleTruncate-12s-CnVju8qr.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { Primitive } from '@seed-design/react-primitive';
+import { mergeProps } from '@seed-design/dom-utils';
+import { forwardRef } from 'react';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { u as useMiddleTruncate } from './useMiddleTruncate-12s-DT5caddu.js';
+
+// Visual behavior is verified in Storybook: docs/stories/MiddleTruncate.stories.tsx
+
+const MiddleTruncate = /*#__PURE__*/ forwardRef(({ children, end, ellipsis, maxLines, onTruncate, ...otherProps }, ref)=>{
+    const api = useMiddleTruncate({
+        children,
+        end,
+        ellipsis,
+        maxLines,
+        onTruncate
+    });
+    return /*#__PURE__*/ jsx(Primitive.span, {
+        ref: composeRefs(ref, api.contentRef),
+        ...mergeProps(api.contentProps, otherProps)
+    });
+});
+MiddleTruncate.displayName = "MiddleTruncate";
+
+export { MiddleTruncate as M };

package/lib/index.cjs

@@ -0,0 +1,5 @@
+var MiddleTruncate12s = require('./MiddleTruncate-12s-BfA2DiuS.cjs');
+
+
+
+exports.MiddleTruncate = MiddleTruncate12s.MiddleTruncate;

package/lib/index.d.ts

@@ -0,0 +1,27 @@
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import * as react from 'react';
+
+interface UseMiddleTruncateProps {
+    children: string;
+    /**
+     * Number of characters to preserve from the end of the text.
+     * @default 0
+     */
+    end?: number;
+    /**
+     * @default "…"
+     */
+    ellipsis?: string;
+    /**
+     * @default 1
+     */
+    maxLines?: number;
+    onTruncate?: (isTruncated: boolean) => void;
+}
+
+interface MiddleTruncateProps extends UseMiddleTruncateProps, PrimitiveProps, Omit<react.HTMLAttributes<HTMLSpanElement>, "children"> {
+}
+declare const MiddleTruncate: react.ForwardRefExoticComponent<MiddleTruncateProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { MiddleTruncate };
+export type { MiddleTruncateProps };

package/lib/index.js

@@ -0,0 +1 @@
+export { M as MiddleTruncate } from './MiddleTruncate-12s-CnVju8qr.js';

package/lib/useMiddleTruncate-12s-DT5caddu.js

@@ -0,0 +1,124 @@
+'use client';
+import { elementProps } from '@seed-design/dom-utils';
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+// Visual behavior is verified in Storybook: docs/stories/MiddleTruncate.stories.tsx
+
+function useMiddleTruncate(props) {
+    const { children, end = 0, ellipsis = "…", maxLines = 1, onTruncate } = props;
+    const contentRef = useRef(null);
+    const [displayText, setDisplayText] = useState(null);
+    const compute = useCallback(()=>{
+        const el = contentRef.current;
+        if (!el || !children) {
+            setDisplayText(null);
+            onTruncate?.(false);
+            return;
+        }
+        const parent = el.parentElement;
+        if (!parent) return;
+        const computed = getComputedStyle(parent);
+        const contentWidth = Math.floor(parent.clientWidth - (Number.parseFloat(computed.paddingLeft) || 0) - (Number.parseFloat(computed.paddingRight) || 0));
+        if (contentWidth <= 0) {
+            setDisplayText(null);
+            onTruncate?.(false);
+            return;
+        }
+        const measurer = document.createElement("span");
+        measurer.style.cssText = [
+            "position:absolute",
+            "visibility:hidden",
+            "pointer-events:none",
+            "display:block",
+            `width:${contentWidth}px`,
+            `font:${computed.font}`,
+            `letter-spacing:${computed.letterSpacing}`,
+            "word-break:break-all",
+            `line-height:${computed.lineHeight}`,
+            "white-space:nowrap"
+        ].join(";");
+        measurer.textContent = children;
+        document.body.appendChild(measurer);
+        const lineHeight = measurer.scrollHeight;
+        const maxHeight = lineHeight * maxLines;
+        measurer.style.whiteSpace = "normal";
+        // text fits without truncation
+        if (measurer.scrollHeight <= maxHeight + 1) {
+            setDisplayText(children);
+            onTruncate?.(false);
+            measurer.remove();
+            return;
+        }
+        // binary search
+        const safeEnd = Math.min(Math.abs(end), children.length);
+        const endFragment = safeEnd > 0 ? children.slice(-safeEnd) : "";
+        const startSource = safeEnd > 0 ? children.slice(0, -safeEnd) : children;
+        // If ellipsis + endFragment alone overflows, reduce endFragment first
+        measurer.textContent = ellipsis + endFragment;
+        if (measurer.scrollHeight > maxHeight + 1) {
+            let eLow = 0;
+            let eHigh = endFragment.length;
+            while(eLow <= eHigh){
+                const eMid = Math.floor((eLow + eHigh) / 2);
+                measurer.textContent = ellipsis + endFragment.slice(-eMid || undefined);
+                if (measurer.scrollHeight <= maxHeight + 1) {
+                    eLow = eMid + 1;
+                    continue;
+                }
+                eHigh = eMid - 1;
+            }
+            const trimmedEnd = eHigh > 0 ? endFragment.slice(-eHigh) : "";
+            setDisplayText(ellipsis + trimmedEnd);
+            onTruncate?.(true);
+            measurer.remove();
+            return;
+        }
+        let low = 0;
+        let high = startSource.length;
+        while(low <= high){
+            const mid = Math.floor((low + high) / 2);
+            measurer.textContent = startSource.slice(0, mid) + ellipsis + endFragment;
+            if (measurer.scrollHeight <= maxHeight + 1) {
+                low = mid + 1;
+                continue;
+            }
+            high = mid - 1;
+        }
+        const startFragment = startSource.slice(0, Math.max(high, 0));
+        setDisplayText(startFragment + ellipsis + endFragment);
+        onTruncate?.(true);
+        measurer.remove();
+    }, [
+        children,
+        end,
+        ellipsis,
+        maxLines,
+        onTruncate
+    ]);
+    useEffect(()=>{
+        compute();
+    }, [
+        compute
+    ]);
+    // recompute on resize
+    useEffect(()=>{
+        const parent = contentRef.current?.parentElement;
+        if (!parent) return;
+        const observer = new ResizeObserver(()=>compute());
+        observer.observe(parent);
+        return ()=>observer.disconnect();
+    }, [
+        compute
+    ]);
+    return {
+        contentRef,
+        contentProps: elementProps({
+            style: {
+                wordBreak: "break-all"
+            },
+            children: displayText ?? children
+        })
+    };
+}
+
+export { useMiddleTruncate as u };

package/lib/useMiddleTruncate-12s-PfK603TV.cjs

@@ -0,0 +1,124 @@
+'use client';
+var domUtils = require('@seed-design/dom-utils');
+var react = require('react');
+
+// Visual behavior is verified in Storybook: docs/stories/MiddleTruncate.stories.tsx
+
+function useMiddleTruncate(props) {
+    const { children, end = 0, ellipsis = "…", maxLines = 1, onTruncate } = props;
+    const contentRef = react.useRef(null);
+    const [displayText, setDisplayText] = react.useState(null);
+    const compute = react.useCallback(()=>{
+        const el = contentRef.current;
+        if (!el || !children) {
+            setDisplayText(null);
+            onTruncate?.(false);
+            return;
+        }
+        const parent = el.parentElement;
+        if (!parent) return;
+        const computed = getComputedStyle(parent);
+        const contentWidth = Math.floor(parent.clientWidth - (Number.parseFloat(computed.paddingLeft) || 0) - (Number.parseFloat(computed.paddingRight) || 0));
+        if (contentWidth <= 0) {
+            setDisplayText(null);
+            onTruncate?.(false);
+            return;
+        }
+        const measurer = document.createElement("span");
+        measurer.style.cssText = [
+            "position:absolute",
+            "visibility:hidden",
+            "pointer-events:none",
+            "display:block",
+            `width:${contentWidth}px`,
+            `font:${computed.font}`,
+            `letter-spacing:${computed.letterSpacing}`,
+            "word-break:break-all",
+            `line-height:${computed.lineHeight}`,
+            "white-space:nowrap"
+        ].join(";");
+        measurer.textContent = children;
+        document.body.appendChild(measurer);
+        const lineHeight = measurer.scrollHeight;
+        const maxHeight = lineHeight * maxLines;
+        measurer.style.whiteSpace = "normal";
+        // text fits without truncation
+        if (measurer.scrollHeight <= maxHeight + 1) {
+            setDisplayText(children);
+            onTruncate?.(false);
+            measurer.remove();
+            return;
+        }
+        // binary search
+        const safeEnd = Math.min(Math.abs(end), children.length);
+        const endFragment = safeEnd > 0 ? children.slice(-safeEnd) : "";
+        const startSource = safeEnd > 0 ? children.slice(0, -safeEnd) : children;
+        // If ellipsis + endFragment alone overflows, reduce endFragment first
+        measurer.textContent = ellipsis + endFragment;
+        if (measurer.scrollHeight > maxHeight + 1) {
+            let eLow = 0;
+            let eHigh = endFragment.length;
+            while(eLow <= eHigh){
+                const eMid = Math.floor((eLow + eHigh) / 2);
+                measurer.textContent = ellipsis + endFragment.slice(-eMid || undefined);
+                if (measurer.scrollHeight <= maxHeight + 1) {
+                    eLow = eMid + 1;
+                    continue;
+                }
+                eHigh = eMid - 1;
+            }
+            const trimmedEnd = eHigh > 0 ? endFragment.slice(-eHigh) : "";
+            setDisplayText(ellipsis + trimmedEnd);
+            onTruncate?.(true);
+            measurer.remove();
+            return;
+        }
+        let low = 0;
+        let high = startSource.length;
+        while(low <= high){
+            const mid = Math.floor((low + high) / 2);
+            measurer.textContent = startSource.slice(0, mid) + ellipsis + endFragment;
+            if (measurer.scrollHeight <= maxHeight + 1) {
+                low = mid + 1;
+                continue;
+            }
+            high = mid - 1;
+        }
+        const startFragment = startSource.slice(0, Math.max(high, 0));
+        setDisplayText(startFragment + ellipsis + endFragment);
+        onTruncate?.(true);
+        measurer.remove();
+    }, [
+        children,
+        end,
+        ellipsis,
+        maxLines,
+        onTruncate
+    ]);
+    react.useEffect(()=>{
+        compute();
+    }, [
+        compute
+    ]);
+    // recompute on resize
+    react.useEffect(()=>{
+        const parent = contentRef.current?.parentElement;
+        if (!parent) return;
+        const observer = new ResizeObserver(()=>compute());
+        observer.observe(parent);
+        return ()=>observer.disconnect();
+    }, [
+        compute
+    ]);
+    return {
+        contentRef,
+        contentProps: domUtils.elementProps({
+            style: {
+                wordBreak: "break-all"
+            },
+            children: displayText ?? children
+        })
+    };
+}
+
+exports.useMiddleTruncate = useMiddleTruncate;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@seed-design/react-middle-truncate",
+  "version": "0.0.0-alpha-20260416134952",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/middle-truncate"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/react": "^19.1.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-primitive": "0.0.0-alpha-20260414104312"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/MiddleTruncate.tsx

@@ -0,0 +1,30 @@
+// Visual behavior is verified in Storybook: docs/stories/MiddleTruncate.stories.tsx
+
+"use client";
+
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { mergeProps } from "@seed-design/dom-utils";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import type { UseMiddleTruncateProps } from "./useMiddleTruncate";
+import { useMiddleTruncate } from "./useMiddleTruncate";
+
+export interface MiddleTruncateProps
+  extends UseMiddleTruncateProps,
+    PrimitiveProps,
+    Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {}
+
+export const MiddleTruncate = forwardRef<HTMLSpanElement, MiddleTruncateProps>(
+  ({ children, end, ellipsis, maxLines, onTruncate, ...otherProps }, ref) => {
+    const api = useMiddleTruncate({ children, end, ellipsis, maxLines, onTruncate });
+
+    return (
+      <Primitive.span
+        ref={composeRefs(ref, api.contentRef)}
+        {...mergeProps(api.contentProps, otherProps)}
+      />
+    );
+  },
+);
+MiddleTruncate.displayName = "MiddleTruncate";

package/src/index.ts

@@ -0,0 +1 @@
+export { MiddleTruncate, type MiddleTruncateProps } from "./MiddleTruncate";

package/src/useMiddleTruncate.ts

@@ -0,0 +1,169 @@
+// Visual behavior is verified in Storybook: docs/stories/MiddleTruncate.stories.tsx
+
+"use client";
+
+import { elementProps } from "@seed-design/dom-utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface UseMiddleTruncateProps {
+  children: string;
+
+  /**
+   * Number of characters to preserve from the end of the text.
+   * @default 0
+   */
+  end?: number;
+
+  /**
+   * @default "…"
+   */
+  ellipsis?: string;
+
+  /**
+   * @default 1
+   */
+  maxLines?: number;
+
+  onTruncate?: (isTruncated: boolean) => void;
+}
+
+export function useMiddleTruncate(props: UseMiddleTruncateProps) {
+  const { children, end = 0, ellipsis = "…", maxLines = 1, onTruncate } = props;
+
+  const contentRef = useRef<HTMLElement | null>(null);
+  const [displayText, setDisplayText] = useState<string | null>(null);
+
+  const compute = useCallback(() => {
+    const el = contentRef.current;
+    if (!el || !children) {
+      setDisplayText(null);
+      onTruncate?.(false);
+      return;
+    }
+
+    const parent = el.parentElement;
+    if (!parent) return;
+
+    const computed = getComputedStyle(parent);
+
+    const contentWidth = Math.floor(
+      parent.clientWidth -
+        (Number.parseFloat(computed.paddingLeft) || 0) -
+        (Number.parseFloat(computed.paddingRight) || 0),
+    );
+
+    if (contentWidth <= 0) {
+      setDisplayText(null);
+      onTruncate?.(false);
+      return;
+    }
+
+    const measurer = document.createElement("span");
+
+    measurer.style.cssText = [
+      "position:absolute",
+      "visibility:hidden",
+      "pointer-events:none",
+      "display:block",
+      `width:${contentWidth}px`,
+      `font:${computed.font}`,
+      `letter-spacing:${computed.letterSpacing}`,
+      "word-break:break-all",
+      `line-height:${computed.lineHeight}`,
+      "white-space:nowrap",
+    ].join(";");
+    measurer.textContent = children;
+    document.body.appendChild(measurer);
+
+    const lineHeight = measurer.scrollHeight;
+    const maxHeight = lineHeight * maxLines;
+
+    measurer.style.whiteSpace = "normal";
+
+    // text fits without truncation
+    if (measurer.scrollHeight <= maxHeight + 1) {
+      setDisplayText(children);
+      onTruncate?.(false);
+      measurer.remove();
+      return;
+    }
+
+    // binary search
+    const safeEnd = Math.min(Math.abs(end), children.length);
+    const endFragment = safeEnd > 0 ? children.slice(-safeEnd) : "";
+    const startSource = safeEnd > 0 ? children.slice(0, -safeEnd) : children;
+
+    // If ellipsis + endFragment alone overflows, reduce endFragment first
+    measurer.textContent = ellipsis + endFragment;
+    if (measurer.scrollHeight > maxHeight + 1) {
+      let eLow = 0;
+      let eHigh = endFragment.length;
+
+      while (eLow <= eHigh) {
+        const eMid = Math.floor((eLow + eHigh) / 2);
+        measurer.textContent = ellipsis + endFragment.slice(-eMid || undefined);
+
+        if (measurer.scrollHeight <= maxHeight + 1) {
+          eLow = eMid + 1;
+          continue;
+        }
+
+        eHigh = eMid - 1;
+      }
+
+      const trimmedEnd = eHigh > 0 ? endFragment.slice(-eHigh) : "";
+
+      setDisplayText(ellipsis + trimmedEnd);
+      onTruncate?.(true);
+      measurer.remove();
+
+      return;
+    }
+
+    let low = 0;
+    let high = startSource.length;
+
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      measurer.textContent = startSource.slice(0, mid) + ellipsis + endFragment;
+
+      if (measurer.scrollHeight <= maxHeight + 1) {
+        low = mid + 1;
+        continue;
+      }
+
+      high = mid - 1;
+    }
+
+    const startFragment = startSource.slice(0, Math.max(high, 0));
+
+    setDisplayText(startFragment + ellipsis + endFragment);
+    onTruncate?.(true);
+    measurer.remove();
+  }, [children, end, ellipsis, maxLines, onTruncate]);
+
+  useEffect(() => {
+    compute();
+  }, [compute]);
+
+  // recompute on resize
+  useEffect(() => {
+    const parent = contentRef.current?.parentElement;
+    if (!parent) return;
+
+    const observer = new ResizeObserver(() => compute());
+    observer.observe(parent);
+
+    return () => observer.disconnect();
+  }, [compute]);
+
+  return {
+    contentRef,
+    contentProps: elementProps({
+      style: {
+        wordBreak: "break-all",
+      },
+      children: displayText ?? children,
+    }),
+  };
+}