@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.08d4cf4

package/dist/Table/plugins/filtering/useTableFiltering.js

@@ -0,0 +1,855 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useTableFiltering.tsx
+ * @input React, types, Astryx components, theme tokens
+ * @output Exports useTableFiltering hook and filter type definitions
+ * @position Filtering plugin; consumed by Table via plugins prop
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Table/Table.doc.mjs (filtering documentation)
+ * - /packages/core/src/Table/index.ts (exports)
+ */
+import { createContext, use, useRef, useMemo, useState, useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../../../theme/tokens.stylex.js";
+import { spacingVars, radiusVars } from "../../../theme/tokens.stylex.js";
+import { Icon } from "../../../Icon/index.js";
+import { Button } from "../../../Button/index.js";
+import { Popover } from "../../../Popover/index.js";
+import { TextInput } from "../../../TextInput/index.js";
+import { NumberInput } from "../../../NumberInput/index.js";
+import { DateInput } from "../../../DateInput/index.js";
+import { TimeInput } from "../../../TimeInput/index.js";
+import { Selector } from "../../../Selector/index.js";
+import { MultiSelector } from "../../../MultiSelector/index.js";
+import { Tokenizer } from "../../../Tokenizer/index.js";
+import { proportional } from "../../columnUtils.js";
+
+// =============================================================================
+// Filter Value Types
+// =============================================================================
+
+/** Union of all filter value types (text=string, number=number, enum/list=string[]) */
+
+/**
+ * Reference to a PowerSearch field.
+ * Instead of defining the filter inline, point to a field in a shared
+ * `PowerSearchConfig`. The plugin resolves the operator's value type
+ * and renders the appropriate control.
+ *
+ * - **String form** — field key only, uses the field's `defaultOperator`:
+ *   `filter: 'status'`
+ *
+ * - **Object form** — field key + explicit operator:
+ *   `filter: { field: 'status', operator: 'is_not' }`
+ *
+ * Both require `searchConfig` on the plugin config.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// =============================================================================
+// PowerSearch → Table Filter Resolution
+// =============================================================================
+
+/**
+ * Resolve the operator for a PowerSearch field.
+ * Uses the specified operator key, the field's defaultOperator, or the first.
+ */
+function resolveOperator(field, operatorKey) {
+  if (operatorKey) {
+    return field.operators.find(o => o.key === operatorKey);
+  }
+  if (field.defaultOperator) {
+    return field.operators.find(o => o.key === field.defaultOperator);
+  }
+  return field.operators[0];
+}
+
+/**
+ * Resolve a column's filter field reference to a concrete OperatorValue.
+ *
+ * - String → field key, uses defaultOperator.
+ * - Object with `field` → look up field + optional operator.
+ * - Returns undefined if the field/operator can't be resolved.
+ */
+function resolveFilterConfig(filter, searchConfig) {
+  const fieldKey = typeof filter === 'string' ? filter : filter.field;
+  const operatorKey = typeof filter === 'string' ? undefined : filter.operator;
+  const field = searchConfig.fields.find(f => f.key === fieldKey);
+  if (!field) {
+    return undefined;
+  }
+  const operator = resolveOperator(field, operatorKey);
+  if (!operator) {
+    return undefined;
+  }
+  return operator.value;
+}
+
+/**
+ * Convert table filter state to PowerSearchFilter[] for use with `applyFilters`.
+ *
+ * Maps each non-empty entry in the filter state to a `PowerSearchFilter`,
+ * resolving the field and operator from the column config + searchConfig.
+ * This bridges the table filtering UI with PowerSearch's client-side
+ * filter engine — define filters once, apply everywhere.
+ *
+ * @example
+ * ```
+ * const { config, applyFilters } = usePowerSearchConfig(defs);
+ * const searchFilters = toSearchFilters(filters, columns, config);
+ * const filteredData = applyFilters(searchFilters, data);
+ * ```
+ */
+export function toSearchFilters(filters, columns, searchConfig) {
+  const result = [];
+  for (const col of columns) {
+    if (!col.filter) {
+      continue;
+    }
+    const value = filters[col.key];
+    if (value == null) {
+      continue;
+    }
+    const fieldKey = typeof col.filter === 'string' ? col.filter : col.filter.field;
+    const operatorKey = typeof col.filter === 'string' ? undefined : col.filter.operator;
+    const field = searchConfig.fields.find(f => f.key === fieldKey);
+    if (!field) {
+      continue;
+    }
+    const operator = resolveOperator(field, operatorKey);
+    if (!operator) {
+      continue;
+    }
+    const filterValue = tableValueToFilterValue(value, operator.value);
+    if (!filterValue) {
+      continue;
+    }
+    result.push({
+      field: fieldKey,
+      operator: operator.key,
+      value: filterValue
+    });
+  }
+  return result;
+}
+
+/**
+ * Convert a table filter value to a PowerSearch FilterValue
+ * based on the operator's value type.
+ */
+function tableValueToFilterValue(value, opValue) {
+  switch (opValue.type) {
+    case 'string':
+      return typeof value === 'string' ? {
+        type: 'string',
+        value
+      } : undefined;
+    case 'integer':
+      return typeof value === 'number' ? {
+        type: 'integer',
+        value
+      } : undefined;
+    case 'float':
+      return typeof value === 'number' ? {
+        type: 'float',
+        value
+      } : undefined;
+    case 'enum':
+      return typeof value === 'string' ? {
+        type: 'enum',
+        value
+      } : undefined;
+    case 'enum_list':
+      return Array.isArray(value) ? {
+        type: 'enum_list',
+        value: value
+      } : undefined;
+    case 'date_absolute':
+      return typeof value === 'string' ? {
+        type: 'date_absolute',
+        unixSeconds: Math.floor(new Date(value).getTime() / 1000)
+      } : undefined;
+    case 'time':
+      return typeof value === 'string' ? {
+        type: 'time',
+        value
+      } : undefined;
+    case 'string_list':
+      return Array.isArray(value) ? {
+        type: 'string_list',
+        value: value
+      } : undefined;
+    case 'entity_list':
+      return Array.isArray(value) ? {
+        type: 'entity_list',
+        value: value.map(id => ({
+          id,
+          label: id
+        }))
+      } : undefined;
+    case 'nested':
+    case 'empty':
+    case 'date_relative':
+    case 'date_range':
+    case 'custom':
+      return undefined;
+  }
+}
+
+// =============================================================================
+// Filter State
+// =============================================================================
+
+/**
+ * Complete filter state — a map from column key to filter value.
+ * Missing keys or `undefined` values mean "no filter applied" for that column.
+ *
+ * @example
+ * ```
+ * const filters: TableFilterState = {
+ *   name: 'alice',
+ *   status: 'active',
+ *   tags: ['admin', 'user'],
+ * };
+ * ```
+ */
+
+/**
+ * Display variant for the filter UI.
+ *
+ * - `'popover'` — filter icon in header; clicking opens a popover with the filter control
+ * - `'inline'` — filter control rendered directly below header text inside the header cell
+ * - `'inline-compact'` — same as inline but with compact-sized controls
+ */
+
+// =============================================================================
+// Hook Config
+// =============================================================================
+
+/**
+ * Configuration for useTableFiltering.
+ *
+ * @example
+ * ```
+ * const {filters, onFilterChange} = useTableFilterState();
+ * const filterPlugin = useTableFiltering({
+ *   filters,
+ *   onFilterChange,
+ *   variant: 'inline',
+ * });
+ * <Table plugins={{ filter: filterPlugin }} columns={columns} data={data} />
+ * ```
+ */
+
+// =============================================================================
+// Filter Store & Context
+// =============================================================================
+
+const FilterStoreContext = /*#__PURE__*/createContext(null);
+FilterStoreContext.displayName = 'FilterStoreContext';
+function useFilterStore() {
+  const store = use(FilterStoreContext);
+  if (!store) {
+    throw new Error('useFilterStore must be used within a Table with filtering');
+  }
+  return store;
+}
+
+/** Variant is stable per plugin instance — kept in a separate context so
+ *  slot components can read it without going through the mutable store. */
+const FilterVariantContext = /*#__PURE__*/createContext('popover');
+FilterVariantContext.displayName = 'FilterVariantContext';
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const filterStyles = {
+  placeholder: {
+    kZKoxP: "x10w6t97",
+    $$css: true
+  },
+  placeholderCompact: {
+    kZKoxP: "x1fgtraw",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Filter Control Components
+// =============================================================================
+
+function TextFilterControl({
+  columnKey,
+  header,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const config = store.getConfig();
+  const value = config.filters[columnKey];
+  const strValue = typeof value === 'string' ? value : '';
+  return /*#__PURE__*/_jsx(TextInput, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    value: strValue,
+    onChange: newValue => {
+      store.getConfig().onFilterChange(columnKey, newValue === '' ? null : newValue);
+    },
+    placeholder: `Filter ${header}`,
+    size: size,
+    hasClear: hasClear
+  });
+}
+function NumberFilterControl({
+  columnKey,
+  header,
+  operatorValue,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const config = store.getConfig();
+  const value = config.filters[columnKey];
+  const numValue = typeof value === 'number' ? value : null;
+  const step = operatorValue.type === 'integer' ? 1 : null;
+  const handleChange = useCallback(newValue => {
+    store.getConfig().onFilterChange(columnKey, newValue);
+  }, [store, columnKey]);
+  if (hasClear) {
+    return /*#__PURE__*/_jsx(NumberInput, {
+      label: `Filter ${header}`,
+      isLabelHidden: true,
+      value: numValue,
+      onChange: handleChange,
+      placeholder: `Filter ${header}`,
+      min: operatorValue.minValue ?? null,
+      max: operatorValue.maxValue ?? null,
+      step: step,
+      size: size,
+      hasClear: true
+    });
+  }
+  return /*#__PURE__*/_jsx(NumberInput, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    value: numValue,
+    onChange: handleChange,
+    placeholder: `Filter ${header}`,
+    min: operatorValue.minValue ?? null,
+    max: operatorValue.maxValue ?? null,
+    step: step,
+    size: size
+  });
+}
+function SelectorFilterControl({
+  columnKey,
+  header,
+  operatorValue,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const config = store.getConfig();
+  const value = config.filters[columnKey];
+  const strValue = typeof value === 'string' ? value : '';
+  const options = operatorValue.values.map(v => ({
+    value: v.value,
+    label: v.label
+  }));
+  const handleChange = useCallback(newValue => {
+    store.getConfig().onFilterChange(columnKey, newValue === '' || newValue == null ? null : newValue);
+  }, [store, columnKey]);
+  if (hasClear) {
+    return /*#__PURE__*/_jsx(Selector, {
+      label: `Filter ${header}`,
+      isLabelHidden: true,
+      options: options,
+      value: strValue || null,
+      onChange: handleChange,
+      placeholder: "All",
+      size: size,
+      hasClear: true
+    });
+  }
+  return /*#__PURE__*/_jsx(Selector, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    options: options,
+    value: strValue,
+    onChange: handleChange,
+    placeholder: "All",
+    size: size
+  });
+}
+function MultiSelectorFilterControl({
+  columnKey,
+  header,
+  operatorValue,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const config = store.getConfig();
+  const value = config.filters[columnKey];
+  const arrValue = Array.isArray(value) ? value : [];
+  const options = operatorValue.values.map(v => ({
+    value: v.value,
+    label: v.label
+  }));
+  return /*#__PURE__*/_jsx(MultiSelector, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    options: options,
+    value: arrValue,
+    onChange: newValue => {
+      store.getConfig().onFilterChange(columnKey, newValue.length === 0 ? null : newValue);
+    },
+    placeholder: "All",
+    size: size,
+    hasSelectAll: true,
+    hasSearch: false,
+    hasClear: hasClear
+  });
+}
+function DateFilterControl({
+  columnKey,
+  header,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const value = store.getConfig().filters[columnKey];
+  return /*#__PURE__*/_jsx(DateInput, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    value: value ?? undefined,
+    onChange: newValue => {
+      store.getConfig().onFilterChange(columnKey, newValue ?? null);
+    },
+    size: size,
+    hasClear: hasClear
+  });
+}
+function TimeFilterControl({
+  columnKey,
+  header,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const value = store.getConfig().filters[columnKey];
+  return /*#__PURE__*/_jsx(TimeInput, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    value: value ?? undefined,
+    onChange: newValue => {
+      store.getConfig().onFilterChange(columnKey, newValue ?? null);
+    },
+    size: size,
+    hasClear: hasClear
+  });
+}
+function StringListFilterControl({
+  columnKey,
+  header,
+  operatorValue,
+  size,
+  hasClear
+}) {
+  const store = useFilterStore();
+  const value = store.getConfig().filters[columnKey] ?? [];
+
+  // Use the operator's search source if provided, otherwise fall back
+  // to a simple static source that accepts any typed text as a new tag.
+  const fallbackSource = useMemo(() => ({
+    search: async query => query.trim() ? [{
+      id: query.trim(),
+      label: query.trim()
+    }] : [],
+    bootstrap: () => []
+  }), []);
+  const searchSource = operatorValue.searchSource ?? fallbackSource;
+  return /*#__PURE__*/_jsx(Tokenizer, {
+    label: `Filter ${header}`,
+    isLabelHidden: true,
+    searchSource: searchSource,
+    value: value.map(v => ({
+      id: v,
+      label: v
+    })),
+    onChange: items => {
+      const newValues = items.map(item => item.id);
+      store.getConfig().onFilterChange(columnKey, newValues.length > 0 ? newValues : null);
+    },
+    size: size,
+    hasClear: hasClear
+  });
+}
+
+/** Renders the appropriate filter control for a column's operator value type. */
+function FilterControl({
+  columnKey,
+  header,
+  operatorValue,
+  size,
+  hasClear
+}) {
+  switch (operatorValue.type) {
+    case 'string':
+      return /*#__PURE__*/_jsx(TextFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'integer':
+    case 'float':
+      return /*#__PURE__*/_jsx(NumberFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        operatorValue: operatorValue,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'enum':
+      return /*#__PURE__*/_jsx(SelectorFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        operatorValue: operatorValue,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'enum_list':
+      return /*#__PURE__*/_jsx(MultiSelectorFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        operatorValue: operatorValue,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'date_absolute':
+      return /*#__PURE__*/_jsx(DateFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'time':
+      return /*#__PURE__*/_jsx(TimeFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'string_list':
+    case 'entity_list':
+      return /*#__PURE__*/_jsx(StringListFilterControl, {
+        columnKey: columnKey,
+        header: header,
+        operatorValue: operatorValue,
+        size: size,
+        hasClear: hasClear
+      });
+    case 'nested':
+    case 'empty':
+    case 'date_relative':
+    case 'date_range':
+    case 'custom':
+      return null;
+  }
+}
+
+// =============================================================================
+// Popover Filter Trigger
+// =============================================================================
+
+function PopoverFilterTrigger({
+  columnKey,
+  header,
+  operatorValue
+}) {
+  const store = useFilterStore();
+  const config = store.getConfig();
+  const value = config.filters[columnKey];
+  const hasValue = value != null;
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Buffer the filter value locally while the popover is open.
+  // Only commit to the consumer's state on explicit "Apply".
+  const [draft, setDraft] = useState(null);
+  const handleOpen = useCallback(open => {
+    if (open) {
+      // Seed draft from current value when opening
+      setDraft(value ?? null);
+    }
+    setIsOpen(open);
+  }, [value]);
+  const handleApply = useCallback(() => {
+    store.getConfig().onFilterChange(columnKey, draft);
+    setIsOpen(false);
+  }, [store, columnKey, draft]);
+  const handleClear = useCallback(() => {
+    store.getConfig().onFilterChange(columnKey, null);
+    setIsOpen(false);
+  }, [store, columnKey]);
+
+  // Build a local store override so FilterControl writes to the draft
+  // instead of the consumer's state.
+  const draftStore = useMemo(() => ({
+    getConfig() {
+      return {
+        ...store.getConfig(),
+        filters: {
+          ...store.getConfig().filters,
+          [columnKey]: draft ?? undefined
+        },
+        onFilterChange: (_key, val) => {
+          setDraft(val);
+        }
+      };
+    }
+  }), [store, columnKey, draft, setDraft]);
+  return /*#__PURE__*/_jsx(Popover, {
+    isOpen: isOpen,
+    onOpenChange: handleOpen,
+    label: `Filter ${header}`,
+    placement: "below",
+    alignment: "start",
+    content: /*#__PURE__*/_jsx(FilterStoreContext, {
+      value: draftStore,
+      children: /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "xafpxmx"
+        },
+        children: [/*#__PURE__*/_jsx(FilterControl, {
+          columnKey: columnKey,
+          header: header,
+          operatorValue: operatorValue,
+          size: "md"
+        }), /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 x1txdalj xtbrsbv"
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            label: "Reset",
+            variant: "ghost",
+            size: "sm",
+            onClick: handleClear
+          }), /*#__PURE__*/_jsx("div", {
+            ...{
+              className: "x98rzlu"
+            }
+          }), /*#__PURE__*/_jsx(Button, {
+            label: "Apply",
+            variant: "primary",
+            size: "sm",
+            onClick: handleApply
+          })]
+        })]
+      })
+    }),
+    children: /*#__PURE__*/_jsx("button", {
+      type: "button",
+      "aria-label": `Filter ${header}`,
+      "aria-haspopup": "dialog",
+      ...{
+        0: {
+          className: "x1ypdohk x3nfvp2 x6s0dn4 xl56j7k x1717udv xh6dtrn x2lah0s x1xrq5m x17aqpur x3onkmb xof6bs x25t5g8"
+        },
+        1: {
+          className: "x1ypdohk x3nfvp2 x6s0dn4 xl56j7k x1717udv xh6dtrn x2lah0s x1xrq5m x17aqpur x1hc1fzr"
+        }
+      }[!!hasValue << 0],
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "funnel",
+        size: "xsm",
+        color: hasValue ? 'accent' : 'secondary'
+      })
+    })
+  });
+}
+
+// =============================================================================
+// Helper
+// =============================================================================
+
+function getHeaderString(column) {
+  if (typeof column.header === 'string') {
+    return column.header;
+  }
+  return column.key;
+}
+
+// =============================================================================
+// Filter Slot Components
+//
+// These are stable components rendered by transformHeaderCell. Because the
+// component *type* (`FilterSlot` / `InlineFilterSlot`) never changes across
+// renders, React keeps the same fiber and no remount occurs when filter state
+// updates. All dynamic data (filters, onFilterChange, operatorValue) is read
+// from FilterStoreContext at render time — not passed as props.
+// =============================================================================
+
+/**
+ * Popover variant slot — renders the funnel trigger button for one column.
+ * Reads filter state and column config from context.
+ */
+function FilterSlot({
+  columnKey,
+  header,
+  operatorValue
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    ...{
+      className: "x78zum5 x6s0dn4 x2lah0s"
+    },
+    children: /*#__PURE__*/_jsx(PopoverFilterTrigger, {
+      columnKey: columnKey,
+      header: header,
+      operatorValue: operatorValue
+    })
+  });
+}
+
+/**
+ * Inline variant slot — renders the filter control (or placeholder) for one
+ * column. Uses native `hasClear` on each input component for clearing.
+ */
+function InlineFilterSlot({
+  columnKey,
+  header,
+  operatorValue
+}) {
+  const variant = use(FilterVariantContext);
+  const size = 'sm';
+  const placeholderStyle = variant === 'inline-compact' ? filterStyles.placeholderCompact : filterStyles.placeholder;
+  return /*#__PURE__*/_jsx("div", {
+    ...{
+      className: "x78zum5 xdt5ytf xzye2dw xcsaf9d xeuugli"
+    },
+    children: operatorValue != null ? /*#__PURE__*/_jsx(FilterControl, {
+      columnKey: columnKey,
+      header: header,
+      operatorValue: operatorValue,
+      size: size,
+      hasClear: true
+    }) : /*#__PURE__*/_jsx("div", {
+      "aria-hidden": "true",
+      ...stylex.props(placeholderStyle)
+    })
+  });
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * useTableFiltering — table plugin for column filtering.
+ *
+ * Returns a stable TablePlugin that transforms header cells to add
+ * filter controls. Follows the headless pattern: consumer owns filter state,
+ * plugin provides UI and interaction.
+ *
+ * Filter types are configured per-column via the `filter` field on
+ * TableColumn. The plugin reads filter config from columns and
+ * renders the appropriate control (text input, selector, etc.).
+ *
+ * @template T - Row data type
+ *
+ * @example
+ * ```
+ * const {filters, onFilterChange} = useTableFilterState();
+ * const filterPlugin = useTableFiltering({
+ *   filters,
+ *   onFilterChange,
+ *   variant: 'popover',
+ * });
+ * <Table
+ *   data={users}
+ *   columns={[
+ *     { key: 'name', header: 'Name', filter: 'name' },
+ *     { key: 'status', header: 'Status', filter: 'status' },
+ *   ]}
+ *   plugins={{ filter: filterPlugin }}
+ * />
+ * ```
+ */
+export function useTableFiltering(config) {
+  const configRef = useRef(config);
+  configRef.current = config;
+  const storeRef = useRef(null);
+  if (storeRef.current == null) {
+    storeRef.current = {
+      getConfig() {
+        return configRef.current;
+      }
+    };
+  }
+  const store = storeRef.current;
+  const variant = config.variant ?? 'popover';
+  return useMemo(() => ({
+    // For inline variants, upgrade columns with filters and no explicit width
+    // to proportional(1) so they get a default minWidth from the width resolver.
+    // Without this, inline filter inputs can collapse to unusable sizes.
+    transformColumns: variant === 'inline' || variant === 'inline-compact' ? columns => columns.map(col => {
+      if (col.filter != null && col.width == null) {
+        return {
+          ...col,
+          width: proportional(1)
+        };
+      }
+      return col;
+    }) : undefined,
+    transformTableContext(children) {
+      return /*#__PURE__*/_jsx(FilterStoreContext, {
+        value: store,
+        children: /*#__PURE__*/_jsx(FilterVariantContext, {
+          value: variant,
+          children: children
+        })
+      });
+    },
+    transformHeaderCell(props, column) {
+      const rawFilter = column.filter;
+      const header = getHeaderString(column);
+
+      // Resolve field references to concrete OperatorValue
+      const operatorValue = rawFilter ? resolveFilterConfig(rawFilter, store.getConfig().searchConfig) : undefined;
+      if (variant === 'popover') {
+        // No operator value on this column — nothing to render.
+        if (!operatorValue) {
+          return props;
+        }
+        return {
+          ...props,
+          after: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [props.after, /*#__PURE__*/_jsx(FilterSlot, {
+              columnKey: column.key,
+              header: header,
+              operatorValue: operatorValue
+            })]
+          })
+        };
+      }
+
+      // Inline or inline-compact: render filter controls below the header
+      // label row. Uses the `below` slot so controls sit underneath the
+      // header content rather than inline after it.
+      return {
+        ...props,
+        below: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [props.below, /*#__PURE__*/_jsx(InlineFilterSlot, {
+            columnKey: column.key,
+            header: header,
+            operatorValue: operatorValue
+          })]
+        })
+      };
+    }
+  }), [store, variant]);
+}