@marimo-team/islands 0.23.7-dev47 → 0.23.7-dev48

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

@@ -13,6 +13,7 @@ import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { FilterPillEditor } from "./filter-pill-editor";
 import type { ColumnFilterValue } from "./filters";
+import { OPERATOR_LABELS } from "./operator-labels";
 import { stringifyUnknownValue } from "./utils";
 
 interface Props<TData> {
@@ -209,19 +210,62 @@ function formatValue(
   }
 
   if (value.type === "number") {
-    return formatMinMax(value.min, value.max);
+    switch (value.operator) {
+      case "between":
+        return {
+          operator: OPERATOR_LABELS.between.toLowerCase(),
+          value: `${value.min} - ${value.max}`,
+        };
+      case "==":
+      case "!=":
+      case ">":
+      case ">=":
+      case "<":
+      case "<=":
+        return { operator: value.operator, value: String(value.value) };
+    }
+  }
+  if (value.type === "text") {
+    switch (value.operator) {
+      case "in":
+      case "not_in": {
+        const items = value.values.map((v) => `"${v}"`);
+        return {
+          operator: value.operator === "in" ? "is in" : "not in",
+          value: `[${items.join(", ")}]`,
+        };
+      }
+      case "is_empty":
+        return { operator: "is empty" };
+      case "contains":
+      case "equals":
+      case "does_not_equal":
+      case "regex":
+      case "starts_with":
+      case "ends_with":
+        return {
+          operator: OPERATOR_LABELS[value.operator].toLowerCase(),
+          value: `"${value.text}"`,
+        };
+    }
   }
   if (value.type === "date") {
-    return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
+    return formatMinMaxLegacy(
+      value.min?.toISOString(),
+      value.max?.toISOString(),
+    );
   }
   if (value.type === "time") {
-    return formatMinMax(
+    return formatMinMaxLegacy(
       value.min ? timeFormatter.format(value.min) : undefined,
       value.max ? timeFormatter.format(value.max) : undefined,
     );
   }
   if (value.type === "datetime") {
-    return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
+    return formatMinMaxLegacy(
+      value.min?.toISOString(),
+      value.max?.toISOString(),
+    );
   }
   if (value.type === "boolean") {
     return { operator: `is ${value.value ? "True" : "False"}` };
@@ -235,14 +279,11 @@ function formatValue(
       value: `[${stringifiedOptions.join(", ")}]`,
     };
   }
-  if (value.type === "text") {
-    return { operator: "contains", value: `"${value.text}"` };
-  }
   logNever(value);
   return undefined;
 }
 
-function formatMinMax(
+function formatMinMaxLegacy(
   min: string | number | undefined,
   max: string | number | undefined,
 ): FormattedFilter | undefined {

package/src/components/data-table/filters.ts

@@ -32,15 +32,66 @@ export type FilterType =
   | "select"
   | "boolean";
 
+export const NULLISH_OPS = ["is_null", "is_not_null"] as const;
+export const MEMBERSHIP_OPS = ["in", "not_in"] as const;
+export const NUMBER_COMPARISON_OPS = [
+  "==",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+] as const;
+export const TEXT_SCALAR_OPS = [
+  "contains",
+  "equals",
+  "does_not_equal",
+  "regex",
+  "starts_with",
+  "ends_with",
+] as const;
+
+export const NUMBER_OPS = [
+  "between",
+  ...NUMBER_COMPARISON_OPS,
+  ...NULLISH_OPS,
+] as const;
+export const TEXT_OPS = [
+  ...TEXT_SCALAR_OPS,
+  ...MEMBERSHIP_OPS,
+  "is_empty",
+  ...NULLISH_OPS,
+] as const;
+
+export type NullishOp = (typeof NULLISH_OPS)[number];
+export type MembershipOp = (typeof MEMBERSHIP_OPS)[number];
+export type NumberComparisonOp = (typeof NUMBER_COMPARISON_OPS)[number];
+export type TextScalarOp = (typeof TEXT_SCALAR_OPS)[number];
+
+interface NullishOpts {
+  operator: NullishOp;
+}
+
+type NumberFilterOpts =
+  | { operator: "between"; min: number; max: number }
+  | { operator: NumberComparisonOp; value: number }
+  | NullishOpts;
+
+type TextFilterOpts =
+  | { operator: TextScalarOp; text: string }
+  | { operator: MembershipOp; values: string[] }
+  | { operator: "is_empty" }
+  | NullishOpts;
+
 // Filter is a factory function that creates a filter object
 export const Filter = {
-  number(opts: { min?: number; max?: number; operator?: OperatorType }) {
+  number(opts: NumberFilterOpts) {
     return {
       type: "number",
       ...opts,
     } as const;
   },
-  text(opts: { text?: string; operator: OperatorType }) {
+  text(opts: TextFilterOpts) {
     return {
       type: "text",
       ...opts,
@@ -84,6 +135,15 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
   ? Extract<ColumnFilterValue, { type: T }>
   : never;
 
+function isNullishFilter(
+  filter: ColumnFilterValue,
+): filter is Extract<
+  ColumnFilterValue,
+  { operator: "is_null" | "is_not_null" }
+> {
+  return filter.operator === "is_null" || filter.operator === "is_not_null";
+}
+
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
@@ -93,12 +153,11 @@ export function filterToFilterCondition(
   }
   const columnId = columnIdString as ColumnId;
 
-  if (filter.operator === "is_null" || filter.operator === "is_not_null") {
+  if (isNullishFilter(filter)) {
     return [
       {
         column_id: columnId,
         operator: filter.operator,
-        value: undefined,
         type: "condition",
         negate: false,
       },
@@ -106,38 +165,76 @@ export function filterToFilterCondition(
   }
 
   switch (filter.type) {
-    case "number": {
-      const conditions: FilterConditionType[] = [];
-      if (filter.min !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: ">=",
-          value: filter.min,
-          type: "condition",
-          negate: false,
-        });
-      }
-      if (filter.max !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max,
-          type: "condition",
-          negate: false,
-        });
+    case "number":
+      switch (filter.operator) {
+        case "between":
+          return [
+            {
+              column_id: columnId,
+              operator: "between",
+              value: { min: filter.min, max: filter.max },
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "==":
+        case "!=":
+        case ">":
+        case ">=":
+        case "<":
+        case "<=":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.value,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
       }
-      return conditions;
-    }
     case "text":
-      return [
-        {
-          column_id: columnId,
-          operator: filter.operator,
-          value: filter.text,
-          type: "condition",
-          negate: false,
-        },
-      ];
+      switch (filter.operator) {
+        case "contains":
+        case "equals":
+        case "does_not_equal":
+        case "regex":
+        case "starts_with":
+        case "ends_with":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.text,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "in":
+        case "not_in":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.values,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "is_empty":
+          return [
+            {
+              column_id: columnId,
+              operator: "is_empty",
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
+      }
     case "datetime": {
       const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
@@ -210,7 +307,6 @@ export function filterToFilterCondition(
           {
             column_id: columnId,
             operator: "is_true",
-            value: undefined,
             type: "condition",
             negate: false,
           },
@@ -221,7 +317,6 @@ export function filterToFilterCondition(
           {
             column_id: columnId,
             operator: "is_false",
-            value: undefined,
             type: "condition",
             negate: false,
           },

package/src/components/data-table/header-items.tsx

@@ -328,14 +328,21 @@ export const FilterButtons = ({
   onApply,
   onClear,
   clearButtonDisabled,
+  applyButtonDisabled,
 }: {
   onApply: () => void;
   onClear: () => void;
   clearButtonDisabled?: boolean;
+  applyButtonDisabled?: boolean;
 }) => {
   return (
     <div className="flex gap-2 px-2 justify-between">
-      <Button variant="link" size="sm" onClick={onApply}>
+      <Button
+        variant="link"
+        size="sm"
+        onClick={onApply}
+        disabled={applyButtonDisabled}
+      >
         Apply
       </Button>
       <Button

package/src/components/data-table/operator-labels.ts

@@ -0,0 +1,25 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
+
+export const OPERATOR_LABELS: Record<OperatorType | "between", string> = {
+  "==": "Equals",
+  "!=": "Doesn't equal",
+  ">": "Greater than",
+  ">=": "Greater than or equal",
+  "<": "Less than",
+  "<=": "Less than or equal",
+  between: "Between",
+  contains: "Contains",
+  equals: "Equals",
+  does_not_equal: "Doesn't equal",
+  starts_with: "Starts with",
+  ends_with: "Ends with",
+  regex: "Matches regex",
+  in: "Is in",
+  not_in: "Not in",
+  is_empty: "Is empty",
+  is_true: "Is true",
+  is_false: "Is false",
+  is_null: "Is null",
+  is_not_null: "Is not null",
+};

package/src/components/data-table/regex-input.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import React from "react";
+import { cn } from "@/utils/cn";
+import { Input } from "../ui/input";
+
+export interface RegexInputProps {
+  id?: string;
+  value: string;
+  onChange: (next: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  className?: string;
+  autoFocus?: boolean;
+  "aria-label"?: string;
+}
+
+export const RegexInput = React.forwardRef<HTMLInputElement, RegexInputProps>(
+  (
+    {
+      id,
+      value,
+      onChange,
+      onKeyDown,
+      placeholder = "pattern",
+      className,
+      autoFocus,
+      "aria-label": ariaLabel,
+    },
+    ref,
+  ) => (
+    <div
+      className={cn(
+        "flex items-stretch h-6 mb-1 rounded-sm border border-input bg-background shadow-xs-solid focus-within:shadow-md-solid focus-within:ring-1 focus-within:ring-ring focus-within:border-primary",
+        className,
+      )}
+    >
+      <Slash />
+      <Input
+        ref={ref}
+        id={id}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        aria-label={ariaLabel}
+        rootClassName="flex-1 min-w-0"
+        className="border-0 mb-0 h-full shadow-none! hover:shadow-none! focus-visible:shadow-none! focus-visible:ring-0 focus-visible:border-0 rounded-none bg-transparent"
+      />
+      <Slash />
+    </div>
+  ),
+);
+RegexInput.displayName = "RegexInput";
+
+const Slash = () => (
+  <span className="px-1.5 flex items-center text-muted-foreground font-code text-sm select-none">
+    /
+  </span>
+);

package/src/components/ui/combobox.tsx

@@ -170,8 +170,9 @@ export const Combobox = <TValue,>({
     <div className={cn("relative")} {...rest}>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild={true}>
-          <div
+          <button
             id={id}
+            type="button"
             className={cn(
               "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50",
               className,
@@ -180,7 +181,7 @@ export const Combobox = <TValue,>({
           >
             <span className="truncate flex-1 min-w-0">{renderValue()}</span>
             <ChevronDownIcon className="ml-3 w-4 h-4 opacity-50 shrink-0" />
-          </div>
+          </button>
         </PopoverTrigger>
         <PopoverContent
           className="w-full min-w-(--radix-popover-trigger-width) p-0"

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

@@ -62,6 +62,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
               slot="increment"
               isDisabled={props.isDisabled}
               variant={variant}
+              excludeFromTabOrder={true}
             >
               <ChevronUp
                 aria-hidden={true}
@@ -73,6 +74,7 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
               slot="decrement"
               isDisabled={props.isDisabled}
               variant={variant}
+              excludeFromTabOrder={true}
             >
               <ChevronDown
                 aria-hidden={true}

package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_27_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -58,7 +58,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -82,7 +82,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_29_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -113,7 +113,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -399,7 +399,7 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_2p_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -430,7 +430,7 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -596,7 +596,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_1p_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -627,7 +627,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -651,7 +651,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_1r_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -682,7 +682,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -798,7 +798,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_3b_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -829,7 +829,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -853,7 +853,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_3d_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -884,7 +884,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -908,7 +908,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_3f_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -939,7 +939,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -1298,7 +1298,7 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_4_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -1329,7 +1329,7 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -1581,7 +1581,7 @@ exports[`renderZodSchema > should render a form unique 1`] = `
           aria-invalid="false"
           class="relative"
         >
-          <div
+          <button
             aria-controls="radix-_r_32_"
             aria-expanded="false"
             aria-haspopup="dialog"
@@ -1612,7 +1612,7 @@ exports[`renderZodSchema > should render a form unique 1`] = `
                 d="m6 9 6 6 6-6"
               />
             </svg>
-          </div>
+          </button>
           <div
             class="flex flex-col gap-1 items-start"
           />
@@ -1740,7 +1740,7 @@ exports[`renders custom forms column_id_array 1`] = `
       aria-invalid="false"
       class="relative"
     >
-      <div
+      <button
         aria-controls="radix-_r_41_"
         aria-expanded="false"
         aria-haspopup="dialog"
@@ -1771,7 +1771,7 @@ exports[`renders custom forms column_id_array 1`] = `
             d="m6 9 6 6 6-6"
           />
         </svg>
-      </div>
+      </button>
       <div
         class="flex flex-col gap-1 items-start"
       />
@@ -1790,7 +1790,7 @@ exports[`renders custom forms column_id_dot_array 1`] = `
       aria-invalid="false"
       class="relative"
     >
-      <div
+      <button
         aria-controls="radix-_r_43_"
         aria-expanded="false"
         aria-haspopup="dialog"
@@ -1821,7 +1821,7 @@ exports[`renders custom forms column_id_dot_array 1`] = `
             d="m6 9 6 6 6-6"
           />
         </svg>
-      </div>
+      </button>
       <div
         class="flex flex-col gap-1 items-start"
       />

package/src/plugins/impl/data-frames/schema.ts

@@ -80,7 +80,10 @@ export const FilterConditionSchema = z
       .enum(Object.keys(ALL_OPERATORS) as [OperatorType, ...OperatorType[]])
       .describe(FieldOptions.of({ label: " " })),
     type: z.literal("condition").default("condition"),
-    value: z.any().describe(FieldOptions.of({ label: "Value" })),
+    value: z
+      .any()
+      .optional()
+      .describe(FieldOptions.of({ label: "Value" })),
     negate: z.boolean().default(false),
   })
   .describe(FieldOptions.of({ direction: "row", special: "column_filter" }));