[PF-2236] Unlock react-truncate react version support

[azebich]

PF-2236

Description

ShowMore was blocked from React 19 support by react-truncate: unmaintained (last published 2018) and peer-locked to react <= 16, so React 19 consumers hit an unresolvable transitive peer conflict.

This PR removes the JS-measurement library entirely and reimplements truncation with native CSS line-clamp, reusing idioms the kit already ships:

• The collapsed content renders inside a span with overflow-hidden [display:-webkit-box] [-webkit-box-orient:vertical] break-words and an inline WebkitLineClamp: rows — the same pattern (and inline-style precedent) as TypographyOverflow.
• The "Show more" toggle appears only when content actually overflows, detected in a layout effect via the shared isOverflown util from @toptal/picasso-utils (same overflow semantics as TypographyOverflow), re-checked by a ResizeObserver. A zero-size guard keeps the previous assumption in unmeasurable environments (jsdom, display: none containers) so the toggle keeps rendering there, matching the old behavior.
• SSR-safe by construction: measurement only happens in useIsomorphicLayoutEffect (from @toptal/picasso-shared), no window/document in render.

Package changes: drop react-truncate from @toptal/picasso-show-more, drop the unused react-truncate from @toptal/picasso and @types/react-truncate from the root; add @toptal/picasso-shared + @toptal/picasso-utils workspace deps (+ tsconfig references); lift the React peer cap (>=17.0.0 < 19.0.0 → >=17.0.0).

Behavior — verified against the built package in Chrome (Playwright), SSR (renderToString), and jest:

• Collapsed: exactly rows visible lines with a native ellipsis; expand/collapse round-trips to the exact full text; content shorter than rows hides the toggle; multiline (\n → <br/>) content clamps correctly; rows={0} still hides content and keeps the toggle. Public API unchanged.
• Improvements over the old library: server HTML now arrives already clamped (previously truncation happened only client-side after measurement, with a reflow); the full text stays in the DOM when collapsed, so it remains selectable, SEO-visible, and queryable in consumer jsdom tests; re-measure now reacts to container resize, not just window resize.
• Known trade-offs: the ellipsis is painted by the browser, so its exact placement may differ from the old canvas-measured line breaks by a few px — expect small Happo diffs on ShowMore needing visual sign-off. Late-loading fonts can change overflow without a box resize, which can leave the toggle-visibility check stale in rare fits-exactly cases (the old library had the same limitation).

Reviewer note on snapshots: the updated jest snapshots show a truncated class string ([display:-webkit [-webkit-box). That is a known artifact of davinci-qa's JSS-era snapshot serializer (it chops multi-hyphen class names in snapshot output only) — the rendered DOM provably contains the full classes, as visible in the SSR output.

How to test

• Temploy
• Open the ShowMore story: collapsed content shows 4 rows with a trailing ellipsis and a "Show more" link; clicking toggles the full text / "Show less"; content shorter than rows renders no toggle; resize the viewport and confirm the toggle appears/disappears as the text re-wraps
• Select/copy the collapsed text in the browser — the full text is present (clamping is visual only)
• pnpm test:unit -- packages/base/ShowMore — 8 tests green
• Happo: review ShowMore diffs — sub-pixel ellipsis-placement changes are expected; anything larger should be flagged

Screenshots

Before.	After.
Truncation computed in JS (canvas measurement), ellipsis inserted into the DOM	Native CSS clamp, visually identical (ellipsis painted by the browser); no intended visual change

Development checks

• Add changeset according to guidelines (if needed)
• Double check if picasso-tailwind-merge requires major update (check its README.md)
• Read CONTRIBUTING.md and Component API principles
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Annotate all props in component with documentation
• Create examples for component
• Ensure that deployed demo has expected results and good examples
• Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• Covered with tests (visual tests included)

Breaking change

• codemod is created and showcased in the changeset
• test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

Alpha packages

Manually trigger the publish.yml workflow to publish alpha packages. Specify pull request number as a parameter (only digits, e.g. 123).

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3802b98

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@toptal/picasso-show-more	Patch
@toptal/picasso	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📖 Storybook Preview

🚀 Your Storybook preview is ready: View Storybook

📍 Preview URL: https://toptal.github.io/picasso/prs/5067/

This preview is updated automatically when you push changes to this PR.