feat(Combobox): portal + anchor the dropdown menu (Headless UI v2) (MET-3088)

package.json

@@ -17,7 +17,7 @@
   ],
   "repository": "github:fullstackhouse/plasmic-utils",
   "devDependencies": {
-    "@headlessui/react": "^2.1.8",
+    "@headlessui/react": "^2.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@plasmicapp/loader-nextjs": "^1.0.415",
     "@plasmicapp/react-web": "^0.2.374",
@@ -58,7 +58,7 @@
     "zod": "^3.22.4"
   },
   "peerDependencies": {
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^2.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@plasmicapp/react-web": "^0.2.327",
     "@radix-ui/react-dialog": "^1.0.5",

src/code-components/Combobox/Combobox.module.css

@@ -24,22 +24,26 @@
   transform: rotate(180deg) translateY(5px);
 }
 
-/* Clip-path to get rid of overflowing box shadow on input */
+/*
+ * `.positioner` is the element Headless UI portals + positions via Floating UI.
+ * It also gets an inline `max-width: <viewport>px` from Floating UI's `size`
+ * middleware on every reposition, so all author-facing sizing (width via the
+ * `menuWidth` prop, max-width via `optionsClassName`) lives on the inner
+ * `.options` wrapper, which Floating UI never touches.
+ */
+.positioner {
+  transition: opacity 0.1s ease-in;
+}
+
+.positioner[data-closed] {
+  opacity: 0;
+}
+
 .options {
   list-style: none;
   scrollbar-width: thin;
   user-select: none;
-  transition: opacity 0.1s ease-in;
-  position: absolute;
-  top: 100%;
   margin: 0;
+  /* Clip the top edge so the box-shadow does not bleed up over the input. */
   clip-path: inset(0 -48px -48px -48px);
 }
-
-.options:global(.hide-start) {
-  opacity: 1;
-}
-
-.options:global(.hide-end) {
-  opacity: 0;
-}

src/code-components/Combobox/Combobox.register.ts

@@ -5,10 +5,10 @@ export function registerCombobox(
   plasmic: PlasmicLoader,
   modulePath = "@fullstackhouse/plasmic-utils/dist",
 ) {
-  const activeSelector = "[data-headlessui-state*=active]";
-  const selectedSelector = "[aria-selected=true]";
+  const activeSelector = "[data-focus]";
+  const selectedSelector = "[data-selected]";
   const highlightSelector = "[data-highlight=true]";
-  const disabledSelector = "[aria-disabled=true]";
+  const disabledSelector = "[data-disabled]";
 
   plasmic.registerComponent(Combobox, {
     name: "RawCombobox",
@@ -48,6 +48,27 @@ export function registerCombobox(
         ],
       },
       disabled: { type: "boolean", defaultValue: false },
+      menuPlacement: {
+        type: "choice",
+        options: [
+          "bottom start",
+          "bottom end",
+          "bottom",
+          "top start",
+          "top end",
+          "top",
+        ],
+        defaultValue: "bottom start",
+        description:
+          "Where the dropdown menu opens relative to the input. The menu is portalled and kept on-screen, so it may be wider than the input.",
+      },
+      menuWidth: {
+        type: "choice",
+        options: ["input", "fit"],
+        defaultValue: "input",
+        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.",
+      },
       "aria-label": "string",
       "aria-labelledby": "string",
       placeholder: { type: "string", defaultValue: "Select" },