@alaarab/ogrid-fluent 1.0.0 → 1.2.0

package/README.md

@@ -13,8 +13,8 @@ npm install @alaarab/ogrid-fluent
 ```
 @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
+react ^17.0.0 || ^18.0.0 || ^19.0.0
+react-dom ^17.0.0 || ^18.0.0 || ^19.0.0
 ```
 
 ## Quick Start

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { Checkbox, makeStyles, tokens, mergeClasses, } from '@fluentui/react-components';
 import { TableSettingsRegular, ChevronDownRegular, ChevronUpRegular } from '@fluentui/react-icons';
+import { useColumnChooserState } from '@alaarab/ogrid-core';
 const useStyles = makeStyles({
     container: {
         position: 'relative',
@@ -116,9 +117,9 @@ const useStyles = makeStyles({
 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);
+    const { open: isOpen, handleToggle, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange });
     useEffect(() => {
         if (!isOpen)
             return;
@@ -127,7 +128,7 @@ export const ColumnChooser = (props) => {
             const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
             const isOutsideButton = buttonRef.current && !buttonRef.current.contains(target);
             if (isOutsideDropdown && isOutsideButton) {
-                setIsOpen(false);
+                handleClose();
             }
         };
         const timeoutId = setTimeout(() => {
@@ -137,46 +138,15 @@ export const ColumnChooser = (props) => {
             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) => {
+    }, [isOpen, handleClose]);
+    const handleCheckboxChange = (columnKey) => {
         return (ev, data) => {
             ev.stopPropagation();
-            onVisibilityChange(columnKey, data.checked === true);
+            setColumnVisible(columnKey)(data.checked === true);
         };
-    }, [onVisibilityChange]);
-    const handleDropdownClick = useCallback((e) => {
+    };
+    const handleDropdownClick = (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/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,252 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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 { Tooltip } from '@fluentui/react-components';
+import { ArrowUpRegular, ArrowDownRegular, ArrowSortRegular, FilterRegular } from '@fluentui/react-icons';
+import { useColumnHeaderFilterState } from '@alaarab/ogrid-core';
+import { TextFilterPopover } from './TextFilterPopover';
+import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
+import { PeopleFilterPopover } from './PeopleFilterPopover';
 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 { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options, isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, } = props;
+    const state = useColumnHeaderFilterState({
+        filterType,
+        isSorted,
+        isSortedDescending,
+        onSort,
+        selectedValues,
+        onFilterChange,
+        options,
+        isLoadingOptions,
+        textValue,
+        onTextChange,
+        selectedUser,
+        onUserChange,
+        peopleSearch,
+    });
+    const { headerRef, popoverRef, peopleInputRef, isFilterOpen, tempSelected, setTempTextValue, searchText, setSearchText, filteredOptions, peopleSuggestions, isPeopleLoading, peopleSearchText, setPeopleSearchText, hasActiveFilter, popoverPosition, handlers, } = state;
     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" })] })] }));
+            return (_jsx(MultiSelectFilterPopover, { searchText: searchText, onSearchChange: setSearchText, options: options ?? [], filteredOptions: filteredOptions, selected: tempSelected, onOptionToggle: handlers.handleCheckboxChange, onSelectAll: handlers.handleSelectAll, onClearSelection: handlers.handleClearSelection, onApply: handlers.handleApplyMultiSelect, isLoading: isLoadingOptions, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown }));
         }
         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" })] })] }));
+            return (_jsx(TextFilterPopover, { value: state.tempTextValue, onValueChange: setTempTextValue, onApply: handlers.handleTextApply, onClear: handlers.handleTextClear, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown }));
         }
         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 (_jsx(PeopleFilterPopover, { selectedUser: selectedUser, searchText: peopleSearchText, onSearchChange: setPeopleSearchText, suggestions: peopleSuggestions, isLoading: isPeopleLoading, onUserSelect: handlers.handleUserSelect, onClearUser: handlers.handleClearUser, onPopoverClick: handlers.handlePopoverClick, inputRef: peopleInputRef }));
         }
         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()] }))] }));
+    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: handlers.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: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, children: [_jsx(FilterRegular, {}), hasActiveFilter && _jsx("span", { className: styles.filterBadge })] }))] }), isFilterOpen && filterType !== 'none' && (_jsxs("div", { className: styles.filterPopover, ref: popoverRef, onClick: handlers.handlePopoverClick, style: popoverPosition
+                    ? { top: `${popoverPosition.top}px`, left: `${popoverPosition.left}px` }
+                    : { top: 0, left: 0 }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }))] }));
 });
 ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Input, Checkbox, Spinner } from '@fluentui/react-components';
