@multiplatform.one/table 6.1.0 → 6.3.0

package/README.md

@@ -87,6 +87,20 @@ Works with **any React framework** and **all platforms**:
 | **Vanilla React**      | `createUrlStrategy.universal()`   | ✅ Full Support |
 | **Any Router**         | `createUrlStrategy.custom()`      | ✅ Full Support |
 
+### Semantic Table Markup
+
+On web, tables render **real semantic elements** — `<table>`, `<thead>`, `<tbody>`,
+`<tfoot>`, `<tr>`, `<th scope="col">`, `<td>`, `<caption>` — with explicit ARIA
+table roles kept on them, so the grid semantics survive even where the display
+mode is overridden (DataTable's flex grid). User-agent styles are neutralized
+(border spacing, bold/centered headers), so the visual output is unchanged.
+Virtualized DataTable rows are the one deliberate exception: absolutely
+positioned rows render as a roles-based `div` grid bridged behind
+presentation-role elements — valid HTML, clean accessibility tree. Native is
+unaffected (React Native views as before). `SimpleTable`'s per-column `align`
+now works in both display modes (alignment is applied as `textAlign` on the
+cell text).
+
 ### React Router Integration
 
 ```tsx
@@ -160,6 +174,22 @@ function MyTable() {
 - Live counts showing how many items match each option
 - Like Amazon/Etsy filter experience
 
+### Filter Panel Interaction Contract
+
+Filter panels compose — they never auto-dismiss on pick:
+
+- Picking a filter value (a date preset, a faceted checkbox, the builder's
+  "Add Filter") applies it **immediately** and the panel **stays open**, so multiple
+  filters compose in one visit.
+- Panels dismiss only on explicit dismissal intent: outside click, Escape, the trigger
+  toggle, or an explicit close/done affordance (e.g. the column header filter's Apply
+  button, which commits its draft and closes).
+- Single-choice pickers (e.g. the saved-filter dropdown) are menu-class and commit on
+  pick.
+
+This is rule LC-21 in the living rulebook (`docs/theme-propagation-spec.md` in the
+[multiplatform.one repo](https://gitlab.com/bitspur/frappe/multiplatform.one)).
+
 ## 📊 Data Export
 
 Export table data in multiple formats with advanced customization options:
@@ -601,6 +631,62 @@ function AdvancedFilters() {
 
 ## 📄 Pagination Strategies
 
+### Pagination Modes
+
+`paginationMode` selects the presentation (default `"pages"`):
+
+- **`"pages"`** — footer pager built on the catalog `Pagination` component from
+  `@multiplatform.one/components` (`variant="numbered"`: windowed ellipsis, first/last,
+  `aria-current="page"`) — one pagination idiom across the system. `DataTablePagination`
+  adds the table-specific chrome around it: rows-per-page selector, go-to-page jump, and
+  the item-range summary.
+- **`"infinite"`** — appends the next page as the user nears the end of the list,
+  pre-loading page N+1 in the background so appends resolve instantly. The footer pager
+  is suppressed; a tail status line (`role="status"`, `aria-live="polite"`) reads
+  "Showing X of Y rows" while more exist and an honest end state when exhausted.
+
+### Infinite Mode
+
+Client mode (all rows in memory) reveals rows in page-size chunks as the user scrolls:
+
+```tsx
+<DataTable data={allRows} columns={columns} paginationMode="infinite" />
+```
+
+Server/async mode supplies a `loadPage` loader. The table owns a small page cache and
+requests page N+1 the moment page N is appended, so the append at the scroll tail
+resolves from cache with zero wait. `loadPage` must be side-effect-free per query — the
+table may call it ahead of time (prefetch) and cache the result:
+
+```tsx
+import { DataTable, type DataTablePageLoader } from "@multiplatform.one/table";
+
+const loadPage: DataTablePageLoader<User> = async (query) => {
+  // query: { pageIndex, pageSize, sorting, filters, columnFilters, globalFilter }
+  const response = await api.getUsers(query);
+  // totalCount (optional) enables the exact end-of-data state
+  return { rows: response.data, totalCount: response.totalCount };
+};
+
+<DataTable columns={columns} paginationMode="infinite" loadPage={loadPage} />;
+```
+
+With `loadPage` set, rows are treated as pre-filtered/sorted server-side (manual
+filtering/sorting/pagination are forced on). Infinite mode works with
+`enableVirtualization` (the tail renders an extra skeleton row and extends the virtual
+scroll range) and with the non-virtualized grid and card layouts (an
+IntersectionObserver sentinel below the content triggers the append).
+
+**Reset semantics:** any change to sorting, filters, column filters, global filter, or
+page size drops the page cache and all in-flight responses, restarts at page 0, and
+re-prefetches page 1. Failed page loads are evicted from the cache so the next
+load-more retries instead of caching the rejection.
+
+Infinite-mode state is exposed as `computed.infinite` (`visibleRowCount`, `loadedPages`,
+`totalCount`, `exhausted`, `isInitialLoading`, `isAppending`, `loadMore()`) through
+`useDataTable` / `DataTableStateContext`. The accumulation + prefetch engine is also
+exported standalone as `useInfiniteRows`.
+
 ### Offset-Based Pagination (Traditional)
 
 ```tsx
@@ -677,50 +763,9 @@ function CursorPaginationTable() {
 
 ### Infinite Scroll Pagination
 
-```tsx
-function InfiniteScrollTable() {
-  const [data, setData] = useState([]);
-  const [hasMore, setHasMore] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const loadMore = async () => {
-    if (isLoading || !hasMore) return;
-
-    setIsLoading(true);
-    const lastItem = data[data.length - 1];
-
-    const response = await api.getUsers({
-      cursor: lastItem?.cursor,
-      limit: 50,
-    });
-
-    setData((prev) => [...prev, ...response.data]);
-    setHasMore(response.hasMore);
-    setIsLoading(false);
-  };
-
-  return (
-    <DataTable
-      data={data}
-      columns={columns}
-      manualPagination={true}
-      enablePagination={false}
-      renderToolbar={(props) => (
-        <DataTableToolbar
-          {...props}
-          customActions={
-            hasMore && (
-              <Button disabled={isLoading} onPress={loadMore}>
-                {isLoading ? "Loading..." : "Load More"}
-              </Button>
-            )
-          }
-        />
-      )}
-    />
-  );
-}
-```
+Use the built-in infinite mode (see [Infinite Mode](#infinite-mode) above) instead of
+hand-rolling a load-more button — `paginationMode="infinite"` with a `loadPage` loader
+gives you prefetch-ahead, bounded tail skeletons, and an honest end state for free.
 
 ## 🔄 Server-Side Operations
 
@@ -883,6 +928,19 @@ function ServerTable({ data, totalCount }) {
 
 ### Custom Toolbar
 
+`DataTableToolbar` composes a global-search section (the catalog `SearchInput` with a
+clear affordance) and, behind a toolbar divider, a roving-focus actions section:
+a filter button (when the table has filterable fields), your `customActions`, and view
+management (save-view popover + active-view indicator). It wires up two ways:
+
+- **Inside a `DataTable`** — via the `renderToolbar` render prop or the compound
+  `<DataTable.Toolbar />`, it reads state from `DataTableStateContext`; no wiring needed.
+  Explicit props override context values.
+- **Standalone** — control it with explicit props: `globalFilter` / `onGlobalFilterChange` /
+  `onClearFilters` (search), `enableViews` + `views` / `activeViewId` / `onSaveView` /
+  `onLoadView` (view management), and `customActions`. Sections toggle via
+  `enableGlobalSearch`, `enableFiltering`, and `enableViews`.
+
 ```tsx
 <DataTable
   renderToolbar={(props) => (
@@ -913,27 +971,29 @@ function ServerTable({ data, totalCount }) {
 
 ### DataTable Props
 
-| Prop                       | Type                 | Default | Description                                                                                 |
-| -------------------------- | -------------------- | ------- | ------------------------------------------------------------------------------------------- |
-| `data`                     | `TData[]`            | -       | Array of data to display                                                                    |
-| `columns`                  | `ColumnDef<TData>[]` | -       | Column definitions                                                                          |
-| `syncWithUrl`              | `boolean`            | `false` | Enable URL state management                                                                 |
-| `enableFiltering`          | `boolean`            | `true`  | Enable advanced filtering                                                                   |
-| `enableSorting`            | `boolean`            | `true`  | Enable column sorting                                                                       |
-| `enablePagination`         | `boolean`            | `true`  | Enable pagination                                                                           |
-| `enableGlobalSearch`       | `boolean`            | `true`  | Enable global search                                                                        |
-| `enableViews`              | `boolean`            | `false` | Enable view management                                                                      |
-| `manualFiltering`          | `boolean`            | `false` | Handle filtering server-side                                                                |
-| `manualPagination`         | `boolean`            | `false` | Handle pagination server-side                                                               |
-| `manualSorting`            | `boolean`            | `false` | Handle sorting server-side                                                                  |
-| `enableVirtualization`     | `boolean`            | `false` | Use virtual scrolling for table body. Requires `virtualizationHeight` when true.            |
-| `virtualizationHeight`     | `number`             | —       | Height (px) of scrollable body when `enableVirtualization` is true.                         |
-| `enableRowExpansion`       | `boolean`            | `false` | Enable expandable sub-rows. Requires `getSubRows` or `subRows` in row data.                 |
-| `enableColumnPinning`      | `boolean`            | `false` | Enable column pinning (left/right). Pinned columns stay fixed during horizontal scroll.     |
-| `maxPinnedColumns`         | `number`             | `3`     | Max columns per side (left/right) when pinning.                                             |
-| `enableKeyboardNavigation` | `boolean`            | `false` | Enable Excel-like keyboard navigation (arrows, Home, End, PageUp/Down, Enter).              |
-| `rowCount`                 | `number`             | —       | Total row count for manual pagination (server-side).                                        |
-| `pageCount`                | `number`             | —       | Total page count for manual pagination. If omitted, derived from `rowCount` and `pageSize`. |
+| Prop                       | Type                    | Default   | Description                                                                                 |
+| -------------------------- | ----------------------- | --------- | ------------------------------------------------------------------------------------------- |
+| `data`                     | `TData[]`               | -         | Array of data to display                                                                    |
+| `columns`                  | `ColumnDef<TData>[]`    | -         | Column definitions                                                                          |
+| `syncWithUrl`              | `boolean`               | `false`   | Enable URL state management                                                                 |
+| `enableFiltering`          | `boolean`               | `true`    | Enable advanced filtering                                                                   |
+| `enableSorting`            | `boolean`               | `true`    | Enable column sorting                                                                       |
+| `enablePagination`         | `boolean`               | `true`    | Enable pagination                                                                           |
+| `paginationMode`           | `"pages" \| "infinite"` | `"pages"` | Footer pager vs. infinite scroll with prefetch-ahead.                                       |
+| `loadPage`                 | `DataTablePageLoader`   | —         | Async page loader for infinite mode (server/async data). Forces manual modes on.            |
+| `enableGlobalSearch`       | `boolean`               | `true`    | Enable global search                                                                        |
+| `enableViews`              | `boolean`               | `false`   | Enable view management                                                                      |
+| `manualFiltering`          | `boolean`               | `false`   | Handle filtering server-side                                                                |
+| `manualPagination`         | `boolean`               | `false`   | Handle pagination server-side                                                               |
+| `manualSorting`            | `boolean`               | `false`   | Handle sorting server-side                                                                  |
+| `enableVirtualization`     | `boolean`               | `false`   | Use virtual scrolling for table body. Requires `virtualizationHeight` when true.            |
+| `virtualizationHeight`     | `number`                | —         | Height (px) of scrollable body when `enableVirtualization` is true.                         |
+| `enableRowExpansion`       | `boolean`               | `false`   | Enable expandable sub-rows. Requires `getSubRows` or `subRows` in row data.                 |
+| `enableColumnPinning`      | `boolean`               | `false`   | Enable column pinning (left/right). Pinned columns stay fixed during horizontal scroll.     |
+| `maxPinnedColumns`         | `number`                | `3`       | Max columns per side (left/right) when pinning.                                             |
+| `enableKeyboardNavigation` | `boolean`               | `false`   | Enable Excel-like keyboard navigation (arrows, Home, End, PageUp/Down, Enter).              |
+| `rowCount`                 | `number`                | —         | Total row count for manual pagination (server-side).                                        |
+| `pageCount`                | `number`                | —         | Total page count for manual pagination. If omitted, derived from `rowCount` and `pageSize`. |
 
 ### DataTableFilters Props
 

package/dist/cjs/components/ChildTable/index.cjs

@@ -29,16 +29,30 @@ var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_TableInput = require("../TableInput/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function ChildTableFieldError({
+  form,
+  name,
+  children
+}) {
+  const Subscribe = form.Subscribe;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Subscribe, {
+    selector: state => state.fieldMeta?.[name]?.errors,
+    children: errors => children(errors && errors.length ? String(errors[0]) : void 0)
+  });
+}
 function ChildTable(props) {
   const {
     name,
     form,
+    validators,
     value,
     onChange,
     columns,
     defaultRow,
     disabled,
     readOnly,
+    skeleton,
+    compact,
     minRows,
     maxRows,
     showRowNumbers = true,
@@ -52,17 +66,24 @@ function ChildTable(props) {
   } = (0, import_tamagui.useProps)(props);
   const {
     knobProps,
-    id
+    id,
+    resolvedForm
   } = (0, import_forms.useFormField)({
     form,
-    id: idProp
+    id: idProp,
+    compact
   });
+  const formBound = !!resolvedForm && !!name;
   const hasLayout = label || error || helperText || required;
-  const table = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TableInput.TableInput, {
+  const Input = import_TableInput.TableInput;
+  const table = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Input, {
     name,
-    form,
+    form: resolvedForm,
+    validators,
+    required,
+    skeleton,
     data: value ?? [],
-    onDataChange: onChange,
+    onChange,
     columns: columns ?? [],
     defaultRow,
     readOnly: readOnly || disabled,
@@ -72,14 +93,28 @@ function ChildTable(props) {
     showAddRow: showAddRow && !readOnly && !disabled,
     showDeleteRow: showDeleteRow && !readOnly && !disabled
   });
-  if (!hasLayout) return table;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FieldLayout, {
+  if (!hasLayout && !formBound) return table;
+  const control = label ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: "100%",
+    id,
+    role: "group",
+    children: table
+  }) : table;
+  const renderLayout = resolvedError => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FieldLayout, {
     id,
     label,
-    error,
+    error: resolvedError,
     helperText,
     required,
     knobProps,
-    children: table
+    children: control
   });
+  if (formBound && error === void 0 && !skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildTableFieldError, {
+      form: resolvedForm,
+      name,
+      children: renderLayout
+    });
+  }
+  return renderLayout(error);
 }

package/dist/cjs/components/ChildTable/index.native.js

@@ -31,16 +31,36 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_TableInput = require("../TableInput/index.native.js");
+function ChildTableFieldError(param) {
+  var {
+    form,
+    name,
+    children
+  } = param;
+  var Subscribe = form.Subscribe;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Subscribe, {
+    selector: function selector(state) {
+      var _state_fieldMeta_name, _state_fieldMeta;
+      return (_state_fieldMeta = state.fieldMeta) === null || _state_fieldMeta === void 0 ? void 0 : (_state_fieldMeta_name = _state_fieldMeta[name]) === null || _state_fieldMeta_name === void 0 ? void 0 : _state_fieldMeta_name.errors;
+    },
+    children: function children1(errors) {
+      return children(errors && errors.length ? String(errors[0]) : void 0);
+    }
+  });
+}
 function ChildTable(props) {
   var {
     name,
     form,
+    validators,
     value,
     onChange,
     columns,
     defaultRow,
     disabled,
     readOnly,
+    skeleton,
+    compact,
     minRows,
     maxRows,
     showRowNumbers = true,
@@ -54,17 +74,24 @@ function ChildTable(props) {
   } = (0, import_tamagui.useProps)(props);
   var {
     knobProps,
-    id
+    id,
+    resolvedForm
   } = (0, import_forms.useFormField)({
     form,
-    id: idProp
+    id: idProp,
+    compact
   });
+  var formBound = !!resolvedForm && !!name;
   var hasLayout = label || error || helperText || required;
-  var table = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_TableInput.TableInput, {
+  var Input = import_TableInput.TableInput;
+  var table = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Input, {
     name,
-    form,
+    form: resolvedForm,
+    validators,
+    required,
+    skeleton,
     data: value !== null && value !== void 0 ? value : [],
-    onDataChange: onChange,
+    onChange,
     columns: columns !== null && columns !== void 0 ? columns : [],
     defaultRow,
     readOnly: readOnly || disabled,
@@ -74,15 +101,31 @@ function ChildTable(props) {
     showAddRow: showAddRow && !readOnly && !disabled,
     showDeleteRow: showDeleteRow && !readOnly && !disabled
   });
-  if (!hasLayout) return table;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FieldLayout, {
+  if (!hasLayout && !formBound) return table;
+  var control = label ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: "100%",
     id,
-    label,
-    error,
-    helperText,
-    required,
-    knobProps,
+    role: "group",
     children: table
-  });
+  }) : table;
+  var renderLayout = function renderLayout2(resolvedError) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FieldLayout, {
+      id,
+      label,
+      error: resolvedError,
+      helperText,
+      required,
+      knobProps,
+      children: control
+    });
+  };
+  if (formBound && error === void 0 && !skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ChildTableFieldError, {
+      form: resolvedForm,
+      name,
+      children: renderLayout
+    });
+  }
+  return renderLayout(error);
 }
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/components/ChildTable/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ChildTable_exports","__export","ChildTable","module","exports","import_jsx_runtime","require","import_forms","import_tamagui","import_TableInput","props","name","form","onChange","columns","defaultRow","disabled","readOnly","minRows","maxRows","showRowNumbers","showAddRow","showDeleteRow","label","error","helperText","required","id","idProp","useProps","knobProps","useFormField","hasLayout","table","jsx","TableInput","data","onDataChange","FieldLayout","children"],"sources":["../../../../src/components/ChildTable/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,kBAAA;AAAAC,QAAA,CAAAD,kBAAA;EAAAE,UAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAT,YAA2D,CAAAK,kBAAA;AAC3D,IAAAK,kBAAyB,GAAAC,OAAA;AACzB,IAAAC,YAAA,GAAAD,OAA2B;AAqDvB,IAAAE,cAAA,GAAAF,OAAA;AA5BG,IAAAG,iBACL,GAAAH,OACA;AACA,SAAMJ,WAAAQ,KAAA;EAAA,IACJ;IAAAC,IAAA;IAAAC,IAAA;IAAAb,KAAA;IAAAc,QAAA;IAAAC,OAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,aAAA;IAAAC,KAAA;IAAAC,KAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,EAAA,EAAAC;EAAA,QAAApB,cAAA,CAAAqB,QAAA,EAAAnB,KAAA;EAAA,IACA;IAAAoB,SAAA;IAAAH;EAAA,QAAApB,YAAA,CAAAwB,YAAA;IACAnB,IAAA;IACAe,EAAA,EAAAC;EAAA,EACA;EAAA,IACAI,SAAA,GAAAT,KAAA,IAAAC,KAAA,IAAAC,UAAA,IAAAC,QAAA;EAAA,IACAO,KAAA,sBAAA5B,kBAAA,CAAA6B,GAAA,EAAAzB,iBAAA,CAAA0B,UAAA;IACAxB,IAAA;IACAC,IAAA;IACAwB,IAAA,EAAArC,KAAA,aAAAA,KAAA,cAAAA,KAAA;IACAsC,YAAA,EAAAxB,QAAiB;IACjBC,OAAA,EAAAA,OAAa,aAAAA,OAAA,cAAAA,OAAA;IACbC,UAAA;IACAE,QAAA,EAAAA,QAAA,IAAAD,QAAA;IACAE,OAAA;IACAC,OAAA;IACAC,cAAA;IACAC,UAAI,EAAAA,UAAA,KAAAJ,QAAA,KAAAD,QAAA;IACNM,aAAI,EAAAA,aAAA,IAAS,CAAAL,QAAK,KAAAD;EAElB;EACA,KAAAgB,SAAM,SAAYC,KAAS;EAE3B,OAAM,eACJ,IAAA5B,kBAAA,CAAA6B,GAAA,EAAA3B,YAAA,CAAA+B,WAAA;IAACX,EAAA;IAAAJ,KAAA;IAAAC,KACC;IAAAC,UACA;IAAAC,QACM;IAAUI,SAChB;IAAcS,QACd,EAAAN;EAAqB;AACrB","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ChildTable_exports","__export","ChildTable","module","exports","import_jsx_runtime","require","import_forms","import_tamagui","import_TableInput","ChildTableFieldError","param","form","name","children","Subscribe","jsx","selector","state","_state_fieldMeta_name","_state_fieldMeta","fieldMeta","errors","children1","length","String","props","validators","onChange","columns","defaultRow","disabled","readOnly","skeleton","compact","minRows","maxRows","showRowNumbers","showAddRow","showDeleteRow","label","error","helperText","required","id","idProp","useProps","knobProps","resolvedForm","useFormField","formBound","hasLayout","Input","TableInput","table","data","control","YStack","width","role","renderLayout","renderLayout2","resolvedError","FieldLayout"],"sources":["../../../../src/components/ChildTable/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/ColumnHeaderFilter/index.cjs

@@ -22,8 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var ColumnHeaderFilter_exports = {};
 __export(ColumnHeaderFilter_exports, {
-  ColumnHeaderFilter: () => ColumnHeaderFilter,
-  default: () => ColumnHeaderFilter_default
+  ColumnHeaderFilter: () => ColumnHeaderFilter
 });
 module.exports = __toCommonJS(ColumnHeaderFilter_exports);
 var import_react = require("@phosphor-icons/react");
@@ -32,29 +31,12 @@ var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_components = require("@multiplatform.one/components");
 var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.cjs");
+var import_filterFields = require("../../utils/filterFields.cjs");
+var import_FilterOperatorValueEditor = require("../FilterOperatorValueEditor/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const TEXT_OPERATORS = ["contains", "doesNotContain", "is", "isNot", "startsWith", "endsWith", "isEmpty", "isNotEmpty"];
-const NUMBER_OPERATORS = ["is", "isNot", "isLessThan", "isGreaterThan", "isLessThanOrEqual", "isGreaterThanOrEqual"];
-const DATE_OPERATORS = ["is", "isNot", "isBefore", "isAfter", "isOnOrBefore", "isOnOrAfter"];
-const BOOLEAN_OPERATORS = ["is", "isNot"];
-const OPERATOR_LABELS = {
-  contains: "Contains",
-  doesNotContain: "Does not contain",
-  is: "Is",
-  isNot: "Is not",
-  startsWith: "Starts with",
-  endsWith: "Ends with",
-  isEmpty: "Is empty",
-  isNotEmpty: "Is not empty",
-  isLessThan: "Less than",
-  isGreaterThan: "Greater than",
-  isLessThanOrEqual: "Less than or equal",
-  isGreaterThanOrEqual: "Greater than or equal",
-  isBefore: "Before",
-  isAfter: "After",
-  isOnOrBefore: "On or before",
-  isOnOrAfter: "On or after"
-};
+const FILTER_TRIGGER_VISUAL = 22;
+const FILTER_TRIGGER_OUTSET = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - FILTER_TRIGGER_VISUAL) / 2));
 function ColumnHeaderFilter({
   columnId: _columnId,
   columnLabel,
@@ -70,26 +52,8 @@ function ColumnHeaderFilter({
   const [open, setOpen] = (0, import_react2.useState)(false);
   const [operator, setOperator] = (0, import_react2.useState)("contains");
   const [value, setValue] = (0, import_react2.useState)("");
-  const operators = (0, import_react2.useMemo)(() => {
-    switch (columnType) {
-      case "number":
-        return NUMBER_OPERATORS;
-      case "date":
-        return DATE_OPERATORS;
-      case "boolean":
-        return BOOLEAN_OPERATORS;
-      case "select":
-        return ["is", "isNot", "isAnyOf"];
-      default:
-        return TEXT_OPERATORS;
-    }
-  }, [columnType]);
-  const operatorOptions = (0, import_react2.useMemo)(() => operators.map(op => ({
-    value: op,
-    label: OPERATOR_LABELS[op] || op
-  })), [operators]);
   const handleApply = () => {
-    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+    if ((0, import_filterFields.operatorNeedsNoValue)(operator)) {
       onFilterChange({
         operator,
         value: null
@@ -106,31 +70,24 @@ function ColumnHeaderFilter({
     setValue("");
     setOperator("contains");
     onFilterChange(void 0);
-    setOpen(false);
   };
-  const needsValueInput = !["isEmpty", "isNotEmpty"].includes(operator);
-  const booleanOptions = [{
-    value: "true",
-    label: "True"
-  }, {
-    value: "false",
-    label: "False"
-  }];
-  const selectOptions = (0, import_react2.useMemo)(() => options?.map(opt => ({
-    value: String(opt.value),
-    label: opt.label
-  })) || [], [options]);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
     open,
     onOpenChange: setOpen,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
-      content: isFiltered ? "Edit filter" : "Filter this column",
+      content: isFiltered ? (0, import_t.t)("Edit filter") : (0, import_t.t)("Filter this column"),
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
         asChild: true,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           padding: "$1",
           borderRadius: "$2",
           cursor: "pointer",
+          ...(0, import_theme.pressTargetStyle)(),
+          alignItems: "center",
+          justifyContent: "center",
+          marginVertical: -FILTER_TRIGGER_OUTSET,
+          marginHorizontal: -FILTER_TRIGGER_OUTSET,
+          hitSlop: (0, import_theme.pressTargetHitSlop)(FILTER_TRIGGER_VISUAL),
           hoverStyle: {
             backgroundColor: "$color4"
           },
@@ -171,59 +128,20 @@ function ColumnHeaderFilter({
         borderColor: "$color6"
       }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
         ...knobProps.gap,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontSize: knobProps.sizeToken,
           fontWeight: "600",
           color: "$color11",
-          children: ["Filter: ", columnLabel]
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-          label: "Condition",
-          value: operator,
-          onValueChange: v => {
-            if (typeof v === "string") {
-              setOperator(v);
-            }
-          },
-          options: operatorOptions,
-          size: "$3",
-          compact: true
-        }), needsValueInput && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-          gap: "$1",
-          children: columnType === "boolean" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-            label: "Value",
-            value,
-            onValueChange: v => {
-              if (typeof v === "string") {
-                setValue(v);
-              }
-            },
-            options: booleanOptions,
-            placeholder: "Select...",
-            size: "$3",
-            compact: true
-          }) : columnType === "select" && options ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-            label: "Value",
-            value,
-            onValueChange: v => {
-              if (typeof v === "string") {
-                setValue(v);
-              }
-            },
-            options: selectOptions,
-            placeholder: "Select...",
-            size: "$3",
-            compact: true
-          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-            label: "Value",
-            value,
-            onChangeText: setValue,
-            placeholder: columnType === "date" ? "YYYY-MM-DD" : "Enter value...",
-            size: "$3",
-            compact: true,
-            ...(columnType === "number" && {
-              keyboardType: "numeric"
-            })
+          children: (0, import_t.t)("Filter: {{column}}", {
+            column: columnLabel
           })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FilterOperatorValueEditor.FilterOperatorValueEditor, {
+          fieldType: columnType,
+          operator,
+          value,
+          onOperatorChange: setOperator,
+          onValueChange: setValue,
+          options
         }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           gap: "$2",
           justifyContent: "flex-end",
@@ -231,15 +149,14 @@ function ColumnHeaderFilter({
             size: "$2",
             variant: "outlined",
             onPress: handleClear,
-            children: "Clear"
+            children: (0, import_t.t)("Clear")
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
             size: "$2",
             onPress: handleApply,
-            children: "Apply"
+            children: (0, import_t.t)("Apply")
           })]
         })]
       })]
     })]
   });
-}
-var ColumnHeaderFilter_default = ColumnHeaderFilter;
+}