@patterninc/pattern-ui 0.0.0-main.202610232103.2cb6e31ce186 → 0.0.0-main.202610232106.7015de2e4ed0

package/dist/browser/@patterninc/pattern-ui/trim-text-fn.js

@@ -0,0 +1 @@
+export{t as trimText}from"../../_chunks/trim-text-DHZGuJ9c.js";

package/dist/browser/@patterninc/pattern-ui/trim-text.js

@@ -0,0 +1 @@
+import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as i}from"../../_chunks/dist-BNSTMZct.js";import{a,n as o,r as s}from"../../_chunks/Tooltip-abTz0p9j.js";import{t as c}from"../../_chunks/trim-text-DHZGuJ9c.js";var l=n(),u=/* @__PURE__ */ e(r(),1),d=/* @__PURE__ */ e(t(),1);function f(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function p(e){return e.scrollWidth>e.clientWidth}function m(e,t){let n=()=>t(p(e));n();let r=requestAnimationFrame(n),i=new ResizeObserver(n);i.observe(e);let a=e.parentElement;a?.addEventListener(`focusin`,n),a?.addEventListener(`pointerenter`,n);let o=typeof document<`u`?document.fonts:void 0;return o?.addEventListener(`loadingdone`,n),o?.ready.then(()=>{e.isConnected&&n()}),()=>{cancelAnimationFrame(r),i.disconnect(),a?.removeEventListener(`focusin`,n),a?.removeEventListener(`pointerenter`,n),o?.removeEventListener(`loadingdone`,n)}}function h(e){let t=(0,l.c)(57),n,r,h,g,_,v,y;t[0]===e?(n=t[1],r=t[2],h=t[3],g=t[4],_=t[5],v=t[6],y=t[7]):({text:y,limit:r,side:_,className:n,qaTestId:v,ref:g,...h}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=h,t[4]=g,t[5]=_,t[6]=v,t[7]=y);let b=_===void 0?`bottom`:_,x=v===void 0?`trim-text`:v,S=(0,d.useRef)(null),C=(0,d.useRef)(null),[w,T]=(0,d.useState)(!1),[E,D]=(0,d.useState)(!1),O,k,A,j,M,N,P,F;if(t[8]!==n||t[9]!==r||t[10]!==w||t[11]!==h||t[12]!==x||t[13]!==g||t[14]!==b||t[15]!==y){F=Symbol.for(`react.early_return_sentinel`);bb0:{let e=i(`pui-text-body-medium text-text-strong`,n);if(r!=null&&r>=1){let n;t[24]!==r||t[25]!==y?(n=c(y,r),t[24]=r,t[25]=y,t[26]=n):n=t[26];let i=n;if(i===y){F=/* @__PURE__ */ (0,u.jsx)(`span`,{ref:g,className:e,"qa-test-id":x,...h,children:y});break bb0}let l=/* @__PURE__ */ (0,u.jsx)(a,{asChild:!0,children:/* @__PURE__ */ (0,u.jsx)(`span`,{ref:g,className:e,"qa-test-id":x,...h,tabIndex:0,children:i})}),d;t[27]!==b||t[28]!==y?(d=/* @__PURE__ */ (0,u.jsx)(s,{side:b,className:`max-w-xs break-words whitespace-normal`,children:y}),t[27]=b,t[28]=y,t[29]=d):d=t[29];let f;t[30]!==l||t[31]!==d?(f=/* @__PURE__ */ (0,u.jsxs)(o,{children:[l,d]}),t[30]=l,t[31]=d,t[32]=f):f=t[32],F=f;break bb0}k=o,N=w,t[33]===Symbol.for(`react.memo_cache_sentinel`)?(P=e=>{let t=S.current;T(e&&t!=null&&p(t))},t[33]=P):P=t[33],O=a,M=!0,t[34]!==g||t[35]!==y?(A=e=>{C.current?.(),C.current=null,S.current=e,f(g,e),e&&(y.length===0?D(!1):C.current=m(e,D))},t[34]=g,t[35]=y,t[36]=A):A=t[36],j=i(e,`block w-full min-w-0 truncate`)}t[8]=n,t[9]=r,t[10]=w,t[11]=h,t[12]=x,t[13]=g,t[14]=b,t[15]=y,t[16]=O,t[17]=k,t[18]=A,t[19]=j,t[20]=M,t[21]=N,t[22]=P,t[23]=F}else O=t[16],k=t[17],A=t[18],j=t[19],M=t[20],N=t[21],P=t[22],F=t[23];if(F!==Symbol.for(`react.early_return_sentinel`))return F;let I=E?0:void 0,L;t[37]!==h||t[38]!==x||t[39]!==A||t[40]!==j||t[41]!==I||t[42]!==y?(L=/* @__PURE__ */ (0,u.jsx)(`span`,{ref:A,className:j,"qa-test-id":x,...h,tabIndex:I,children:y}),t[37]=h,t[38]=x,t[39]=A,t[40]=j,t[41]=I,t[42]=y,t[43]=L):L=t[43];let R;t[44]!==O||t[45]!==L||t[46]!==M?(R=/* @__PURE__ */ (0,u.jsx)(O,{asChild:M,children:L}),t[44]=O,t[45]=L,t[46]=M,t[47]=R):R=t[47];let z;t[48]!==b||t[49]!==y?(z=/* @__PURE__ */ (0,u.jsx)(s,{side:b,className:`max-w-xs break-words whitespace-normal`,children:y}),t[48]=b,t[49]=y,t[50]=z):z=t[50];let B;return t[51]!==k||t[52]!==R||t[53]!==z||t[54]!==N||t[55]!==P?(B=/* @__PURE__ */ (0,u.jsxs)(k,{open:N,onOpenChange:P,children:[R,z]}),t[51]=k,t[52]=R,t[53]=z,t[54]=N,t[55]=P,t[56]=B):B=t[56],B}export{h as TrimText,c as trimText};

package/dist/browser/_chunks/trim-text-DHZGuJ9c.js

@@ -0,0 +1 @@
+function e(e=``,t){return t<1||e.length<=t?e:`${e.substring(0,t).trim()}...`}export{e as t};

package/dist/components/TrimText/TrimText.js

@@ -0,0 +1,258 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/Tooltip.js";
+import { trimText } from "../../lib/utils/trim-text.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { cn } from "cn";
+
+//#region src/components/TrimText/TrimText.tsx
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+function isOverflowed(el) {
+	return el.scrollWidth > el.clientWidth;
+}
+/**
+* Width clipping depends on layout, not on props: the span is `w-full`, so its border box follows
+* the container while `scrollWidth` follows the text. ResizeObserver misses a font swap or a
+* letter-spacing change that leaves that box the same size. Measure on the node itself (no effect),
+* again when `document.fonts` settles, and again when the parent is hovered or focused so the tab
+* stop is current before the user tabs onward.
+*/
+function watchWidthOverflow(node, onChange) {
+	const measure = () => onChange(isOverflowed(node));
+	measure();
+	const frame = requestAnimationFrame(measure);
+	const observer = new ResizeObserver(measure);
+	observer.observe(node);
+	const parent = node.parentElement;
+	parent?.addEventListener("focusin", measure);
+	parent?.addEventListener("pointerenter", measure);
+	const fonts = typeof document !== "undefined" ? document.fonts : void 0;
+	fonts?.addEventListener("loadingdone", measure);
+	fonts?.ready.then(() => {
+		if (node.isConnected) measure();
+	});
+	return () => {
+		cancelAnimationFrame(frame);
+		observer.disconnect();
+		parent?.removeEventListener("focusin", measure);
+		parent?.removeEventListener("pointerenter", measure);
+		fonts?.removeEventListener("loadingdone", measure);
+	};
+}
+function TrimText(t0) {
+	const $ = c(57);
+	let className;
+	let limit;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let text;
+	if ($[0] !== t0) {
+		({text, limit, side: t1, className, qaTestId: t2, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = limit;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = text;
+	} else {
+		className = $[1];
+		limit = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		text = $[7];
+	}
+	const side = t1 === void 0 ? "bottom" : t1;
+	const qaTestId = t2 === void 0 ? "trim-text" : t2;
+	const spanRef = useRef(null);
+	const overflowWatchRef = useRef(null);
+	const [open, setOpen] = useState(false);
+	const [overflowed, setOverflowed] = useState(false);
+	let T0;
+	let T1;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[8] !== className || $[9] !== limit || $[10] !== open || $[11] !== props || $[12] !== qaTestId || $[13] !== ref || $[14] !== side || $[15] !== text) {
+		t8 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const textClassName = cn("pui-text-body-medium text-text-strong", className);
+			if (limit != null && limit >= 1) {
+				let t9;
+				if ($[24] !== limit || $[25] !== text) {
+					t9 = trimText(text, limit);
+					$[24] = limit;
+					$[25] = text;
+					$[26] = t9;
+				} else t9 = $[26];
+				const trimmed = t9;
+				if (trimmed === text) {
+					t8 = /* @__PURE__ */ jsx("span", {
+						ref,
+						className: textClassName,
+						"qa-test-id": qaTestId,
+						...props,
+						children: text
+					});
+					break bb0;
+				}
+				const t10 = /* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("span", {
+						ref,
+						className: textClassName,
+						"qa-test-id": qaTestId,
+						...props,
+						tabIndex: 0,
+						children: trimmed
+					})
+				});
+				let t11;
+				if ($[27] !== side || $[28] !== text) {
+					t11 = /* @__PURE__ */ jsx(TooltipContent, {
+						side,
+						className: "max-w-xs break-words whitespace-normal",
+						children: text
+					});
+					$[27] = side;
+					$[28] = text;
+					$[29] = t11;
+				} else t11 = $[29];
+				let t12;
+				if ($[30] !== t10 || $[31] !== t11) {
+					t12 = /* @__PURE__ */ jsxs(Tooltip, { children: [t10, t11] });
+					$[30] = t10;
+					$[31] = t11;
+					$[32] = t12;
+				} else t12 = $[32];
+				t8 = t12;
+				break bb0;
+			}
+			T1 = Tooltip;
+			t6 = open;
+			if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+				t7 = (next) => {
+					const el = spanRef.current;
+					setOpen(next && el != null && isOverflowed(el));
+				};
+				$[33] = t7;
+			} else t7 = $[33];
+			T0 = TooltipTrigger;
+			t5 = true;
+			if ($[34] !== ref || $[35] !== text) {
+				t3 = (node) => {
+					overflowWatchRef.current?.();
+					overflowWatchRef.current = null;
+					spanRef.current = node;
+					assignRef(ref, node);
+					if (!node) return;
+					if (text.length === 0) {
+						setOverflowed(false);
+						return;
+					}
+					overflowWatchRef.current = watchWidthOverflow(node, setOverflowed);
+				};
+				$[34] = ref;
+				$[35] = text;
+				$[36] = t3;
+			} else t3 = $[36];
+			t4 = cn(textClassName, "block w-full min-w-0 truncate");
+		}
+		$[8] = className;
+		$[9] = limit;
+		$[10] = open;
+		$[11] = props;
+		$[12] = qaTestId;
+		$[13] = ref;
+		$[14] = side;
+		$[15] = text;
+		$[16] = T0;
+		$[17] = T1;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else {
+		T0 = $[16];
+		T1 = $[17];
+		t3 = $[18];
+		t4 = $[19];
+		t5 = $[20];
+		t6 = $[21];
+		t7 = $[22];
+		t8 = $[23];
+	}
+	if (t8 !== Symbol.for("react.early_return_sentinel")) return t8;
+	const t9 = overflowed ? 0 : void 0;
+	let t10;
+	if ($[37] !== props || $[38] !== qaTestId || $[39] !== t3 || $[40] !== t4 || $[41] !== t9 || $[42] !== text) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			ref: t3,
+			className: t4,
+			"qa-test-id": qaTestId,
+			...props,
+			tabIndex: t9,
+			children: text
+		});
+		$[37] = props;
+		$[38] = qaTestId;
+		$[39] = t3;
+		$[40] = t4;
+		$[41] = t9;
+		$[42] = text;
+		$[43] = t10;
+	} else t10 = $[43];
+	let t11;
+	if ($[44] !== T0 || $[45] !== t10 || $[46] !== t5) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			asChild: t5,
+			children: t10
+		});
+		$[44] = T0;
+		$[45] = t10;
+		$[46] = t5;
+		$[47] = t11;
+	} else t11 = $[47];
+	let t12;
+	if ($[48] !== side || $[49] !== text) {
+		t12 = /* @__PURE__ */ jsx(TooltipContent, {
+			side,
+			className: "max-w-xs break-words whitespace-normal",
+			children: text
+		});
+		$[48] = side;
+		$[49] = text;
+		$[50] = t12;
+	} else t12 = $[50];
+	let t13;
+	if ($[51] !== T1 || $[52] !== t11 || $[53] !== t12 || $[54] !== t6 || $[55] !== t7) {
+		t13 = /* @__PURE__ */ jsxs(T1, {
+			open: t6,
+			onOpenChange: t7,
+			children: [t11, t12]
+		});
+		$[51] = T1;
+		$[52] = t11;
+		$[53] = t12;
+		$[54] = t6;
+		$[55] = t7;
+		$[56] = t13;
+	} else t13 = $[56];
+	return t13;
+}
+
+//#endregion
+export { TrimText, trimText };

