@marimo-team/islands 0.23.10-dev26 → 0.23.10-dev28

package/src/plugins/impl/SearchableSelect.tsx

@@ -1,10 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useId, useMemo, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
-import { Combobox, ComboboxItem } from "../../components/ui/combobox";
+import { type JSX, useId, useMemo } from "react";
+import type { Option } from "@/components/ui/select-core";
+import { SelectList } from "@/components/ui/select-core";
 import { cn } from "../../utils/cn";
 import { Labeled } from "./common/labeled";
-import { multiselectFilterFn } from "./multiselectFilterFn";
 
 interface SearchableSelectProps {
   options: string[];
@@ -16,8 +15,6 @@ interface SearchableSelectProps {
   disabled: boolean;
 }
 
-const NONE_KEY = "__none__";
-
 export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
   const {
     options,
@@ -29,104 +26,26 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
     disabled,
   } = props;
   const id = useId();
-  const [searchQuery, setSearchQuery] = useState<string>("");
-
-  const filteredOptions = useMemo(() => {
-    if (!searchQuery) {
-      return options;
-    }
-    return options.filter(
-      (option) => multiselectFilterFn(option, searchQuery) === 1,
-    );
-  }, [options, searchQuery]);
-
-  const handleValueChange = (newValue: string | null) => {
-    if (newValue == null) {
-      return;
-    }
-
-    if (newValue === NONE_KEY) {
-      setValue(null);
-    } else {
-      setValue(newValue);
-    }
-  };
-
-  const renderList = () => {
-    const extraOptions = allowSelectNone ? (
-      <ComboboxItem key={NONE_KEY} value={NONE_KEY}>
-        --
-      </ComboboxItem>
-    ) : null;
-
-    if (filteredOptions.length > 200) {
-      return (
-        <Virtuoso
-          style={{ height: "200px" }}
-          totalCount={filteredOptions.length}
-          overscan={50}
-          itemContent={(i: number) => {
-            const option = filteredOptions[i];
 
-            const comboboxItem = (
-              <ComboboxItem key={option} value={option}>
-                {option}
-              </ComboboxItem>
-            );
-
-            if (i === 0) {
-              return (
-                <>
-                  {extraOptions}
-                  {comboboxItem}
-                </>
-              );
-            }
-
-            return comboboxItem;
-          }}
-        />
-      );
-    }
-
-    const list = filteredOptions.map((option) => (
-      <ComboboxItem key={option} value={option}>
-        {option}
-      </ComboboxItem>
-    ));
-
-    return (
-      <>
-        {extraOptions}
-        {list}
-      </>
-    );
-  };
+  const items = useMemo<Array<Option<string>>>(
+    () => options.map((option) => ({ value: option, label: option })),
+    [options],
+  );
 
   return (
     <Labeled label={label} id={id} fullWidth={fullWidth}>
-      <Combobox<string>
-        displayValue={(option) => {
-          if (option === NONE_KEY) {
-            return "--";
-          }
-          return option;
-        }}
-        placeholder="Select..."
+      <SelectList<string>
+        id={id}
+        options={items}
+        value={value}
+        onChange={(next) => setValue((next as string | null) ?? null)}
         multiple={false}
-        className={cn({
-          "w-full": fullWidth,
-        })}
-        value={value ?? NONE_KEY}
-        onValueChange={handleValueChange}
-        shouldFilter={false}
-        search={searchQuery}
-        onSearchChange={setSearchQuery}
+        allowSelectNone={allowSelectNone}
+        fullWidth={fullWidth}
         disabled={disabled}
+        className={cn({ "w-full": fullWidth })}
         data-testid="marimo-plugin-searchable-dropdown"
-      >
-        {renderList()}
-      </Combobox>
+      />
     </Labeled>
   );
 };

package/src/plugins/impl/__tests__/DropdownPlugin.test.tsx

@@ -225,8 +225,11 @@ describe("DropdownPlugin", () => {
         screen.getByTestId("marimo-plugin-searchable-dropdown").firstChild!,
       );
 
-      // Select none should clear value
-      fireEvent.click(screen.getByText("--"));
+      // Re-picking the current value clears it when allowSelectNone
+      const bananaOption = screen
+        .getAllByRole("option")
+        .find((el) => el.textContent === "Banana");
+      fireEvent.click(bananaOption!);
       expect(setValue).toHaveBeenCalledWith([]);
     });
   });

package/src/plugins/impl/__tests__/MultiSelectPlugin.test.ts

@@ -2,7 +2,7 @@
 import { beforeEach, expect, it, vi } from "vitest";
 import { initialModeAtom } from "@/core/mode";
 import { store } from "@/core/state/jotai";
-import { multiselectFilterFn } from "../multiselectFilterFn";
+import { multiselectFilterFn } from "@/components/ui/select-core";
 
 function filterOptions(filter: string, items: string[]) {
   return items.filter((option) => multiselectFilterFn(option, filter));

package/src/plugins/impl/multiselectFilterFn.tsx

@@ -1,22 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-/**
- * We override the default filter function which focuses on sorting by relevance with a fuzzy-match,
- * instead of filtering out.
- * The default filter function is `command-score`.
- *
- * Our filter function only matches if all words in the value are present in the option.
- * This is more strict than the default, but more lenient than an exact match.
- *
- * Examples:
- * - "foo bar" matches "foo bar"
- * - "bar foo" matches "foo bar"
- * - "foob" does not matches "foo bar"
- */
-export function multiselectFilterFn(option: string, value: string): number {
-  const words = value.split(/\s+/);
-  const match = words.every((word) =>
-    option.toLowerCase().includes(word.toLowerCase()),
-  );
-  return match ? 1 : 0;
-}