From 1cfbfdc3f32a96c43c38b4dcb3be2e65cbdcbdc7 Mon Sep 17 00:00:00 2001
From: Zayooo <mrcold135@gmail.com>
Date: Tue, 1 Sep 2026 07:08:48 +0200
Subject: [PATCH] feat(Combobox): add themeResetClass for the portalled menu
 (MET-3088)

In prod the options list is portalled to `document.body`, outside the
element that carries Plasmic's design-token CSS variables (they live on
`.plasmic_tokens_<projectId>`, not `:root`). `var(--token-*)` in the
menu's generated styles then resolves to nothing and the menu renders
unstyled. The Plasmic canvas is unaffected because #63 renders the menu
inline there.

Register a `type: "themeResetClass"` prop and apply it to the portalled
root (`ComboboxOptions`). Plasmic supplies the class automatically, so
there is no hardcoded project id and it survives a project migration.
---
 .../Combobox/Combobox.register.ts               |  1 +
 src/code-components/Combobox/Combobox.tsx       | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/code-components/Combobox/Combobox.register.ts b/src/code-components/Combobox/Combobox.register.ts
index a2aff004..3e9cbd10 100644
--- a/src/code-components/Combobox/Combobox.register.ts
+++ b/src/code-components/Combobox/Combobox.register.ts
@@ -69,6 +69,7 @@ export function registerCombobox(
         description:
           "'input' matches the input width; 'fit' grows to the widest option (long labels don't wrap), never narrower than the input, capped to stay on screen.",
       },
+      themeResetClass: { type: "themeResetClass" },
       "aria-label": "string",
       "aria-labelledby": "string",
       placeholder: { type: "string", defaultValue: "Select" },
diff --git a/src/code-components/Combobox/Combobox.tsx b/src/code-components/Combobox/Combobox.tsx
index ef20fbf8..2c3b7158 100644
--- a/src/code-components/Combobox/Combobox.tsx
+++ b/src/code-components/Combobox/Combobox.tsx
@@ -54,6 +54,15 @@ interface ComboboxProps {
    * menu is still kept inside the viewport by Floating UI.
    */
   menuWidth?: "input" | "fit";
+  /**
+   * Plasmic's theme-reset class. In prod the menu is portalled to
+   * `document.body`, outside the element that carries Plasmic's design-token
+   * CSS variables, so `var(--token-*)` in the menu's styles stops resolving and
+   * it renders unstyled. Registered as `type: "themeResetClass"` so Plasmic
+   * supplies the class automatically; it is applied to the portalled root. No
+   * effect in the Plasmic canvas, where the menu already renders inline.
+   */
+  themeResetClass?: string;
   "aria-label"?: string;
   "aria-labelledby"?: string;
   placeholder?: string;
@@ -102,6 +111,7 @@ export function Combobox({
   disabled,
   menuPlacement = "bottom start",
   menuWidth = "input",
+  themeResetClass,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   placeholder,
@@ -245,7 +255,12 @@ export function Combobox({
                     anchor: { to: menuPlacement, gap: 1, padding: 8 },
                     transition: true,
                   })}
-              className={styles.positioner}
+              // `themeResetClass` re-establishes Plasmic's design-token CSS
+              // variables on the portalled root so `var(--token-*)` in the
+              // menu's styles still resolves.
+              className={[styles.positioner, themeResetClass]
+                .filter(Boolean)
+                .join(" ")}
             >
               {/*
                * Inner wrapper carries all sizing + look. Headless UI's `anchor`