@alaarab/ogrid-fluent 1.0.0

package/README.md

@@ -0,0 +1,56 @@
+# @alaarab/ogrid-fluent
+
+[OGrid](https://github.com/alaarab/ogrid) data table for [Fluent UI](https://react.fluentui.dev/). Sort, filter (text, multi-select, people), paginate, show/hide columns, and export to CSV. Use an in-memory array or plug in your own API.
+
+## Install
+
+```bash
+npm install @alaarab/ogrid-fluent
+```
+
+### Peer Dependencies
+
+```
+@fluentui/react-components ^9.0.0
+@fluentui/react-icons ^2.0.0
+react ^17.0.0 || ^18.0.0
+react-dom ^17.0.0 || ^18.0.0
+```
+
+## Quick Start
+
+```tsx
+import { OGrid, type IColumnDef } from '@alaarab/ogrid-fluent';
+
+const columns: IColumnDef<Product>[] = [
+  { columnId: 'name', name: 'Name', sortable: true, filterable: { type: 'text' }, renderCell: (item) => <span>{item.name}</span> },
+  { columnId: 'category', name: 'Category', sortable: true, filterable: { type: 'multiSelect', filterField: 'category' }, renderCell: (item) => <span>{item.category}</span> },
+];
+
+<OGrid<Product>
+  data={products}
+  columns={columns}
+  getRowId={(r) => r.id}
+  entityLabelPlural="products"
+/>
+```
+
+## Components
+
+- **`OGrid<T>`** -- Full table with column chooser, filters, and pagination (Fluent UI implementation)
+- **`DataGridTable<T>`** -- Lower-level grid for custom state management
+- **`ColumnChooser`** -- Column visibility dropdown
+- **`PaginationControls`** -- Pagination UI
+- **`ColumnHeaderFilter`** -- Column header with sort/filter (used internally)
+
+All core types, hooks, and utilities are re-exported from `@alaarab/ogrid-core` for convenience.
+
+## Storybook
+
+```bash
+npm run storybook   # port 6006
+```
+
+## License
+
+MIT

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Checkbox, makeStyles, tokens, mergeClasses, } from '@fluentui/react-components';
+import { TableSettingsRegular, ChevronDownRegular, ChevronUpRegular } from '@fluentui/react-icons';
+const useStyles = makeStyles({
+    container: {
+        position: 'relative',
+        display: 'inline-flex',
+    },
+    triggerButton: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '6px 12px',
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusMedium,
+        backgroundColor: tokens.colorNeutralBackground1,
+        cursor: 'pointer',
+        fontSize: tokens.fontSizeBase300,
+        fontWeight: tokens.fontWeightSemibold,
+        color: tokens.colorNeutralForeground1,
+        transitionDuration: '0.15s',
+        transitionProperty: 'all',
+        transitionTimingFunction: 'ease',
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            border: `1px solid ${tokens.colorNeutralStroke1Hover}`,
+        },
+    },
+    triggerButtonOpen: {
+        border: `1px solid ${tokens.colorBrandStroke1}`,
+    },
+    buttonIcon: {
+        fontSize: '16px',
+    },
+    chevron: {
+        fontSize: '12px',
+        color: tokens.colorNeutralForeground3,
+    },
+    dropdown: {
+        position: 'absolute',
+        top: 'calc(100% + 4px)',
+        right: '0',
+        zIndex: 10000,
+        minWidth: '220px',
+        backgroundColor: tokens.colorNeutralBackground1,
+        borderRadius: tokens.borderRadiusMedium,
+        boxShadow: tokens.shadow16,
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    header: {
+        padding: '8px 12px',
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        fontWeight: tokens.fontWeightSemibold,
+        fontSize: tokens.fontSizeBase300,
+        color: tokens.colorNeutralForeground1,
+        backgroundColor: tokens.colorNeutralBackground2,
+    },
+    optionsList: {
+        maxHeight: '320px',
+        overflowY: 'auto',
+        padding: 0,
+    },
+    optionItem: {
+        padding: '4px 12px',
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '32px',
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+        },
+    },
+    actions: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: '8px',
+        padding: '8px 12px',
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: tokens.colorNeutralBackground2,
+    },
+    clearButton: {
+        padding: '6px 12px',
+        border: `1px solid ${tokens.colorNeutralStroke1}`,
+        borderRadius: tokens.borderRadiusSmall,
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground2,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightRegular,
+        cursor: 'pointer',
+        transitionDuration: '0.15s',
+        transitionProperty: 'all',
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            color: tokens.colorNeutralForeground1,
+            border: `1px solid ${tokens.colorNeutralStroke1Hover}`,
+        },
+    },
+    selectAllButton: {
+        padding: '6px 16px',
+        border: 'none',
+        borderRadius: tokens.borderRadiusSmall,
+        backgroundColor: tokens.colorBrandBackground,
+        color: tokens.colorNeutralForegroundOnBrand,
+        fontSize: tokens.fontSizeBase200,
+        fontWeight: tokens.fontWeightSemibold,
+        cursor: 'pointer',
+        transitionDuration: '0.15s',
+        transitionProperty: 'all',
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+        },
+    },
+});
+export const ColumnChooser = (props) => {
+    const { columns, visibleColumns, onVisibilityChange, className } = props;
+    const classes = useStyles();
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
+            const isOutsideButton = buttonRef.current && !buttonRef.current.contains(target);
+            if (isOutsideDropdown && isOutsideButton) {
+                setIsOpen(false);
+            }
+        };
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [isOpen]);
+    const handleToggle = useCallback(() => {
+        setIsOpen(prev => !prev);
+    }, []);
+    const handleCheckboxChange = useCallback((columnKey) => {
+        return (ev, data) => {
+            ev.stopPropagation();
+            onVisibilityChange(columnKey, data.checked === true);
+        };
+    }, [onVisibilityChange]);
+    const handleDropdownClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleSelectAll = useCallback(() => {
+        columns.forEach(col => {
+            if (!visibleColumns.has(col.columnId)) {
+                onVisibilityChange(col.columnId, true);
+            }
+        });
+    }, [columns, visibleColumns, onVisibilityChange]);
+    const handleClearAll = useCallback(() => {
+        columns.forEach(col => {
+            if (!col.required && visibleColumns.has(col.columnId)) {
+                onVisibilityChange(col.columnId, false);
+            }
+        });
+    }, [columns, visibleColumns, onVisibilityChange]);
+    const visibleCount = visibleColumns.size;
+    const totalCount = columns.length;
+    return (_jsxs("div", { className: `${classes.container} ${className || ''}`, children: [_jsxs("button", { type: "button", ref: buttonRef, className: mergeClasses(classes.triggerButton, isOpen && classes.triggerButtonOpen), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", children: [_jsx(TableSettingsRegular, { className: classes.buttonIcon }), _jsxs("span", { children: ["Column Visibility (", visibleCount, " of ", totalCount, ")"] }), isOpen ? _jsx(ChevronUpRegular, { className: classes.chevron }) : _jsx(ChevronDownRegular, { className: classes.chevron })] }), isOpen && (_jsxs("div", { className: classes.dropdown, ref: dropdownRef, onClick: handleDropdownClick, children: [_jsxs("div", { className: classes.header, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }), _jsx("div", { className: classes.optionsList, children: columns.map(column => (_jsx("div", { className: classes.optionItem, children: _jsx(Checkbox, { label: column.name, checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }) }, column.columnId))) }), _jsxs("div", { className: classes.actions, children: [_jsx("button", { type: "button", className: classes.clearButton, onClick: handleClearAll, children: "Clear All" }), _jsx("button", { type: "button", className: classes.selectAllButton, onClick: handleSelectAll, children: "Select All" })] })] }))] }));
+};

package/dist/esm/ColumnChooser/ColumnChooser.module.css

@@ -0,0 +1,15 @@
+.columnChooser {
+  display: inline-block;
+}
+
+.columnChooserHeader {
+  padding: 10px 15px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
+  margin-bottom: 5px;
+}
+.columnChooserHeader h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground1, #323130);
+}

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Input, Checkbox, Spinner, Avatar, Tooltip } from '@fluentui/react-components';
+import { SearchRegular, ArrowUpRegular, ArrowDownRegular, ArrowSortRegular, FilterRegular } from '@fluentui/react-icons';
+import styles from './ColumnHeaderFilter.module.css';
+const SEARCH_DEBOUNCE_MS = 150;
+const EMPTY_ARRAY = [];
+export const ColumnHeaderFilter = React.memo((props) => {
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options, isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch } = props;
+    const safeSelectedValues = selectedValues ?? EMPTY_ARRAY;
+    const safeOptions = options ?? EMPTY_ARRAY;
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+    const [tempSelected, setTempSelected] = useState(new Set(safeSelectedValues));
+    const [tempTextValue, setTempTextValue] = useState(textValue);
+    const [searchText, setSearchText] = useState('');
+    const [debouncedSearchText, setDebouncedSearchText] = useState('');
+    const [peopleSuggestions, setPeopleSuggestions] = useState([]);
+    const [isPeopleLoading, setIsPeopleLoading] = useState(false);
+    const [peopleSearchText, setPeopleSearchText] = useState('');
+    const [popoverPosition, setPopoverPosition] = useState(null);
+    const headerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const searchDebounceRef = useRef();
+    const peopleSearchTimeoutRef = useRef(undefined);
+    const peopleInputRef = useRef(null);
+    useEffect(() => {
+        if (isFilterOpen) {
+            setTempSelected(new Set(safeSelectedValues));
+            setTempTextValue(textValue);
+            setSearchText('');
+            setDebouncedSearchText('');
+            setPeopleSearchText('');
+            setPeopleSuggestions([]);
+            if (headerRef.current) {
+                const rect = headerRef.current.getBoundingClientRect();
+                setPopoverPosition({
+                    top: rect.bottom + 4,
+                    left: rect.left
+                });
+            }
+            if (filterType === 'people') {
+                setTimeout(() => {
+                    peopleInputRef.current?.focus();
+                }, 50);
+            }
+        }
+        else {
+            setPopoverPosition(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFilterOpen]);
+    useEffect(() => {
+        if (searchDebounceRef.current) {
+            clearTimeout(searchDebounceRef.current);
+        }
+        searchDebounceRef.current = setTimeout(() => {
+            setDebouncedSearchText(searchText);
+        }, SEARCH_DEBOUNCE_MS);
+        return () => {
+            if (searchDebounceRef.current) {
+                clearTimeout(searchDebounceRef.current);
+            }
+        };
+    }, [searchText]);
+    useEffect(() => {
+        if (!isFilterOpen)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            const isOutsidePopover = popoverRef.current && !popoverRef.current.contains(target);
+            const isOutsideHeader = headerRef.current && !headerRef.current.contains(target);
+            if (isOutsidePopover && isOutsideHeader) {
+                setIsFilterOpen(false);
+            }
+        };
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isFilterOpen]);
+    useEffect(() => {
+        if (!isFilterOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' || event.key === 'Esc') {
+                event.preventDefault();
+                event.stopPropagation();
+                setIsFilterOpen(false);
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => document.removeEventListener('keydown', handleKeyDown, true);
+    }, [isFilterOpen]);
+    const filteredOptions = useMemo(() => {
+        if (!debouncedSearchText.trim()) {
+            return safeOptions;
+        }
+        const searchLower = debouncedSearchText.toLowerCase().trim();
+        return safeOptions.filter(opt => opt.toLowerCase().includes(searchLower));
+    }, [safeOptions, debouncedSearchText]);
+    useEffect(() => {
+        if (!peopleSearch || !isFilterOpen || filterType !== 'people')
+            return;
+        if (peopleSearchTimeoutRef.current) {
+            window.clearTimeout(peopleSearchTimeoutRef.current);
+        }
+        if (!peopleSearchText.trim()) {
+            setPeopleSuggestions([]);
+            return;
+        }
+        setIsPeopleLoading(true);
+        peopleSearchTimeoutRef.current = window.setTimeout(async () => {
+            try {
+                const results = await peopleSearch(peopleSearchText);
+                setPeopleSuggestions(results.slice(0, 10));
+            }
+            catch (error) {
+                console.error('Error searching people:', error);
+                setPeopleSuggestions([]);
+            }
+            finally {
+                setIsPeopleLoading(false);
+            }
+        }, 300);
+        return () => {
+            if (peopleSearchTimeoutRef.current) {
+                window.clearTimeout(peopleSearchTimeoutRef.current);
+            }
+        };
+    }, [peopleSearchText, peopleSearch, isFilterOpen, filterType]);
+    const handleFilterIconClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsFilterOpen(prev => !prev);
+    }, []);
+    const handlePopoverClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleInputFocus = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleInputMouseDown = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleInputClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key !== 'Escape' && e.key !== 'Esc') {
+            e.stopPropagation();
+        }
+    }, []);
+    const handleSortClick = useCallback((e) => {
+        e.stopPropagation();
+        if (onSort) {
+            onSort();
+        }
+    }, [onSort]);
+    const handleCheckboxChange = useCallback((option, checked) => {
+        setTempSelected(prev => {
+            const newSet = new Set(prev);
+            if (checked) {
+                newSet.add(option);
+            }
+            else {
+                newSet.delete(option);
+            }
+            return newSet;
+        });
+    }, []);
+    const handleSelectAll = useCallback(() => {
+        setTempSelected(new Set(filteredOptions));
+    }, [filteredOptions]);
+    const handleClearSelection = useCallback(() => {
+        setTempSelected(new Set());
+    }, []);
+    const handleApplyMultiSelect = useCallback(() => {
+        if (onFilterChange) {
+            onFilterChange(Array.from(tempSelected));
+        }
+        setIsFilterOpen(false);
+    }, [onFilterChange, tempSelected]);
+    const handleTextApply = useCallback(() => {
+        if (onTextChange) {
+            onTextChange(tempTextValue.trim());
+        }
+        setIsFilterOpen(false);
+    }, [onTextChange, tempTextValue]);
+    const handleTextClear = useCallback(() => {
+        setTempTextValue('');
+    }, []);
+    const handleTextKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            handleTextApply();
+        }
+    }, [handleTextApply]);
+    const handleUserSelect = useCallback((user) => {
+        if (onUserChange) {
+            onUserChange(user);
+        }
+        setIsFilterOpen(false);
+    }, [onUserChange]);
+    const handleClearUser = useCallback(() => {
+        if (onUserChange) {
+            onUserChange(undefined);
+        }
+        setIsFilterOpen(false);
+    }, [onUserChange]);
+    const hasActiveFilter = useMemo(() => {
+        if (filterType === 'multiSelect') {
+            return safeSelectedValues.length > 0;
+        }
+        if (filterType === 'text') {
+            return !!textValue.trim();
+        }
+        if (filterType === 'people') {
+            return !!selectedUser;
+        }
+        return false;
+    }, [filterType, safeSelectedValues, textValue, selectedUser]);
+    const renderPopoverContent = () => {
+        if (filterType === 'multiSelect') {
+            return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.popoverSearch, onClick: handlePopoverClick, children: [_jsx(Input, { placeholder: "Search...", value: searchText, onChange: (e, data) => setSearchText(data.value || ''), onFocus: handleInputFocus, onMouseDown: handleInputMouseDown, onClick: handleInputClick, onKeyDown: handleInputKeyDown, autoComplete: "off", className: styles.searchInput, contentBefore: _jsx(SearchRegular, {}) }), _jsxs("div", { className: styles.resultCount, children: [filteredOptions.length, " of ", safeOptions.length, " options"] })] }), _jsxs("div", { className: styles.selectAllRow, onClick: handlePopoverClick, children: [_jsxs("button", { type: "button", className: styles.selectAllButton, onClick: handleSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx("button", { type: "button", className: styles.selectAllButton, onClick: handleClearSelection, children: "Clear" })] }), _jsx("div", { className: styles.popoverOptions, onClick: handlePopoverClick, children: isLoadingOptions ? (_jsx("div", { className: styles.loadingContainer, children: _jsx(Spinner, { size: "small", label: "Loading..." }) })) : filteredOptions.length === 0 ? (_jsx("div", { className: styles.noResults, children: "No options found" })) : (filteredOptions.map(option => (_jsx("div", { className: styles.popoverOption, children: _jsx(Checkbox, { label: option, checked: tempSelected.has(option), onChange: (ev, data) => {
+                                    ev.stopPropagation();
+                                    handleCheckboxChange(option, data.checked === true);
+                                } }) }, option)))) }), _jsxs("div", { className: styles.popoverActions, onClick: handlePopoverClick, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: handleClearSelection, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: handleApplyMultiSelect, children: "Apply" })] })] }));
+        }
+        if (filterType === 'text') {
+            return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverSearch, onClick: handlePopoverClick, children: _jsx(Input, { placeholder: "Enter search term...", value: tempTextValue, onChange: (e, data) => setTempTextValue(data.value || ''), onKeyDown: (e) => {
+                                handleInputKeyDown(e);
+                                handleTextKeyDown(e);
+                            }, onFocus: handleInputFocus, onMouseDown: handleInputMouseDown, onClick: handleInputClick, autoComplete: "off", className: styles.searchInput, contentBefore: _jsx(SearchRegular, {}) }) }), _jsxs("div", { className: styles.popoverActions, onClick: handlePopoverClick, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: handleTextClear, disabled: !tempTextValue, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: handleTextApply, children: "Apply" })] })] }));
+        }
+        if (filterType === 'people') {
+            return (_jsxs(_Fragment, { children: [selectedUser && (_jsxs("div", { className: styles.selectedUserSection, onClick: handlePopoverClick, children: [_jsx("div", { className: styles.selectedUserLabel, children: "Currently filtered by:" }), _jsxs("div", { className: styles.selectedUser, children: [_jsxs("div", { className: styles.userInfo, children: [_jsx(Avatar, { name: selectedUser.displayName, image: { src: selectedUser.photo }, size: 32 }), _jsxs("div", { className: styles.userText, children: [_jsx("div", { children: selectedUser.displayName }), _jsx("div", { className: styles.userSecondary, children: selectedUser.email })] })] }), _jsx("button", { type: "button", className: styles.removeUserButton, onClick: handleClearUser, "aria-label": "Remove filter", children: _jsx(FilterRegular, {}) })] })] })), _jsx("div", { className: styles.popoverSearch, onClick: handlePopoverClick, children: _jsxs("div", { className: styles.nativeInputWrapper, children: [_jsx(SearchRegular, { className: styles.nativeInputIcon }), _jsx("input", { ref: peopleInputRef, type: "text", placeholder: "Search for a person...", value: peopleSearchText, onChange: (e) => setPeopleSearchText(e.target.value), onFocus: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", className: styles.nativeInput })] }) }), _jsx("div", { className: styles.popoverOptions, onClick: handlePopoverClick, children: isPeopleLoading && peopleSearchText.trim() ? (_jsx("div", { className: styles.loadingContainer, children: _jsx(Spinner, { size: "small", label: "Searching..." }) })) : peopleSuggestions.length === 0 && peopleSearchText.trim() ? (_jsx("div", { className: styles.noResults, children: "No results found" })) : peopleSearchText.trim() ? (peopleSuggestions.map(user => (_jsx("div", { className: styles.personOption, onClick: (e) => {
+                                e.stopPropagation();
+                                handleUserSelect(user);
+                            }, children: _jsxs("div", { className: styles.userInfo, children: [_jsx(Avatar, { name: user.displayName, image: { src: user.photo }, size: 32 }), _jsxs("div", { className: styles.userText, children: [_jsx("div", { children: user.displayName }), _jsx("div", { className: styles.userSecondary, children: user.email })] })] }) }, user.id || user.email || user.displayName)))) : (_jsx("div", { className: styles.noResults, children: "Type to search..." })) }), selectedUser && (_jsx("div", { className: styles.popoverActions, onClick: handlePopoverClick, children: _jsx("button", { type: "button", className: styles.clearButton, onClick: handleClearUser, children: "Clear Filter" }) }))] }));
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: styles.columnHeader, ref: headerRef, children: [_jsx("div", { className: styles.headerContent, children: _jsx(Tooltip, { content: columnName, relationship: "label", withArrow: true, children: _jsx("span", { className: styles.columnNameTooltipTrigger, children: _jsx("span", { className: styles.columnName, "data-header-label": true, children: columnName }) }) }) }), _jsxs("div", { className: styles.headerActions, children: [onSort && (_jsx("button", { type: "button", className: `${styles.sortIcon} ${isSorted ? styles.sortActive : ''}`, onClick: handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', children: isSorted ? (isSortedDescending ? _jsx(ArrowDownRegular, {}) : _jsx(ArrowUpRegular, {})) : (_jsx(ArrowSortRegular, {})) })), filterType !== 'none' && (_jsxs("button", { type: "button", className: `${styles.filterIcon} ${hasActiveFilter ? styles.filterActive : ''} ${isFilterOpen ? styles.filterOpen : ''}`, onClick: handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, children: [_jsx(FilterRegular, {}), hasActiveFilter && _jsx("span", { className: styles.filterBadge })] }))] }), isFilterOpen && filterType !== 'none' && popoverPosition && (_jsxs("div", { className: styles.filterPopover, ref: popoverRef, onClick: handlePopoverClick, style: {
+                    top: `${popoverPosition.top}px`,
+                    left: `${popoverPosition.left}px`
+                }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }))] }));
+});
+ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';