vastgrid 0.1.0 → 0.2.0

package/dist/theme.js

@@ -1,54 +0,0 @@
-const colorTokens = {
-    background: "--vg-bg",
-    text: "--vg-fg",
-    muted: "--vg-muted",
-    headerBackground: "--vg-header-bg",
-    headerText: "--vg-header-fg",
-    headerActive: "--vg-header-active-bg",
-    gutterBackground: "--vg-gutter-bg",
-    gutterText: "--vg-gutter-fg",
-    gutterViewText: "--vg-gutter-view-fg",
-    line: "--vg-line",
-    lineStrong: "--vg-line-strong",
-    selection: "--vg-selection-bg",
-    selectionBorder: "--vg-selection-border",
-    activeBorder: "--vg-active-border",
-    accent: "--vg-accent",
-    nullText: "--vg-null-fg",
-    placeholder: "--vg-placeholder",
-    match: "--vg-match-bg",
-    error: "--vg-error-fg",
-};
-/** Resolves the theme of `root`. Colors given as `light-dark()` or system colors resolve to concrete values. */
-export function resolveTheme(root) {
-    const probe = document.createElement("span");
-    probe.style.display = "none";
-    root.appendChild(probe);
-    try {
-        const color = (token) => {
-            probe.style.color = `var(${token})`;
-            return getComputedStyle(probe).color;
-        };
-        const style = getComputedStyle(root);
-        const fontFamily = style.getPropertyValue("--vg-font-family").trim() || style.fontFamily || "system-ui, sans-serif";
-        const fontSize = Number.parseFloat(style.getPropertyValue("--vg-font-size")) || Number.parseFloat(style.fontSize) || 13;
-        const colors = Object.fromEntries(Object.entries(colorTokens).map(([key, token]) => [key, color(token)]));
-        return {
-            ...colors,
-            fontFamily,
-            fontSize,
-            font: `${fontSize}px ${fontFamily}`,
-            headerFont: `600 ${fontSize}px ${fontFamily}`,
-            smallFont: `${Math.max(9, fontSize - 2)}px ${fontFamily}`,
-        };
-    }
-    finally {
-        probe.remove();
-    }
-}
-/** Reads a length custom property in pixels, or `fallback`. */
-export function cssLength(root, token, fallback) {
-    const value = Number.parseFloat(getComputedStyle(root).getPropertyValue(token));
-    return Number.isFinite(value) && value > 0 ? value : fallback;
-}
-//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AA4BA,MAAM,WAAW,GAGb;IACF,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,gBAAgB,EAAE,gBAAgB;IAClC,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,uBAAuB;IACrC,gBAAgB,EAAE,gBAAgB;IAClC,UAAU,EAAE,gBAAgB;IAC5B,cAAc,EAAE,qBAAqB;IACrC,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE,kBAAkB;IAC9B,SAAS,EAAE,mBAAmB;IAC9B,eAAe,EAAE,uBAAuB;IACxC,YAAY,EAAE,oBAAoB;IAClC,MAAM,EAAE,aAAa;IACrB,QAAQ,EAAE,cAAc;IACxB,WAAW,EAAE,kBAAkB;IAC/B,KAAK,EAAE,eAAe;IACtB,KAAK,EAAE,eAAe;CACvB,CAAC;AAEF,gHAAgH;AAChH,MAAM,UAAU,YAAY,CAAC,IAAiB;IAC5C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7C,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,CAAC;QACH,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE;YAC9B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,KAAK,GAAG,CAAC;YACpC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACvC,CAAC,CAAC;QACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,UAAU,GAAG,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,UAAU,IAAI,uBAAuB,CAAC;QACpH,MAAM,QAAQ,GACZ,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACzG,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAGvG,CAAC;QACF,OAAO;YACL,GAAG,MAAM;YACT,UAAU;YACV,QAAQ;YACR,IAAI,EAAE,GAAG,QAAQ,MAAM,UAAU,EAAE;YACnC,UAAU,EAAE,OAAO,QAAQ,MAAM,UAAU,EAAE;YAC7C,SAAS,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,GAAG,CAAC,CAAC,MAAM,UAAU,EAAE;SAC1D,CAAC;IACJ,CAAC;YAAS,CAAC;QACT,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;AACH,CAAC;AAED,+DAA+D;AAC/D,MAAM,UAAU,SAAS,CAAC,IAAiB,EAAE,KAAa,EAAE,QAAgB;IAC1E,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAChF,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;AAChE,CAAC"}

