feat(DataTable): support between filter in DataTable.Filters UI (#223)

* Add temporal filters to data table demo

* Inline demo product schedule data

* Support between filter in DataTable.Filters UI

* Simplify

* Update jp labels

* Format

* fix: use async findAllByDisplayValue in between filter tests

Replace synchronous getAllByDisplayValue with findAllByDisplayValue
to avoid flaky tests when popover content renders via portal on next tick.

* fix: add aria-label to BetweenInputGroup inputs

Add aria-label attributes to each input so screen readers can
distinguish the min/max (from/to) fields.

* fix: require both min and max for between filter submission

Return undefined when either bound is missing in toAddFilterSubmittedValue,
preventing partial range objects that would cause GraphQL validation errors.

* fix: add canCommit guard to NumericFilterEditor between mode

Add validity checks and disable Apply button when either bound is
invalid, consistent with TemporalFilterEditor behavior. Update test
to expect no addFilter call when only one bound is set.

* fix: require both bounds in between filter validation

- Fix TemporalFilterEditor.canCommit to reject partial ranges (matching NumericFilterEditor)
- Fix TemporalFilterEditor.handleCommit to use || guard and build complete {min, max} object
- Fix isAddFilterDraftValueValid to require both bounds non-empty for between operator

Author: IzumiSy

packages/core/src/components/data-table/i18n.ts

@@ -50,6 +50,10 @@ export const dataTableLabels = defineI18nLabels({
     filterOperator_between: "between",
     filterOperator_in: "in",
     filterOperator_nin: "not in",
+    filterBetweenFrom: "From",
+    filterBetweenTo: "To",
+    filterBetweenMin: "Min",
+    filterBetweenMax: "Max",
 
     // Filter chip label templates
     filterChipLabel: (props: { column: string; operator: string; value: string }) =>
@@ -97,6 +101,10 @@ export const dataTableLabels = defineI18nLabels({
     filterOperator_between: "の範囲内",
     filterOperator_in: "次のいずれか",
     filterOperator_nin: "次のいずれでもない",
+    filterBetweenFrom: "開始",
+    filterBetweenTo: "終了",
+    filterBetweenMin: "最小",
+    filterBetweenMax: "最大",
 
     // Filter chip label templates (Japanese: column: value operator)
     filterChipLabel: (props: { column: string; operator: string; value: string }) =>

packages/core/src/components/data-table/toolbar.test.tsx

@@ -653,3 +653,184 @@ describe("BooleanFilterEditor", () => {
     expect(control.addFilter).toHaveBeenCalledWith("enabled", "ne", true);
   });
 });
+
+// ---------------------------------------------------------------------------
+// NumericFilterEditor — between operator (two inputs)
+// ---------------------------------------------------------------------------
+
+describe("NumericFilterEditor (between)", () => {
+  it("shows two number inputs when filter operator is between", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Count between 10 - 50/ }));
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    expect(inputs.length).toBe(2);
+    expect((inputs[0] as HTMLInputElement).value).toBe("10");
+    expect((inputs[1] as HTMLInputElement).value).toBe("50");
+  });
+
+  it("Apply button calls addFilter with min/max range object", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Count between 10 - 50/ }));
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    await user.clear(inputs[0]);
+    await user.type(inputs[0], "5");
+    await user.clear(inputs[1]);
+    await user.type(inputs[1], "100");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("count", "between", {
+      min: 5,
+      max: 100,
+    });
+  });
+
+  it("Apply button does not call addFilter when only min is set and max is empty", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Count between 10/ }));
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    // min should already be "10", max should be empty
+    expect((inputs[0] as HTMLInputElement).value).toBe("10");
+    expect((inputs[1] as HTMLInputElement).value).toBe("");
+
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).not.toHaveBeenCalled();
+  });
+
+  it("Apply button calls removeFilter when both inputs are empty", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [{ field: "count", operator: "between", value: { min: 10, max: 50 } }],
+    });
+    render(<TestFilters control={control} columns={[numberColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(screen.getByRole("button", { name: /Count between 10 - 50/ }));
+
+    const inputs = await screen.findAllByRole("spinbutton");
+    await user.clear(inputs[0]);
+    await user.clear(inputs[1]);
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("count");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// TemporalFilterEditor — between operator (two inputs)
+// ---------------------------------------------------------------------------
+
+describe("TemporalFilterEditor (between)", () => {
+  it("shows two date inputs when filter operator is between", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "createdAt",
+          operator: "between",
+          value: { min: "2025-01-01", max: "2025-12-31" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Created At between 2025-01-01 - 2025-12-31/,
+      }),
+    );
+
+    const inputs = await screen.findAllByDisplayValue(/2025/);
+    expect(inputs.length).toBe(2);
+  });
+
+  it("Apply button calls addFilter with min/max range for date between", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "createdAt",
+          operator: "between",
+          value: { min: "2025-01-01", max: "2025-12-31" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Created At between 2025-01-01 - 2025-12-31/,
+      }),
+    );
+
+    const inputs = await screen.findAllByDisplayValue(/2025/);
+    await user.clear(inputs[0]);
+    await user.type(inputs[0], "2026-03-01");
+    await user.clear(inputs[1]);
+    await user.type(inputs[1], "2026-06-30");
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.addFilter).toHaveBeenCalledWith("createdAt", "between", {
+      min: "2026-03-01",
+      max: "2026-06-30",
+    });
+  });
+
+  it("Apply button calls removeFilter when both temporal inputs are empty", async () => {
+    const user = userEvent.setup();
+    const control = makeControl({
+      filters: [
+        {
+          field: "createdAt",
+          operator: "between",
+          value: { min: "2025-01-01", max: "2025-12-31" },
+        },
+      ],
+    });
+    render(<TestFilters control={control} columns={[dateColumn]} />, {
+      wrapper,
+    });
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Created At between 2025-01-01 - 2025-12-31/,
+      }),
+    );
+
+    const inputs = await screen.findAllByDisplayValue(/2025/);
+    await user.clear(inputs[0]);
+    await user.clear(inputs[1]);
+    await user.click(screen.getByRole("button", { name: "Apply" }));
+
+    expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
+  });
+});