Remove patch to ComboBox’s Popover component defaulting it non-modal

.changeset/strong-fireants-rule.md

@@ -0,0 +1,5 @@
+---
+"@spear-ai/ui": minor
+---
+
+Removed patch to ComboBox’s Popover component making it non-modal by default. This worked around an auto-dismiss bug that was fixed.

package.json

@@ -25,7 +25,7 @@
     "npm-package-json-lint": "8.0.0",
     "prettier": "3.3.3",
     "react": "18.3.1",
-    "tailwindcss": "3.4.7",
+    "tailwindcss": "3.4.10",
     "turbo": "2.0.9",
     "typescript": "5.5.4"
   },

packages/relay-environment/package.json

@@ -22,7 +22,7 @@
     "react": "18.3.1",
     "react-relay": "17.0.0",
     "relay-runtime": "17.0.0",
-    "tailwindcss": "3.4.7",
+    "tailwindcss": "3.4.10",
     "tsup": "8.2.3",
     "typescript": "5.5.4"
   },

packages/storybook/package.json

@@ -11,17 +11,17 @@
   "dependencies": {
     "@radix-ui/react-icons": "1.3.0",
     "@react-hookz/web": "24.0.4",
-    "@react-stately/utils": "3.10.2",
+    "@react-stately/utils": "3.10.3",
     "@sentry/nextjs": "8.20.0",
     "@spear-ai/logo": "2.1.1",
     "@spear-ai/ui": "*",
     "input-otp": "1.2.4",
     "next": "14.2.5",
     "next-themes": "0.3.0",
     "react": "18.3.1",
-    "react-aria-components": "1.3.1",
+    "react-aria-components": "1.3.3",
     "react-intl": "6.6.8",
-    "react-stately": "3.32.1",
+    "react-stately": "3.32.2",
     "sonner": "1.5.0"
   },
   "devDependencies": {
@@ -52,12 +52,12 @@
     "eslint-config-prettier": "9.1.0",
     "graphql": "16.9.0",
     "npm-package-json-lint": "8.0.0",
-    "postcss": "8.4.40",
+    "postcss": "8.4.41",
     "prettier": "3.3.3",
     "react-dom": "18.3.1",
     "serve": "14.2.3",
     "storybook": "8.2.6",
-    "tailwindcss": "3.4.7",
+    "tailwindcss": "3.4.10",
     "turbo": "2.0.9",
     "typescript": "5.5.4"
   },

packages/tailwind-config/package.json

@@ -16,9 +16,9 @@
     "change-case": "^5.4.4",
     "culori": "^4.0.1",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss-3d": "^1.0.6",
+    "tailwindcss-3d": "^1.0.7",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^1.1.4",
+    "tailwindcss-react-aria-components": "^1.1.5",
     "ts-invariant": "^0.10.3",
     "type-fest": "^4.23.0"
   },
@@ -33,10 +33,10 @@
     "eslint": "8.57.0",
     "graphql": "16.9.0",
     "npm-package-json-lint": "8.0.0",
-    "postcss": "8.4.40",
+    "postcss": "8.4.41",
     "prettier": "3.3.3",
     "react": "18.3.1",
-    "tailwindcss": "3.4.7",
+    "tailwindcss": "3.4.10",
     "tsup": "8.2.3",
     "typescript": "5.5.4"
   },

packages/tailwind-config/src/index.ts

@@ -37,7 +37,6 @@ export const tailwindConfig: Config = {
     containerQueriesPlugin,
     radixColorThemePlugin,
     scrollbarPlugin,
-    // @ts-expect-error The `tailwindcss-3d` has an incorrect type definition
     threeDPlugin,
     typographyPlugin,
     reactAriaComponentsPlugin,

packages/ui/package.json

@@ -12,10 +12,10 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@react-hookz/web": "^24.0.4",
-    "@react-stately/utils": "^3.10.2",
+    "@react-stately/utils": "^3.10.3",
     "classix": "^2.1.38",
     "next": "^14.2.5",
-    "tailwind-merge": "^2.4.0"
+    "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@spear-ai/eslint-config": "20.0.1",
@@ -32,11 +32,11 @@
     "npm-package-json-lint": "8.0.0",
     "prettier": "3.3.3",
     "react": "18.3.1",
-    "react-aria-components": "1.3.1",
+    "react-aria-components": "1.3.3",
     "react-dom": "18.3.1",
     "react-intl": "6.6.8",
     "sonner": "1.5.0",
-    "tailwindcss": "3.4.7",
+    "tailwindcss": "3.4.10",
     "tsup": "8.2.3",
     "turbo": "2.0.9",
     "typescript": "5.5.4"

packages/ui/src/components/combo-box.tsx

@@ -161,31 +161,13 @@ ComboBoxIcon.displayName = "ComboBoxIcon";
 export const ComboBoxPopover = forwardRef<
   ElementRef<typeof PopoverPrimitive>,
   ComponentPropsWithoutRef<typeof PopoverPrimitive> & { className?: string | undefined }
->(
-  (
-    {
-      className,
-      // Modifying input text — that's overflowing — instantly opens/closes the popover unless it's configured as a modal.
-      // https://github.com/adobe/react-spectrum/issues/5653#issuecomment-1922648386
-      isNonModal = false,
-      ...properties
-    },
-    reference,
-  ) => {
-    const mergedClassName = cx(
-      "min-w-trigger-width bg-canvas-1 outline-neutral-a-6 theme-forerunner:bg-white-a-3 theme-galapago:bg-white theme-underway:shadow-2xl placement-left:slide-in-from-right-2 placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2 entering:duration-100 entering:animate-in entering:fade-in exiting:duration-75 exiting:animate-out exiting:fade-out exiting:zoom-out-95 theme-galapago:dark:bg-black-a-3 isolate overflow-auto rounded-xl border-transparent p-1 shadow-lg outline outline-1 outline-offset-0 backdrop-blur",
-      className,
-    );
-    return (
-      <PopoverPrimitive
-        className={mergedClassName}
-        isNonModal={isNonModal}
-        {...properties}
-        ref={reference}
-      />
-    );
-  },
-);
+>(({ className, ...properties }, reference) => {
+  const mergedClassName = cx(
+    "min-w-trigger-width bg-canvas-1 outline-neutral-a-6 theme-forerunner:bg-white-a-3 theme-galapago:bg-white theme-underway:shadow-2xl placement-left:slide-in-from-right-2 placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2 entering:duration-100 entering:animate-in entering:fade-in exiting:duration-75 exiting:animate-out exiting:fade-out exiting:zoom-out-95 theme-galapago:dark:bg-black-a-3 isolate overflow-auto rounded-xl border-transparent p-1 shadow-lg outline outline-1 outline-offset-0 backdrop-blur",
+    className,
+  );
+  return <PopoverPrimitive className={mergedClassName} {...properties} ref={reference} />;
+});
 
 ComboBoxPopover.displayName = "ComboBoxPopover";