package/src/components/bars.tsx

@@ -1,179 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import type { GridController } from "../controller.js";
-import { countFormat, filterLabel, numberFormat } from "../labels.js";
-import type { Messages } from "../messages.js";
-
-/** Search box, active sort and filters, row count and the columns button. */
-export function Toolbar({
-  controller,
-  messages,
-  onColumns,
-}: {
-  controller: GridController;
-  messages: Messages;
-  onColumns: (button: HTMLButtonElement) => void;
-}) {
-  const query = controller.query;
-  const [search, setSearch] = useState(query.search ?? "");
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const applied = query.search ?? "";
-  const lastApplied = useRef(applied);
-  // Follow changes made elsewhere (for example "Clear all").
-  if (applied !== lastApplied.current) {
-    lastApplied.current = applied;
-    if (search !== applied) setSearch(applied);
-  }
-  useEffect(() => () => clearTimeout(timer.current), []);
-
-  const ready = controller.info?.status === "ready";
-  const capabilities = controller.info?.capabilities;
-  const count = countFormat(controller.options.locale);
-  const filters = query.filters ?? [];
-  const sort = query.sort ?? [];
-  const total = controller.totalRows;
-  const filtered = controller.view.id !== null && (filters.length > 0 || Boolean(query.search?.trim()));
-  let rows: string;
-  if (controller.info?.status === "loading") {
-    const progress = controller.info.progress;
-    rows =
-      progress !== null && progress !== undefined && progress > 0
-        ? messages.loadingProgress(`${Math.round(progress * 100)}%`)
-        : messages.loadingRows(count(controller.readableRows));
-  } else if (filtered && total !== null) {
-    rows = messages.rowsOf(count(controller.rowCount), count(total));
-  } else {
-    rows = messages.rows(count(controller.rowCount));
-  }
-
-  function change(value: string) {
-    setSearch(value);
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => controller.setSearch(value), 350);
-  }
-
-  return (
-    <div className="vg-toolbar">
-      <input
-        type="search"
-        className="vg-input vg-toolbar__search"
-        placeholder={messages.searchPlaceholder}
-        aria-label={messages.search}
-        value={search}
-        disabled={!ready || !capabilities?.search}
-        onChange={(event) => change(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter") {
-            clearTimeout(timer.current);
-            controller.setSearch(search);
-          }
-        }}
-      />
-      {sort.length > 0 && (
-        <span className="vg-chip">
-          <span>
-            {messages.sortedBy(
-              sort
-                .map(
-                  (key) =>
-                    `${controller.schema[key.column]?.name ?? key.column} ${key.direction === "asc" ? "↑" : "↓"}`,
-                )
-                .join(", "),
-            )}
-          </span>
-          <button
-            type="button"
-            className="vg-chip__remove"
-            aria-label={messages.clearSort}
-            title={messages.clearSort}
-            onClick={() => controller.clearSort()}
-          >
-            ×
-          </button>
-        </span>
-      )}
-      {filters.map((filter) => {
-        const label = filterLabel(filter, controller.schema[filter.column], controller.formatter, messages);
-        return (
-          <span className="vg-chip vg-chip--filter" key={filter.column}>
-            <span title={label}>{label}</span>
-            <button
-              type="button"
-              className="vg-chip__remove"
-              aria-label={messages.removeFilter(label)}
-              title={messages.removeFilter(label)}
-              onClick={() => controller.setFilter(filter.column, null)}
-            >
-              ×
-            </button>
-          </span>
-        );
-      })}
-      {(filters.length > 0 || Boolean(query.search?.trim())) && (
-        <button type="button" className="vg-button vg-button--small" onClick={() => controller.clearFilters()}>
-          {messages.clearFilters}
-        </button>
-      )}
-      <span className="vg-toolbar__spacer" />
-      <span className="vg-toolbar__count" aria-live="polite">
-        {controller.viewPending ? messages.buildingView : rows}
-      </span>
-      <button
-        type="button"
-        className="vg-button vg-button--small"
-        onClick={(event) => onColumns(event.currentTarget)}
-        disabled={!controller.info}
-      >
-        {messages.columns}
-      </button>
-    </div>
-  );
-}
-
-/** The active cell and, for multi-cell selections, count, sum, average, minimum and maximum. */
-export function StatusBar({ controller, messages }: { controller: GridController; messages: Messages }) {
-  const count = countFormat(controller.options.locale);
-  const number = numberFormat(controller.options.locale);
-  const active = controller.selection.active;
-  const schema = controller.columnSchema(active.col);
-  const summary = controller.summary;
-  const label = controller.rowLabel(active.row);
-  const notes = (controller.info?.notes ?? []).map((note) => messages.notes[note] ?? note);
-  return (
-    <div className="vg-statusbar">
-      {controller.rowCount > 0 && schema && (
-        <span className="vg-statusbar__cell">
-          {messages.cell(count(active.row + 1), schema.name)}
-          {controller.view.id !== null && label !== null && (
-            <span className="vg-statusbar__muted"> · {messages.originalRow(count(label))}</span>
-          )}
-        </span>
-      )}
-      {notes.length > 0 && <span className="vg-statusbar__note">{notes.join(" ")}</span>}
-      <span className="vg-toolbar__spacer" />
-      {summary && (
-        <span className="vg-statusbar__summary">
-          <span>
-            {messages.summary.count}: {count(summary.count)}
-          </span>
-          {summary.numericCount > 0 && summary.sum !== null && (
-            <>
-              <span>
-                {messages.summary.average}: {number(summary.average ?? 0)}
-              </span>
-              <span>
-                {messages.summary.min}: {number(summary.min ?? 0)}
-              </span>
-              <span>
-                {messages.summary.max}: {number(summary.max ?? 0)}
-              </span>
-              <span>
-                {messages.summary.sum}: {number(summary.sum)}
-              </span>
-            </>
-          )}
-        </span>
-      )}
-      {!summary && controller.summaryPending && <span className="vg-statusbar__muted">…</span>}
-    </div>
-  );
-}

