@telegraph/truncate 0.1.0 → 0.1.1
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/README.md +3 -19
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @telegraph/truncate
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`1de6cf1`](https://github.com/knocklabs/telegraph/commit/1de6cf1874835db4389f5e7f14fbcc694229a5de), [`d3b6fee`](https://github.com/knocklabs/telegraph/commit/d3b6fee0e7cd308151efdc5921164d324ccaf045)]:
|
|
8
|
+
- @telegraph/typography@0.3.0
|
|
9
|
+
- @telegraph/tooltip@0.2.0
|
|
10
|
+
|
|
3
11
|
## 0.1.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -65,7 +65,7 @@ A text component that automatically truncates content with an ellipsis and shows
|
|
|
65
65
|
| Prop | Type | Default | Description |
|
|
66
66
|
| -------------- | ---------------------------------- | ----------- | --------------------------------------------------------------- |
|
|
67
67
|
| `maxWidth` | `string` | `undefined` | Maximum width of the text container |
|
|
68
|
-
| `tooltipProps` | `Partial<
|
|
68
|
+
| `tooltipProps` | `Partial<TgphComponentProps<typeof TooltipIfTruncated>>` | `undefined` | Props to pass to the underlying TooltipIfTruncated component |
|
|
69
69
|
| `...TextProps` | `TgphComponentProps<typeof Text>` | - | All props from [@telegraph/typography](../typography/README.md) |
|
|
70
70
|
|
|
71
71
|
### `<TooltipIfTruncated>`
|
|
@@ -74,7 +74,7 @@ A component that conditionally shows a tooltip only when its content is truncate
|
|
|
74
74
|
|
|
75
75
|
| Prop | Type | Default | Description |
|
|
76
76
|
| ----------------- | ------------------------------------ | ----------- | ----------------------------------------------------------------------------- |
|
|
77
|
-
| `label` | `string`
|
|
77
|
+
| `label` | `string \| ReactNode` | `undefined` | The text to show in the tooltip. If not provided, will use the content's text |
|
|
78
78
|
| `children` | `ReactNode` | - | **Required.** Content to monitor for truncation |
|
|
79
79
|
| `...TooltipProps` | `TgphComponentProps<typeof Tooltip>` | - | All props from [@telegraph/tooltip](../tooltip/README.md) |
|
|
80
80
|
|
|
@@ -86,7 +86,7 @@ A hook that detects whether an element's content is truncated.
|
|
|
86
86
|
|
|
87
87
|
| Name | Type | Description |
|
|
88
88
|
| -------- | ------------------------------------------- | --------------------------------------------------------------------- |
|
|
89
|
-
| `params` | `{ tgphRef: React.RefObject<HTMLElement> }` | A ref to the element to check for truncation |
|
|
89
|
+
| `params` | `{ tgphRef: React.RefObject<HTMLElement \| null> }` | A ref to the element to check for truncation |
|
|
90
90
|
| `deps` | `React.DependencyList` | Optional dependencies to re-run the truncation check when they change |
|
|
91
91
|
|
|
92
92
|
#### Returns
|
|
@@ -218,22 +218,6 @@ export const ArticlePreview = ({
|
|
|
218
218
|
|
|
219
219
|
## Advanced Usage
|
|
220
220
|
|
|
221
|
-
### Responsive Truncation
|
|
222
|
-
|
|
223
|
-
```tsx
|
|
224
|
-
import { useMediaQuery } from "@telegraph/helpers";
|
|
225
|
-
import { TruncatedText } from "@telegraph/truncate";
|
|
226
|
-
|
|
227
|
-
export const ResponsiveTruncatedText = ({ children }: { children: string }) => {
|
|
228
|
-
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
229
|
-
const isTablet = useMediaQuery("(max-width: 1024px)");
|
|
230
|
-
|
|
231
|
-
const maxWidth = isMobile ? "30" : isTablet ? "50" : "80";
|
|
232
|
-
|
|
233
|
-
return <TruncatedText maxWidth={maxWidth}>{children}</TruncatedText>;
|
|
234
|
-
};
|
|
235
|
-
```
|
|
236
|
-
|
|
237
221
|
### Dynamic Content Monitoring
|
|
238
222
|
|
|
239
223
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/truncate",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
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,17 +33,17 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@telegraph/helpers": "^0.0.15",
|
|
36
|
-
"@telegraph/tooltip": "^0.
|
|
37
|
-
"@telegraph/typography": "^0.
|
|
36
|
+
"@telegraph/tooltip": "^0.2.0",
|
|
37
|
+
"@telegraph/typography": "^0.3.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@knocklabs/eslint-config": "^0.0.5",
|
|
41
41
|
"@knocklabs/typescript-config": "^0.0.2",
|
|
42
|
-
"@telegraph/postcss-config": "^0.
|
|
42
|
+
"@telegraph/postcss-config": "^0.1.1",
|
|
43
43
|
"@telegraph/prettier-config": "^0.0.7",
|
|
44
44
|
"@telegraph/vite-config": "^0.0.15",
|
|
45
45
|
"@types/react": "^19.2.9",
|
|
46
|
-
"eslint": "^
|
|
46
|
+
"eslint": "^10.2.0",
|
|
47
47
|
"react": "^19.2.4",
|
|
48
48
|
"react-dom": "^19.2.4",
|
|
49
49
|
"typescript": "^5.9.3",
|