@opencorestack/opengridx 3.4.0 → 3.5.0

package/lib/components/HeaderFilter/HeaderFilter.css

@@ -0,0 +1,160 @@
+/* Header filter row (headerFilters): inside .ogx__header-wrap, under the column header row, so it
+   sticks with the headers. Its height (--ogx-header-filter-height) is set by the grid from
+   headerFilterHeight. */
+.ogx__header-filter-row {
+  display: flex;
+  align-items: stretch;
+  height: var(--ogx-header-filter-height, 40px);
+  min-height: var(--ogx-header-filter-height, 40px);
+  background: var(--ogx-grid-header-background);
+  border-bottom: 1px solid var(--ogx-grid-border-color);
+}
+.ogx__header-filter-cell {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+  background: var(--ogx-grid-header-background);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-sm, 0.8125rem);
+  color: var(--ogx-grid-header-text);
+}
+.ogx__header-filter-cell:focus,
+.ogx__header-filter-cell:focus-visible {
+  outline: none;
+}
+.ogx--kb .ogx__header-filter-cell--focused {
+  outline: 2px solid var(--ogx-grid-cell-focus-border, var(--ogx-color-primary, #2563eb));
+  outline-offset: -2px;
+  z-index: 6;
+}
+.ogx__header-filter-cell--pinned {
+  z-index: 12;
+}
+.ogx__header-filter-cell--pinned-left-last {
+  box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+.ogx__header-filter-cell--pinned-right-first {
+  margin-left: auto;
+  box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+
+/* Operator button: a compact symbol for the current operator; opens the operator menu. */
+.ogx__header-filter-operator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  min-width: 22px;
+  height: 24px;
+  padding: 0 3px;
+  border: none;
+  border-radius: var(--ogx-border-radius-sm, 4px);
+  background: transparent;
+  color: var(--ogx-color-gray-500);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+.ogx__header-filter-operator:hover,
+.ogx__header-filter-operator--open {
+  background: var(--ogx-grid-header-hover-background);
+  color: var(--ogx-grid-header-text);
+}
+.ogx__header-filter-cell--active .ogx__header-filter-operator {
+  color: var(--ogx-color-primary);
+}
+
+/* Value controls: the shared Input, and native selects styled to match it. */
+.ogx__header-filter-input-wrapper {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 28px;
+}
+.ogx-input.ogx__header-filter-input {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 6px;
+  font-size: inherit;
+}
+.ogx__header-filter-select {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 28px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border: var(--ogx-border-width-thin, 1px) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-md);
+  background: var(--ogx-color-white);
+  color: var(--ogx-color-gray-900);
+  font-family: var(--ogx-font-family);
+  font-size: inherit;
+  outline: none;
+  cursor: pointer;
+}
+.ogx__header-filter-select:hover {
+  border-color: var(--ogx-border-color-hover);
+}
+.ogx__header-filter-select:focus {
+  border-color: var(--ogx-color-primary);
+  box-shadow: 0 0 0 1px var(--ogx-color-primary);
+}
+.ogx__header-filter-cell--active .ogx-input-wrapper,
+.ogx__header-filter-cell--active .ogx__header-filter-select {
+  border-color: var(--ogx-color-primary);
+}
+.ogx__header-filter-operator-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ogx-color-gray-600);
+  font-style: italic;
+}
+
+.ogx__header-filter-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: var(--ogx-border-radius-sm, 4px);
+  background: transparent;
+  color: var(--ogx-color-gray-500);
+  cursor: pointer;
+}
+.ogx__header-filter-clear:hover {
+  background: var(--ogx-grid-header-hover-background);
+  color: var(--ogx-grid-header-text);
+}
+
+/* Read-only label for a filter the row cannot show (OR logic, nested groups, other conditions). */
+.ogx__header-filter-custom {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 4px;
+  border: none;
+  background: transparent;
+  color: var(--ogx-color-primary);
+  font: inherit;
+  font-style: italic;
+  text-align: left;
+}
+button.ogx__header-filter-custom {
+  cursor: pointer;
+  text-decoration: underline dotted;
+}

