fix(Combobox): primitive portal via Theme refs (#1100)

src/core/primitives/Combobox/fragments/ComboboxPrimitivePortal.tsx

@@ -2,14 +2,21 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Floater from '~/core/primitives/Floater';
 import { ComboboxPrimitiveContext } from '../contexts/ComboboxPrimitiveContext';
+import ThemeContext from '~/components/ui/Theme/ThemeContext';
 
 const ComboboxPrimitivePortal = React.forwardRef<
     React.ElementRef<typeof Floater.Portal>,
     { children: React.ReactNode; container?: HTMLElement | null } & React.ComponentPropsWithoutRef<typeof Floater.Portal>
 >(({ children, container, ...props }, _forwardedRef) => {
     const { isOpen } = useContext(ComboboxPrimitiveContext);
+    const themeContext = useContext(ThemeContext);
     const [rootElementFound, setRootElementFound] = useState(false);
-    const rootElement = (container || document.querySelector('#rad-ui-theme-container') || document.body) as HTMLElement | null;
+    const rootElement = (
+        container
+        ?? themeContext?.portalRootRef.current
+        ?? themeContext?.containerRef.current
+        ?? document.body
+    ) as HTMLElement | null;
 
     useEffect(() => {
         if (rootElement) {

src/core/primitives/Combobox/tests/ComboboxPrimitive.portal.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Theme from '~/components/ui/Theme/Theme';
+import Combobox from '~/components/ui/Combobox/Combobox';
+
+const mockMatchMedia = () => {
+    if ('matchMedia' in window && typeof window.matchMedia === 'function') return;
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(() => ({
+            matches: false,
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn()
+        }))
+    });
+};
+
+describe('Combobox primitive portal', () => {
+    beforeEach(() => mockMatchMedia());
+
+    test('portals listbox into Theme portal root', async() => {
+        const user = userEvent.setup();
+
+        render(
+            <Theme>
+                <Combobox.Root>
+                    <Combobox.Trigger>Choose</Combobox.Trigger>
+                    <Combobox.Portal>
+                        <Combobox.Content>
+                            <Combobox.Group>
+                                <Combobox.Item value="apple">Apple</Combobox.Item>
+                            </Combobox.Group>
+                        </Combobox.Content>
+                    </Combobox.Portal>
+                </Combobox.Root>
+            </Theme>
+        );
+
+        const portalRoot = document.querySelector('[data-rad-ui-portal-root]') as HTMLElement;
+        expect(portalRoot).toBeTruthy();
+
+        await user.click(screen.getByText('Choose'));
+        await waitFor(() => {
+            expect(portalRoot).toContainElement(screen.getByText('Apple'));
+        });
+    });
+});