From 0a42bfe86d1432c30a9f632a4235e4317c5b87e9 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Thu, 2 Oct 2025 15:03:39 -0500
Subject: [PATCH] fix: React version mismatch, add forward refs

---
 examples/react-demo/package.json              |  8 +-
 package.json                                  |  3 +-
 packages/react/react/package.json             |  4 +-
 .../react/react/src/components/Popover.tsx    |  4 +-
 packages/react/react/src/components/Video.tsx |  6 +-
 .../react/src/utils/component-factory.tsx     | 30 ++++---
 pnpm-lock.yaml                                | 89 +++++++++----------
 7 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json
index 1b33062a..7a38dee5 100644
--- a/examples/react-demo/package.json
+++ b/examples/react-demo/package.json
@@ -11,14 +11,14 @@
   },
   "dependencies": {
     "@vjs-10/react": "workspace:*",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "tailwindcss": "^4.1.13"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.0",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^5.0.3",
     "typescript": "^5.9.2",
     "vite": "^7.1.6"
diff --git a/package.json b/package.json
index 867c4307..10bb8fe5 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
     "eslint-plugin-react-refresh": "^0.4.21",
     "lint-staged": "^16.2.0",
     "prettier": "^3.6.2",
-    "react": "^18.3.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "simple-git-hooks": "^2.13.1",
     "turbo": "^2.5.8",
     "typescript": "^5.9.2"
diff --git a/packages/react/react/package.json b/packages/react/react/package.json
index 736422e5..164f4a84 100644
--- a/packages/react/react/package.json
+++ b/packages/react/react/package.json
@@ -43,8 +43,8 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "react": "^19.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
     "tsdown": "^0.15.4",
     "typescript": "^5.9.2"
   },
