Fix React 19 JSX type compatibility

[HamedFarazi]

Summary

Fixes #505

This PR updates the JSX type declarations in @shopify/app-bridge-react to support React 19 while preserving compatibility with existing React 18 applications.

Problem

The App Bridge React components currently augment JSX intrinsic elements through the global JSX namespace:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'ui-modal': ...
    }
  }
}

With React 19, the JSX namespace is scoped to the react module. As a result, these custom App Bridge web components are no longer correctly recognized by TypeScript when used with React 19.

This can lead to type errors when using components such as:

<ui-modal />
<ui-nav-menu />
<ui-save-bar />
<ui-title-bar />

Solution

Replace the global JSX declaration with React module augmentation:

declare module 'react' {
  namespace JSX {
    interface IntrinsicElements {
      'ui-modal': ...
    }
  }
}

The existing ref typing is preserved using import('react').LegacyRef, avoiding unnecessary direct type imports.

The change has been applied consistently to:

Modal
NavMenu
SaveBar
TitleBar
Compatibility

The implementation remains compatible with React 18 while enabling the expected JSX type resolution for React 19.

The existing App Bridge web component attributes and ref types are preserved.

Verification

The following checks pass successfully:

pnpm run type-check ✅
pnpm run lint ✅
pnpm run test ✅
git diff --check ✅
Manual JSX type verification with React 18 types ✅

No runtime behavior is changed by this PR; this is a TypeScript/JSX type compatibility fix.

Changeset

Added a patch changeset for @shopify/app-bridge-react.

[andrewiggins]

Thanks for the fix!