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

package/dist/{reveal-component-xsFYQVKT.js → reveal-component-BA7HaWOX.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-UEH5lFDZ.js";
 import "./chunk-5FQGJX7Z-BNjes6Yx.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { $ as Panel, Xt as EyeOff, Zt as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, en as Code, et as PanelGroup, i as DEFAULT_DECK_TRANSITION, s as SlideSidebar, t as useNotebookCodeAvailable, tt as PanelResizeHandle } from "./code-visibility-Rcdlclvw.js";
+import { $t as Expand, Qt as EyeOff, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, nn as Code, nt as PanelGroup, rt as PanelResizeHandle, s as SlideSidebar, t as useNotebookCodeAvailable, tt as Panel } from "./code-visibility-DI2QSiFC.js";
 import { J as useDebouncedCallback } from "./input-CMYy4hzj.js";
 import "./toDate-d8RCRrRd.js";
 import "./react-dom-BTJzcVJ9.js";
@@ -7249,8 +7249,8 @@ var SubslideView = (e5) => {
   if (t[0] !== i || t[1] !== r || t[2] !== a || t[3] !== n) {
     let { slideLevel: e6, cumulativeByBlock: ro2 } = buildSubslideNotes(n, a);
     s = e6;
-    let io2 = n.blocks.some((e7) => e7.cells.some((e8) => r(e8.id)));
-    o = w, f = "h-full w-full overflow-auto flex", c = io2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
+    let p2 = n.blocks.some((e7) => e7.cells.some((e8) => r(e8.id)));
+    o = w, f = "h-full w-full overflow-auto flex", c = p2 ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content", t[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (l = { margin: "auto 20px" }, t[10] = l) : l = t[10], u = n.blocks.map((e7, t2) => {
       let n2 = e7.cells.map((e8) => r(e8.id) ? i ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlideCellReadOnlyView, { cell: e8 }, e8.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slide, {
         cellId: e8.id,
         status: e8.status,
@@ -7272,15 +7272,15 @@ var SubslideView = (e5) => {
     style: l,
     children: u
   }), t[11] = c, t[12] = l, t[13] = u, t[14] = ro) : ro = t[14];
-  let io;
-  t[15] !== f || t[16] !== ro ? (io = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  let p;
+  t[15] !== f || t[16] !== ro ? (p = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: f,
     children: ro
-  }), t[15] = f, t[16] = ro, t[17] = io) : io = t[17];
+  }), t[15] = f, t[16] = ro, t[17] = p) : p = t[17];
   let ao;
   t[18] === s ? ao = t[19] : (ao = s && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotesAside, { text: s }), t[18] = s, t[19] = ao);
   let oo;
-  return t[20] !== o || t[21] !== io || t[22] !== ao ? (oo = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(o, { children: [io, ao] }), t[20] = o, t[21] = io, t[22] = ao, t[23] = oo) : oo = t[23], oo;
+  return t[20] !== o || t[21] !== p || t[22] !== ao ? (oo = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(o, { children: [p, ao] }), t[20] = o, t[21] = p, t[22] = ao, t[23] = oo) : oo = t[23], oo;
 };
 function parkedRendersSource(e5) {
   let { isNoOutputPreview: t, isEditable: n, showCode: r } = e5;
@@ -7302,9 +7302,9 @@ var ParkedPreviewContent = (e5) => {
     status: n.status,
     output: n.output
   }), t[3] = n.id, t[4] = n.output, t[5] = n.status, t[6] = o) : o = t[6], o;
