@jielga/tmdatagrid 0.5.0 → 1.0.0

package/src/tmdatagrid/components/TMDataGridToolbar.tsx

@@ -11,7 +11,11 @@ import { openColumnFilter } from "../useTMDataGrid";
 
 /** Row above the grid. Compose it from the pieces below, or anything else. */
 export function TMDataGridToolbar({ children }: { children?: ReactNode }) {
-  return <div className={classes.toolbar}>{children}</div>;
+  return (
+    <div data-dg-part="toolbar" className={classes.toolbar}>
+      {children}
+    </div>
+  );
 }
 
 /** Pushes the following toolbar items to the right. */
@@ -39,7 +43,7 @@ export function TMDataGridToolbarSpacer() {
 export function TMDataGridLoadingIndicator() {
   const { table, labels } = useTMDataGridContext();
   if (table.options.meta?.loading !== true) return null;
-  return <Loader size="xs" aria-label={labels.loading} />;
+  return <Loader size="xs" data-dg-part="loading" aria-label={labels.loading} />;
 }
 
 /**
@@ -52,7 +56,7 @@ export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
 
   if (children !== undefined) {
     return (
-      <Text size={controlSize} c="dimmed">
+      <Text size={controlSize} c="dimmed" data-dg-part="summary-count">
         {children}
       </Text>
     );
@@ -64,7 +68,7 @@ export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
     table.getPreFilteredRowModel().rows.length;
 
   return (
-    <Text size={controlSize} c="dimmed">
+    <Text size={controlSize} c="dimmed" data-dg-part="summary-count">
       {shown} / {total}
     </Text>
   );
@@ -97,6 +101,7 @@ export function TMDataGridColumnsButton() {
             color="gray"
             size={controlSize}
             aria-label={labels.manageColumns}
+            data-dg-part="columns-button"
             onClick={ui.actions.toggleColumnsPanel}
           >
             <BurgerIcon size={18} stroke={1.6} />
@@ -135,9 +140,9 @@ export function TMDataGridFilterButton() {
         color={activeCount > 0 ? undefined : "gray"}
         size={controlSize}
         aria-label={labels.filters}
-        // Marks this as the panel's own toggle, so the panel's click-away
-        // handler leaves it alone and the button stays a toggle.
-        data-dg-filter-toggle
+        // Also what the panel's click-away handler tests for, so that a click
+        // here reads as a toggle rather than as a click outside.
+        data-dg-part="filter-button"
         onClick={() => {
           if (opened) {
             ui.actions.closeFilterPanel();

package/src/tmdatagrid/components/editors/TMDataGridBooleanEditor.tsx

@@ -0,0 +1,29 @@
+import { Checkbox } from "@mantine/core";
+import type { TMDataGridEditorArgs } from "../../core/editEngine";
+import { getColumnLabel } from "../../core/columnUtils";
+import { useTMDataGridContext } from "../../TMDataGridContext";
+import { useFieldError, useFieldValue } from "./editorShared";
+
+/** The built-in editor for `meta.type: "boolean"` — a focused checkbox. */
+export function TMDataGridBooleanEditor({
+  field,
+  autoFocus,
+  column,
+  size,
+}: TMDataGridEditorArgs) {
+  const { labels } = useTMDataGridContext();
+  const value = useFieldValue(field);
+  const error = useFieldError(field);
+  return (
+    <Checkbox
+      size={size}
+      autoFocus={autoFocus}
+      aria-label={labels.editCell(getColumnLabel(column))}
+      data-dg-part="editor-input"
+      checked={value === true}
+      onChange={(event) => field.handleChange(event.currentTarget.checked)}
+      onBlur={field.handleBlur}
+      error={error}
+    />
+  );
+}

package/src/tmdatagrid/components/editors/TMDataGridDateEditor.tsx

@@ -0,0 +1,57 @@
+import { TextInput } from "@mantine/core";
+import { useRef } from "react";
+import type { TMDataGridEditorArgs } from "../../core/editEngine";
+import { getColumnLabel } from "../../core/columnUtils";
+import { useTMDataGridContext } from "../../TMDataGridContext";
+import { useFieldError, useFieldValue } from "./editorShared";
+
+/**
+ * The built-in editor for `meta.type: "date"` — the native
+ * `<input type="date">` styled by Mantine, no `@mantine/dates` involved. A
+ * consumer wanting a real picker plugs one in through `meta.editor`.
+ */
+export function TMDataGridDateEditor({
+  field,
+  autoFocus,
+  column,
+  size,
+}: TMDataGridEditorArgs) {
+  const { labels } = useTMDataGridContext();
+  const value = useFieldValue(field);
+  const error = useFieldError(field);
+  // The cell's original shape decides what the editor writes back: a `Date`
+  // cell keeps getting Dates, an ISO-string cell keeps getting strings —
+  // decided once at open, so clearing and retyping cannot flip the type.
+  const writesDates = useRef(value instanceof Date);
+
+  const text =
+    value instanceof Date
+      ? value.toLocaleDateString("sv-SE")
+      : typeof value === "string"
+        ? value.slice(0, 10)
+        : "";
+
+  return (
+    <TextInput
+      size={size}
+      w="100%"
+      autoFocus={autoFocus}
+      type="date"
+      aria-label={labels.editCell(getColumnLabel(column))}
+      data-dg-part="editor-input"
+      value={text}
+      onChange={(event) => {
+        const next = event.currentTarget.value;
+        if (next === "") {
+          field.handleChange(null);
+          return;
+        }
+        field.handleChange(
+          writesDates.current ? new Date(`${next}T00:00:00`) : next,
+        );
+      }}
+      onBlur={field.handleBlur}
+      error={error}
+    />
+  );
+}

package/src/tmdatagrid/components/editors/TMDataGridMultiSelectEditor.tsx

@@ -0,0 +1,45 @@
+import { MultiSelect } from "@mantine/core";
+import type { TMDataGridEditorArgs } from "../../core/editEngine";
+import {
+  optionsToComboboxData,
+  resolveColumnOptions,
+} from "../../core/columnOptions";
+import { getColumnLabel } from "../../core/columnUtils";
+import { useTMDataGridContext } from "../../TMDataGridContext";
+import { useFieldError, useFieldValue } from "./editorShared";
+
+/**
+ * The built-in editor for `meta.type: "multiSelect"` — cells holding string
+ * arrays. Never commits on pick: building a set takes several, so the commit
+ * stays on Enter/blur like a text edit.
+ */
+export function TMDataGridMultiSelectEditor({
+  field,
+  autoFocus,
+  column,
+  row,
+  table,
+  size,
+}: TMDataGridEditorArgs) {
+  const { labels } = useTMDataGridContext();
+  const value = useFieldValue(field);
+  const error = useFieldError(field);
+  return (
+    <MultiSelect
+      size={size}
+      w="100%"
+      autoFocus={autoFocus}
+      searchable
+      comboboxProps={{ withinPortal: false }}
+      aria-label={labels.editCell(getColumnLabel(column))}
+      data-dg-part="editor-input"
+      data={optionsToComboboxData(
+        resolveColumnOptions({ table, column, row, fallback: "faceted" }),
+      )}
+      value={Array.isArray(value) ? value.map(String) : []}
+      onChange={(next) => field.handleChange(next)}
+      onBlur={field.handleBlur}
+      error={error}
+    />
+  );
+}

package/src/tmdatagrid/components/editors/TMDataGridNumberEditor.tsx

@@ -0,0 +1,38 @@
+import { NumberInput } from "@mantine/core";
+import type { TMDataGridEditorArgs } from "../../core/editEngine";
+import { getColumnLabel } from "../../core/columnUtils";
+import { useTMDataGridContext } from "../../TMDataGridContext";
+import { selectAllOnFocus, useFieldError, useFieldValue } from "./editorShared";
+
+/** The built-in editor for `meta.type: "number"`. */
+export function TMDataGridNumberEditor({
+  field,
+  autoFocus,
+  column,
+  size,
+}: TMDataGridEditorArgs) {
+  const { labels } = useTMDataGridContext();
+  const value = useFieldValue(field);
+  const error = useFieldError(field);
+  return (
+    <NumberInput
+      size={size}
+      w="100%"
+      autoFocus={autoFocus}
+      onFocus={selectAllOnFocus}
+      hideControls
+      aria-label={labels.editCell(getColumnLabel(column))}
+      data-dg-part="editor-input"
+      value={typeof value === "number" ? value : ""}
+      onChange={(next) =>
+        // Mantine reports a number once one can be parsed, and a string while
+        // it cannot. An empty cell is `null` — the honest "no value".
+        field.handleChange(
+          typeof next === "number" ? next : next === "" ? null : Number(next),
+        )
+      }
+      onBlur={field.handleBlur}
+      error={error}
+    />
+  );
+}

package/src/tmdatagrid/components/editors/TMDataGridSelectEditor.tsx

@@ -0,0 +1,53 @@
+import { Select } from "@mantine/core";
+import type { TMDataGridEditorArgs } from "../../core/editEngine";
+import {
+  optionsToComboboxData,
+  resolveColumnOptions,
+} from "../../core/columnOptions";
+import { getColumnLabel } from "../../core/columnUtils";
+import { useTMDataGridContext } from "../../TMDataGridContext";
+import { useFieldError, useFieldValue } from "./editorShared";
+
+/**
+ * The built-in editor for `meta.type: "select"`. Options come from the same
+ * `meta.options` the filter panel reads — with the row in hand, so a
+ * function source can depend on the record being edited.
+ */
+export function TMDataGridSelectEditor({
+  field,
+  autoFocus,
+  column,
+  row,
+  table,
+  size,
+  commit,
+}: TMDataGridEditorArgs) {
+  const { labels, features } = useTMDataGridContext();
+  const value = useFieldValue(field);
+  const error = useFieldError(field);
+  return (
+    <Select
+      size={size}
+      w="100%"
+      autoFocus={autoFocus}
+      searchable
+      // Inside the cell, so picking an option is not a click-away — the same
+      // reason the filter panel keeps its dropdowns unportalled.
+      comboboxProps={{ withinPortal: false }}
+      aria-label={labels.editCell(getColumnLabel(column))}
+      data-dg-part="editor-input"
+      data={optionsToComboboxData(
+        resolveColumnOptions({ table, column, row, fallback: "faceted" }),
+      )}
+      value={typeof value === "string" ? value : null}
+      onChange={(next) => {
+        field.handleChange(next);
+        // Sheets semantics under `"cell"`: a pick is the edit, so it commits.
+        // The confirming modes leave the draft for their explicit commit.
+        if (next !== null && features.editMode === "cell") void commit();
+      }}
+      onBlur={field.handleBlur}
+      error={error}
+    />
+  );
+}

package/src/tmdatagrid/components/editors/TMDataGridStringEditor.tsx

@@ -0,0 +1,31 @@
+import { TextInput } from "@mantine/core";
+import type { TMDataGridEditorArgs } from "../../core/editEngine";
+import { getColumnLabel } from "../../core/columnUtils";
+import { useTMDataGridContext } from "../../TMDataGridContext";
+import { selectAllOnFocus, useFieldError, useFieldValue } from "./editorShared";
+
+/** The built-in editor for `meta.type: "string"` (and the default). */
+export function TMDataGridStringEditor({
+  field,
+  autoFocus,
+  column,
+  size,
+}: TMDataGridEditorArgs) {
+  const { labels } = useTMDataGridContext();
+  const value = useFieldValue(field);
+  const error = useFieldError(field);
+  return (
+    <TextInput
+      size={size}
+      w="100%"
+      autoFocus={autoFocus}
+      onFocus={selectAllOnFocus}
+      aria-label={labels.editCell(getColumnLabel(column))}
+      data-dg-part="editor-input"
+      value={typeof value === "string" ? value : ""}
+      onChange={(event) => field.handleChange(event.currentTarget.value)}
+      onBlur={field.handleBlur}
+      error={error}
+    />
+  );
+}

package/src/tmdatagrid/components/editors/editorShared.ts

@@ -0,0 +1,48 @@
+import { useStore } from "@tanstack/react-form";
+import type { TMDataGridEditField } from "../../core/editEngine";
+
+/**
+ * The first error as text, whatever shape the validator produced — TanStack
+ * Form keeps errors verbatim, so a Zod issue arrives as `{ message }`, a
+ * plain function's return arrives as it was, and a form-level schema's
+ * pathless issues arrive keyed under an empty path (`{ "": [issues] }`).
+ * This digs until it finds a message.
+ */
+export function firstErrorText(error: unknown): string | undefined {
+  if (error === null || error === undefined) return undefined;
+  if (typeof error === "string") return error;
+  if (Array.isArray(error)) {
+    for (const entry of error) {
+      const text = firstErrorText(entry);
+      if (text !== undefined) return text;
+    }
+    return undefined;
+  }
+  if (typeof error === "object") {
+    const message = (error as { message?: unknown }).message;
+    if (typeof message === "string") return message;
+    for (const value of Object.values(error)) {
+      const text = firstErrorText(value);
+      if (text !== undefined) return text;
+    }
+  }
+  return undefined;
+}
+
+/** The field's live value — one subscription, on the field's own store. */
+export function useFieldValue(field: TMDataGridEditField): unknown {
+  return useStore(field.store, (state) => state.value as unknown);
+}
+
+/** The field's first error, for the Mantine input's `error` prop. */
+export function useFieldError(field: TMDataGridEditField): string | undefined {
+  return useStore(field.store, (state) =>
+    firstErrorText(state.meta.errors as ReadonlyArray<unknown>),
+  );
+}
+
+/** Select-all on focus — F2/Enter open with the value ready to replace. */
+export function selectAllOnFocus(event: { currentTarget: unknown }): void {
+  const target = event.currentTarget;
+  if (target instanceof HTMLInputElement) target.select();
+}

package/src/tmdatagrid/components/filters/DgAutocompleteFilter.tsx

@@ -0,0 +1,46 @@
+import { Autocomplete } from "@mantine/core";
+import { resolveColumnOptions } from "../../core/columnOptions";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+import {
+  operatorNeedsValue,
+  operatorTakesArrayValue,
+  operatorTakesRangeValue,
+} from "../../core/filterOperators";
+import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
+
+/**
+ * A built-in `meta.filterControl` for text-shaped columns: a free-text input
+ * that also offers the values present in the data (or the column's declared
+ * `meta.options`) as suggestions. Set or range operators fall back to the
+ * standard input.
+ */
+export function DgAutocompleteFilter(args: TMDataGridFilterControlArgs) {
+  const { column, table, operator, value, onChange, options, size, labels } =
+    args;
+  if (operatorTakesArrayValue(operator) || operatorTakesRangeValue(operator)) {
+    return <TMDataGridFilterValueInput {...args} />;
+  }
+  const needsValue = operatorNeedsValue(operator);
+  // `options` arrives pre-resolved only for declared or select-shaped
+  // columns; on a plain string column the suggestions come from the faceted
+  // values, resolved here.
+  const suggestions =
+    options.length > 0
+      ? options
+      : resolveColumnOptions({ table, column, fallback: "faceted" });
+
+  return (
+    <Autocomplete
+      label={labels.filterValue}
+      size={size}
+      w={180}
+      comboboxProps={{ withinPortal: false }}
+      disabled={!needsValue}
+      placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+      data={suggestions.map((option) => option.value)}
+      limit={20}
+      value={needsValue && typeof value === "string" ? value : ""}
+      onChange={onChange}
+    />
+  );
+}

package/src/tmdatagrid/components/filters/DgDateRangeFilter.tsx

@@ -0,0 +1,43 @@
+import { Group, TextInput } from "@mantine/core";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+import { operatorTakesRangeValue } from "../../core/filterOperators";
+import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
+
+/**
+ * A built-in `meta.filterControl` for `date` columns: a From/To pair of
+ * native date inputs writing the `between` pair — no `@mantine/dates`
+ * involved, like the built-in date editor. Pair it with
+ * `meta.defaultFilterOperator: "between"`; any non-range operator falls back
+ * to the standard input.
+ */
+export function DgDateRangeFilter(args: TMDataGridFilterControlArgs) {
+  const { operator, value, onChange, size, labels } = args;
+  if (!operatorTakesRangeValue(operator)) {
+    return <TMDataGridFilterValueInput {...args} />;
+  }
+
+  const pair: [string, string] = Array.isArray(value)
+    ? [String(value[0] ?? ""), String(value[1] ?? "")]
+    : ["", ""];
+
+  return (
+    <Group gap={4} wrap="nowrap" align="flex-start">
+      <TextInput
+        label={labels.filterFrom}
+        size={size}
+        w={88}
+        type="date"
+        value={pair[0]}
+        onChange={(event) => onChange([event.currentTarget.value, pair[1]])}
+      />
+      <TextInput
+        label={labels.filterTo}
+        size={size}
+        w={88}
+        type="date"
+        value={pair[1]}
+        onChange={(event) => onChange([pair[0], event.currentTarget.value])}
+      />
+    </Group>
+  );
+}

package/src/tmdatagrid/components/filters/DgRangeSliderFilter.tsx

@@ -0,0 +1,52 @@
+import { Input, RangeSlider } from "@mantine/core";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+import { operatorTakesRangeValue } from "../../core/filterOperators";
+import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
+
+/**
+ * A built-in `meta.filterControl` for `number` columns: a range slider whose
+ * bounds are seeded from the values present in the data, writing the
+ * `between` pair. Pair it with `meta.defaultFilterOperator: "between"` so
+ * the filter opens on it; any non-range operator falls back to the standard
+ * input.
+ */
+export function DgRangeSliderFilter(args: TMDataGridFilterControlArgs) {
+  const { column, operator, value, onChange, size, labels } = args;
+  if (!operatorTakesRangeValue(operator)) {
+    return <TMDataGridFilterValueInput {...args} />;
+  }
+
+  // Bounds from the faceted index — the min and max actually in the data.
+  const numbers: number[] = [];
+  for (const key of column.getFacetedUniqueValues().keys()) {
+    const numeric = Number(key);
+    if (Number.isFinite(numeric)) numbers.push(numeric);
+  }
+  const min = numbers.length > 0 ? Math.min(...numbers) : 0;
+  const max = numbers.length > 0 ? Math.max(...numbers) : 100;
+
+  const pair = Array.isArray(value) ? value : ["", ""];
+  const lower = pair[0] === undefined || pair[0] === "" ? min : Number(pair[0]);
+  const upper = pair[1] === undefined || pair[1] === "" ? max : Number(pair[1]);
+
+  return (
+    <Input.Wrapper label={labels.filterValue} size={size} w={180}>
+      <RangeSlider
+        size={size}
+        mt={6}
+        min={min}
+        max={max}
+        minRange={0}
+        value={[
+          Math.min(Math.max(lower, min), max),
+          Math.min(Math.max(upper, min), max),
+        ]}
+        thumbFromLabel={labels.filterFrom}
+        thumbToLabel={labels.filterTo}
+        onChange={([nextLower, nextUpper]) =>
+          onChange([String(nextLower), String(nextUpper)])
+        }
+      />
+    </Input.Wrapper>
+  );
+}

package/src/tmdatagrid/components/filters/DgTriStateFilter.tsx

@@ -0,0 +1,38 @@
+import { Input, SegmentedControl } from "@mantine/core";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+import {
+  operatorNeedsValue,
+  operatorTakesArrayValue,
+  operatorTakesRangeValue,
+} from "../../core/filterOperators";
+import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
+
+/**
+ * A built-in `meta.filterControl` for `boolean` columns: an All / Yes / No
+ * segmented control — All clears the value, which deactivates the filter.
+ * Set or range operators fall back to the standard input.
+ */
+export function DgTriStateFilter(args: TMDataGridFilterControlArgs) {
+  const { operator, value, onChange, size, labels } = args;
+  if (operatorTakesArrayValue(operator) || operatorTakesRangeValue(operator)) {
+    return <TMDataGridFilterValueInput {...args} />;
+  }
+  const needsValue = operatorNeedsValue(operator);
+  const scalar = typeof value === "string" ? value : "";
+
+  return (
+    <Input.Wrapper label={labels.filterValue} size={size}>
+      <SegmentedControl
+        size={size}
+        disabled={!needsValue}
+        data={[
+          { value: "all", label: labels.filterAll },
+          { value: "true", label: labels.booleanTrue },
+          { value: "false", label: labels.booleanFalse },
+        ]}
+        value={scalar === "true" || scalar === "false" ? scalar : "all"}
+        onChange={(next) => onChange(next === "all" ? "" : next)}
+      />
+    </Input.Wrapper>
+  );
+}

package/src/tmdatagrid/components/filters/TMDataGridFilterValueInput.tsx

@@ -0,0 +1,122 @@
+import { Group, MultiSelect, Select, TextInput } from "@mantine/core";
+import { optionsToComboboxData } from "../../core/columnOptions";
+import { getColumnType } from "../../core/columnUtils";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+import {
+  operatorNeedsValue,
+  operatorTakesArrayValue,
+  operatorTakesRangeValue,
+} from "../../core/filterOperators";
+
+/**
+ * The built-in value control of a filter-panel row — what renders when a
+ * column declares no `meta.filterControl`. Shaped by the operator: a
+ * multi-select for the set operators, a From/To pair for `between`, a Yes/No
+ * dropdown for booleans, a typed input otherwise.
+ *
+ * Exported so a custom control can fall back to it for the operators it does
+ * not care about, instead of rebuilding them.
+ */
+export function TMDataGridFilterValueInput({
+  column,
+  operator,
+  value,
+  onChange,
+  options,
+  size,
+  labels,
+}: TMDataGridFilterControlArgs) {
+  const type = getColumnType(column);
+  const needsValue = operatorNeedsValue(operator);
+  const scalarValue = typeof value === "string" ? value : "";
+  const inputType =
+    type === "number" ? "number" : type === "date" ? "date" : "text";
+
+  if (operatorTakesRangeValue(operator)) {
+    const rangeValue: [string, string] = Array.isArray(value)
+      ? [String(value[0] ?? ""), String(value[1] ?? "")]
+      : ["", ""];
+    return (
+      // The interval's two ends. Either may stay empty — an open end — and
+      // each writes its slot of the `[min, max]` pair.
+      <Group gap={4} wrap="nowrap" align="flex-start">
+        <TextInput
+          label={labels.filterFrom}
+          size={size}
+          w={88}
+          type={inputType}
+          data-dg-part="filter-value-from"
+          value={rangeValue[0]}
+          onChange={(event) =>
+            onChange([event.currentTarget.value, rangeValue[1]])
+          }
+        />
+        <TextInput
+          label={labels.filterTo}
+          size={size}
+          w={88}
+          type={inputType}
+          data-dg-part="filter-value-to"
+          value={rangeValue[1]}
+          onChange={(event) =>
+            onChange([rangeValue[0], event.currentTarget.value])
+          }
+        />
+      </Group>
+    );
+  }
+
+  if (operatorTakesArrayValue(operator)) {
+    // The set the cell is tested against. Options come from `meta.options`;
+    // a select column that declares none still gets the values present in
+    // the data, via the faceted index.
+    return (
+      <MultiSelect
+        label={labels.filterValue}
+        size={size}
+        w={180}
+        comboboxProps={{ withinPortal: false }}
+        searchable
+        data-dg-part="filter-value"
+        data={optionsToComboboxData(options)}
+        value={Array.isArray(value) ? [...value] : []}
+        onChange={onChange}
+      />
+    );
+  }
+
+  if (type === "boolean") {
+    return (
+      <Select
+        label={labels.filterValue}
+        size={size}
+        w={180}
+        comboboxProps={{ withinPortal: false }}
+        data-dg-part="filter-value"
+        disabled={!needsValue}
+        clearable
+        placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+        data={[
+          { value: "true", label: labels.booleanTrue },
+          { value: "false", label: labels.booleanFalse },
+        ]}
+        value={needsValue && scalarValue !== "" ? scalarValue : null}
+        onChange={(next) => onChange(next ?? "")}
+      />
+    );
+  }
+
+  return (
+    <TextInput
+      label={labels.filterValue}
+      size={size}
+      w={180}
+      type={needsValue ? inputType : "text"}
+      data-dg-part="filter-value"
+      disabled={!needsValue}
+      placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+      value={needsValue ? scalarValue : ""}
+      onChange={(event) => onChange(event.currentTarget.value)}
+    />
+  );
+}