@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTableColumnPinning/DataTableColumnPinning.stories.tsx

@@ -170,6 +170,10 @@ function BasicPinningExample() {
                 {headerGroup.headers.map((header) => {
                   const isPinned = pinning.isPinned(header.column.id);
                   const position = pinning.getPinPosition(header.column.id);
+                  const headerLabel =
+                    typeof header.column.columnDef.header === "string"
+                      ? header.column.columnDef.header
+                      : header.column.id;
 
                   return (
                     <View
@@ -192,6 +196,11 @@ function BasicPinningExample() {
                             disabled={!isPinned && position !== "left" && !pinning.canPin("left")}
                             circular
                             variant={position === "left" ? "outlined" : undefined}
+                            aria-label={
+                              isPinned && position === "left"
+                                ? `Unpin ${headerLabel} column`
+                                : `Pin ${headerLabel} column left`
+                            }
                           />
                           <Button
                             size="$1"
@@ -200,6 +209,11 @@ function BasicPinningExample() {
                             disabled={!isPinned && position !== "right" && !pinning.canPin("right")}
                             circular
                             variant={position === "right" ? "outlined" : undefined}
+                            aria-label={
+                              isPinned && position === "right"
+                                ? `Unpin ${headerLabel} column`
+                                : `Pin ${headerLabel} column right`
+                            }
                           />
                         </XStack>
                       </XStack>

package/src/components/DataTableColumnPinning/index.tsx

@@ -1,16 +1,29 @@
-import { PushPinIcon, PushPinSlashIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PushPinIcon } from "@phosphor-icons/react";
+import {
+  MIN_PRESS_TARGET,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import type { Table as ReactTable } from "@tanstack/react-table";
 import { useCallback, useMemo, useState } from "react";
-import { Button } from "@multiplatform.one/forms";
-import { Text, View, styled } from "tamagui";
+import { Text, View, isWeb, styled } from "tamagui";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { t } from "../../shared/t";
+
+// DG-LAY-04 / SP-FIXED: the pin glyph stays small (~22px incl. padding) but the
+// press target is floored at 44×44 via hitSlop; negative margins keep header
+// row height and column flow unchanged (same pattern as ColumnHeaderFilter).
+const PIN_TRIGGER_VISUAL = 22;
+const PIN_TRIGGER_OUTSET = Math.max(0, Math.ceil((MIN_PRESS_TARGET - PIN_TRIGGER_VISUAL) / 2));
 
 interface DataTableColumnPinningProps<TData> {
   table?: ReactTable<TData>;
   onPinChange?: (columnId: string, position?: "left" | "right") => void;
   maxPinnedColumns?: number;
   allowPinning?: boolean;
+  /** Table-level disabled state (UX-011): pin buttons stay visible but inert. */
+  disabled?: boolean;
 }
 
 const StickyColumn = styled(View, {
@@ -18,14 +31,17 @@ const StickyColumn = styled(View, {
   backgroundColor: "$background",
   zIndex: 1,
   variants: {
+    // Pin buckets are named left/right (TanStack state) but anchor to the
+    // reading start/end so RTL mirrors (RTL backlog B3).
     position: {
       left: {
-        left: 0,
+        insetInlineStart: 0,
       },
       right: {
-        right: 0,
-        borderLeftWidth: 1,
-        borderRightWidth: 0,
+        insetInlineEnd: 0,
+        ...(isWeb
+          ? { borderInlineStartWidth: 1, borderInlineEndWidth: 0 }
+          : { borderStartWidth: 1, borderEndWidth: 0 }),
       },
     },
   } as const,
@@ -41,10 +57,10 @@ const PinnedIndicator = styled(View, {
   variants: {
     position: {
       left: {
-        left: 0,
+        insetInlineStart: 0,
       },
       right: {
-        right: 0,
+        insetInlineEnd: 0,
       },
     },
   } as const,
@@ -66,7 +82,7 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
     );
   }
 
-  const { onPinChange, maxPinnedColumns = 3, allowPinning = true } = props;
+  const { onPinChange, maxPinnedColumns = 3, allowPinning = true, disabled = false } = props;
 
   const { knobProps } = useResolvedKnobs();
 
@@ -147,39 +163,117 @@ export function DataTableColumnPinning<TData>(props: DataTableColumnPinningProps
     [pinnedColumns, maxPinnedColumns],
   );
 
+  /**
+   * Single-control cycle: unpinned → pinned first side → pinned other side →
+   * unpinned. Skips a side at its max; both sides maxed = no-op.
+   */
+  const cyclePin = useCallback(
+    (columnId: string, firstPosition: "left" | "right" = "left") => {
+      const currentPinning = table.getState().columnPinning || { left: [], right: [] };
+      const left = currentPinning.left || [];
+      const right = currentPinning.right || [];
+      const current = left.includes(columnId)
+        ? ("left" as const)
+        : right.includes(columnId)
+          ? ("right" as const)
+          : undefined;
+      const other = firstPosition === "left" ? ("right" as const) : ("left" as const);
+
+      const set = (next?: "left" | "right") => {
+        const newPinned = {
+          left: left.filter((id) => id !== columnId),
+          right: right.filter((id) => id !== columnId),
+        };
+        if (next) newPinned[next] = [...newPinned[next], columnId];
+        table.setColumnPinning(newPinned);
+        onPinChange?.(columnId, next);
+      };
+
+      if (current === undefined) {
+        if (canPin(firstPosition)) return set(firstPosition);
+        if (canPin(other)) return set(other);
+        return;
+      }
+      if (current === firstPosition && canPin(other)) return set(other);
+      return set(undefined);
+    },
+    [table, onPinChange, canPin],
+  );
+
   const PinButton = useCallback(
     ({ columnId, position }: { columnId: string; position?: "left" | "right" }) => {
-      const pinned = isPinned(columnId);
-      const currentPosition = getPinPosition(columnId);
-
       if (!allowPinning) return null;
 
+      const firstPosition = position || "left";
+      const other = firstPosition === "left" ? ("right" as const) : ("left" as const);
+      const currentPosition = getPinPosition(columnId);
+      const pinned = currentPosition !== undefined;
+
+      // Next action in the cycle (mirrors cyclePin) so the accessible name
+      // always announces what pressing will do. A disabled table keeps the
+      // button visible but inert (LC-40 keeps the "none" dim treatment).
+      const next: "left" | "right" | "unpin" | "none" = disabled
+        ? "none"
+        : currentPosition === undefined
+          ? canPin(firstPosition)
+            ? firstPosition
+            : canPin(other)
+              ? other
+              : "none"
+          : currentPosition === firstPosition && canPin(other)
+            ? other
+            : "unpin";
+
+      // DG-A11Y-06 / Axiom 12: names are differentiated per column and use the
+      // human column label (string header) when available, not the raw id.
+      const header = table.getColumn(columnId)?.columnDef.header;
+      const columnLabel = typeof header === "string" ? header : columnId;
+      const label =
+        next === "unpin"
+          ? t("Unpin {{column}} column", { column: columnLabel })
+          : next === "right"
+            ? t("Pin {{column}} column right", { column: columnLabel })
+            : t("Pin {{column}} column left", { column: columnLabel });
+
       return (
-        <Button
-          size={knobProps.sizeToken}
-          icon={pinned ? PushPinSlashIcon : PushPinIcon}
-          onPress={() => togglePin(columnId, position || "left")}
-          disabled={!pinned && !canPin(position || "left")}
-          variant={pinned ? "outlined" : undefined}
-          circular
-          aria-label={
-            pinned ? `Unpin column ${columnId}` : `Pin column ${columnId} ${position || "left"}`
-          }
-          {...knobProps.borderRadius}
+        <View
+          padding="$1"
+          borderRadius="$2"
+          cursor={next === "none" ? "default" : "pointer"}
+          {...pressTargetStyle()}
+          flexDirection="row"
+          alignItems="center"
+          justifyContent="center"
+          gap={2}
+          marginVertical={-PIN_TRIGGER_OUTSET}
+          marginHorizontal={-PIN_TRIGGER_OUTSET}
+          hitSlop={pressTargetHitSlop(PIN_TRIGGER_VISUAL)}
+          hoverStyle={{ backgroundColor: "$color4" }}
+          pressStyle={{ backgroundColor: "$color5" }}
+          opacity={next === "none" ? 0.4 : 1}
+          onPress={(e: any) => {
+            e?.stopPropagation?.();
+            if (next === "none") return;
+            cyclePin(columnId, firstPosition);
+          }}
+          role="button"
+          aria-label={label}
+          aria-disabled={next === "none" || undefined}
         >
-          {pinned && currentPosition && <Text fontSize="$1">{currentPosition}</Text>}
-        </Button>
+          <PushPinIcon
+            size={14}
+            color={pinned ? "var(--accentColor)" : "var(--color10)"}
+            weight={pinned ? "fill" : "regular"}
+          />
+          {pinned && currentPosition ? (
+            <Text fontSize={10} color="$color10">
+              {currentPosition === "left" ? "L" : "R"}
+            </Text>
+          ) : null}
+        </View>
       );
     },
-    [
-      isPinned,
-      getPinPosition,
-      allowPinning,
-      togglePin,
-      canPin,
-      knobProps.sizeToken,
-      knobProps.borderRadius,
-    ],
+    [allowPinning, disabled, getPinPosition, canPin, cyclePin, table],
   );
 
   const pinnedLeftColumns = useMemo(() => {

package/src/components/DataTableDateFilter/DataTableDateFilter.spec.tsx

@@ -1,8 +1,14 @@
-import { fireEvent, screen } from "@testing-library/react";
+import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import type React from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DataTableDateFilter, type DateFilterValue, applyDateFilter, useDateFilter } from "./index";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  DataTableDateFilter,
+  type DateFilterValue,
+  applyDateFilter,
+  resolveDateFilterRange,
+  useDateFilter,
+} from "./index";
 
 // Test data type
 type TestItem = {
@@ -91,15 +97,79 @@ describe("DataTableDateFilter", () => {
 });
 
 describe("DataTableDateFilter - DatePicker integration", () => {
+  // Pinned clock (Wed Aug 12 2026, local): day 15/20 exist in the current
+  // month, "This Week" spans Sun Aug 9 – Sat Aug 15, all inside August.
   beforeEach(() => {
     vi.clearAllMocks();
+    vi.setSystemTime(new Date(2026, 7, 12, 10, 0, 0));
   });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  /** Controlled harness: round-trips value like real consumers do. */
+  function ControlledFilter({
+    onChangeSpy,
+    initialValue,
+  }: {
+    onChangeSpy: (value: DateFilterValue | undefined) => void;
+    initialValue?: DateFilterValue;
+  }) {
+    const [value, setValue] = React.useState<DateFilterValue | undefined>(initialValue);
+    return (
+      <DataTableDateFilter
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          onChangeSpy(next);
+        }}
+      />
+    );
+  }
+
+  const openPanel = async (triggerText: string | RegExp = "Filter by date...") => {
+    fireEvent.click(screen.getByText(triggerText));
+    await screen.findByText("Custom Range");
+  };
+
+  /** Enabled in-month day buttons inside a calendar panel. */
+  const enabledDayButtons = (scope: ParentNode) =>
+    (Array.from(scope.querySelectorAll('button, [role="button"]')) as HTMLElement[]).filter(
+      (btn) => {
+        const text = btn.textContent?.trim() ?? "";
+        const disabled =
+          btn.hasAttribute("disabled") ||
+          btn.getAttribute("aria-disabled") === "true" ||
+          btn.hasAttribute("data-disabled");
+        return /^\d{1,2}$/.test(text) && !disabled;
+      },
+    );
+
+  /**
+   * Open the picker behind `placeholder` and click a day in its calendar.
+   * A just-closed picker panel lingers mounted (with live handlers!) until
+   * its close timer fires, so first wait until no panel is mounted — then
+   * the day query can safely be global (forms DatePicker spec pattern).
+   */
+  const pickDay = async (placeholder: string, day: number) => {
+    await waitFor(() => {
+      expect(document.querySelectorAll('[data-testid="floating-panel-viewport"]').length).toBe(0);
+    });
+    fireEvent.click(screen.getByPlaceholderText(placeholder));
+    await waitFor(() => {
+      expect(enabledDayButtons(document.body).length).toBeGreaterThan(0);
+    });
+    const button = enabledDayButtons(document.body).find(
+      (btn) => btn.textContent?.trim() === String(day),
+    );
+    expect(button).toBeDefined();
+    fireEvent.click(button!);
+  };
+
+  const startInput = () => screen.getByPlaceholderText("Start date") as HTMLInputElement;
+  const endInput = () => screen.getByPlaceholderText("End date") as HTMLInputElement;
 
   it("imports DatePicker from forms and does not use manual YYYY-MM-DD text inputs", async () => {
-    // Verify the component source imports DatePicker (not Input for date fields)
-    // by checking the module exports and rendering behavior.
-    // The component now imports { DatePicker } from "@multiplatform.one/forms"
-    // instead of using Input with YYYY-MM-DD placeholder text.
     const mod = await import("./index");
     expect(mod.DataTableDateFilter).toBeDefined();
 
@@ -118,92 +188,176 @@ describe("DataTableDateFilter - DatePicker integration", () => {
     expect(screen.getByRole("button")).toBeInTheDocument();
   });
 
-  it("preset selection (Last 7 Days) produces correct isBetween filter with DatePicker-compatible date values", () => {
-    // Test that preset selection programmatically computes the correct date range
-    // that would be set on DatePicker value props.
-    // We test the internal handler logic by simulating what handlePresetSelect does.
-    const mockOnChange = vi.fn();
-
-    renderWithProviders(<DataTableDateFilter onChange={mockOnChange} />);
-
-    // The "Last 7 Days" preset is defined with:
-    //   operator: "isBetween"
-    //   values: [7 days ago ISO, now ISO]
-    // When selected, it calls onChange with these values.
-
-    // We can verify this by using applyDateFilter with the expected preset output.
-    const now = new Date();
-    const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
-
-    const presetFilter: DateFilterValue = {
-      operator: "isBetween",
-      values: [sevenDaysAgo.toISOString(), now.toISOString()],
-    };
-
-    // Apply the filter to verify it produces correct results
-    const result = applyDateFilter(mockData, "createdAt", presetFilter);
+  it("custom-range picks drive filter state live: start pick commits isOnOrAfter, end pick commits isBetween, rows filter, panel stays open", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<ControlledFilter onChangeSpy={onChange} />);
+    await openPanel();
+
+    // Pick Aug 15 in the From picker → live single-sided commit (LC-21).
+    await pickDay("Start date", 15);
+    const expectedStart = new Date(2026, 7, 15, 0, 0, 0, 0);
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith({
+        operator: "isOnOrAfter",
+        value: expectedStart.toISOString(),
+      });
+    });
+    // Panel remains open while composing (stay-open ruling).
+    expect(screen.getByText("Custom Range")).toBeInTheDocument();
+    // Round trip: the picker input shows the committed date.
+    await waitFor(() => expect(startInput().value).not.toBe(""));
+
+    // Pick Aug 20 in the To picker → the pair commits isBetween on day bounds.
+    await pickDay("End date", 20);
+    const expectedEnd = new Date(2026, 7, 20, 23, 59, 59, 999);
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith({
+        operator: "isBetween",
+        values: [expectedStart.toISOString(), expectedEnd.toISOString()],
+      });
+    });
+    expect(screen.getByText("Custom Range")).toBeInTheDocument();
+
+    // The committed range actually filters rows.
+    const rows = [
+      { id: "in-range", createdAt: new Date(2026, 7, 16, 12, 0).toISOString() },
+      { id: "in-range-edge", createdAt: new Date(2026, 7, 20, 18, 30).toISOString() },
+      { id: "before", createdAt: new Date(2026, 6, 1).toISOString() },
+      { id: "after", createdAt: new Date(2026, 7, 25).toISOString() },
+    ];
+    const filtered = applyDateFilter(rows, "createdAt", onChange.mock.calls.at(-1)?.[0]);
+    expect(filtered.map((row) => row.id)).toEqual(["in-range", "in-range-edge"]);
+  });
 
-    // Items 4 (today) and 5 (yesterday) should match the last 7 days range
-    const matchingIds = result.map((item) => item.id);
-    expect(matchingIds).toContain("4"); // Today's item
-    expect(matchingIds).toContain("5"); // Yesterday's item
+  it("preset selection populates both pickers, and a manual pick keeps the preset's start date", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(<ControlledFilter onChangeSpy={onChange} />);
+    await openPanel();
+
+    // "This Week" (relative operator, no explicit values) → resolved window
+    // Sun Aug 9 – Sat Aug 15 populates the pickers.
+    fireEvent.click(screen.getByText("This Week"));
+    await waitFor(() => {
+      expect(startInput().value).toContain("Aug 9");
+      expect(endInput().value).toContain("Aug 15");
+    });
+    expect(onChange).toHaveBeenLastCalledWith({
+      operator: "isThisWeek",
+      value: undefined,
+      values: undefined,
+    });
 
-    // Items from Jan 2024 should NOT be in the last 7 days
-    expect(matchingIds).not.toContain("1");
-    expect(matchingIds).not.toContain("2");
-    expect(matchingIds).not.toContain("3");
+    // Switching to custom keeps the preset's dates as the starting range:
+    // picking a new end commits isBetween from the preset's week start.
+    await pickDay("End date", 20);
+    const weekStart = new Date(2026, 7, 9, 0, 0, 0, 0);
+    const newEnd = new Date(2026, 7, 20, 23, 59, 59, 999);
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith({
+        operator: "isBetween",
+        values: [weekStart.toISOString(), newEnd.toISOString()],
+      });
+    });
+    await waitFor(() => {
+      expect(startInput().value).toContain("Aug 9");
+      expect(endInput().value).toContain("Aug 20");
+    });
   });
 
-  it("filter state correctly updates when date range values are selected", () => {
-    // Test the complete flow: onChange receives the filter value,
-    // and applyDateFilter correctly uses it to filter data.
-    const mockOnChange = vi.fn();
-    let currentFilter: DateFilterValue | undefined;
+  it("Clear resets the filter and empties both pickers", async () => {
+    const onChange = vi.fn();
+    renderWithProviders(
+      <ControlledFilter
+        onChangeSpy={onChange}
+        initialValue={{
+          operator: "isBetween",
+          values: [new Date(2026, 7, 5).toISOString(), new Date(2026, 7, 12).toISOString()],
+        }}
+      />,
+    );
+    // With an active isBetween filter the trigger shows the range label.
+    await openPanel(/Aug 5, 2026/);
 
-    // Simulate the component's onChange being called with a custom date selection
-    const handleChange = (value: DateFilterValue | undefined) => {
-      currentFilter = value;
-      mockOnChange(value);
-    };
+    // Pickers derive from the active isBetween filter.
+    expect(startInput().value).toContain("Aug 5");
+    expect(endInput().value).toContain("Aug 12");
 
-    // Simulate selecting a start date via DatePicker (handleStartDateChange)
-    const startDate = new Date("2024-01-15T00:00:00.000Z");
-    const endDate = new Date("2024-01-17T23:59:59.999Z");
+    fireEvent.click(screen.getByText("Clear"));
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith(undefined);
+    });
+    await waitFor(() => {
+      expect(startInput().value).toBe("");
+      expect(endInput().value).toBe("");
+    });
+    // Panel stays open after Clear (LC-21).
+    expect(screen.getByText("Custom Range")).toBeInTheDocument();
+  });
+});
 
-    // This is what the component does when both dates are selected
-    const rangeFilter: DateFilterValue = {
-      operator: "isBetween",
-      values: [startDate.toISOString(), endDate.toISOString()],
-    };
-    handleChange(rangeFilter);
+describe("resolveDateFilterRange", () => {
+  const now = new Date(2026, 7, 12, 10, 0, 0); // Wed Aug 12 2026
 
-    // Verify onChange was called
-    expect(mockOnChange).toHaveBeenCalledTimes(1);
-    expect(currentFilter).toEqual(rangeFilter);
+  it("returns nulls for no filter and for windowless operators", () => {
+    expect(resolveDateFilterRange(undefined, now)).toEqual({ start: null, end: null });
+    expect(resolveDateFilterRange({ operator: "isEmpty" }, now)).toEqual({
+      start: null,
+      end: null,
+    });
+    expect(resolveDateFilterRange({ operator: "isNotEmpty" }, now)).toEqual({
+      start: null,
+      end: null,
+    });
+    expect(resolveDateFilterRange({ operator: "isNot", value: now.toISOString() }, now)).toEqual({
+      start: null,
+      end: null,
+    });
+  });
 
-    // Verify filter correctly applies to data
-    const filtered = applyDateFilter(mockData, "createdAt", currentFilter);
-    expect(filtered).toHaveLength(3); // Items 1, 2, 3 are in Jan 15-17 range
-    expect(filtered.map((item) => item.id)).toEqual(["1", "2", "3"]);
+  it("passes isBetween values through and maps one-sided operators to one side", () => {
+    const start = new Date(2026, 7, 1);
+    const end = new Date(2026, 7, 10);
+    expect(
+      resolveDateFilterRange(
+        { operator: "isBetween", values: [start.toISOString(), end.toISOString()] },
+        now,
+      ),
+    ).toEqual({ start, end });
+    expect(
+      resolveDateFilterRange({ operator: "isOnOrAfter", value: start.toISOString() }, now),
+    ).toEqual({ start, end: null });
+    expect(resolveDateFilterRange({ operator: "isBefore", value: end.toISOString() }, now)).toEqual(
+      { start: null, end },
+    );
+  });
 
-    // Verify changing to a different filter updates state
-    const todayFilter: DateFilterValue = { operator: "isToday" };
-    handleChange(todayFilter);
+  it("resolves relative operators to the same windows applyDateFilter matches", () => {
+    const today = resolveDateFilterRange({ operator: "isToday" }, now);
+    expect(today.start).toEqual(new Date(2026, 7, 12, 0, 0, 0, 0));
+    expect(today.end).toEqual(new Date(2026, 7, 12, 23, 59, 59, 999));
 
-    expect(mockOnChange).toHaveBeenCalledTimes(2);
-    expect(currentFilter).toEqual(todayFilter);
+    const thisWeek = resolveDateFilterRange({ operator: "isThisWeek" }, now);
+    expect(thisWeek.start).toEqual(new Date(2026, 7, 9, 0, 0, 0, 0)); // Sunday
+    expect(thisWeek.end).toEqual(new Date(2026, 7, 15, 23, 59, 59, 999)); // Saturday
 
-    const todayFiltered = applyDateFilter(mockData, "createdAt", currentFilter);
-    expect(todayFiltered).toHaveLength(1);
-    expect(todayFiltered[0].id).toBe("4");
+    const thisMonth = resolveDateFilterRange({ operator: "isThisMonth" }, now);
+    expect(thisMonth.start).toEqual(new Date(2026, 7, 1, 0, 0, 0, 0));
+    expect(thisMonth.end).toEqual(new Date(2026, 7, 31, 23, 59, 59, 999));
 
-    // Verify clearing the filter
-    handleChange(undefined);
-    expect(mockOnChange).toHaveBeenCalledTimes(3);
-    expect(currentFilter).toBeUndefined();
+    const lastMonth = resolveDateFilterRange({ operator: "isLastMonth" }, now);
+    expect(lastMonth.start).toEqual(new Date(2026, 6, 1, 0, 0, 0, 0));
+    expect(lastMonth.end).toEqual(new Date(2026, 6, 31, 23, 59, 59, 999));
 
-    const unfilteredResult = applyDateFilter(mockData, "createdAt", currentFilter);
-    expect(unfilteredResult).toEqual(mockData);
+    // Window agreement: rows inside the resolved window match applyDateFilter.
+    const rows = [
+      { id: "sun", createdAt: new Date(2026, 7, 9, 8, 0).toISOString() },
+      { id: "sat", createdAt: new Date(2026, 7, 15, 20, 0).toISOString() },
+      { id: "out", createdAt: new Date(2026, 7, 16, 0, 1).toISOString() },
+    ];
+    vi.setSystemTime(now);
+    const matched = applyDateFilter(rows, "createdAt", { operator: "isThisWeek" });
+    vi.useRealTimers();
+    expect(matched.map((row) => row.id)).toEqual(["sun", "sat"]);
   });
 });
 

package/src/components/DataTableDateFilter/DataTableDateFilter.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from "@multiplatform.one/storybook";
 import React from "react";
 import { Card, Text, XStack, YStack } from "tamagui";
-import { DataTableDateFilter, type DateFilterValue } from "./index";
+import { DataTableDateFilter, type DateFilterValue, applyDateFilter } from "./index";
 
 // Define the data type
 type Task = {
@@ -263,37 +263,12 @@ export const DifferentDisplayFormats = () => {
 export const WithDataIntegration = () => {
   const [filterValue, setFilterValue] = React.useState<DateFilterValue | undefined>();
 
-  // Simulate filtering data
-  const filteredTasks = React.useMemo(() => {
-    if (!filterValue) return sampleTasks;
-
-    return sampleTasks.filter((task) => {
-      const taskDate = new Date(task.createdAt);
-      const filterDate = filterValue.value ? new Date(filterValue.value) : null;
-
-      switch (filterValue.operator) {
-        case "is":
-          return filterDate && taskDate.toDateString() === filterDate.toDateString();
-        case "isBefore": {
-          return filterDate && taskDate < filterDate;
-        }
-        case "isAfter": {
-          return filterDate && taskDate > filterDate;
-        }
-        case "isToday": {
-          const today = new Date();
-          return taskDate.toDateString() === today.toDateString();
-        }
-        case "isYesterday": {
-          const yesterday = new Date();
-          yesterday.setDate(yesterday.getDate() - 1);
-          return taskDate.toDateString() === yesterday.toDateString();
-        }
-        default:
-          return true;
-      }
-    });
-  }, [filterValue]);
+  // The package's own operator engine — covers every operator the panel can
+  // emit (incl. isBetween/isOnOrAfter from the custom-range pickers).
+  const filteredTasks = React.useMemo(
+    () => applyDateFilter(sampleTasks, "createdAt", filterValue),
+    [filterValue],
+  );
 
   return (
     <YStack gap="$6" padding="$4">