+import { SearchRegular } from '@fluentui/react-icons';
+import styles from './ColumnHeaderFilter.module.css';
+export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options, filteredOptions, selected, onOptionToggle, onSelectAll, onClearSelection, onApply, isLoading, onPopoverClick, onInputFocus, onInputMouseDown, onInputClick, onInputKeyDown, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: [_jsx(Input, { placeholder: "Search...", value: searchText, onChange: (e, data) => onSearchChange(data.value ?? ''), onFocus: onInputFocus, onMouseDown: onInputMouseDown, onClick: onInputClick, onKeyDown: onInputKeyDown, autoComplete: "off", className: styles.searchInput, contentBefore: _jsx(SearchRegular, {}) }), _jsxs("div", { className: styles.resultCount, children: [filteredOptions.length, " of ", options.length, " options"] })] }), _jsxs("div", { className: styles.selectAllRow, onClick: onPopoverClick, children: [_jsxs("button", { type: "button", className: styles.selectAllButton, onClick: onSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx("button", { type: "button", className: styles.selectAllButton, onClick: onClearSelection, children: "Clear" })] }), _jsx("div", { className: styles.popoverOptions, onClick: onPopoverClick, children: isLoading ? (_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: selected.has(option), onChange: (ev, data) => {
+                        ev.stopPropagation();
+                        onOptionToggle(option, data.checked === true);
+                    } }) }, option)))) }), _jsxs("div", { className: styles.popoverActions, onClick: onPopoverClick, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: onClearSelection, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: onApply, children: "Apply" })] })] }));
+MultiSelectFilterPopover.displayName = 'MultiSelectFilterPopover';

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Spinner, Avatar } from '@fluentui/react-components';
+import { SearchRegular, FilterRegular } from '@fluentui/react-icons';
+import styles from './ColumnHeaderFilter.module.css';
+export const PeopleFilterPopover = ({ selectedUser, searchText, onSearchChange, suggestions, isLoading, onUserSelect, onClearUser, onPopoverClick, inputRef, }) => (_jsxs(_Fragment, { children: [selectedUser && (_jsxs("div", { className: styles.selectedUserSection, onClick: onPopoverClick, 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: onClearUser, "aria-label": "Remove filter", children: _jsx(FilterRegular, {}) })] })] })), _jsx("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: _jsxs("div", { className: styles.nativeInputWrapper, children: [_jsx(SearchRegular, { className: styles.nativeInputIcon }), _jsx("input", { ref: inputRef, type: "text", placeholder: "Search for a person...", value: searchText, onChange: (e) => onSearchChange(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: onPopoverClick, children: isLoading && searchText.trim() ? (_jsx("div", { className: styles.loadingContainer, children: _jsx(Spinner, { size: "small", label: "Searching..." }) })) : suggestions.length === 0 && searchText.trim() ? (_jsx("div", { className: styles.noResults, children: "No results found" })) : searchText.trim() ? (suggestions.map((user) => (_jsx("div", { className: styles.personOption, onClick: (e) => {
+                    e.stopPropagation();
+                    onUserSelect(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: onPopoverClick, children: _jsx("button", { type: "button", className: styles.clearButton, onClick: onClearUser, children: "Clear Filter" }) }))] }));
+PeopleFilterPopover.displayName = 'PeopleFilterPopover';

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Input } from '@fluentui/react-components';
+import { SearchRegular } from '@fluentui/react-icons';
+import styles from './ColumnHeaderFilter.module.css';
+export const TextFilterPopover = ({ value, onValueChange, onApply, onClear, onPopoverClick, onInputFocus, onInputMouseDown, onInputClick, onInputKeyDown, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: _jsx(Input, { placeholder: "Enter search term...", value: value, onChange: (e, data) => onValueChange(data.value ?? ''), onKeyDown: (e) => {
+                    onInputKeyDown(e);
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        onApply();
+                    }
+                }, onFocus: onInputFocus, onMouseDown: onInputMouseDown, onClick: onInputClick, autoComplete: "off", className: styles.searchInput, contentBefore: _jsx(SearchRegular, {}) }) }), _jsxs("div", { className: styles.popoverActions, onClick: onPopoverClick, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: onClear, disabled: !value, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: onApply, children: "Apply" })] })] }));
+TextFilterPopover.displayName = 'TextFilterPopover';