@alaarab/ogrid-react-fluent 2.0.0-beta

package/README.md

@@ -0,0 +1,85 @@
+<p align="center">
+  <strong>OGrid for Fluent UI</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@alaarab/ogrid-react-fluent"><img src="https://img.shields.io/npm/v/@alaarab/ogrid-react-fluent?color=%23217346&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/alaarab/ogrid/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT License" /></a>
+  <img src="https://img.shields.io/badge/React-17%20%7C%2018%20%7C%2019-blue" alt="React 17, 18, 19" />
+  <img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="TypeScript strict" />
+</p>
+
+<p align="center">
+  <a href="https://alaarab.github.io/ogrid/">Documentation</a> · <a href="https://alaarab.github.io/ogrid/docs/getting-started/overview">Getting Started</a> · <a href="https://alaarab.github.io/ogrid/docs/api/ogrid-props">API Reference</a>
+</p>
+
+---
+
+OGrid data grid for **[Fluent UI v9](https://react.fluentui.dev/)**. Also available for [Radix UI](https://www.npmjs.com/package/@alaarab/ogrid-react-radix) (default, lightweight) and [Material UI](https://www.npmjs.com/package/@alaarab/ogrid-react-material). Same API, just swap the import.
+
+## Why OGrid?
+
+| | OGrid | AG Grid Community | AG Grid Enterprise |
+|---|---|---|---|
+| Spreadsheet selection | Built-in | - | $999/dev/year |
+| Clipboard (copy/paste) | Built-in | - | $999/dev/year |
+| Fill handle | Built-in | - | $999/dev/year |
+| Undo/redo | Built-in | - | $999/dev/year |
+| Context menu | Built-in | - | $999/dev/year |
+| Status bar | Built-in | - | $999/dev/year |
+| Side bar | Built-in | - | $999/dev/year |
+| Cell editing | Built-in | Built-in | Built-in |
+| Sorting & filtering | Built-in | Built-in | Built-in |
+| **License** | **MIT (free)** | MIT | Commercial |
+
+## Features
+
+Sorting · Filtering (text, multi-select, date range, people picker) · Pagination · Cell editing (inline, select, checkbox, rich select, date, custom popover) · Spreadsheet selection · Clipboard · Fill handle · Undo/redo · Row selection · Column groups · Column pinning · Column resize · Column chooser · Side bar · Context menu · Status bar with aggregations · CSV export · Grid API · Server-side data · Column state persistence · Keyboard navigation (Excel-style Ctrl+Arrow) · Built-in column types (text, numeric, date, boolean) · React 17/18/19 · TypeScript strict
+
+## Install
+
+```bash
+npm install @alaarab/ogrid-react-fluent
+```
+
+### Peer Dependencies
+
+```
+@fluentui/react-components ^9.0.0
+@fluentui/react-icons ^2.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
+
+```tsx
+import { OGrid, type IColumnDef } from '@alaarab/ogrid-react-fluent';
+
+const columns: IColumnDef<Employee>[] = [
+  { columnId: 'name', name: 'Name', sortable: true, editable: true },
+  { columnId: 'department', name: 'Department',
+    filterable: { type: 'multiSelect' },
+    cellEditor: 'richSelect', cellEditorParams: { values: ['Engineering', 'Sales', 'Marketing'] } },
+  { columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
+    valueFormatter: (v) => `$${Number(v).toLocaleString()}` },
+];
+
+<OGrid
+  columns={columns}
+  data={employees}
+  getRowId={(e) => e.id}
+  editable
+  cellSelection
+  statusBar
+  sideBar
+/>
+```
+
+## Documentation
+
+Full docs, API reference, and interactive examples at **[alaarab.github.io/ogrid](https://alaarab.github.io/ogrid/)**.
+
+## License
+
+MIT — Free forever. No enterprise tiers. No feature paywalls.

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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-react';
+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 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;
+        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) {
+                handleClose();
+            }
+        };
+        const timeoutId = setTimeout(() => {
+            document.addEventListener('mousedown', handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, handleClose]);
+    const handleCheckboxChange = (columnKey) => {
+        return (ev, data) => {
+            ev.stopPropagation();
+            setColumnVisible(columnKey)(data.checked === true);
+        };
+    };
+    const handleDropdownClick = (e) => {
+        e.stopPropagation();
+    };
+    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,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Popover, PopoverSurface } from '@fluentui/react-components';
+import { ArrowUpRegular, ArrowDownRegular, ArrowSortRegular, FilterRegular } from '@fluentui/react-icons';
+import { useColumnHeaderFilterState } from '@alaarab/ogrid-react';
+import { TextFilterPopover } from './TextFilterPopover';
+import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
+import { PeopleFilterPopover } from './PeopleFilterPopover';
+import styles from './ColumnHeaderFilter.module.css';
+export const ColumnHeaderFilter = React.memo((props) => {
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options, isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = props;
+    const state = useColumnHeaderFilterState({
+        filterType,
+        isSorted,
+        isSortedDescending,
+        onSort,
+        selectedValues,
+        onFilterChange,
+        options,
+        isLoadingOptions,
+        textValue,
+        onTextChange,
+        selectedUser,
+        onUserChange,
+        peopleSearch,
+        dateValue,
+        onDateChange,
+    });
+    const { headerRef, popoverRef, peopleInputRef, isFilterOpen, setFilterOpen, tempSelected, setTempTextValue, searchText, setSearchText, filteredOptions, peopleSuggestions, isPeopleLoading, peopleSearchText, setPeopleSearchText, hasActiveFilter, handlers, } = state;
+    const filterBtnRef = React.useRef(null);
+    const renderPopoverContent = () => {
+        if (filterType === 'multiSelect') {
+            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 (_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 (_jsx(PeopleFilterPopover, { selectedUser: selectedUser, searchText: peopleSearchText, onSearchChange: setPeopleSearchText, suggestions: peopleSuggestions, isLoading: isPeopleLoading, onUserSelect: handlers.handleUserSelect, onClearUser: handlers.handleClearUser, onPopoverClick: handlers.handlePopoverClick, inputRef: peopleInputRef }));
+        }
+        if (filterType === 'date') {
+            return (_jsxs("div", { onClick: handlers.handlePopoverClick, children: [_jsxs("div", { style: { padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: 6 }, children: [_jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["From:", _jsx("input", { type: "date", value: state.tempDateFrom, onChange: (e) => state.setTempDateFrom(e.target.value), style: { flex: 1 } })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }, children: ["To:", _jsx("input", { type: "date", value: state.tempDateTo, onChange: (e) => state.setTempDateTo(e.target.value), style: { flex: 1 } })] })] }), _jsxs("div", { className: styles.popoverActions, children: [_jsx("button", { className: styles.clearButton, onClick: handlers.handleDateClear, disabled: !state.tempDateFrom && !state.tempDateTo, children: "Clear" }), _jsx("button", { className: styles.applyButton, onClick: handlers.handleDateApply, children: "Apply" })] })] }));
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: styles.columnHeader, ref: headerRef, children: [_jsx("div", { className: styles.headerContent, children: _jsx("span", { className: styles.columnName, title: 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(_Fragment, { children: [_jsxs("button", { ref: filterBtnRef, 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 })] }), _jsx(Popover, { open: isFilterOpen, onOpenChange: (_, data) => { if (!data.open)
+                                    setFilterOpen(false); }, positioning: { target: filterBtnRef.current ?? undefined, position: 'below', align: 'start', offset: 4 }, trapFocus: false, children: _jsxs(PopoverSurface, { ref: popoverRef, className: styles.filterPopover, onClick: handlers.handlePopoverClick, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderPopoverContent()] }) })] }))] })] }));
+});
+ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.module.css

@@ -0,0 +1,374 @@
+.columnHeader {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Keep header actions always visible, but do not let them participate in layout.
+   Otherwise, wide header cells make the sort/filter icons look "stranded" far to the right.
+
+   NOTE: Fluent's column resize hit-target lives at the far right edge of the header cell.
+   We leave a 16px safety zone for it.
+*/
+:root {
+  --dt-header-resize-zone: 16px;
+  --dt-header-action-button: 24px;
+  --dt-header-action-gap: 2px;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  padding: 2px 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  /* Reserve room for 2 buttons + gap + resize zone so text never overlaps actions. */
+  /* padding-right removed: use normal flex layout so actions never overflow */
+}
+
+.columnName {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--colorNeutralForeground1, #242424);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--dt-header-action-gap);
+  /* Keep actions in normal flow so they never overflow the header cell. */
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.sortIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  border: none;
+  border-radius: var(--borderRadiusSmall, 4px);
+  background-color: transparent;
+  color: var(--colorNeutralForeground2, #616161);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+.sortIcon svg {
+  font-size: 14px;
+}
+.sortIcon:hover {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+  color: var(--colorNeutralForeground2Hover, #424242);
+}
+.sortIcon.sortActive {
+  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
+  color: var(--colorNeutralForeground2, #616161);
+}
+.sortIcon.sortActive:hover {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+}
+
+.filterIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  margin-left: 2px;
+  border: none;
+  border-radius: var(--borderRadiusSmall, 4px);
+  background-color: transparent;
+  color: var(--colorNeutralForeground2, #616161);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: all 0.15s ease;
+}
+.filterIcon svg {
+  font-size: 14px;
+}
+.filterIcon:hover {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+  color: var(--colorNeutralForeground2Hover, #424242);
+}
+.filterIcon.filterActive {
+  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
+  color: var(--colorNeutralForeground2, #616161);
+}
+.filterIcon.filterActive:hover {
+  background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
+}
+.filterIcon.filterOpen {
+  background-color: var(--colorSubtleBackgroundPressed, #ebebeb);
+  color: var(--colorNeutralForeground2, #616161);
+}
+
+.filterBadge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 6px;
+  height: 6px;
+  background-color: var(--colorBrandBackground, #0f6cbd);
+  border-radius: 50%;
+  border: 1px solid var(--colorNeutralBackground1, #ffffff);
+}
+
+.filterPopover {
+  min-width: 280px;
+  max-width: 320px;
+  overflow: hidden;
+  padding: 0;
+}
+
+.popoverHeader {
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--colorNeutralForeground2, #616161);
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+
+.popoverSearch {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+}
+.popoverSearch .searchInput {
+  width: 100%;
+}
+
+.nativeInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: var(--borderRadiusMedium, 4px);
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  padding: 6px 12px;
+  min-height: 36px;
+  box-sizing: border-box;
+}
+.nativeInputWrapper:focus-within {
+  border-color: var(--colorBrandStroke1, #0f6cbd);
+  outline: none;
+}
+
+.nativeInputIcon {
+  color: var(--colorNeutralForeground3, #616161);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.nativeInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-size: 14px;
+  font-family: inherit;
+  background: transparent;
+  color: var(--colorNeutralForeground1, #242424);
+}
+.nativeInput::placeholder {
+  color: var(--colorNeutralForeground4, #707070);
+}
+
+.resultCount {
+  margin-top: 6px;
+  font-size: 11px;
+  color: var(--colorNeutralForeground2, #616161);
+}
+
+.selectAllRow {
+  display: flex;
+  gap: 8px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+
+.selectAllButton {
+  background: none;
+  border: none;
+  color: var(--colorBrandForeground1, #0f6cbd);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: var(--borderRadiusSmall, 4px);
+  transition: background-color 0.15s ease;
+}
+.selectAllButton:hover {
+  background-color: var(--colorBrandBackground2, #ebf3fc);
+}
+
+.popoverOptions {
+  overflow-y: auto;
+  max-height: 250px;
+  padding: 6px 0;
+}
+.popoverOptions::-webkit-scrollbar {
+  width: 6px;
+}
+.popoverOptions::-webkit-scrollbar-track {
+  background: var(--colorNeutralBackground3, #f5f5f5);
+}
+.popoverOptions::-webkit-scrollbar-thumb {
+  background: var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: 3px;
+}
+.popoverOptions::-webkit-scrollbar-thumb:hover {
+  background: var(--colorNeutralForeground2, #616161);
+}
+
+.popoverOption {
+  padding: 4px 12px;
+  transition: background-color 0.1s ease;
+}
+.popoverOption:hover {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+}
+
+.personOption {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.personOption:hover {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+}
+
+.loadingContainer {
+  padding: 20px;
+  text-align: center;
+}
+
+.noResults {
+  padding: 16px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--colorNeutralForeground2, #616161);
+}
+
+.selectedUserSection {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
+}
+
+.selectedUserLabel {
+  font-size: 11px;
+  color: var(--colorNeutralForeground2, #616161);
+  margin-bottom: 6px;
+}
+
+.selectedUser {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.userText {
+  display: flex;
+  flex-direction: column;
+}
+
+.userSecondary {
+  font-size: 12px;
+  color: var(--colorNeutralForeground2, #616161);
+}
+
+.removeUserButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background-color: transparent;
+  color: var(--colorNeutralForeground2, #616161);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.removeUserButton:hover {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+  color: var(--colorPaletteRedForeground1, #c4314b);
+}
+
+.popoverActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 12px;
+  border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
+  background-color: var(--colorNeutralBackground2, #fafafa);
+}
+
+.clearButton {
+  padding: 6px 12px;
+  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
+  border-radius: var(--borderRadiusMedium, 4px);
+  background-color: var(--colorNeutralBackground1, #ffffff);
+  color: var(--colorNeutralForeground1, #242424);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.clearButton:hover:not(:disabled) {
+  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
+  border-color: var(--colorNeutralStroke1Hover, #c7c7c7);
+}
+.clearButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.applyButton {
+  padding: 6px 12px;
+  border: 1px solid var(--colorBrandBackground, #0f6cbd);
+  border-radius: var(--borderRadiusMedium, 4px);
+  background-color: var(--colorBrandBackground, #0f6cbd);
+  color: var(--colorNeutralForegroundOnBrand, #ffffff);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.applyButton:hover {
+  background-color: var(--colorBrandBackgroundHover, #115ea3);
+  border-color: var(--colorBrandBackgroundHover, #115ea3);
+}

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';