@telegraph/truncate 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @telegraph/truncate
 
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [[`c335807`](https://github.com/knocklabs/telegraph/commit/c33580795d3e75d921449a5684ff7aaff1c2c482)]:
+  - @telegraph/tooltip@0.3.0
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),T=require("@telegraph/helpers"),f=require("@telegraph/tooltip"),l=require("@telegraph/typography"),c=require("react"),a=({tgphRef:t},e=[])=>{const[r,s]=c.useState(!1);return c.useEffect(()=>{if(!t.current)return s(!1);const n=t.current,u=()=>{s(n.scrollWidth>n.clientWidth)};u();const i=new ResizeObserver(u);return i.observe(n),()=>{i.disconnect()}},[t,...e]),{truncated:r}},p=({label:t,children:e,...r})=>{const s=c.useRef(null),{truncated:n}=a({tgphRef:s},[e]),u=c.useMemo(()=>typeof e=="string"?e:c.isValidElement(e)?e.props.children:t,[e,t]);return o.jsx(f.Tooltip,{label:o.jsx(l.Text,{as:"span",size:"1",children:u}),enabled:n,triggerRef:s,...r,children:o.jsx(T.RefToTgphRef,{children:e})})},d=({tooltipProps:t,style:e,...r})=>o.jsx(p,{...t,children:o.jsx(l.Text,{textOverflow:"ellipsis",overflow:"hidden",style:{display:"block",whiteSpace:"nowrap",...e},...r})});exports.TooltipIfTruncated=p;exports.TruncatedText=d;exports.useTruncate=a;
-//# sourceMappingURL=index.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`@telegraph/helpers`),l=require(`@telegraph/tooltip`),u=require(`@telegraph/typography`),d=require(`react`);d=s(d);let f=require(`react/jsx-runtime`);var p=({tgphRef:e},t=[])=>{let[n,r]=d.default.useState(!1);return d.default.useEffect(()=>{if(!e.current)return r(!1);let t=e.current,n=()=>{r(t.scrollWidth>t.clientWidth)};n();let i=new ResizeObserver(n);return i.observe(t),()=>{i.disconnect()}},[e,...t]),{truncated:n}},m=({label:e,children:t,...n})=>{let r=d.default.useRef(null),{truncated:i}=p({tgphRef:r},[t]);return(0,f.jsx)(l.Tooltip,{label:(0,f.jsx)(u.Text,{as:`span`,size:`1`,children:d.default.useMemo(()=>typeof t==`string`?t:d.default.isValidElement(t)?t.props.children:e,[t,e])}),enabled:i,triggerRef:r,...n,children:(0,f.jsx)(c.RefToTgphRef,{children:t})})},h=({tooltipProps:e,style:t,...n})=>(0,f.jsx)(m,{...e,children:(0,f.jsx)(u.Text,{textOverflow:`ellipsis`,overflow:`hidden`,style:{display:`block`,whiteSpace:`nowrap`,...t},...n})});exports.TooltipIfTruncated=m,exports.TruncatedText=h,exports.useTruncate=p;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useTruncate/useTruncate.ts","../../src/TooltipIfTruncated/TooltipIfTruncated.tsx","../../src/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import React from \"react\";\n\ntype UseTruncateParams = {\n  tgphRef: React.RefObject<HTMLElement | null>;\n};\n\nconst useTruncate = (\n  { tgphRef }: UseTruncateParams,\n  deps: React.DependencyList = [],\n) => {\n  const [truncated, setTruncated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!tgphRef.current) return setTruncated(false);\n\n    const tgphRefElement = tgphRef.current;\n\n    const checkTruncation = () => {\n      setTruncated(tgphRefElement.scrollWidth > tgphRefElement.clientWidth);\n    };\n\n    // Initial check\n    checkTruncation();\n\n    // Add a resize observer to check for truncation when the element is resized\n    const resizeObserver = new ResizeObserver(checkTruncation);\n    resizeObserver.observe(tgphRefElement);\n\n    // Clean up\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgphRef, ...deps]);\n\n  return { truncated };\n};\n\nexport { useTruncate };\n","import {\n  type Optional,\n  RefToTgphRef,\n  type TgphComponentProps,\n} from \"@telegraph/helpers\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { useTruncate } from \"../useTruncate\";\n\nexport type TooltipIfTruncatedProps = Optional<\n  TgphComponentProps<typeof Tooltip>,\n  \"label\"\n>;\n\nconst TooltipIfTruncated = ({\n  label,\n  children,\n  ...props\n}: TooltipIfTruncatedProps) => {\n  const truncateRef = React.useRef<HTMLButtonElement>(null);\n  const { truncated } = useTruncate(\n    { tgphRef: truncateRef as React.RefObject<HTMLElement> },\n    [children],\n  );\n\n  // We extract the text so that we can properly wrap it in the Text component\n  const textToDisplayInTooltip = React.useMemo(() => {\n    if (typeof children === \"string\") return children;\n    if (React.isValidElement(children)) {\n      const childProps = children.props as Record<string, unknown>;\n      return childProps.children;\n    }\n    return label;\n  }, [children, label]);\n\n  return (\n    <Tooltip\n      label={\n        <Text as=\"span\" size=\"1\">\n          {textToDisplayInTooltip as React.ReactNode}\n        </Text>\n      }\n      enabled={truncated}\n      triggerRef={truncateRef as React.RefObject<HTMLButtonElement>}\n      {...props}\n    >\n      <RefToTgphRef>{children}</RefToTgphRef>\n    </Tooltip>\n  );\n};\n\nexport { TooltipIfTruncated };\n","import type { TgphComponentProps, TgphElement } from \"@telegraph/helpers\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { TooltipIfTruncated } from \"../TooltipIfTruncated\";\n\nexport type TruncatedTextProps<T extends TgphElement = \"span\"> = {\n  tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement = \"span\">({\n  tooltipProps,\n  style,\n  ...props\n}: TruncatedTextProps<T>) => {\n  return (\n    <TooltipIfTruncated {...tooltipProps}>\n      <Text\n        textOverflow=\"ellipsis\"\n        overflow=\"hidden\"\n        style={{\n          display: \"block\",\n          whiteSpace: \"nowrap\",\n          ...style,\n        }}\n        {...props}\n      />\n    </TooltipIfTruncated>\n  );\n};\n\nexport { TruncatedText };\n"],"names":["useTruncate","tgphRef","deps","truncated","setTruncated","React","tgphRefElement","checkTruncation","resizeObserver","TooltipIfTruncated","label","children","props","truncateRef","textToDisplayInTooltip","jsx","Tooltip","Text","RefToTgphRef","TruncatedText","tooltipProps","style"],"mappings":"2OAMMA,EAAc,CAClB,CAAE,QAAAC,GACFC,EAA6B,CAAA,IAC1B,CACH,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAS,EAAK,EAEtD,OAAAA,EAAM,UAAU,IAAM,CACpB,GAAI,CAACJ,EAAQ,QAAS,OAAOG,EAAa,EAAK,EAE/C,MAAME,EAAiBL,EAAQ,QAEzBM,EAAkB,IAAM,CAC5BH,EAAaE,EAAe,YAAcA,EAAe,WAAW,CACtE,EAGAC,EAAA,EAGA,MAAMC,EAAiB,IAAI,eAAeD,CAAe,EACzD,OAAAC,EAAe,QAAQF,CAAc,EAG9B,IAAM,CACXE,EAAe,WAAA,CACjB,CAEF,EAAG,CAACP,EAAS,GAAGC,CAAI,CAAC,EAEd,CAAE,UAAAC,CAAA,CACX,ECpBMM,EAAqB,CAAC,CAC1B,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA+B,CAC7B,MAAMC,EAAcR,EAAM,OAA0B,IAAI,EAClD,CAAE,UAAAF,GAAcH,EACpB,CAAE,QAASa,CAAA,EACX,CAACF,CAAQ,CAAA,EAILG,EAAyBT,EAAM,QAAQ,IACvC,OAAOM,GAAa,SAAiBA,EACrCN,EAAM,eAAeM,CAAQ,EACZA,EAAS,MACV,SAEbD,EACN,CAACC,EAAUD,CAAK,CAAC,EAEpB,OACEK,EAAAA,IAACC,EAAAA,QAAA,CACC,MACED,EAAAA,IAACE,EAAAA,KAAA,CAAK,GAAG,OAAO,KAAK,IAClB,SAAAH,EACH,EAEF,QAASX,EACT,WAAYU,EACX,GAAGD,EAEJ,SAAAG,EAAAA,IAACG,gBAAc,SAAAP,CAAA,CAAS,CAAA,CAAA,CAG9B,EC1CMQ,EAAgB,CAAiC,CACrD,aAAAC,EACA,MAAAC,EACA,GAAGT,CACL,IAEIG,EAAAA,IAACN,EAAA,CAAoB,GAAGW,EACtB,SAAAL,EAAAA,IAACE,EAAAA,KAAA,CACC,aAAa,WACb,SAAS,SACT,MAAO,CACL,QAAS,QACT,WAAY,SACZ,GAAGI,CAAA,EAEJ,GAAGT,CAAA,CAAA,EAER"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/useTruncate/useTruncate.ts","../../src/TooltipIfTruncated/TooltipIfTruncated.tsx","../../src/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import React from \"react\";\n\ntype UseTruncateParams = {\n  tgphRef: React.RefObject<HTMLElement | null>;\n};\n\nconst useTruncate = (\n  { tgphRef }: UseTruncateParams,\n  deps: React.DependencyList = [],\n) => {\n  const [truncated, setTruncated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!tgphRef.current) return setTruncated(false);\n\n    const tgphRefElement = tgphRef.current;\n\n    const checkTruncation = () => {\n      setTruncated(tgphRefElement.scrollWidth > tgphRefElement.clientWidth);\n    };\n\n    // Initial check\n    checkTruncation();\n\n    // Add a resize observer to check for truncation when the element is resized\n    const resizeObserver = new ResizeObserver(checkTruncation);\n    resizeObserver.observe(tgphRefElement);\n\n    // Clean up\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgphRef, ...deps]);\n\n  return { truncated };\n};\n\nexport { useTruncate };\n","import {\n  type Optional,\n  RefToTgphRef,\n  type TgphComponentProps,\n} from \"@telegraph/helpers\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { useTruncate } from \"../useTruncate\";\n\nexport type TooltipIfTruncatedProps = Optional<\n  TgphComponentProps<typeof Tooltip>,\n  \"label\"\n>;\n\nconst TooltipIfTruncated = ({\n  label,\n  children,\n  ...props\n}: TooltipIfTruncatedProps) => {\n  const truncateRef = React.useRef<HTMLButtonElement>(null);\n  const { truncated } = useTruncate(\n    { tgphRef: truncateRef as React.RefObject<HTMLElement> },\n    [children],\n  );\n\n  // We extract the text so that we can properly wrap it in the Text component\n  const textToDisplayInTooltip = React.useMemo(() => {\n    if (typeof children === \"string\") return children;\n    if (React.isValidElement(children)) {\n      const childProps = children.props as Record<string, unknown>;\n      return childProps.children;\n    }\n    return label;\n  }, [children, label]);\n\n  return (\n    <Tooltip\n      label={\n        <Text as=\"span\" size=\"1\">\n          {textToDisplayInTooltip as React.ReactNode}\n        </Text>\n      }\n      enabled={truncated}\n      triggerRef={truncateRef as React.RefObject<HTMLButtonElement>}\n      {...props}\n    >\n      <RefToTgphRef>{children}</RefToTgphRef>\n    </Tooltip>\n  );\n};\n\nexport { TooltipIfTruncated };\n","import type { TgphComponentProps, TgphElement } from \"@telegraph/helpers\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { TooltipIfTruncated } from \"../TooltipIfTruncated\";\n\nexport type TruncatedTextProps<T extends TgphElement = \"span\"> = {\n  tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement = \"span\">({\n  tooltipProps,\n  style,\n  ...props\n}: TruncatedTextProps<T>) => {\n  return (\n    <TooltipIfTruncated {...tooltipProps}>\n      <Text\n        textOverflow=\"ellipsis\"\n        overflow=\"hidden\"\n        style={{\n          display: \"block\",\n          whiteSpace: \"nowrap\",\n          ...style,\n        }}\n        {...props}\n      />\n    </TooltipIfTruncated>\n  );\n};\n\nexport { TruncatedText };\n"],"mappings":"qsBAMA,IAAM,GACJ,CAAE,WACF,EAA6B,EAAE,GAC5B,CACH,GAAM,CAAC,EAAW,GAAgB,EAAA,QAAM,SAAS,GAAM,CAyBvD,OAvBA,EAAA,QAAM,cAAgB,CACpB,GAAI,CAAC,EAAQ,QAAS,OAAO,EAAa,GAAM,CAEhD,IAAM,EAAiB,EAAQ,QAEzB,MAAwB,CAC5B,EAAa,EAAe,YAAc,EAAe,YAAY,EAIvE,GAAiB,CAGjB,IAAM,EAAiB,IAAI,eAAe,EAAgB,CAI1D,OAHA,EAAe,QAAQ,EAAe,KAGzB,CACX,EAAe,YAAY,GAG5B,CAAC,EAAS,GAAG,EAAK,CAAC,CAEf,CAAE,YAAW,ECnBhB,GAAsB,CAC1B,QACA,WACA,GAAG,KAC0B,CAC7B,IAAM,EAAc,EAAA,QAAM,OAA0B,KAAK,CACnD,CAAE,aAAc,EACpB,CAAE,QAAS,EAA6C,CACxD,CAAC,EAAS,CACX,CAYD,OACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,OACE,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,GAAG,OAAO,KAAK,aAZI,EAAA,QAAM,YAC/B,OAAO,GAAa,SAAiB,EACrC,EAAA,QAAM,eAAe,EAAS,CACb,EAAS,MACV,SAEb,EACN,CAAC,EAAU,EAAM,CAAC,CAOR,CAAA,CAET,QAAS,EACT,WAAY,EACZ,GAAI,YAEJ,EAAA,EAAA,KAAC,EAAA,aAAD,CAAe,WAAwB,CAAA,CAC/B,CAAA,ECxCR,GAAiD,CACrD,eACA,QACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAD,CAAoB,GAAI,YACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,aAAa,WACb,SAAS,SACT,MAAO,CACL,QAAS,QACT,WAAY,SACZ,GAAG,EACJ,CACD,GAAI,EACJ,CAAA,CACiB,CAAA"}

package/dist/esm/index.mjs

@@ -1,60 +1,49 @@
-import { jsx as s } from "react/jsx-runtime";
-import { RefToTgphRef as f } from "@telegraph/helpers";
-import { Tooltip as p } from "@telegraph/tooltip";
-import { Text as l } from "@telegraph/typography";
-import c from "react";
-const a = ({ tgphRef: t }, e = []) => {
-  const [r, o] = c.useState(!1);
-  return c.useEffect(() => {
-    if (!t.current) return o(!1);
-    const n = t.current, i = () => {
-      o(n.scrollWidth > n.clientWidth);
-    };
-    i();
-    const u = new ResizeObserver(i);
-    return u.observe(n), () => {
-      u.disconnect();
-    };
-  }, [t, ...e]), { truncated: r };
-}, d = ({
-  label: t,
-  children: e,
-  ...r
-}) => {
-  const o = c.useRef(null), { truncated: n } = a(
-    { tgphRef: o },
-    [e]
-  ), i = c.useMemo(() => typeof e == "string" ? e : c.isValidElement(e) ? e.props.children : t, [e, t]);
-  return /* @__PURE__ */ s(
-    p,
-    {
-      label: /* @__PURE__ */ s(l, { as: "span", size: "1", children: i }),
-      enabled: n,
-      triggerRef: o,
-      ...r,
-      children: /* @__PURE__ */ s(f, { children: e })
-    }
-  );
-}, b = ({
-  tooltipProps: t,
-  style: e,
-  ...r
-}) => /* @__PURE__ */ s(d, { ...t, children: /* @__PURE__ */ s(
-  l,
-  {
-    textOverflow: "ellipsis",
-    overflow: "hidden",
-    style: {
-      display: "block",
-      whiteSpace: "nowrap",
-      ...e
-    },
-    ...r
-  }
-) });
-export {
-  d as TooltipIfTruncated,
-  b as TruncatedText,
-  a as useTruncate
-};
-//# sourceMappingURL=index.mjs.map
+import { RefToTgphRef as e } from "@telegraph/helpers";
+import { Tooltip as t } from "@telegraph/tooltip";
+import { Text as n } from "@telegraph/typography";
+import r from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/useTruncate/useTruncate.ts
+var a = ({ tgphRef: e }, t = []) => {
+	let [n, i] = r.useState(!1);
+	return r.useEffect(() => {
+		if (!e.current) return i(!1);
+		let t = e.current, n = () => {
+			i(t.scrollWidth > t.clientWidth);
+		};
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(t), () => {
+			r.disconnect();
+		};
+	}, [e, ...t]), { truncated: n };
+}, o = ({ label: o, children: s, ...c }) => {
+	let l = r.useRef(null), { truncated: u } = a({ tgphRef: l }, [s]);
+	return /* @__PURE__ */ i(t, {
+		label: /* @__PURE__ */ i(n, {
+			as: "span",
+			size: "1",
+			children: r.useMemo(() => typeof s == "string" ? s : r.isValidElement(s) ? s.props.children : o, [s, o])
+		}),
+		enabled: u,
+		triggerRef: l,
+		...c,
+		children: /* @__PURE__ */ i(e, { children: s })
+	});
+}, s = ({ tooltipProps: e, style: t, ...r }) => /* @__PURE__ */ i(o, {
+	...e,
+	children: /* @__PURE__ */ i(n, {
+		textOverflow: "ellipsis",
+		overflow: "hidden",
+		style: {
+			display: "block",
+			whiteSpace: "nowrap",
+			...t
+		},
+		...r
+	})
+});
+//#endregion
+export { o as TooltipIfTruncated, s as TruncatedText, a as useTruncate };
+
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/useTruncate/useTruncate.ts","../../src/TooltipIfTruncated/TooltipIfTruncated.tsx","../../src/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import React from \"react\";\n\ntype UseTruncateParams = {\n  tgphRef: React.RefObject<HTMLElement | null>;\n};\n\nconst useTruncate = (\n  { tgphRef }: UseTruncateParams,\n  deps: React.DependencyList = [],\n) => {\n  const [truncated, setTruncated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!tgphRef.current) return setTruncated(false);\n\n    const tgphRefElement = tgphRef.current;\n\n    const checkTruncation = () => {\n      setTruncated(tgphRefElement.scrollWidth > tgphRefElement.clientWidth);\n    };\n\n    // Initial check\n    checkTruncation();\n\n    // Add a resize observer to check for truncation when the element is resized\n    const resizeObserver = new ResizeObserver(checkTruncation);\n    resizeObserver.observe(tgphRefElement);\n\n    // Clean up\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgphRef, ...deps]);\n\n  return { truncated };\n};\n\nexport { useTruncate };\n","import {\n  type Optional,\n  RefToTgphRef,\n  type TgphComponentProps,\n} from \"@telegraph/helpers\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { useTruncate } from \"../useTruncate\";\n\nexport type TooltipIfTruncatedProps = Optional<\n  TgphComponentProps<typeof Tooltip>,\n  \"label\"\n>;\n\nconst TooltipIfTruncated = ({\n  label,\n  children,\n  ...props\n}: TooltipIfTruncatedProps) => {\n  const truncateRef = React.useRef<HTMLButtonElement>(null);\n  const { truncated } = useTruncate(\n    { tgphRef: truncateRef as React.RefObject<HTMLElement> },\n    [children],\n  );\n\n  // We extract the text so that we can properly wrap it in the Text component\n  const textToDisplayInTooltip = React.useMemo(() => {\n    if (typeof children === \"string\") return children;\n    if (React.isValidElement(children)) {\n      const childProps = children.props as Record<string, unknown>;\n      return childProps.children;\n    }\n    return label;\n  }, [children, label]);\n\n  return (\n    <Tooltip\n      label={\n        <Text as=\"span\" size=\"1\">\n          {textToDisplayInTooltip as React.ReactNode}\n        </Text>\n      }\n      enabled={truncated}\n      triggerRef={truncateRef as React.RefObject<HTMLButtonElement>}\n      {...props}\n    >\n      <RefToTgphRef>{children}</RefToTgphRef>\n    </Tooltip>\n  );\n};\n\nexport { TooltipIfTruncated };\n","import type { TgphComponentProps, TgphElement } from \"@telegraph/helpers\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { TooltipIfTruncated } from \"../TooltipIfTruncated\";\n\nexport type TruncatedTextProps<T extends TgphElement = \"span\"> = {\n  tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement = \"span\">({\n  tooltipProps,\n  style,\n  ...props\n}: TruncatedTextProps<T>) => {\n  return (\n    <TooltipIfTruncated {...tooltipProps}>\n      <Text\n        textOverflow=\"ellipsis\"\n        overflow=\"hidden\"\n        style={{\n          display: \"block\",\n          whiteSpace: \"nowrap\",\n          ...style,\n        }}\n        {...props}\n      />\n    </TooltipIfTruncated>\n  );\n};\n\nexport { TruncatedText };\n"],"names":["useTruncate","tgphRef","deps","truncated","setTruncated","React","tgphRefElement","checkTruncation","resizeObserver","TooltipIfTruncated","label","children","props","truncateRef","textToDisplayInTooltip","jsx","Tooltip","Text","RefToTgphRef","TruncatedText","tooltipProps","style"],"mappings":";;;;;AAMA,MAAMA,IAAc,CAClB,EAAE,SAAAC,KACFC,IAA6B,CAAA,MAC1B;AACH,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAM,SAAS,EAAK;AAEtD,SAAAA,EAAM,UAAU,MAAM;AACpB,QAAI,CAACJ,EAAQ,QAAS,QAAOG,EAAa,EAAK;AAE/C,UAAME,IAAiBL,EAAQ,SAEzBM,IAAkB,MAAM;AAC5B,MAAAH,EAAaE,EAAe,cAAcA,EAAe,WAAW;AAAA,IACtE;AAGA,IAAAC,EAAA;AAGA,UAAMC,IAAiB,IAAI,eAAeD,CAAe;AACzD,WAAAC,EAAe,QAAQF,CAAc,GAG9B,MAAM;AACX,MAAAE,EAAe,WAAA;AAAA,IACjB;AAAA,EAEF,GAAG,CAACP,GAAS,GAAGC,CAAI,CAAC,GAEd,EAAE,WAAAC,EAAA;AACX,GCpBMM,IAAqB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAA+B;AAC7B,QAAMC,IAAcR,EAAM,OAA0B,IAAI,GAClD,EAAE,WAAAF,MAAcH;AAAA,IACpB,EAAE,SAASa,EAAA;AAAA,IACX,CAACF,CAAQ;AAAA,EAAA,GAILG,IAAyBT,EAAM,QAAQ,MACvC,OAAOM,KAAa,WAAiBA,IACrCN,EAAM,eAAeM,CAAQ,IACZA,EAAS,MACV,WAEbD,GACN,CAACC,GAAUD,CAAK,CAAC;AAEpB,SACE,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OACE,gBAAAD,EAACE,GAAA,EAAK,IAAG,QAAO,MAAK,KAClB,UAAAH,GACH;AAAA,MAEF,SAASX;AAAA,MACT,YAAYU;AAAA,MACX,GAAGD;AAAA,MAEJ,UAAA,gBAAAG,EAACG,KAAc,UAAAP,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAG9B,GC1CMQ,IAAgB,CAAiC;AAAA,EACrD,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGT;AACL,MAEI,gBAAAG,EAACN,GAAA,EAAoB,GAAGW,GACtB,UAAA,gBAAAL;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,UAAS;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAGI;AAAA,IAAA;AAAA,IAEJ,GAAGT;AAAA,EAAA;AAAA,GAER;"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/useTruncate/useTruncate.ts","../../src/TooltipIfTruncated/TooltipIfTruncated.tsx","../../src/TruncatedText/TruncatedText.tsx"],"sourcesContent":["import React from \"react\";\n\ntype UseTruncateParams = {\n  tgphRef: React.RefObject<HTMLElement | null>;\n};\n\nconst useTruncate = (\n  { tgphRef }: UseTruncateParams,\n  deps: React.DependencyList = [],\n) => {\n  const [truncated, setTruncated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!tgphRef.current) return setTruncated(false);\n\n    const tgphRefElement = tgphRef.current;\n\n    const checkTruncation = () => {\n      setTruncated(tgphRefElement.scrollWidth > tgphRefElement.clientWidth);\n    };\n\n    // Initial check\n    checkTruncation();\n\n    // Add a resize observer to check for truncation when the element is resized\n    const resizeObserver = new ResizeObserver(checkTruncation);\n    resizeObserver.observe(tgphRefElement);\n\n    // Clean up\n    return () => {\n      resizeObserver.disconnect();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [tgphRef, ...deps]);\n\n  return { truncated };\n};\n\nexport { useTruncate };\n","import {\n  type Optional,\n  RefToTgphRef,\n  type TgphComponentProps,\n} from \"@telegraph/helpers\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { useTruncate } from \"../useTruncate\";\n\nexport type TooltipIfTruncatedProps = Optional<\n  TgphComponentProps<typeof Tooltip>,\n  \"label\"\n>;\n\nconst TooltipIfTruncated = ({\n  label,\n  children,\n  ...props\n}: TooltipIfTruncatedProps) => {\n  const truncateRef = React.useRef<HTMLButtonElement>(null);\n  const { truncated } = useTruncate(\n    { tgphRef: truncateRef as React.RefObject<HTMLElement> },\n    [children],\n  );\n\n  // We extract the text so that we can properly wrap it in the Text component\n  const textToDisplayInTooltip = React.useMemo(() => {\n    if (typeof children === \"string\") return children;\n    if (React.isValidElement(children)) {\n      const childProps = children.props as Record<string, unknown>;\n      return childProps.children;\n    }\n    return label;\n  }, [children, label]);\n\n  return (\n    <Tooltip\n      label={\n        <Text as=\"span\" size=\"1\">\n          {textToDisplayInTooltip as React.ReactNode}\n        </Text>\n      }\n      enabled={truncated}\n      triggerRef={truncateRef as React.RefObject<HTMLButtonElement>}\n      {...props}\n    >\n      <RefToTgphRef>{children}</RefToTgphRef>\n    </Tooltip>\n  );\n};\n\nexport { TooltipIfTruncated };\n","import type { TgphComponentProps, TgphElement } from \"@telegraph/helpers\";\nimport { Text } from \"@telegraph/typography\";\n\nimport { TooltipIfTruncated } from \"../TooltipIfTruncated\";\n\nexport type TruncatedTextProps<T extends TgphElement = \"span\"> = {\n  tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement = \"span\">({\n  tooltipProps,\n  style,\n  ...props\n}: TruncatedTextProps<T>) => {\n  return (\n    <TooltipIfTruncated {...tooltipProps}>\n      <Text\n        textOverflow=\"ellipsis\"\n        overflow=\"hidden\"\n        style={{\n          display: \"block\",\n          whiteSpace: \"nowrap\",\n          ...style,\n        }}\n        {...props}\n      />\n    </TooltipIfTruncated>\n  );\n};\n\nexport { TruncatedText };\n"],"mappings":";;;;;;AAMA,IAAM,KACJ,EAAE,cACF,IAA6B,EAAE,KAC5B;CACH,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAM;AAyBvD,QAvBA,EAAM,gBAAgB;AACpB,MAAI,CAAC,EAAQ,QAAS,QAAO,EAAa,GAAM;EAEhD,IAAM,IAAiB,EAAQ,SAEzB,UAAwB;AAC5B,KAAa,EAAe,cAAc,EAAe,YAAY;;AAIvE,KAAiB;EAGjB,IAAM,IAAiB,IAAI,eAAe,EAAgB;AAI1D,SAHA,EAAe,QAAQ,EAAe,QAGzB;AACX,KAAe,YAAY;;IAG5B,CAAC,GAAS,GAAG,EAAK,CAAC,EAEf,EAAE,cAAW;GCnBhB,KAAsB,EAC1B,UACA,aACA,GAAG,QAC0B;CAC7B,IAAM,IAAc,EAAM,OAA0B,KAAK,EACnD,EAAE,iBAAc,EACpB,EAAE,SAAS,GAA6C,EACxD,CAAC,EAAS,CACX;AAYD,QACE,kBAAC,GAAD;EACE,OACE,kBAAC,GAAD;GAAM,IAAG;GAAO,MAAK;aAZI,EAAM,cAC/B,OAAO,KAAa,WAAiB,IACrC,EAAM,eAAe,EAAS,GACb,EAAS,MACV,WAEb,GACN,CAAC,GAAU,EAAM,CAAC;GAOR,CAAA;EAET,SAAS;EACT,YAAY;EACZ,GAAI;YAEJ,kBAAC,GAAD,EAAe,aAAwB,CAAA;EAC/B,CAAA;GCxCR,KAAiD,EACrD,iBACA,UACA,GAAG,QAGD,kBAAC,GAAD;CAAoB,GAAI;WACtB,kBAAC,GAAD;EACE,cAAa;EACb,UAAS;EACT,OAAO;GACL,SAAS;GACT,YAAY;GACZ,GAAG;GACJ;EACD,GAAI;EACJ,CAAA;CACiB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/truncate",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Utility components for detecting and responding to content overflow, truncation, and visibility states in the UI.",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/truncate",
   "author": "@knocklabs",
@@ -33,21 +33,21 @@
   },
   "dependencies": {
     "@telegraph/helpers": "^0.0.15",
-    "@telegraph/tooltip": "^0.2.1",
+    "@telegraph/tooltip": "^0.3.0",
     "@telegraph/typography": "^0.4.0"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.5",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.1.1",
-    "@telegraph/prettier-config": "^0.0.7",
+    "@telegraph/postcss-config": "^0.1.2",
+    "@telegraph/prettier-config": "^0.0.8",
     "@telegraph/vite-config": "^0.0.15",
     "@types/react": "^19.2.9",
-    "eslint": "^10.2.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "typescript": "^5.9.3",
-    "vite": "^6.4.1"
+    "eslint": "^10.2.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",