@marimo-team/islands 0.23.10-dev9 → 0.23.11-dev1

package/src/components/ui/combobox.tsx

@@ -2,7 +2,7 @@
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { Check, ChevronDownIcon, XCircle } from "lucide-react";
-import React, { createContext } from "react";
+import React, { createContext, useCallback, useMemo } from "react";
 import { cn } from "../../utils/cn";
 import { Functions } from "../../utils/functions";
 import { Badge } from "./badge";
@@ -40,6 +40,8 @@ interface ComboboxCommonProps<TValue> {
   id?: string;
   keepPopoverOpenOnSelect?: boolean;
   disabled?: boolean;
+  /** Override the trigger contents with a node (e.g. a compact chip summary). */
+  renderValue?: (value: TValue[] | TValue | null) => React.ReactNode;
 }
 
 type ComboboxFilterProps =
@@ -97,6 +99,7 @@ export const Combobox = <TValue,>({
   keepPopoverOpenOnSelect,
   id,
   disabled = false,
+  renderValue,
   ...rest
 }: ComboboxProps<TValue>) => {
   const [open = false, setOpen] = useControllableState({
@@ -112,39 +115,45 @@ export const Combobox = <TValue,>({
     },
   });
 
-  const isSelected = (selectedValue: unknown) => {
-    if (Array.isArray(value)) {
-      return value.includes(selectedValue as TValue);
-    }
-    return value === selectedValue;
-  };
+  const isSelected = useCallback(
+    (selectedValue: unknown) => {
+      if (Array.isArray(value)) {
+        return value.includes(selectedValue as TValue);
+      }
+      return value === selectedValue;
+    },
+    [value],
+  );
 
-  const handleSelect = (selectedValue: unknown) => {
-    let newValue: TValue | TValue[] | null = selectedValue as TValue;
+  const handleSelect = useCallback(
+    (selectedValue: unknown) => {
+      let newValue: TValue | TValue[] | null = selectedValue as TValue;
 
-    if (multiple) {
-      if (Array.isArray(value)) {
-        if (value.includes(newValue)) {
-          const newArr = value.filter((val) => val !== selectedValue);
-          newValue = newArr.length > 0 ? newArr : [];
+      if (multiple) {
+        if (Array.isArray(value)) {
+          if (value.includes(newValue)) {
+            const newArr = value.filter((val) => val !== selectedValue);
+            newValue = newArr.length > 0 ? newArr : [];
+          } else {
+            newValue = [...value, newValue];
+          }
         } else {
-          newValue = [...value, newValue];
+          newValue = [newValue];
         }
-      } else {
-        newValue = [newValue];
+      } else if (value === selectedValue) {
+        newValue = null;
       }
-    } else if (value === selectedValue) {
-      newValue = null;
-    }
 
-    setValue(newValue);
-    const keepOpen = keepPopoverOpenOnSelect ?? multiple;
-    if (!keepOpen) {
-      setOpen(false);
-    }
-  };
+      setValue(newValue);
+      const keepOpen = keepPopoverOpenOnSelect ?? multiple;
+      if (!keepOpen) {
+        setOpen(false);
+      }
+    },
+    [keepPopoverOpenOnSelect, multiple, value, setValue, setOpen],
+  );
 
-  const renderValue = (): string => {
+  const renderValueLabel = (): string => {
     // If we show chips, we don't want to change the placeholder
     if (multiple && chips && placeholder) {
       return placeholder;
@@ -168,6 +177,14 @@ export const Combobox = <TValue,>({
     return placeholder ?? "--";
   };
 
+  const comboboxContextValue: ComboboxContextValue = useMemo(
+    () => ({
+      isSelected,
+      onSelect: handleSelect,
+    }),
+    [isSelected, handleSelect],
+  );
+
   return (
     <div className={cn("relative")} {...rest}>
       <Popover
@@ -191,7 +208,9 @@ export const Combobox = <TValue,>({
             aria-expanded={open}
             aria-disabled={disabled}
           >
-            <span className="truncate flex-1 min-w-0">{renderValue()}</span>
+            <span className="truncate flex-1 min-w-0">
+              {renderValue ? renderValue(value ?? null) : renderValueLabel()}
+            </span>
             <ChevronDownIcon className="ml-3 w-4 h-4 opacity-50 shrink-0" />
           </button>
         </PopoverTrigger>
@@ -209,7 +228,7 @@ export const Combobox = <TValue,>({
             />
             <CommandList className="max-h-60 py-.5">
               <CommandEmpty>{emptyState}</CommandEmpty>
-              <ComboboxContext value={{ isSelected, onSelect: handleSelect }}>
+              <ComboboxContext value={comboboxContextValue}>
                 {children}
               </ComboboxContext>
             </CommandList>
@@ -277,12 +296,14 @@ export const ComboboxItem = React.forwardRef(
         ? value.value
         : String(value);
     const context = React.use(ComboboxContext);
+    const isOptionSelected = context.isSelected(value);
 
     return (
       <CommandItem
         ref={ref}
         className={cn("pl-6 m-1 py-1", className)}
         role="option"
+        aria-selected={isOptionSelected}
         value={valueAsString}
         disabled={disabled}
         onSelect={() => {
@@ -290,9 +311,7 @@ export const ComboboxItem = React.forwardRef(
           onSelect?.(value);
         }}
       >
-        {context.isSelected(value) && (
-          <Check className="absolute left-1 h-4 w-4" />
-        )}
+        {isOptionSelected && <Check className="absolute left-1 h-4 w-4" />}
         {children}
       </CommandItem>
     );

package/src/components/ui/number-field.tsx

@@ -25,7 +25,10 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
 }
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
-  ({ placeholder, variant = "default", onInputText, ...props }, ref) => {
+  (
+    { placeholder, variant = "default", onInputText, formatOptions, ...props },
+    ref,
+  ) => {
     const { locale } = useLocale();
     return (
       <AriaNumberField
@@ -33,6 +36,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
         formatOptions={{
           minimumFractionDigits: 0,
           maximumFractionDigits: maxFractionalDigits(locale),
+          ...formatOptions,
         }}
       >
         <div

package/src/components/ui/reorderable-list.tsx

@@ -57,6 +57,12 @@ export interface ReorderableListProps<T> {
    * Callback when an item is clicked
    */
   onAction?: (item: T) => void;
+  /**
+   * Fired when an item is hovered or focused. Useful for preloading the
+   * resource the item points to before it is activated. Attached to the
+   * focusable list item so it works for both pointer and keyboard users.
+   */
+  onItemPreloadHint?: (item: T) => void;
   /**
    * All available items that can be added to the list
    */
@@ -142,6 +148,7 @@ export const ReorderableList = <T extends object>({
   ariaLabel = "Reorderable list",
   className,
   crossListDrag,
+  onItemPreloadHint,
 }: ReorderableListProps<T>) => {
   const mimeType = crossListDrag
     ? getDragMimeType(crossListDrag.dragType)
@@ -294,6 +301,12 @@ export const ReorderableList = <T extends object>({
           key={getKey(item)}
           id={getKey(item)}
           className="active:cursor-grabbing data-[dragging]:opacity-60 outline-none"
+          onHoverStart={
+            onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
+          }
+          onFocus={
+            onItemPreloadHint ? () => onItemPreloadHint(item) : undefined
+          }
         >
           {renderItem(item)}
         </ListBoxItem>

package/src/components/ui/select-core/__tests__/use-select-list.test.ts

@@ -0,0 +1,294 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { BulkAction, Option } from "../types";
+import { useSelectList } from "../use-select-list";
+
+const opts: Array<Option<string>> = [
+  { value: "a", label: "apple" },
+  { value: "b", label: "banana" },
+  { value: "c", label: "cherry" },
+];
+
+describe("useSelectList - search", () => {
+  it("filters visibleOptions by label using the strict word match", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: [],
+        onChange: vi.fn(),
+        multiple: true,
+      }),
+    );
+    act(() => result.current.setSearchQuery("ban"));
+    expect(result.current.visibleOptions.map((o) => o.value)).toEqual(["b"]);
+  });
+
+  it("returns all options when the query is empty", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: [],
+        onChange: vi.fn(),
+        multiple: true,
+      }),
+    );
+    expect(result.current.visibleOptions).toHaveLength(3);
+  });
+
+  it("keeps options for any positive filter score, not just 1", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: [],
+        onChange: vi.fn(),
+        multiple: true,
+        filterFn: (label) => (label === "apple" ? 0.5 : 0),
+      }),
+    );
+    act(() => result.current.setSearchQuery("anything"));
+    expect(result.current.visibleOptions.map((o) => o.value)).toEqual(["a"]);
+  });
+});
+
+describe("useSelectList - multi toggle", () => {
+  it("adds an unselected value", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({ options: opts, value: ["a"], onChange, multiple: true }),
+    );
+    act(() => result.current.toggle("b"));
+    expect(onChange).toHaveBeenCalledWith(["a", "b"]);
+  });
+
+  it("removes a selected value", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: ["a", "b"],
+        onChange,
+        multiple: true,
+      }),
+    );
+    act(() => result.current.toggle("a"));
+    expect(onChange).toHaveBeenCalledWith(["b"]);
+  });
+
+  it("drops the oldest selection when maxSelections is exceeded", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: ["a", "b"],
+        onChange,
+        multiple: true,
+        maxSelections: 2,
+      }),
+    );
+    act(() => result.current.toggle("c"));
+    expect(onChange).toHaveBeenCalledWith(["b", "c"]);
+  });
+
+  it("isChecked reflects membership", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: ["a"],
+        onChange: vi.fn(),
+        multiple: true,
+      }),
+    );
+    expect(result.current.isChecked("a")).toBe(true);
+    expect(result.current.isChecked("b")).toBe(false);
+  });
+});
+
+describe("useSelectList - single toggle", () => {
+  it("replaces the value", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({ options: opts, value: "a", onChange, multiple: false }),
+    );
+    act(() => result.current.toggle("b"));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+
+  it("clears to null when allowSelectNone and the value is re-toggled", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: "a",
+        onChange,
+        multiple: false,
+        allowSelectNone: true,
+      }),
+    );
+    act(() => result.current.toggle("a"));
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+});
+
+describe("useSelectList - pinning + freeze", () => {
+  it("pins selected to the top of visibleOptions when open and idle", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: ["c"],
+        onChange: vi.fn(),
+        multiple: true,
+        pinSelected: true,
+      }),
+    );
+    act(() => result.current.setOpen(true));
+    expect(result.current.visibleOptions.map((o) => o.value)).toEqual([
+      "c",
+      "a",
+      "b",
+    ]);
+    expect(result.current.pinnedCount).toBe(1);
+  });
+
+  it("freezes pinned order while open: a newly toggled item does not re-pin", () => {
+    const onChange = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useSelectList({
+          options: opts,
+          value,
+          onChange,
+          multiple: true,
+          pinSelected: true,
+        }),
+      { initialProps: { value: ["c"] as string[] } },
+    );
+    act(() => result.current.setOpen(true));
+    rerender({ value: ["c", "a"] });
+    expect(result.current.visibleOptions.map((o) => o.value)).toEqual([
+      "c",
+      "a",
+      "b",
+    ]);
+    expect(result.current.isChecked("a")).toBe(true);
+  });
+
+  it("re-pins when the search clears", () => {
+    const { result, rerender } = renderHook(
+      ({ value }) =>
+        useSelectList({
+          options: opts,
+          value,
+          onChange: vi.fn(),
+          multiple: true,
+          pinSelected: true,
+        }),
+      { initialProps: { value: ["b"] as string[] } },
+    );
+    act(() => result.current.setOpen(true));
+    act(() => result.current.setSearchQuery("a"));
+    rerender({ value: ["b", "a"] });
+    act(() => result.current.setSearchQuery(""));
+    expect(result.current.visibleOptions.map((o) => o.value)).toEqual([
+      "b",
+      "a",
+      "c",
+    ]);
+  });
+
+  it("does not pin when pinSelected is false", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: ["c"],
+        onChange: vi.fn(),
+        multiple: true,
+      }),
+    );
+    act(() => result.current.setOpen(true));
+    expect(result.current.visibleOptions.map((o) => o.value)).toEqual([
+      "a",
+      "b",
+      "c",
+    ]);
+    expect(result.current.pinnedCount).toBe(0);
+  });
+});
+
+describe("useSelectList - bulk", () => {
+  const findAction = <K extends BulkAction<string>["kind"]>(
+    actions: ReadonlyArray<BulkAction<string>>,
+    kind: K,
+  ): Extract<BulkAction<string>, { kind: K }> | undefined =>
+    actions.find(
+      (a): a is Extract<BulkAction<string>, { kind: K }> => a.kind === kind,
+    );
+
+  it("idle: select-all picks every option; deselect-all clears", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({ options: opts, value: ["a"], onChange, multiple: true }),
+    );
+    act(() => findAction(result.current.bulkActions, "select-all")?.run());
+    expect(onChange).toHaveBeenCalledWith(["a", "b", "c"]);
+    onChange.mockClear();
+    act(() => findAction(result.current.bulkActions, "deselect-all")?.run());
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("idle: select-all skips disabled options and keeps the existing selection", () => {
+    const onChange = vi.fn();
+    const withDisabled: Array<Option<string>> = [
+      { value: "a", label: "apple" },
+      { value: "b", label: "banana", disabled: true },
+      { value: "c", label: "cherry" },
+    ];
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: withDisabled,
+        value: ["c"],
+        onChange,
+        multiple: true,
+      }),
+    );
+    act(() => findAction(result.current.bulkActions, "select-all")?.run());
+    expect(onChange).toHaveBeenCalledWith(["c", "a"]);
+  });
+
+  it("searching: select-matching acts only on the matches (additive)", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useSelectList({ options: opts, value: ["a"], onChange, multiple: true }),
+    );
+    act(() => result.current.setSearchQuery("b"));
+    act(() => findAction(result.current.bulkActions, "select-matching")?.run());
+    expect(onChange).toHaveBeenCalledWith(["a", "b"]);
+  });
+
+  it("exposes idle bulkActions in select-then-deselect order", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: ["a"],
+        onChange: vi.fn(),
+        multiple: true,
+      }),
+    );
+    const kinds = result.current.bulkActions.map((a) => a.kind);
+    expect(kinds).toEqual(["select-all", "deselect-all"]);
+    const selectAll = findAction(result.current.bulkActions, "select-all");
+    expect(selectAll && "enabled" in selectAll && selectAll.enabled).toBe(true);
+  });
+
+  it("bulkActions is empty for single-select", () => {
+    const { result } = renderHook(() =>
+      useSelectList({
+        options: opts,
+        value: "a",
+        onChange: vi.fn(),
+        multiple: false,
+      }),
+    );
+    expect(result.current.bulkActions).toEqual([]);
+  });
+});