@multiplatform.one/table 6.7.0 → 7.1.0

package/src/components/DataTableFilterButton/index.tsx

@@ -15,10 +15,14 @@
 
 import { CaretLeftIcon, CaretRightIcon, FunnelIcon } from "@phosphor-icons/react";
 import { useDirection } from "@multiplatform.one/components";
-import { Button, FloatingPanel, SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Button, FloatingPanel, SearchInput } from "@multiplatform.one/forms";
+import {
+  keyboardFocusRingProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isWeb, Text, View, XStack, YStack } from "tamagui";
+import { Text, View, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import type { FilterOperator, FilterValue, ResolvedFilterField } from "../../types";
 import {
@@ -33,16 +37,20 @@ import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor";
 interface FieldRowProps {
   field: ResolvedFilterField;
   highlighted: boolean;
+  /** LC-71: inset ring on the active option only while the listbox has keyboard focus. */
+  keyboardHighlight: boolean;
   onSelect: (field: ResolvedFilterField) => void;
 }
 
-function FieldRow({ field, highlighted, onSelect }: FieldRowProps) {
+function FieldRow({ field, highlighted, keyboardHighlight, onSelect }: FieldRowProps) {
   const { knobProps } = useResolvedKnobs();
   return (
     <View
       role="option"
+      id={`filter-field-${field.id}`}
       aria-selected={highlighted}
-      tabIndex={0}
+      // LC-49 / LC-71: the listbox is the tab stop; options are not.
+      tabIndex={-1}
       cursor="pointer"
       paddingHorizontal="$2.5"
       paddingVertical="$2"
@@ -53,20 +61,10 @@ function FieldRow({ field, highlighted, onSelect }: FieldRowProps) {
       backgroundColor={highlighted ? "$color4" : "transparent"}
       hoverStyle={{ backgroundColor: "$color4" }}
       pressStyle={{ backgroundColor: "$color5" }}
-      focusVisibleStyle={{
-        outlineColor: "$outlineColor",
-        outlineWidth: 2,
-        outlineStyle: "solid",
-      }}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      {...(keyboardHighlight ? keyboardFocusRingProps : null)}
       onPress={() => onSelect(field)}
-      onKeyDown={
-        ((e: KeyboardEvent) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onSelect(field);
-          }
-        }) as unknown as () => void
-      }
     >
       <Text fontSize="$3" color="$color12" numberOfLines={1}>
         {field.label}
@@ -95,7 +93,6 @@ function GroupHeader({ children }: { children: string }) {
 export function DataTableFilterButton() {
   const ctx = useDataTableState();
   const { knobProps } = useResolvedKnobs();
-  const viewportGtSm = useViewportGtSm();
   // "Back to field list" points toward the panel's start edge — directional,
   // so the caret pair swaps under RTL (useDirection glyph-swap pattern).
   const BackCaretIcon = useDirection() === "rtl" ? CaretRightIcon : CaretLeftIcon;
@@ -103,6 +100,7 @@ export function DataTableFilterButton() {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [listboxFocused, setListboxFocused] = useState(false);
   const [activeField, setActiveField] = useState<ResolvedFilterField | null>(null);
   const [operator, setOperator] = useState<FilterOperator>("contains");
   const [value, setValue] = useState("");
@@ -292,21 +290,21 @@ export function DataTableFilterButton() {
     (ctx.state.filters?.length ?? 0) +
     (ctx.state.columnFilters?.filter((cf) => isFilterValueShape(cf.value)).length ?? 0);
 
-  // Who owns the trigger press depends on FloatingPanel's mode:
-  // - desktop web (floating): FloatingPanel opens on DOM mousedown (useClick)
-  //   — the Button must NOT also toggle `open` or every click double-toggles.
-  // - sheet (native / ≤860px web): the Button is the deepest pressable and
-  //   swallows the press before the sheet's trigger wrapper View sees it —
-  //   the Button itself must toggle `open` (harmless on native, where the
-  //   trigger subtree is pointerEvents="none" and the wrapper handles it).
-  const sheetMode = !isWeb || !viewportGtSm;
+  // FloatingPanel owns the trigger press in every mode. This Button used to
+  // toggle `open` itself in sheet mode, because the deepest pressable swallows
+  // the click before the sheet's wrapper View sees it — that swallow is fixed
+  // at the source now (FloatingPanel opens on the capture phase), so a second
+  // opener here would only be a place for the two to disagree.
+  const highlightedId = flatList[highlightedIndex]?.id;
+  const keyboardHighlight = listboxFocused && wasKeyboardFocus() ? highlightedId : undefined;
+
   const trigger = (
     <Button
       size="$3"
-      variant="outlined"
+      compact
+      {...(activeChipCount > 0 ? { accent: true } : { variant: "outlined" as const })}
       aria-label={t("Filter")}
       icon={<FunnelIcon size={14} weight={activeChipCount > 0 ? "fill" : "regular"} />}
-      {...(sheetMode ? { onPress: () => handleOpenChange(!open) } : {})}
     >
       {activeChipCount > 0 ? `${t("Filter")} (${activeChipCount})` : t("Filter")}
     </Button>
@@ -334,7 +332,7 @@ export function DataTableFilterButton() {
                 }}
                 icon={<BackCaretIcon size={14} />}
               />
-              <Text fontSize={knobProps.sizeToken} fontWeight="600" color="$color11" flex={1}>
+              <Text fontSize="$3" fontWeight="600" color="$color11" flex={1}>
                 {t("Filter: {{column}}", { column: activeField.label })}
               </Text>
             </XStack>
@@ -372,29 +370,48 @@ export function DataTableFilterButton() {
               aria-label={t("Search fields")}
             />
             <YStack
-              role="list"
+              // role="listbox" is a valid ARIA role but outside RN's `Role`
+              // union; this web-only bag forwards it to the DOM node (house
+              // Record cast).
+              {...({ role: "listbox" } as Record<string, unknown>)}
               aria-label={t("Filterable fields")}
+              aria-activedescendant={highlightedId ? `filter-field-${highlightedId}` : undefined}
+              tabIndex={0}
               maxHeight={320}
               overflow="scroll"
+              outlineWidth={0}
+              focusStyle={{ outlineWidth: 0 }}
+              onFocus={() => setListboxFocused(true)}
+              onBlur={() => setListboxFocused(false)}
             >
-              {columnFields.length > 0 && <GroupHeader>{t("Columns")}</GroupHeader>}
-              {columnFields.map((field) => (
-                <FieldRow
-                  key={field.id}
-                  field={field}
-                  highlighted={flatList[highlightedIndex]?.id === field.id}
-                  onSelect={handleSelectField}
-                />
-              ))}
-              {moreFields.length > 0 && <GroupHeader>{t("More fields")}</GroupHeader>}
-              {moreFields.map((field) => (
-                <FieldRow
-                  key={field.id}
-                  field={field}
-                  highlighted={flatList[highlightedIndex]?.id === field.id}
-                  onSelect={handleSelectField}
-                />
-              ))}
+              {columnFields.length > 0 && (
+                <YStack role="group" aria-label={t("Columns")}>
+                  <GroupHeader>{t("Columns")}</GroupHeader>
+                  {columnFields.map((field) => (
+                    <FieldRow
+                      key={field.id}
+                      field={field}
+                      highlighted={highlightedId === field.id}
+                      keyboardHighlight={keyboardHighlight === field.id}
+                      onSelect={handleSelectField}
+                    />
+                  ))}
+                </YStack>
+              )}
+              {moreFields.length > 0 && (
+                <YStack role="group" aria-label={t("More fields")}>
+                  <GroupHeader>{t("More fields")}</GroupHeader>
+                  {moreFields.map((field) => (
+                    <FieldRow
+                      key={field.id}
+                      field={field}
+                      highlighted={highlightedId === field.id}
+                      keyboardHighlight={keyboardHighlight === field.id}
+                      onSelect={handleSelectField}
+                    />
+                  ))}
+                </YStack>
+              )}
               {flatList.length === 0 && (
                 <Text fontSize="$2" color="$color10" padding="$2.5">
                   {t("No fields match")}

package/src/components/DataTableFilterChips/DataTableFilterChips.spec.tsx

@@ -128,6 +128,15 @@ describe("DataTableFilterChips", () => {
     renderTable([]);
     expect(screen.queryByLabelText("Active filters")).toBeNull();
   });
+
+  it("chip press and dismiss are two focusables (LC-71)", async () => {
+    renderTable([emailFilter("corp")]);
+    const edit = await screen.findByRole("button", { name: /Edit filter/ });
+    const remove = screen.getByRole("button", { name: "Remove" });
+    expect(edit.getAttribute("tabindex")).toBe("0");
+    expect(remove.getAttribute("tabindex")).toBe("0");
+    expect(remove.className).toMatch(/mp-chip-dismiss/);
+  });
 });
 
 describe("DataTableFilterButton", () => {
@@ -141,6 +150,19 @@ describe("DataTableFilterButton", () => {
     expect(await screen.findByText("Filter (1)")).toBeTruthy();
   });
 
+  it("field list is a single-tab-stop listbox (LC-49 / LC-71)", async () => {
+    const user = userEvent.setup();
+    renderTable([]);
+    await user.click(await screen.findByRole("button", { name: "Filter" }));
+    const listbox = await screen.findByRole("listbox", { name: "Filterable fields" });
+    expect(listbox.getAttribute("tabindex")).toBe("0");
+    const options = screen.getAllByRole("option");
+    expect(options.length).toBeGreaterThan(0);
+    for (const option of options) {
+      expect(option.getAttribute("tabindex")).toBe("-1");
+    }
+  });
+
   it("opens a searchable field list with visible columns grouped before hidden fields", async () => {
     const user = userEvent.setup();
     renderTable([]);

package/src/components/DataTableFilterChips/FilterChip.tsx

@@ -0,0 +1,122 @@
+/**
+ * FilterChip — one active filter as a pill (Polaris Index Filters / Linear).
+ *
+ * LC-71 RING-ANATOMY: two focusables, two rings. Chip press (edit) rings the
+ * pill; dismiss rings the glyph, never the 44px hit box. Selected state is
+ * the chip fill; no extra border on the row of siblings.
+ */
+
+import { XIcon } from "@phosphor-icons/react";
+import { ChipFrame, ChipText, chipIconSize, type ChipSize } from "@multiplatform.one/forms";
+import {
+  MIN_PRESS_TARGET,
+  ensureCompositeFocusRing,
+  ensureFocusVisibleRing,
+  pressTargetHitSlop,
+  pressTargetStyle,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { View, styled } from "tamagui";
+import { t } from "../../shared/t";
+
+export interface FilterChipProps {
+  label: string;
+  onRemove: () => void;
+  /** Chip press reopens the editor (Linear / Polaris tag click). */
+  onPress?: () => void;
+}
+
+const DismissButton = styled(View, {
+  name: "FilterChipDismiss",
+  cursor: "pointer",
+  opacity: 0.7,
+  alignItems: "center",
+  justifyContent: "center",
+  outlineWidth: 0,
+  hoverStyle: { opacity: 1 },
+  pressStyle: { opacity: 0.9 },
+  focusStyle: { outlineWidth: 0 },
+  focusVisibleStyle: { opacity: 1, outlineWidth: 0 },
+});
+
+const DismissRing = styled(View, {
+  name: "FilterChipDismissRing",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "$0.5",
+  hoverStyle: { backgroundColor: "$color5" },
+});
+
+export function FilterChip({ label, onRemove, onPress }: FilterChipProps) {
+  const { knobProps } = useResolvedKnobs();
+  if (typeof document !== "undefined") ensureCompositeFocusRing();
+
+  const resolvedSize = (knobProps.sizeToken as ChipSize) || "$3";
+  const iconSize = chipIconSize(resolvedSize);
+  const RING_INSET = 2;
+  const dismissVisual = iconSize + RING_INSET * 2;
+  const dismissOutset = Math.max(0, Math.ceil((MIN_PRESS_TARGET - dismissVisual) / 2));
+  const editable = typeof onPress === "function";
+
+  return (
+    <ChipFrame
+      size={resolvedSize}
+      variant="subtle"
+      backgroundColor="$color4"
+      {...knobProps.borderRadius}
+      overflow="visible"
+      data-filter-chip=""
+      cursor={editable ? "pointer" : "default"}
+      role={editable ? "button" : undefined}
+      tabIndex={editable ? 0 : undefined}
+      aria-label={editable ? t("Edit filter {{label}}", { label }) : undefined}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={editable ? ensureFocusVisibleRing() : undefined}
+      hoverStyle={editable ? { backgroundColor: "$color5" } : undefined}
+      onPress={onPress}
+      onKeyDown={
+        editable
+          ? (((e: KeyboardEvent) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onPress();
+              }
+            }) as unknown as () => void)
+          : undefined
+      }
+    >
+      <ChipText size={resolvedSize} color="$color12" {...knobProps.body}>
+        {label}
+      </ChipText>
+      <DismissButton
+        role="button"
+        aria-label={t("Remove")}
+        tabIndex={0}
+        className="mp-chip-dismiss"
+        borderRadius={knobProps.pointy ? 0 : 1000}
+        {...pressTargetStyle()}
+        marginVertical={-dismissOutset}
+        marginHorizontal={-dismissOutset}
+        hitSlop={pressTargetHitSlop(dismissVisual)}
+        onPress={(e) => {
+          e.stopPropagation?.();
+          onRemove();
+        }}
+        onKeyDown={
+          ((e: KeyboardEvent) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove();
+            }
+          }) as unknown as () => void
+        }
+      >
+        <DismissRing className="mp-chip-dismiss-ring" borderRadius={knobProps.pointy ? 0 : 1000}>
+          <XIcon size={iconSize} color="$color12" />
+        </DismissRing>
+      </DismissButton>
+    </ChipFrame>
+  );
+}

package/src/components/DataTableFilterChips/index.tsx

@@ -7,18 +7,23 @@
  *
  * Chip press reopens the shared editor pre-filled (filterUi channel), the X
  * removes (44px target via Chip), "Clear all" appears at 2+ chips.
+ *
+ * Anatomy follows Polaris Index Filters + Linear: wrapping pills, gray fill
+ * (not a hue border), Clear all as a text control — LC-71 selected = fill.
  */
 
 import { Button } from "@multiplatform.one/forms";
-import { Chip } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useMemo } from "react";
-import { View, XStack } from "tamagui";
+import { XStack } from "tamagui";
 import { t } from "../../shared/t";
 import type { FilterValue, ResolvedFilterField } from "../../types";
 import { getFilterChipLabel, isFilterValueShape } from "../../utils/filterFields";
 import type { FilterEditTarget } from "../DataTable/DataTableStateContext";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { FilterChip } from "./FilterChip";
+
+export { FilterChip } from "./FilterChip";
+export type { FilterChipProps } from "./FilterChip";
 
 interface FilterChipModel {
   key: string;
@@ -29,7 +34,6 @@ interface FilterChipModel {
 
 export function DataTableFilterChips() {
   const ctx = useDataTableState();
-  const { knobProps } = useResolvedKnobs();
 
   const fields: ResolvedFilterField[] = ctx?.computed?.filterFields ?? [];
   const fieldFor = useCallback((id: string) => fields.find((f) => f.id === id), [fields]);
@@ -90,35 +94,15 @@ export function DataTableFilterChips() {
       aria-label={t("Active filters")}
     >
       {chips.map((chip) => (
-        <View
+        <FilterChip
           key={chip.key}
-          role="button"
-          tabIndex={0}
-          aria-label={t("Edit filter {{label}}", { label: chip.label })}
-          cursor="pointer"
-          {...knobProps.containerRadius}
-          focusVisibleStyle={{
-            outlineColor: "$outlineColor",
-            outlineWidth: 2,
-            outlineStyle: "solid",
-          }}
+          label={chip.label}
+          onRemove={chip.onRemove}
           onPress={() => ctx.filterUi?.requestEdit(chip.target)}
-          onKeyDown={
-            ((e: KeyboardEvent) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                ctx.filterUi?.requestEdit(chip.target);
-              }
-            }) as unknown as () => void
-          }
-        >
-          <Chip color="blue" onDismiss={chip.onRemove}>
-            {chip.label}
-          </Chip>
-        </View>
+        />
       ))}
       {chips.length >= 2 && (
-        <Button size="$2" chromeless onPress={handleClearAll}>
+        <Button size="$2" chromeless compact onPress={handleClearAll}>
           {t("Clear all")}
         </Button>
       )}

package/src/components/DataTableFilters/DataTableFilters.spec.tsx

@@ -1,4 +1,6 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumnType, FacetedFilterOption, TableFilter } from "../../types";
 import { DataTableFilters, type DataTableFiltersProps } from "./index";
@@ -62,6 +64,60 @@ describe("DataTableFilters", () => {
     compact: false,
   };
 
+  describe("chip bar", () => {
+    it("empty state is a Filter trigger, not an empty-state panel", () => {
+      renderWithProviders(<DataTableFilters {...defaultProps} />);
+      expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy();
+      expect(screen.queryByText("No filters applied")).toBeNull();
+      expect(screen.queryByLabelText("Filters")).toBeNull();
+    });
+
+    it("renders each active filter as a dismissible chip with the count on the trigger", () => {
+      renderWithProviders(<DataTableFilters {...defaultProps} filters={sampleFilters} />);
+      expect(screen.getByText("Filter (2)")).toBeTruthy();
+      expect(screen.getByText("Name: contains John")).toBeTruthy();
+      expect(screen.getByText("Age: greater than or equal 25")).toBeTruthy();
+      expect(screen.getByRole("button", { name: "Clear all" })).toBeTruthy();
+    });
+
+    it("chip dismiss calls onRemoveFilter with that filter id", async () => {
+      const user = userEvent.setup();
+      const onRemoveFilter = vi.fn();
+      renderWithProviders(
+        <DataTableFilters
+          {...defaultProps}
+          filters={sampleFilters}
+          onRemoveFilter={onRemoveFilter}
+        />,
+      );
+      await user.click(screen.getAllByRole("button", { name: "Remove" })[0]);
+      expect(onRemoveFilter).toHaveBeenCalledWith("filter1");
+    });
+
+    it("Clear all calls onClearFilters", async () => {
+      const user = userEvent.setup();
+      const onClearFilters = vi.fn();
+      renderWithProviders(
+        <DataTableFilters
+          {...defaultProps}
+          filters={sampleFilters}
+          onClearFilters={onClearFilters}
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Clear all" }));
+      expect(onClearFilters).toHaveBeenCalledTimes(1);
+    });
+
+    it("hides the count on the trigger when showFilterCount is false", () => {
+      renderWithProviders(
+        <DataTableFilters {...defaultProps} filters={sampleFilters} showFilterCount={false} />,
+      );
+      expect(screen.queryByText("Filter (2)")).toBeNull();
+      expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy();
+      expect(screen.getByText("Name: contains John")).toBeTruthy();
+    });
+  });
+
   describe("basic rendering", () => {
     it("should render filters component with no filters", () => {
       const { container } = renderWithProviders(<DataTableFilters {...defaultProps} />);