package/dist/lib/utils/trim-text.js

@@ -0,0 +1,17 @@
+//#region src/lib/utils/trim-text.ts
+/**
+* Truncate `text` to `characterLength` characters and append `...` when it does not fit. Mirrors
+* React UI `trimText`: a length below 1 returns `text` unchanged (so a bad limit never collapses to
+* a lone ellipsis), and the kept slice is trimmed before the ellipsis.
+*
+* Truncation is signaled by the return value. When the text was shortened, the result differs from
+* `text` and ends with `...`. When it was not, the result is `text`.
+*/
+function trimText(text = "", characterLength) {
+	if (characterLength < 1) return text;
+	if (text.length <= characterLength) return text;
+	return `${text.substring(0, characterLength).trim()}...`;
+}
+
+//#endregion
+export { trimText };

package/dist/play-cdn-claude.js

@@ -2,7 +2,7 @@
 const NPM_CDN = "https://cdn.jsdelivr.net/npm/";
 const SHARED = /^(@patterninc\/pattern-ui\/|(react|react-dom|@lingui\/core|@lingui\/react|sucrase)(\/|$))/;
 const scriptUrl = document.currentScript instanceof HTMLScriptElement ? document.currentScript.src : "";
-const packageUrl = new URL("../", scriptUrl || location.href).href.replace(/\/@patterninc\/pattern-ui(@[^/]*)?\//, `/@patterninc/pattern-ui@0.0.0-main.202610232103.2cb6e31ce186/`);
+const packageUrl = new URL("../", scriptUrl || location.href).href.replace(/\/@patterninc\/pattern-ui(@[^/]*)?\//, `/@patterninc/pattern-ui@0.0.0-main.202610232106.7015de2e4ed0/`);
 const browserUrl = `${packageUrl}dist/browser/`;
 globalThis.patternPlayCdnUrl = (specifier) => {
 	if (specifier.endsWith(".css")) return `${browserUrl}${specifier}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patterninc/pattern-ui",
-  "version": "0.0.0-main.202610232103.2cb6e31ce186",
+  "version": "0.0.0-main.202610232106.7015de2e4ed0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/patterninc/pattern-exp.git",
@@ -753,6 +753,14 @@
     "./tone": {
       "types": "./src/utils/tone-context.tsx",
       "default": "./dist/utils/tone-context.js"
+    },
+    "./trim-text": {
+      "types": "./src/components/TrimText/TrimText.tsx",
+      "default": "./dist/components/TrimText/TrimText.js"
+    },
+    "./trim-text-fn": {
+      "types": "./src/lib/utils/trim-text.ts",
+      "default": "./dist/lib/utils/trim-text.js"
     }
   },
   "publishConfig": {

package/src/components/TrimText/TrimText.tsx

@@ -0,0 +1,169 @@
+import { cn } from 'cn'
+import { type ComponentProps, type Ref, useRef, useState } from 'react'
+
+import { trimText } from '../../lib/utils/trim-text'
+// Pattern UI Tooltip (same primitive UploadItem uses for a clipped filename). The full string is
+// shown on hover and keyboard focus, and only when the text is actually truncated. A plain span
+// is not in the tab order, and Radix only opens the tooltip when the trigger is focusable, so the
+// truncated span gets tabIndex={0}.
+import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip/Tooltip'
+
+export { trimText } from '../../lib/utils/trim-text'
+
+export type TrimTextSide = 'top' | 'right' | 'bottom' | 'left'
+
+export interface TrimTextProps extends Omit<ComponentProps<'span'>, 'children'> {
+  /** The text to display. */
+  text: string
+  /**
+   * Characters to keep before the ellipsis. Omit it, or pass a value below 1, to ellipsize to the
+   * container width instead of counting characters.
+   */
+  limit?: number
+  /**
+   * Preferred tooltip side. This is React UI `TrimText`'s `position`, named for Pattern UI
+   * `TooltipContent`.
+   *
+   * @default 'bottom'
+   */
+  side?: TrimTextSide
+  /** Optional test id rendered as the `qa-test-id` attribute for QA testing */
+  qaTestId?: string
+}
+
+function assignRef(ref: Ref<HTMLSpanElement> | undefined, node: HTMLSpanElement | null) {
+  if (typeof ref === 'function') ref(node)
+  else if (ref) ref.current = node
+}
+
+function isOverflowed(el: HTMLElement): boolean {
+  // Integers, so a 1px overflow is already ellipsized. Strict `>` matches React UI TrimText.
+  return el.scrollWidth > el.clientWidth
+}
+
+/**
+ * Width clipping depends on layout, not on props: the span is `w-full`, so its border box follows
+ * the container while `scrollWidth` follows the text. ResizeObserver misses a font swap or a
+ * letter-spacing change that leaves that box the same size. Measure on the node itself (no effect),
+ * again when `document.fonts` settles, and again when the parent is hovered or focused so the tab
+ * stop is current before the user tabs onward.
+ */
+function watchWidthOverflow(
+  node: HTMLSpanElement,
+  onChange: (overflowed: boolean) => void,
+): () => void {
+  const measure = () => onChange(isOverflowed(node))
+  measure()
+  const frame = requestAnimationFrame(measure)
+
+  const observer = new ResizeObserver(measure)
+  observer.observe(node)
+
+  const parent = node.parentElement
+  parent?.addEventListener('focusin', measure)
+  parent?.addEventListener('pointerenter', measure)
+
+  // jsdom has no FontFaceSet. Apps that render TrimText in Vitest stub ResizeObserver only, so a
+  // missing `document.fonts` must not throw inside the ref callback.
+  const fonts = typeof document !== 'undefined' ? document.fonts : undefined
+  fonts?.addEventListener('loadingdone', measure)
+  void fonts?.ready.then(() => {
+    if (node.isConnected) measure()
+  })
+
+  return () => {
+    cancelAnimationFrame(frame)
+    observer.disconnect()
+    parent?.removeEventListener('focusin', measure)
+    parent?.removeEventListener('pointerenter', measure)
+    fonts?.removeEventListener('loadingdone', measure)
+  }
+}
+
+export function TrimText({
+  text,
+  limit,
+  side = 'bottom',
+  className,
+  qaTestId = 'trim-text',
+  ref,
+  ...props
+}: TrimTextProps) {
+  const spanRef = useRef<HTMLSpanElement>(null)
+  const overflowWatchRef = useRef<(() => void) | null>(null)
+  const [open, setOpen] = useState(false)
+  const [overflowed, setOverflowed] = useState(false)
+  const textClassName = cn('pui-text-body-medium text-text-strong', className)
+
+  if (limit != null && limit >= 1) {
+    const trimmed = trimText(text, limit)
+    if (trimmed === text) {
+      return (
+        <span ref={ref} className={textClassName} qa-test-id={qaTestId} {...props}>
+          {text}
+        </span>
+      )
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            ref={ref}
+            className={textClassName}
+            qa-test-id={qaTestId}
+            {...props}
+            // Truncated text is the tooltip trigger. Radix opens on focus only when it is tabbable.
+            // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- span trigger, tabbable only while truncated
+            tabIndex={0}
+          >
+            {trimmed}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side={side} className='max-w-xs break-words whitespace-normal'>
+          {text}
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <Tooltip
+      open={open}
+      onOpenChange={(next) => {
+        const el = spanRef.current
+        setOpen(next && el != null && isOverflowed(el))
+      }}
+    >
+      <TooltipTrigger asChild>
+        <span
+          ref={(node) => {
+            overflowWatchRef.current?.()
+            overflowWatchRef.current = null
+            spanRef.current = node
+            assignRef(ref, node)
+            if (!node) return
+            // `text` is read so a new string re-attaches the watcher. An empty line is not
+            // clipped; clear the previous tab stop instead of leaving `overflowed` true.
+            if (text.length === 0) {
+              setOverflowed(false)
+              return
+            }
+            overflowWatchRef.current = watchWidthOverflow(node, setOverflowed)
+          }}
+          className={cn(textClassName, 'block w-full min-w-0 truncate')}
+          qa-test-id={qaTestId}
+          {...props}
+          // Only the clipped line is a tab stop. `undefined` drops the attribute when it fits.
+          // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- span trigger, tabbable only while truncated
+          tabIndex={overflowed ? 0 : undefined}
+        >
+          {text}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side={side} className='max-w-xs break-words whitespace-normal'>
+        {text}
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/src/lib/utils/trim-text.ts

@@ -0,0 +1,13 @@
+/**
+ * Truncate `text` to `characterLength` characters and append `...` when it does not fit. Mirrors
+ * React UI `trimText`: a length below 1 returns `text` unchanged (so a bad limit never collapses to
+ * a lone ellipsis), and the kept slice is trimmed before the ellipsis.
+ *
+ * Truncation is signaled by the return value. When the text was shortened, the result differs from
+ * `text` and ends with `...`. When it was not, the result is `text`.
+ */
+export function trimText(text = '', characterLength: number): string {
+  if (characterLength < 1) return text
+  if (text.length <= characterLength) return text
+  return `${text.substring(0, characterLength).trim()}...`
+}