diff --git a/packages/react/react/src/components/Popover.tsx b/packages/react/react/src/components/Popover.tsx
index 4617b875..6272f20b 100644
--- a/packages/react/react/src/components/Popover.tsx
+++ b/packages/react/react/src/components/Popover.tsx
@@ -1,7 +1,7 @@
 import type { Placement } from '@floating-ui/react';
 import type { ReactNode } from 'react';
 
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 
 import {
   autoUpdate,
@@ -117,7 +117,7 @@ function PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPo
   const { open, refs, floatingStyles, updatePositioning } = usePopoverContext();
 
   // Update positioning when props change
-  React.useEffect(() => {
+  useEffect(() => {
     updatePositioning(side, sideOffset);
   }, [side, sideOffset, updatePositioning]);
 
diff --git a/packages/react/react/src/components/Video.tsx b/packages/react/react/src/components/Video.tsx
index c5b34fd8..562824cf 100644
--- a/packages/react/react/src/components/Video.tsx
+++ b/packages/react/react/src/components/Video.tsx
@@ -10,7 +10,7 @@ import type {
   VideoHTMLAttributes,
 } from 'react';
 
-import { useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 
 import { createMediaStateOwner } from '@vjs-10/media';
 import { useMediaRef } from '@vjs-10/react-media-store';
@@ -52,7 +52,7 @@ const useMediaStateOwner = (ref: Ref<any>, createMediaStateOwner: CreateMediaSta
 
 const DefaultVideoComponent: ElementType<
   Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }
-> = ({ children, ref, ...props }) => {
+> = forwardRef<any, any>(({ children, ...props }, ref) => {
   const { updateMediaElement } = useMediaStateOwner(ref, createMediaStateOwner);
   return (
     <video
@@ -65,7 +65,7 @@ const DefaultVideoComponent: ElementType<
       {children}
     </video>
   );
-};
+});
 
 /**
  * @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element
diff --git a/packages/react/react/src/utils/component-factory.tsx b/packages/react/react/src/utils/component-factory.tsx
index 67eed94a..ef601d2a 100644
--- a/packages/react/react/src/utils/component-factory.tsx
+++ b/packages/react/react/src/utils/component-factory.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactElement } from 'react';
 
-import { createContext, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';
 
 export type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;
 
@@ -34,11 +34,15 @@ export const toConnectedComponent = <
   defaultRender: TRenderFn,
   displayName: string
 ): ConnectedComponent<TProps, TRenderFn> => {
-  const ConnectedComponent = ({ render = defaultRender, ...props }: TProps & { render?: TRenderFn }) => {
-    const connectedState = useStateHook(props as TProps);
-    const connectedProps = usePropsHook(props as TProps, connectedState);
-    return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;
-  };
+  const ConnectedComponent = forwardRef<any, TProps & { render?: TRenderFn }>(
+    ({ render = defaultRender, ...props }, ref) => {
+      const connectedState = useStateHook(props as TProps);
+      const connectedProps = usePropsHook(props as TProps, connectedState);
+      // Add ref to connectedProps if it exists
+      const propsWithRef = ref ? { ...connectedProps, ref } : connectedProps;
+      return <Context.Provider value={connectedState}>{render(propsWithRef, connectedState)}</Context.Provider>;
+    }
+  );
 
   ConnectedComponent.displayName = displayName;
 
@@ -70,11 +74,15 @@ export const toContextComponent = <
   defaultRender: TRenderFn,
   displayName: string
 ): ContextComponent<TProps, TRenderFn> => {
-  const ContextComponent = ({ render = defaultRender, ...props }: TProps & { render?: TRenderFn }) => {
-    const context = useContext(Context);
-    const contextProps = usePropsHook(props as TProps, context);
-    return render(contextProps, context);
-  };
+  const ContextComponent = forwardRef<any, TProps & { render?: TRenderFn }>(
+    ({ render = defaultRender, ...props }, ref) => {
+      const context = useContext(Context);
+      const contextProps = usePropsHook(props as TProps, context);
+      // Add ref to contextProps if it exists
+      const propsWithRef = ref ? { ...contextProps, ref } : contextProps;
+      return render(propsWithRef, context);
+    }
+  );
 
   ContextComponent.displayName = displayName;
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bda6792b..061dc93b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,8 +51,11 @@ importers:
         specifier: ^3.6.2
         version: 3.6.2
       react:
-        specifier: ^18.3.1
+        specifier: ^18.0.0
         version: 18.3.1
+      react-dom:
+        specifier: ^18.0.0
+        version: 18.3.1(react@18.3.1)
       simple-git-hooks:
         specifier: ^2.13.1
         version: 2.13.1
@@ -82,11 +85,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/react/react
       react:
-        specifier: ^19.1.1
-        version: 19.1.1
+        specifier: ^18.0.0
+        version: 18.3.1
       react-dom:
-        specifier: ^19.1.1
-        version: 19.1.1(react@19.1.1)
+        specifier: ^18.0.0
+        version: 18.3.1(react@18.3.1)
       tailwindcss:
         specifier: ^4.1.13
         version: 4.1.13
@@ -95,11 +98,11 @@ importers:
         specifier: ^4.1.0
         version: 4.1.13(vite@7.1.6(@types/node@22.18.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1))
       '@types/react':
-        specifier: ^19.1.13
-        version: 19.1.13
+        specifier: ^18.0.0
+        version: 18.3.24
       '@types/react-dom':
-        specifier: ^19.1.9
-        version: 19.1.9(@types/react@19.1.13)
+        specifier: ^18.0.0
+        version: 18.3.7(@types/react@18.3.24)
       '@vitejs/plugin-react':
         specifier: ^5.0.3
         version: 5.0.3(vite@7.1.6(@types/node@22.18.6)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.1))
@@ -303,7 +306,7 @@ importers:
     dependencies:
       '@floating-ui/react':
         specifier: ^0.27.16
-        version: 0.27.16(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@vjs-10/core':
         specifier: workspace:*
         version: link:../../core/core
@@ -324,11 +327,11 @@ importers:
         version: link:../react-media-store
     devDependencies:
       '@types/react':
-        specifier: ^19.0.0
-        version: 19.1.13
+        specifier: ^18.0.0
+        version: 18.3.24
       react:
-        specifier: ^19.0.0
-        version: 19.1.1
+        specifier: ^18.0.0
+        version: 18.3.1
       tsdown:
         specifier: ^0.15.4
         version: 0.15.4(typescript@5.9.2)
@@ -1382,17 +1385,14 @@ packages:
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
-  '@types/react-dom@19.1.9':
-    resolution: {integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==}
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
     peerDependencies:
-      '@types/react': ^19.0.0
+      '@types/react': ^18.0.0
 
   '@types/react@18.3.24':
     resolution: {integrity: sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==}
 
-  '@types/react@19.1.13':
-    resolution: {integrity: sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==}
-
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -3153,10 +3153,10 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  react-dom@19.1.1:
-    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
-      react: ^19.1.1
+      react: ^18.3.1
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -3169,10 +3169,6 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
-  react@19.1.1:
-    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
-    engines: {node: '>=0.10.0'}
-
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
@@ -3270,8 +3266,8 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
@@ -4185,18 +4181,18 @@ snapshots:
       '@floating-ui/core': 1.7.3
       '@floating-ui/utils': 0.2.10
 
-  '@floating-ui/react-dom@2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+  '@floating-ui/react-dom@2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
-  '@floating-ui/react@0.27.16(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+  '@floating-ui/react@0.27.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@floating-ui/react-dom': 2.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@floating-ui/utils': 0.2.10
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       tabbable: 6.2.0
 
   '@floating-ui/utils@0.2.10': {}
@@ -4628,19 +4624,15 @@ snapshots:
 
   '@types/prop-types@15.7.15': {}
 
-  '@types/react-dom@19.1.9(@types/react@19.1.13)':
+  '@types/react-dom@18.3.7(@types/react@18.3.24)':
     dependencies:
-      '@types/react': 19.1.13
+      '@types/react': 18.3.24
 
   '@types/react@18.3.24':
     dependencies:
       '@types/prop-types': 15.7.15
       csstype: 3.1.3
 
-  '@types/react@19.1.13':
-    dependencies:
-      csstype: 3.1.3
-
   '@types/unist@3.0.3': {}
 
   '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2)':
@@ -6831,10 +6823,11 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  react-dom@19.1.1(react@19.1.1):
+  react-dom@18.3.1(react@18.3.1):
     dependencies:
-      react: 19.1.1
-      scheduler: 0.26.0
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
 
   react-is@16.13.1: {}
 
@@ -6844,8 +6837,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  react@19.1.1: {}
-
   readdirp@4.1.2: {}
 
   refa@0.12.1:
@@ -6994,7 +6985,9 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
-  scheduler@0.26.0: {}
+  scheduler@0.23.2:
+    dependencies:
+      loose-envify: 1.4.0
 
   scslre@0.3.0:
     dependencies: