@telegraph/truncate 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +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>;\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\ntype 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({ tgphRef: truncateRef }, [children]);\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)) return children.props.children;\n return label;\n }, [children, label]);\n\n return (\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n {textToDisplayInTooltip}\n </Text>\n }\n enabled={truncated}\n triggerRef={truncateRef}\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\ntype TruncatedTextProps<T extends TgphElement> = {\n tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement>({\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,
|
|
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>;\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\ntype 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({ tgphRef: truncateRef }, [children]);\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)) return children.props.children;\n return label;\n }, [children, label]);\n\n return (\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n {textToDisplayInTooltip}\n </Text>\n }\n enabled={truncated}\n triggerRef={truncateRef}\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\ntype TruncatedTextProps<T extends TgphElement> = {\n tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement>({\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,CAAA,EAAcH,EAAY,CAAE,QAASa,CAAA,EAAe,CAACF,CAAQ,CAAC,EAGhEG,EAAyBT,EAAM,QAAQ,IACvC,OAAOM,GAAa,SAAiBA,EACrCN,EAAM,eAAeM,CAAQ,EAAUA,EAAS,MAAM,SACnDD,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,ECpCMQ,EAAgB,CAAwB,CAC5C,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"}
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +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>;\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\ntype 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({ tgphRef: truncateRef }, [children]);\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)) return children.props.children;\n return label;\n }, [children, label]);\n\n return (\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n {textToDisplayInTooltip}\n </Text>\n }\n enabled={truncated}\n triggerRef={truncateRef}\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\ntype TruncatedTextProps<T extends TgphElement> = {\n tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement>({\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;
|
|
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>;\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\ntype 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({ tgphRef: truncateRef }, [children]);\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)) return children.props.children;\n return label;\n }, [children, label]);\n\n return (\n <Tooltip\n label={\n <Text as=\"span\" size=\"1\">\n {textToDisplayInTooltip}\n </Text>\n }\n enabled={truncated}\n triggerRef={truncateRef}\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\ntype TruncatedTextProps<T extends TgphElement> = {\n tooltipProps?: Partial<TgphComponentProps<typeof TooltipIfTruncated>>;\n} & TgphComponentProps<typeof Text<T>>;\n\nconst TruncatedText = <T extends TgphElement>({\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,EAAA,IAAcH,EAAY,EAAE,SAASa,EAAA,GAAe,CAACF,CAAQ,CAAC,GAGhEG,IAAyBT,EAAM,QAAQ,MACvC,OAAOM,KAAa,WAAiBA,IACrCN,EAAM,eAAeM,CAAQ,IAAUA,EAAS,MAAM,WACnDD,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,GCpCMQ,IAAgB,CAAwB;AAAA,EAC5C,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;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/truncate",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "Utility components for detecting and responding to content overflow, truncation, and visibility states in the UI.",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/truncate",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@telegraph/helpers": "^0.0.13",
|
|
36
|
-
"@telegraph/tooltip": "^0.0.
|
|
37
|
-
"@telegraph/typography": "^0.1.
|
|
36
|
+
"@telegraph/tooltip": "^0.0.53",
|
|
37
|
+
"@telegraph/typography": "^0.1.22"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@knocklabs/eslint-config": "^0.0.4",
|
|
41
41
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
42
|
-
"@telegraph/postcss-config": "^0.0.
|
|
42
|
+
"@telegraph/postcss-config": "^0.0.28",
|
|
43
43
|
"@telegraph/prettier-config": "^0.0.7",
|
|
44
44
|
"@telegraph/vite-config": "^0.0.15",
|
|
45
45
|
"@types/react": "^18.3.18",
|