package/src/components/cell-inspector.tsx

@@ -1,70 +0,0 @@
-import { useEffect, useState } from "react";
-import { type CellValue, type ColumnSchema, isAbortError, plainText } from "vastgrid-core";
-import type { Messages } from "../messages.js";
-
-/** Pretty-prints JSON text; returns null when the text is not a JSON object or array. */
-function prettyJson(text: string) {
-  const trimmed = text.trim();
-  if (!(trimmed.startsWith("{") || trimmed.startsWith("["))) return null;
-  try {
-    return JSON.stringify(JSON.parse(trimmed), null, 2);
-  } catch {
-    return null;
-  }
-}
-
-/** The full value of a cell, with line breaks, JSON formatting and a copy button. */
-export function CellInspector({
-  schema,
-  messages,
-  location,
-  load,
-  onCopy,
-}: {
-  schema: ColumnSchema;
-  messages: Messages;
-  location: string;
-  load: (signal: AbortSignal) => Promise<CellValue>;
-  onCopy: (text: string) => void;
-}) {
-  const [value, setValue] = useState<{ text: string; isNull: boolean } | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const controller = new AbortController();
-    load(controller.signal)
-      .then((result) => {
-        if (!controller.signal.aborted) setValue({ text: plainText(result), isNull: result === null });
-      })
-      .catch((cause: unknown) => {
-        if (controller.signal.aborted || isAbortError(cause)) return;
-        setError(cause instanceof Error ? cause.message : String(cause));
-      });
-    return () => controller.abort();
-  }, [load]);
-
-  const json = value ? prettyJson(value.text) : null;
-  return (
-    <div className="vg-inspector">
-      <p className="vg-panel__title">
-        {schema.name}
-        <span className="vg-panel__muted">
-          {" "}
-          · {location} · {messages.types[schema.type] ?? schema.type}
-        </span>
-      </p>
-      {error && <p className="vg-panel__error">{error}</p>}
-      {!value && !error && <p className="vg-panel__muted">{messages.loading}</p>}
-      {value && (
-        <pre className="vg-inspector__value" data-null={value.isNull || undefined}>
-          {value.isNull ? "NULL" : (json ?? value.text)}
-        </pre>
-      )}
-      <div className="vg-panel__actions">
-        <button type="button" className="vg-button" disabled={!value} onClick={() => value && onCopy(value.text)}>
-          {messages.copy}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/columns-panel.tsx

@@ -1,59 +0,0 @@
-import { useState } from "react";
-import type { ColumnSchema } from "vastgrid-core";
-import type { ColumnState } from "../controller.js";
-import type { Messages } from "../messages.js";
-
-/** Shows and hides columns. */
-export function ColumnsPanel({
-  columns,
-  schema,
-  messages,
-  onToggle,
-  onShowAll,
-}: {
-  columns: ColumnState[];
-  schema: ColumnSchema[];
-  messages: Messages;
-  onToggle: (index: number, hidden: boolean) => void;
-  onShowAll: () => void;
-}) {
-  const [search, setSearch] = useState("");
-  const needle = search.trim().toLowerCase();
-  const visibleCount = columns.filter((column) => !column.hidden).length;
-  const shown = columns.filter(
-    (column) => !needle || (schema[column.index]?.name ?? "").toLowerCase().includes(needle),
-  );
-  return (
-    <div className="vg-columns">
-      <p className="vg-panel__title">{messages.columns}</p>
-      <input
-        type="search"
-        className="vg-input"
-        placeholder={messages.search}
-        aria-label={messages.search}
-        value={search}
-        data-autofocus
-        onChange={(event) => setSearch(event.target.value)}
-      />
-      <div className="vg-filter__values">
-        {shown.map((column) => (
-          <label className="vg-check" key={column.index}>
-            <input
-              type="checkbox"
-              checked={!column.hidden}
-              disabled={!column.hidden && visibleCount <= 1}
-              onChange={(event) => onToggle(column.index, !event.target.checked)}
-            />
-            <span className="vg-check__label">{schema[column.index]?.name}</span>
-            <span className="vg-check__count">{messages.types[schema[column.index]?.type ?? "unknown"]}</span>
-          </label>
-        ))}
-      </div>
-      <div className="vg-panel__actions">
-        <button type="button" className="vg-button" onClick={onShowAll} disabled={visibleCount === columns.length}>
-          {messages.showAllColumns}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/components/filter-panel.tsx

@@ -1,290 +0,0 @@
-import { type FormEvent, useEffect, useId, useMemo, useState } from "react";
-import {
-  type CellValue,
-  type ColumnSchema,
-  type DistinctValues,
-  type Filter,
-  isAbortError,
-  isNumericType,
-  isTemporalType,
-  plainText,
-  type ValueFormatter,
-} from "vastgrid-core";
-import type { Messages } from "../messages.js";
-
-type Operator = keyof Messages["operators"] | "none";
-
-const numericOperators: Operator[] = ["none", "eq", "ne", "gt", "ge", "lt", "le", "between", "blank", "notBlank"];
-const textOperators: Operator[] = [
-  "none",
-  "contains",
-  "notContains",
-  "startsWith",
-  "endsWith",
-  "equals",
-  "notEquals",
-  "blank",
-  "notBlank",
-];
-
-const NULL_KEY = "\u0000null";
-
-function keyOf(value: CellValue) {
-  return value === null ? NULL_KEY : plainText(value);
-}
-
-function initialCondition(filter: Filter | null): { operator: Operator; first: string; second: string } {
-  if (!filter) return { operator: "none", first: "", second: "" };
-  switch (filter.type) {
-    case "compare":
-      return { operator: filter.op, first: plainText(filter.value), second: "" };
-    case "between":
-      return {
-        operator: "between",
-        first: filter.min === undefined ? "" : plainText(filter.min),
-        second: filter.max === undefined ? "" : plainText(filter.max),
-      };
-    case "text":
-      return { operator: filter.op, first: filter.value, second: "" };
-    case "blank":
-      return { operator: filter.blank ? "blank" : "notBlank", first: "", second: "" };
-    default:
-      return { operator: "none", first: "", second: "" };
-  }
-}
-
-/** Converts typed text for a numeric column into a number when it is one. */
-function comparable(text: string, numeric: boolean): string | number {
-  if (numeric) {
-    const number = Number(text.replaceAll(",", ""));
-    if (text.trim() !== "" && Number.isFinite(number)) return number;
-  }
-  return text;
-}
-
-/**
- * The filter for one column, in the manner of spreadsheet filters: a searchable list of values with
- * check boxes, or a condition (comparison, text match, range, blank).
- */
-export function FilterPanel({
-  column,
-  schema,
-  filter,
-  messages,
-  formatter,
-  count,
-  load,
-  onApply,
-}: {
-  column: number;
-  schema: ColumnSchema;
-  filter: Filter | null;
-  messages: Messages;
-  formatter: ValueFormatter;
-  count: (value: number) => string;
-  load: (search: string, signal: AbortSignal) => Promise<DistinctValues> | null;
-  onApply: (filter: Filter | null) => void;
-}) {
-  const id = useId();
-  const numeric = isNumericType(schema.type) || isTemporalType(schema.type);
-  const operators = numeric
-    ? numericOperators
-    : schema.type === "boolean"
-      ? (["none", "blank", "notBlank"] as Operator[])
-      : textOperators;
-  const [search, setSearch] = useState("");
-  const [values, setValues] = useState<DistinctValues | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  // Untouched values follow `base`; `toggled` holds the values the user changed.
-  const [base, setBase] = useState(() => !(filter?.type === "values" && !filter.exclude));
-  const [toggled, setToggled] = useState<Map<string, CellValue>>(() => {
-    if (filter?.type !== "values") return new Map();
-    return new Map(filter.values.map((value) => [keyOf(value), value]));
-  });
-  const [condition, setCondition] = useState(() => initialCondition(filter));
-
-  useEffect(() => {
-    const controller = new AbortController();
-    const timer = setTimeout(
-      () => {
-        setLoading(true);
-        const request = load(search, controller.signal);
-        if (!request) {
-          setLoading(false);
-          return;
-        }
-        request
-          .then((result) => {
-            if (controller.signal.aborted) return;
-            setValues(result);
-            setError(null);
-            setLoading(false);
-          })
-          .catch((cause: unknown) => {
-            if (controller.signal.aborted || isAbortError(cause)) return;
-            setError(cause instanceof Error ? cause.message : String(cause));
-            setLoading(false);
-          });
-      },
-      search ? 250 : 0,
-    );
-    return () => {
-      clearTimeout(timer);
-      controller.abort();
-    };
-  }, [load, search]);
-
-  const isChecked = (value: CellValue) => (toggled.has(keyOf(value)) ? !base : base);
-  const shown = values?.values ?? [];
-  const allChecked = toggled.size === 0 ? base : shown.every((item) => isChecked(item.value)) && base;
-
-  function toggle(value: CellValue) {
-    setToggled((current) => {
-      const next = new Map(current);
-      const key = keyOf(value);
-      if (next.has(key)) next.delete(key);
-      else next.set(key, value);
-      return next;
-    });
-  }
-
-  function selectAll(checked: boolean) {
-    setBase(checked);
-    setToggled(new Map());
-  }
-
-  const valuesFilter = useMemo((): Filter | null => {
-    const list = [...toggled.values()];
-    if (base && list.length === 0) return null;
-    if (base) return { type: "values", column, values: list, exclude: true };
-    return { type: "values", column, values: list };
-  }, [base, toggled, column]);
-
-  function conditionFilter(): Filter | null {
-    const { operator, first, second } = condition;
-    switch (operator) {
-      case "none":
-        return null;
-      case "blank":
-      case "notBlank":
-        return { type: "blank", column, blank: operator === "blank" };
-      case "between":
-        if (!first && !second) return null;
-        return {
-          type: "between",
-          column,
-          ...(first ? { min: comparable(first, isNumericType(schema.type)) } : {}),
-          ...(second ? { max: comparable(second, isNumericType(schema.type)) } : {}),
-        };
-      case "eq":
-      case "ne":
-      case "lt":
-      case "le":
-      case "gt":
-      case "ge":
-        return first === ""
-          ? null
-          : { type: "compare", column, op: operator, value: comparable(first, isNumericType(schema.type)) };
-      default:
-        return first === "" ? null : { type: "text", column, op: operator, value: first };
-    }
-  }
-
-  function apply(event: FormEvent) {
-    event.preventDefault();
-    onApply(condition.operator === "none" ? valuesFilter : conditionFilter());
-  }
-
-  const needsValue =
-    condition.operator !== "none" && condition.operator !== "blank" && condition.operator !== "notBlank";
-
-  return (
-    <form className="vg-filter" onSubmit={apply}>
-      <p className="vg-panel__title" id={`${id}-title`}>
-        {messages.filterBy(schema.name)}
-      </p>
-      <input
-        type="search"
-        className="vg-input"
-        placeholder={messages.valuesSearch}
-        aria-label={messages.valuesSearch}
-        value={search}
-        data-autofocus
-        onChange={(event) => setSearch(event.target.value)}
-        disabled={condition.operator !== "none"}
-      />
-      <fieldset className="vg-filter__values" aria-labelledby={`${id}-title`} aria-busy={loading}>
-        {!search && (
-          <label className="vg-check vg-check--all">
-            <input
-              type="checkbox"
-              checked={allChecked}
-              onChange={(event) => selectAll(event.target.checked)}
-              disabled={condition.operator !== "none"}
-            />
-            <span>{messages.selectAll}</span>
-          </label>
-        )}
-        {shown.map((item) => (
-          <label className="vg-check" key={keyOf(item.value)}>
-            <input
-              type="checkbox"
-              checked={isChecked(item.value)}
-              onChange={() => toggle(item.value)}
-              disabled={condition.operator !== "none"}
-            />
-            <span className="vg-check__label">
-              {item.value === null || item.value === "" ? messages.blank : formatter.format(item.value, schema.type)}
-            </span>
-            <span className="vg-check__count">{count(item.count)}</span>
-          </label>
-        ))}
-        {loading && shown.length === 0 && <p className="vg-panel__muted">{messages.loading}</p>}
-        {error && <p className="vg-panel__error">{error}</p>}
-      </fieldset>
-      {values?.truncated && <p className="vg-panel__muted">{messages.valuesTruncated(count(shown.length))}</p>}
-      <fieldset className="vg-filter__condition">
-        <legend>{messages.condition}</legend>
-        <select
-          className="vg-input"
-          aria-label={messages.condition}
-          value={condition.operator}
-          onChange={(event) => setCondition({ ...condition, operator: event.target.value as Operator })}
-        >
-          {operators.map((operator) => (
-            <option key={operator} value={operator}>
-              {operator === "none" ? messages.conditionNone : messages.operators[operator]}
-            </option>
-          ))}
-        </select>
-        {needsValue && (
-          <input
-            className="vg-input"
-            aria-label={condition.operator === "between" ? messages.minimum : messages.value}
-            placeholder={condition.operator === "between" ? messages.minimum : messages.value}
-            value={condition.first}
-            onChange={(event) => setCondition({ ...condition, first: event.target.value })}
-          />
-        )}
-        {condition.operator === "between" && (
-          <input
-            className="vg-input"
-            aria-label={messages.maximum}
-            placeholder={messages.maximum}
-            value={condition.second}
-            onChange={(event) => setCondition({ ...condition, second: event.target.value })}
-          />
-        )}
-      </fieldset>
-      <div className="vg-panel__actions">
-        <button type="button" className="vg-button" onClick={() => onApply(null)}>
-          {messages.clear}
-        </button>
-        <button type="submit" className="vg-button vg-button--primary">
-          {messages.apply}
-        </button>
-      </div>
-    </form>
-  );
-}