package/lib/components/HeaderFilter/HeaderFilterCell.tsx

@@ -0,0 +1,370 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import type { GridColDef, GridFilterItem, GridFilterOperator } from '../../types';
+import { filterValueToInputText, NO_VALUE_OPERATORS } from '../../utils/filtering';
+import {
+    HEADER_FILTER_DEBOUNCE_MS,
+    HEADER_FILTER_OPERATOR_LABELS,
+    HEADER_FILTER_OPERATOR_SYMBOLS,
+    buildHeaderFilterItem,
+    convertHeaderFilterValue,
+    getHeaderFilterDefaultOperator,
+    getHeaderFilterOperators,
+    type GridHeaderFilterState,
+} from '../../utils/headerFilters';
+import { Input } from '../ui/Input';
+import { HeaderFilterOperatorMenu } from './HeaderFilterOperatorMenu';
+
+export interface HeaderFilterCellProps {
+    colDef: GridColDef;
+    /** What the cell shows: the item it owns, or "Custom filter". */
+    state: GridHeaderFilterState;
+    style: React.CSSProperties;
+    /** Classes for pinning and focus, added to `ogx__header-filter-cell`. */
+    className: string;
+    ariaColIndex: number;
+    /** Stores (or removes, with null) the cell's own filter item. Must keep its identity. */
+    onItemChange: (field: string, item: GridFilterItem | null) => void;
+    onOpenFilterPanel?: () => void;
+}
+
+interface ValueOption {
+    key: string;
+    value: unknown;
+    label: string;
+}
+
+function getValueOptions(col: GridColDef): ValueOption[] {
+    return (col.valueOptions ?? []).map((option, index) => (
+        option !== null && typeof option === 'object'
+            ? { key: String(index), value: option.value, label: option.label }
+            : { key: String(index), value: option, label: String(option) }
+    ));
+}
+
+function matchesOption(option: ValueOption, value: unknown): boolean {
+    const single = Array.isArray(value) ? value[0] : value;
+    if (Object.is(option.value, single)) return true;
+    return single != null && String(option.value).toLowerCase() === String(single).toLowerCase();
+}
+
+/** The item value for typed text. isAnyOf takes a comma-separated list. */
+function fromInputText(text: string, operator: GridFilterOperator): unknown {
+    if (operator === 'isAnyOf') return text.split(',').map(part => part.trim()).filter(part => part !== '');
+    return text;
+}
+
+function sameValue(a: unknown, b: unknown): boolean {
+    if (Object.is(a, b)) return true;
+    if (Array.isArray(a) && Array.isArray(b)) return a.length === b.length && a.every((v, i) => sameValue(v, b[i]));
+    return false;
+}
+
+function sameItem(a: GridFilterItem | undefined, b: GridFilterItem | undefined): boolean {
+    if (a === b) return true;
+    if (!a || !b) return false;
+    return a.operator === b.operator && sameValue(a.value, b.value);
+}
+
+function ClearIcon() {
+    return (
+        <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+            <line x1="6" y1="6" x2="18" y2="18" />
+            <line x1="18" y1="6" x2="6" y2="18" />
+        </svg>
+    );
+}
+
+/** One cell of the header filter row: operator button, value control and clear button. */
+export function HeaderFilterCell({ colDef, state, style, className, ariaColIndex, onItemChange, onOpenFilterPanel }: HeaderFilterCellProps) {
+    const label = colDef.headerName || colDef.field;
+    const item = state.kind === 'editable' ? state.item : undefined;
+    const operator: GridFilterOperator = item?.operator ?? getHeaderFilterDefaultOperator(colDef);
+    const valueOptions = getValueOptions(colDef);
+    const usesSelect = colDef.type === 'boolean' || (colDef.type === 'singleSelect' && valueOptions.length > 0);
+    const showsValue = !NO_VALUE_OPERATORS.has(operator);
+
+    // Text typed but not committed yet (debounced); null while the input shows the committed value.
+    const [draft, setDraft] = useState<string | null>(null);
+    const [menuAnchor, setMenuAnchor] = useState<HTMLElement | null>(null);
+
+    // The last item this cell reported (null: removed). Its own change arriving late (a parent that
+    // stores the model asynchronously) is not mistaken for a change made elsewhere.
+    const [lastEmitted, setLastEmitted] = useState<GridFilterItem | null | undefined>(undefined);
+    // A change made elsewhere (filter panel, Clear all, apiRef) discards typing not committed yet.
+    const [seenItem, setSeenItem] = useState(item);
+    if (seenItem !== item) {
+        setSeenItem(item);
+        const own = lastEmitted !== undefined && sameItem(lastEmitted ?? undefined, item);
+        if (!sameItem(seenItem, item) && !own) setDraft(null);
+    }
+
+    const cellRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const selectRef = useRef<HTMLSelectElement>(null);
+    const customRef = useRef<HTMLButtonElement>(null);
+    const operatorRef = useRef<HTMLButtonElement>(null);
+
+    const latestRef = useRef({ item, colDef, onItemChange });
+    useLayoutEffect(() => {
+        latestRef.current = { item, colDef, onItemChange };
+    });
+
+    // Commits typed text unless it matches what the item already holds.
+    const commitText = useCallback((text: string) => {
+        const { item: current, colDef: col, onItemChange: emit } = latestRef.current;
+        const unchanged = current ? text === filterValueToInputText(current.value, col.type) : text.trim() === '';
+        if (unchanged) return;
+        const op = current?.operator ?? getHeaderFilterDefaultOperator(col);
+        const next = buildHeaderFilterItem(col, op, fromInputText(text, op));
+        setLastEmitted(next);
+        emit(col.field, next);
+    }, []);
+
+    // Typing still waiting for the debounce is committed if the cell unmounts meanwhile (its column
+    // scrolled out of the render window, the row turned off).
+    const pendingRef = useRef<string | null>(null);
+    useLayoutEffect(() => {
+        pendingRef.current = draft;
+    });
+    useEffect(() => () => {
+        const pending = pendingRef.current;
+        pendingRef.current = null;
+        if (pending !== null) commitText(pending);
+    }, [commitText]);
+
+    useEffect(() => {
+        if (draft === null) return undefined;
+        const handle = setTimeout(() => {
+            pendingRef.current = null;
+            commitText(draft);
+            setDraft(null);
+        }, HEADER_FILTER_DEBOUNCE_MS);
+        return () => clearTimeout(handle);
+    }, [draft, commitText]);
+
+    const focusCell = () => cellRef.current?.focus({ preventScroll: true });
+    const focusControl = () => (inputRef.current ?? selectRef.current)?.focus({ preventScroll: true });
+
+    const report = (next: GridFilterItem | null) => {
+        setLastEmitted(next);
+        onItemChange(colDef.field, next);
+    };
+
+    const setValue = (value: unknown) => {
+        setDraft(null);
+        report(buildHeaderFilterItem(colDef, operator, value));
+    };
+
+    const clear = () => {
+        setDraft(null);
+        report(null);
+    };
+
+    const openMenu = () => { if (operatorRef.current) setMenuAnchor(operatorRef.current); };
+
+    const closeMenu = (restoreFocus: boolean) => {
+        setMenuAnchor(null);
+        if (!restoreFocus) return;
+        if (inputRef.current || selectRef.current) focusControl();
+        else focusCell();
+    };
+
+    const selectOperator = (op: GridFilterOperator) => {
+        // Keep what was typed even if the debounce has not committed it yet.
+        const value = draft !== null ? fromInputText(draft, op) : item?.value;
+        setDraft(null);
+        setMenuAnchor(null);
+        report(buildHeaderFilterItem(colDef, op, convertHeaderFilterValue(value, op)));
+        // The value control may only mount with the new operator (from isEmpty), so focus after commit.
+        requestAnimationFrame(() => {
+            if (inputRef.current || selectRef.current) focusControl();
+            else focusCell();
+        });
+    };
+
+    const isCustom = state.kind === 'custom';
+    const isTextInput = !isCustom && showsValue && !usesSelect;
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const cell = event.currentTarget;
+        const target = event.target as Node;
+        // Keys from the portalled operator menu reach this handler through the React tree only.
+        if (!cell.contains(target)) return;
+        if (event.nativeEvent.isComposing) return;
+        const { key } = event;
+        const onCell = target === cell;
+
+        const opensMenu = (event.altKey && key === 'ArrowDown') || ((event.ctrlKey || event.metaKey) && key === 'Enter');
+        // Alt+ArrowDown in a select opens its own list.
+        if (opensMenu && !isCustom && target !== selectRef.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            openMenu();
+            return;
+        }
+        if (!onCell) {
+            if (key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                focusCell();
+            }
+            return;
+        }
+        if (key === 'Enter' || key === ' ' || key === 'Spacebar') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (isCustom) customRef.current?.click();
+            else if (inputRef.current || selectRef.current) focusControl();
+            else openMenu();
+            return;
+        }
+        if ((key === 'Delete' || key === 'Backspace') && item) {
+            event.preventDefault();
+            event.stopPropagation();
+            clear();
+            return;
+        }
+        // Typing on the cell starts a new value in its text box.
+        if (isTextInput && colDef.type !== 'date' && key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+            event.stopPropagation();
+            inputRef.current?.focus({ preventScroll: true });
+            setDraft(key);
+        }
+    };
+
+    let content: React.ReactNode = null;
+    if (isCustom) {
+        content = onOpenFilterPanel ? (
+            <button
+                ref={customRef}
+                type="button"
+                className="ogx__header-filter-custom"
+                tabIndex={-1}
+                onClick={onOpenFilterPanel}
+                title="Set in the filter panel"
+            >
+                Custom filter
+            </button>
+        ) : (
+            <span className="ogx__header-filter-custom" title="Set in the filter panel">Custom filter</span>
+        );
+    } else {
+        let valueControl: React.ReactNode;
+        if (!showsValue) {
+            valueControl = <span className="ogx__header-filter-operator-label">{HEADER_FILTER_OPERATOR_LABELS[operator] ?? operator}</span>;
+        } else if (colDef.type === 'boolean') {
+            valueControl = (
+                <select
+                    ref={selectRef}
+                    className="ogx__header-filter-select"
+                    tabIndex={-1}
+                    value={item?.value == null || item.value === '' ? '' : String(item.value)}
+                    onChange={(e) => setValue(e.target.value === '' ? '' : e.target.value === 'true')}
+                    aria-label={`Filter value for ${label}`}
+                >
+                    <option value="">Any</option>
+                    <option value="true">Yes</option>
+                    <option value="false">No</option>
+                </select>
+            );
+        } else if (usesSelect) {
+            const selected = valueOptions.find(o => matchesOption(o, item?.value));
+            valueControl = (
+                <select
+                    ref={selectRef}
+                    className="ogx__header-filter-select"
+                    tabIndex={-1}
+                    value={selected?.key ?? ''}
+                    onChange={(e) => {
+                        const option = valueOptions.find(o => o.key === e.target.value);
+                        setValue(convertHeaderFilterValue(option ? option.value : '', operator));
+                    }}
+                    aria-label={`Filter value for ${label}`}
+                >
+                    <option value="">Any</option>
+                    {valueOptions.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
+                </select>
+            );
+        } else {
+            valueControl = (
+                <Input
+                    ref={inputRef}
+                    className="ogx__header-filter-input-wrapper"
+                    inputClassName="ogx__header-filter-input"
+                    type={colDef.type === 'date' ? 'date' : 'text'}
+                    inputMode={colDef.type === 'number' ? 'decimal' : undefined}
+                    tabIndex={-1}
+                    autoComplete="off"
+                    value={draft ?? filterValueToInputText(item?.value, colDef.type)}
+                    onChange={(e) => setDraft(e.target.value)}
+                    aria-label={`Filter value for ${label}`}
+                />
+            );
+        }
+        const operatorLabel = HEADER_FILTER_OPERATOR_LABELS[operator] ?? operator;
+        content = (
+            <>
+                <button
+                    ref={operatorRef}
+                    type="button"
+                    className={`ogx__header-filter-operator${menuAnchor ? ' ogx__header-filter-operator--open' : ''}`}
+                    tabIndex={-1}
+                    aria-haspopup="menu"
+                    aria-expanded={menuAnchor !== null}
+                    aria-label={`Filter operator for ${label}: ${operatorLabel}`}
+                    title={operatorLabel}
+                    onClick={() => (menuAnchor ? setMenuAnchor(null) : openMenu())}
+                >
+                    {HEADER_FILTER_OPERATOR_SYMBOLS[operator] ?? '?'}
+                </button>
+                {valueControl}
+                {item && (
+                    <button
+                        type="button"
+                        className="ogx__header-filter-clear"
+                        tabIndex={-1}
+                        aria-label={`Clear filter for ${label}`}
+                        title="Clear"
+                        onClick={() => { clear(); focusCell(); }}
+                    >
+                        <ClearIcon />
+                    </button>
+                )}
+                {menuAnchor && (
+                    <HeaderFilterOperatorMenu
+                        anchorEl={menuAnchor}
+                        columnLabel={label}
+                        operators={getHeaderFilterOperators(colDef)}
+                        current={operator}
+                        onSelect={selectOperator}
+                        onClose={closeMenu}
+                    />
+                )}
+            </>
+        );
+    }
+
+    const classNames = [
+        'ogx__header-filter-cell',
+        item && 'ogx__header-filter-cell--active',
+        isCustom && 'ogx__header-filter-cell--custom',
+        className,
+    ].filter(Boolean).join(' ');
+
+    return (
+        <div
+            ref={cellRef}
+            className={classNames}
+            style={style}
+            role="columnheader"
+            aria-label={`Filter ${label}`}
+            aria-colindex={ariaColIndex}
+            data-field={colDef.field}
+            tabIndex={-1}
+            onKeyDown={handleKeyDown}
+        >
+            {content}
+        </div>
+    );
+}