-}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: io, onSlideChange: p, mode: so, configWidth: fo, isEditable: po = false }) => {
+}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: ro, onSlideChange: io, mode: p, configWidth: fo, isEditable: po = false }) => {
   var _a2, _b2;
-  let yo = (0, import_react.useRef)(null), bo = (0, import_react.useRef)(null), { width: So, height: Co } = useSlideDimensions(yo), wo = useFullScreenElement() != null, To = useAtomValue(kioskModeAtom), Eo = (0, import_react.useMemo)(() => To ? [] : [ce], [To]), [Do, Oo] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), ko = useNotebookCodeAvailable(e5), Ao = !isIslands() && ko, jo = io == null ? void 0 : e5[io], Mo = jo ?? e5.at(0), { parkedPreviewCell: No, isHeldEdit: Po, isNoOutputPreview: Fo, heldEditCellId: Io, heldShowsCode: Lo, toggleHeldShowsCode: Ro } = useParkedPreview({
+  let yo = (0, import_react.useRef)(null), bo = (0, import_react.useRef)(null), { width: So, height: Co } = useSlideDimensions(yo), wo = useFullScreenElement() != null, To = useAtomValue(kioskModeAtom), Eo = (0, import_react.useMemo)(() => To ? [] : [ce], [To]), [Do, Oo] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), ko = useNotebookCodeAvailable(e5), Ao = !isIslands() && ko, jo = ro == null ? void 0 : e5[ro], Mo = jo ?? e5.at(0), { parkedPreviewCell: No, isHeldEdit: Po, isNoOutputPreview: Fo, heldEditCellId: Io, heldShowsCode: Lo, toggleHeldShowsCode: Ro } = useParkedPreview({
     activeCell: jo,
     slideConfigs: o.cells,
     noOutputIds: l
@@ -7350,7 +7350,7 @@ var ParkedPreviewContent = (e5) => {
     qo
   ]), Yo = useEvent_default((t) => {
     let n = resolveDeckNavigationTarget({
-      activeIndex: io,
+      activeIndex: ro,
       cells: e5,
       cellToTarget: Wo,
       getId: (e6) => e6.id
@@ -7361,7 +7361,7 @@ var ParkedPreviewContent = (e5) => {
     let e6 = bo.current;
     e6 != null && Yo(e6);
   }, [
-    io,
+    ro,
     Wo,
     e5,
     Yo
@@ -7391,14 +7391,14 @@ var ParkedPreviewContent = (e5) => {
     let e6 = bo.current;
     if (!e6) return;
     let t = resolveActiveCellIndex(Go, e6.getIndices());
-    t != null && (p == null ? void 0 : p(t));
+    t != null && (io == null ? void 0 : io(t));
   }), $o = useEvent_default((t) => {
-    if (!No || io == null || Events.fromInput(t)) return;
+    if (!No || ro == null || Events.fromInput(t)) return;
     let n = classifyNavKey(t);
     if (n === 0) return;
     t.preventDefault(), t.stopPropagation();
-    let i = io + n;
-    i < 0 || i >= e5.length || (p == null ? void 0 : p(i));
+    let i = ro + n;
+    i < 0 || i >= e5.length || (io == null ? void 0 : io(i));
   }), ns = useEvent_default(() => {
     Qo(), triggerResize(bo.current);
   });
@@ -7494,7 +7494,7 @@ var ParkedPreviewContent = (e5) => {
       ]
     })
   });
-  return so === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+  return p === "read" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     className: "flex-1 min-w-0 flex flex-row gap-3",
     children: os
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev26",
+  "version": "0.23.10-dev27",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/filter-by-values-picker.tsx

@@ -7,6 +7,8 @@ import { useMemo, useState } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
+import type { Option } from "@/components/ui/select-core";
+import { useSelectList } from "@/components/ui/select-core";
 import { Logger } from "@/utils/Logger";
 import { Sets } from "@/utils/sets";
 import { smartMatch } from "@/utils/smartMatch";
@@ -23,7 +25,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { SentinelCell } from "./sentinel-cell";
 import { detectSentinel, stringifyUnknownValue } from "./utils";
-import { CompactChipRow } from "./value-chips";
+import { CompactChipRow } from "@/components/ui/value-chips";
 
 const TOP_K_ROWS = 30;
 
@@ -101,8 +103,6 @@ export const FilterByValuesList = <TData, TValue>({
   onChange,
   creatable = false,
 }: FilterByValuesListProps<TData, TValue>) => {
-  const [query, setQuery] = useState<string>("");
-
   const { data, isPending, error } = useAsyncData(async () => {
     if (!calculateTopKRows) {
       return null;
@@ -111,27 +111,49 @@ export const FilterByValuesList = <TData, TValue>({
     return res.data;
   }, [calculateTopKRows, column.id]);
 
-  const filteredData = useMemo(() => {
+  const options = useMemo<Array<Option<unknown>>>(() => {
     if (!data) {
       return [];
     }
     try {
-      // try to do includes and also smart match for prefixes
-      return data.filter(([value, _count]) => {
-        if (value === undefined) {
-          return false;
-        }
-        const str = String(value);
-        return (
-          smartMatch(query, str) ||
-          str.toLowerCase().includes(query.toLowerCase())
-        );
-      });
+      return data
+        .filter(([value]) => value !== undefined)
+        .map(([value, count]) => ({
+          value,
+          label: String(value),
+          data: { count },
+        }));
     } catch (error_) {
-      Logger.error("Error filtering data", error_);
+      Logger.error("Error building filter options", error_);
       return [];
     }
-  }, [data, query]);
+  }, [data]);
+
+  const list = useSelectList<unknown>({
+    options,
+    value: [...chosenValues],
+    onChange: (next) => onChange(next as unknown[]),
+    multiple: true,
+    filterFn: (label, q) =>
+      smartMatch(q, label) || label.toLowerCase().includes(q.toLowerCase())
+        ? 1
+        : 0,
+  });
+
+  const query = list.searchQuery;
+  const setQuery = list.setSearchQuery;
+
+  const filteredData = useMemo<Array<[unknown, number | undefined]>>(
+    () =>
+      list.visibleOptions.map(
+        (o) =>
+          [o.value, (o.data as { count: number }).count] as [
+            unknown,
+            number | undefined,
+          ],
+      ),
+    [list.visibleOptions],
+  );
 
   // Surface chosen values that aren't in the top-K so they stay visible/uncheckable.
   // Count is undefined for these rows; the cell renders an em-dash.

package/src/components/data-table/filter-pills.tsx

@@ -21,7 +21,7 @@ import { AddFilterButton } from "./add-filter-button";
 import { FilterPillEditor } from "./filter-pill-editor";
 import { type ColumnFilterValue, formatValue, type Snapshot } from "./filters";
 import { extractTimezone } from "./types";
-import { ChipWithComma, CompactChipRow } from "./value-chips";
+import { ChipWithComma, CompactChipRow } from "@/components/ui/value-chips";
 
 interface Props<TData> {
   filters: ColumnFiltersState | undefined;

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/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([]);
+  });
+});