@marimo-team/frontend 0.23.10-dev8 → 0.23.10

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -1,13 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useId, useMemo, useState } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { type JSX, useId, useMemo } from "react";
 import { z } from "zod";
-import { cn } from "@/utils/cn";
-import { Combobox, ComboboxItem } from "../../components/ui/combobox";
-import { CommandSeparator } from "../../components/ui/command";
+import type { Option } from "@/components/ui/select-core";
+import { SelectList } from "@/components/ui/select-core";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
-import { multiselectFilterFn } from "./multiselectFilterFn";
 
 interface Data {
   label: string | null;
@@ -55,9 +52,6 @@ interface MultiselectProps extends Data {
   setValue: Setter<T>;
 }
 
-const SELECT_ALL_KEY = "__select_all__";
-const DESELECT_ALL_KEY = "__deselect_all__";
-
 export const Multiselect = ({
   options,
   label,
@@ -68,144 +62,27 @@ export const Multiselect = ({
   disabled,
 }: MultiselectProps): JSX.Element => {
   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 = (newValues: string[] | null) => {
-    if (!newValues || newValues.length === 0) {
-      setValue([]);
-      return;
-    }
-
-    // Remove select all and deselect all from the new values
-    newValues = newValues.filter(
-      (value) => value !== SELECT_ALL_KEY && value !== DESELECT_ALL_KEY,
-    );
-
-    if (maxSelections === 1) {
-      // For single selection, just take the last selected value
-      setValue([newValues[newValues.length - 1]]);
-      return;
-    }
-
-    if (maxSelections != null && newValues.length > maxSelections) {
-      // When over max selections, remove oldest selections
-      newValues = newValues.slice(-maxSelections);
-    }
-    setValue(newValues);
-  };
-
-  const handleSelectAll = () => {
-    setValue(options);
-  };
-
-  const handleDeselectAll = () => {
-    setValue([]);
-  };
-
-  const extraOptions: React.ReactNode[] = [];
-  const selectAllEnabled = options.length > 0 && value.length < options.length;
-  const deselectAllEnabled = options.length > 0 && value.length > 0;
-
-  // Only show when more than 2 options
-  // Only show select all when maxSelections is not set
-  if (options.length > 2 && maxSelections == null) {
-    extraOptions.push(
-      <ComboboxItem
-        key={SELECT_ALL_KEY}
-        value={SELECT_ALL_KEY}
-        onSelect={handleSelectAll}
-        disabled={!selectAllEnabled}
-      >
-        Select all
-      </ComboboxItem>,
-    );
-  }
-
-  if (options.length > 2) {
-    extraOptions.push(
-      <ComboboxItem
-        key={DESELECT_ALL_KEY}
-        value={DESELECT_ALL_KEY}
-        onSelect={handleDeselectAll}
-        disabled={!deselectAllEnabled}
-      >
-        {maxSelections === 1 ? "Deselect" : "Deselect all"}
-      </ComboboxItem>,
-      <CommandSeparator key="_separator" />,
-    );
-  }
-
-  const renderList = () => {
-    // List virtualization
-    if (filteredOptions.length > 200) {
-      return (
-        <Virtuoso
-          style={{ height: "200px" }}
-          totalCount={filteredOptions.length}
-          overscan={50}
-          itemContent={(i: number) => {
-            const comboboxItem = (
-              <ComboboxItem key={filteredOptions[i]} value={filteredOptions[i]}>
-                {filteredOptions[i]}
-              </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) => option}
-        placeholder="Select..."
-        multiple={true}
-        className={cn({
-          "w-full": fullWidth,
-        })}
+      <SelectList<string>
+        id={id}
+        options={items}
         value={value}
-        onValueChange={handleValueChange}
-        shouldFilter={false}
-        search={searchQuery}
-        onSearchChange={setSearchQuery}
+        onChange={(next: string[] | string | null) =>
+          setValue((next as string[] | null) ?? [])
+        }
+        multiple={true}
+        maxSelections={maxSelections}
+        pinSelected={true}
+        compactChipTrigger={true}
+        fullWidth={fullWidth}
         disabled={disabled}
-      >
-        {renderList()}
-      </Combobox>
+      />
     </Labeled>
   );
 };

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/SliderPlugin.tsx

@@ -1,10 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { type JSX, useEffect, useId, useState } from "react";
+import { type JSX, useEffect, useId, useMemo, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import { clamp } from "@/utils/math";
+import {
+  maxFractionDigitsForSteps,
+  prettyScientificNumber,
+  roundToFractionDigits,
+} from "@/utils/numbers";
 import { Slider } from "../../components/ui/slider";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -46,8 +51,9 @@ export class SliderPlugin implements IPlugin<T, Data> {
   render(props: IPluginProps<T, Data>): JSX.Element {
     // Create the valueMap function
     const valueMap = (sliderValue: number): number => {
-      if (props.data.steps && props.data.steps.length > 0) {
-        return props.data.steps[sliderValue];
+      const { steps } = props.data;
+      if (steps && steps.length > 0) {
+        return steps[clamp(sliderValue, 0, steps.length - 1)];
       }
       return sliderValue;
     };
@@ -69,6 +75,66 @@ interface SliderProps extends Data {
   valueMap: (sliderValue: number) => number;
 }
 
+interface StepsConfig {
+  steps: T[];
+  fractionDigits: number;
+  minValue: number;
+  maxValue: number;
+  inputStep: number;
+  formatOptions: {
+    minimumFractionDigits: number;
+    maximumFractionDigits: number;
+  };
+}
+
+// Index of the step whose value is closest to `target`.
+function nearestStepIndex(stepValues: T[], target: number): number {
+  let bestIndex = 0;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (let i = 0; i < stepValues.length; i++) {
+    const distance = Math.abs(stepValues[i] - target);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      bestIndex = i;
+    }
+  }
+  return bestIndex;
+}
+
+// When `steps` are provided, the slider runs in *index* space (start=0,
+// stop=len-1, step=1) while the input must display and accept the *actual*
+// step values. This config maps the input back into value space.
+function computeStepsConfig(steps: T[] | null): StepsConfig | null {
+  if (!steps || steps.length === 0) {
+    return null;
+  }
+  const sorted = steps.toSorted((a, b) => a - b);
+  // Smallest positive gap between consecutive step values, used as the input's
+  // increment/decrement amount. Falls back to 1 when undefined.
+  let inputStep = Number.POSITIVE_INFINITY;
+  for (let i = 1; i < sorted.length; i++) {
+    const gap = sorted[i] - sorted[i - 1];
+    if (gap > 0 && gap < inputStep) {
+      inputStep = gap;
+    }
+  }
+  if (!Number.isFinite(inputStep) || inputStep <= 0) {
+    inputStep = 1;
+  }
+  const fractionDigits = maxFractionDigitsForSteps(steps, inputStep);
+  return {
+    steps,
+    fractionDigits,
+    minValue: roundToFractionDigits(sorted[0], fractionDigits),
+    maxValue: roundToFractionDigits(sorted[sorted.length - 1], fractionDigits),
+    inputStep: roundToFractionDigits(inputStep, fractionDigits),
+    formatOptions: {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: fractionDigits,
+    },
+  };
+}
+
 const SliderComponent = ({
   label,
   setValue,
@@ -95,6 +161,64 @@ const SliderComponent = ({
     setInternalValue(value);
   }, [value]);
 
+  const stepsConfig = useMemo(() => computeStepsConfig(steps), [steps]);
+
+  const handleInputChange = (nextValue: number | null | undefined): void => {
+    if (stepsConfig) {
+      const { steps: stepValues, fractionDigits } = stepsConfig;
+      // Cleared input -> reset to the first step.
+      if (nextValue == null || Number.isNaN(nextValue)) {
+        setInternalValue(0);
+        setValue(0);
+        return;
+      }
+      const roundedNext = roundToFractionDigits(nextValue, fractionDigits);
+      let index = nearestStepIndex(stepValues, roundedNext);
+      // If the nearest step is the current one but the value actually moved
+      // (e.g. stepper arrows on non-uniform steps), nudge one index in the
+      // direction of travel so the input never gets "stuck". Caveat: a typed
+      // value closest to the current step but past it nudges too, so on
+      // non-uniform steps typing a nearby number can jump to the adjacent step.
+      const currentValue = roundToFractionDigits(
+        stepValues[internalValue] ?? stepValues[0],
+        fractionDigits,
+      );
+      if (index === internalValue && roundedNext !== currentValue) {
+        index =
+          roundedNext > currentValue
+            ? Math.min(internalValue + 1, stepValues.length - 1)
+            : Math.max(internalValue - 1, 0);
+      }
+      setInternalValue(index);
+      setValue(index);
+      return;
+    }
+
+    // No steps: the input value is the slider value directly.
+    const resolved =
+      nextValue == null || Number.isNaN(nextValue) ? Number(start) : nextValue;
+    setInternalValue(resolved);
+    setValue(resolved);
+  };
+
+  const inputProps = stepsConfig
+    ? {
+        value: roundToFractionDigits(
+          valueMap(internalValue),
+          stepsConfig.fractionDigits,
+        ),
+        minValue: stepsConfig.minValue,
+        maxValue: stepsConfig.maxValue,
+        step: stepsConfig.inputStep,
+        formatOptions: stepsConfig.formatOptions,
+      }
+    : {
+        value: valueMap(internalValue),
+        minValue: start,
+        maxValue: stop,
+        step,
+      };
+
   const sliderElement = (
     <Labeled
       label={label}
@@ -123,14 +247,14 @@ const SliderComponent = ({
           step={step}
           orientation={orientation}
           // Triggered on all value changes
-          onValueChange={([nextValue]) => {
+          onValueChange={([nextValue]: number[]) => {
             setInternalValue(nextValue);
             if (!debounce) {
               setValue(nextValue);
             }
           }}
           // Triggered on mouse up
-          onValueCommit={([nextValue]) => {
+          onValueCommit={([nextValue]: [number]) => {
             if (debounce) {
               setValue(nextValue);
             }
@@ -145,18 +269,8 @@ const SliderComponent = ({
         )}
         {includeInput && (
           <NumberField
-            value={valueMap(internalValue)}
-            onChange={(nextValue) => {
-              // If nextValue is null/undefined/NaN (input cleared), set to start
-              if (nextValue == null || Number.isNaN(nextValue)) {
-                nextValue = Number(start);
-              }
-              setInternalValue(nextValue);
-              setValue(nextValue);
-            }}
-            minValue={start}
-            maxValue={stop}
-            step={step}
+            {...inputProps}
+            onChange={handleInputChange}
             className="w-24"
             aria-label={`${label || "Slider"} value input`}
             isDisabled={disabled}

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));