fix(pie-wrapper-react): SON-4389 generate controlled-input-aware React wrapper

[rikwasmus]

Describe your changes (can list changeset entries if preferable)

Problem

@lit/react's createComponent pushes the value prop onto a custom element whenever it changes between renders, but it does not replicate the controlled-input value tracking that ReactDOM applies to native form controls. For input-like components (e.g. pie-text-input, whose inner field renders with Lit's live(value) directive), a stale value — for example while a user is typing and parent state updates are debounced — gets written back to the element and overwrites the user's latest keystroke. Consumers see dropped/“reset” keystrokes when wrapping these components in React.

This was surfaced by a catalog search box dropping characters while typing. A native <input> did not exhibit the issue; the differentiator was the generated PIE React wrapper path.

Fix

pie-wrapper-react now detects input-like components (those exposing a value field and dispatching an input event) and generates a controlled-input-aware wrapper for them. The wrapper replicates React's controlled-input contract:

• value is no longer forwarded to the underlying createComponent element; it is managed in the wrapper.
• value is only written to the element when the controlled value genuinely changes since it was last applied, so in-flight user input is never clobbered.
• A client-only layout effect performs the write (before paint); a regular effect is used on the server to avoid the SSR useLayoutEffect warning.

Non-input components are unchanged and continue to use the existing createComponent export (verified: existing wrapper snapshots are byte-identical).

Only pie-text-input currently matches the detection criteria; any future input-like component will pick up the corrected wrapper automatically.

Changeset entries

• [Added] @justeattakeaway/pie-wrapper-react (minor) — controlled-input-aware wrapper generation.
• [Fixed] @justeattakeaway/pie-text-input (patch) — React wrapper no longer drops keystrokes when value lags behind user input.

Testing

• Added generator unit/snapshot tests in pie-wrapper-react covering: controlled wrapper emitted for value+input components, no controlled wrapper for components without an input event, and unchanged output for non-input components.
• Rebuilt pie-text-input end-to-end (create:manifest → build:react-wrapper → build); the generated src/react.ts and the TypeScript declaration build both succeed.
• Validated in a real React app: keystrokes are no longer dropped.

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• If changes will affect consumers of the package, I have created a changeset entry.

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

• [-] N/A I have reviewed the PIE Storybook/PIE Docs PR preview. — no Storybook/Docs changes in this PR (build-tool + generated wrapper only).
• [-] N/A I have reviewed visual test updates properly before approving. — no visual changes.
• [-] N/A If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command. — Aperture is a destructive, once-per-PR maintainer action; this still needs to be run by a maintainer before merge to validate the regenerated wrappers in a real consumer.

---

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

Reviewer 2

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: b0599c2

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

This PR includes changesets to release 5 packages

Name	Type
@justeattakeaway/pie-wrapper-react	Minor
@justeattakeaway/pie-text-input	Patch
@justeattakeaway/pie-webc	Patch
@justeattakeaway/pie-docs	Patch
@justeattakeaway/pie-storybook	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