package/lib/components/HeaderFilter/HeaderFilterOperatorMenu.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import type { GridFilterOperator } from '../../types';
+import { HEADER_FILTER_OPERATOR_LABELS } from '../../utils/headerFilters';
+import { getViewportHeight, getViewportWidth } from '../../utils/viewport';
+
+export interface HeaderFilterOperatorMenuProps {
+    anchorEl: HTMLElement;
+    /** Column header name, for the menu's label. */
+    columnLabel: string;
+    operators: GridFilterOperator[];
+    current: GridFilterOperator;
+    onSelect: (operator: GridFilterOperator) => void;
+    /** `restoreFocus`: the menu was left from the keyboard or by choosing an item. */
+    onClose: (restoreFocus: boolean) => void;
+}
+
+const HIDDEN_STYLE: React.CSSProperties = { position: 'fixed', zIndex: 1300, top: 0, left: 0, visibility: 'hidden' };
+
+const itemsOf = (menu: HTMLElement | null): HTMLElement[] =>
+    menu ? Array.from(menu.querySelectorAll<HTMLElement>('[role="menuitemradio"]')) : [];
+
+/** The operator menu of a header filter cell: a menu of radio items, portalled out of the header. */
+export function HeaderFilterOperatorMenu({ anchorEl, columnLabel, operators, current, onSelect, onClose }: HeaderFilterOperatorMenuProps) {
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [style, setStyle] = useState<React.CSSProperties>(HIDDEN_STYLE);
+
+    useLayoutEffect(() => {
+        const menu = menuRef.current;
+        if (!menu) return;
+        const anchor = anchorEl.getBoundingClientRect();
+        const box = menu.getBoundingClientRect();
+        const margin = 8;
+        let left = Math.min(anchor.left, getViewportWidth() - box.width - margin);
+        if (left < margin) left = margin;
+        let top = anchor.bottom + 4;
+        if (top + box.height + margin > getViewportHeight()) top = anchor.top - box.height - 4;
+        setStyle({ position: 'fixed', zIndex: 1300, top, left, visibility: 'visible' });
+    }, [anchorEl]);
+
+    // Focus the checked item once the menu is positioned (a hidden element cannot take focus).
+    const isPositioned = style.visibility === 'visible';
+    useLayoutEffect(() => {
+        if (!isPositioned) return;
+        const items = itemsOf(menuRef.current);
+        (items.find(item => item.getAttribute('aria-checked') === 'true') ?? items[0])?.focus({ preventScroll: true });
+    }, [isPositioned]);
+
+    const onCloseRef = useRef(onClose);
+    useLayoutEffect(() => { onCloseRef.current = onClose; });
+
+    useEffect(() => {
+        const doc = anchorEl.ownerDocument;
+        const view = doc.defaultView;
+        function handleMouseDown(event: MouseEvent) {
+            const target = event.target as Node;
+            if (menuRef.current?.contains(target) || anchorEl.contains(target)) return;
+            onCloseRef.current(false);
+        }
+        // The menu floats at a fixed position: it closes rather than drift away from its cell.
+        function handleScroll(event: Event) {
+            if (menuRef.current?.contains(event.target as Node)) return;
+            onCloseRef.current(false);
+        }
+        function handleResize() { onCloseRef.current(false); }
+        doc.addEventListener('mousedown', handleMouseDown);
+        view?.addEventListener('scroll', handleScroll, true);
+        view?.addEventListener('resize', handleResize);
+        return () => {
+            doc.removeEventListener('mousedown', handleMouseDown);
+            view?.removeEventListener('scroll', handleScroll, true);
+            view?.removeEventListener('resize', handleResize);
+        };
+    }, [anchorEl]);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        // The menu is portalled: keys must not reach the cell or the grid through the React tree.
+        event.stopPropagation();
+        const items = itemsOf(menuRef.current);
+        const index = items.indexOf(event.target as HTMLElement);
+        let next = -1;
+        switch (event.key) {
+            case 'ArrowDown': next = index + 1 >= items.length ? 0 : index + 1; break;
+            case 'ArrowUp': next = index <= 0 ? items.length - 1 : index - 1; break;
+            case 'Home': next = 0; break;
+            case 'End': next = items.length - 1; break;
+            case 'Escape':
+            case 'Tab':
+                event.preventDefault();
+                onClose(true);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        items[next]?.focus();
+    };
+
+    return ReactDOM.createPortal(
+        <div
+            ref={menuRef}
+            className="ogx-column-menu ogx__header-filter-menu"
+            style={style}
+            role="menu"
+            aria-label={`Filter operator for ${columnLabel}`}
+            onKeyDown={handleKeyDown}
+        >
+            {operators.map(op => (
+                <button
+                    key={op}
+                    type="button"
+                    role="menuitemradio"
+                    aria-checked={op === current}
+                    tabIndex={-1}
+                    className={`ogx-menu-item${op === current ? ' ogx-menu-item--active' : ''}`}
+                    onClick={() => onSelect(op)}
+                >
+                    {HEADER_FILTER_OPERATOR_LABELS[op] ?? op}
+                </button>
+            ))}
+        </div>,
+        anchorEl.closest('.ogx-theme-provider') ?? anchorEl.ownerDocument.body
+    );
+}