@alaarab/ogrid-react-fluent 2.1.3 → 2.1.5

package/dist/types/OGrid/OGrid.d.ts

@@ -1,2 +1,2 @@
 export type { IOGridProps } from '@alaarab/ogrid-react';
-export declare const OGrid: import("react").ForwardRefExoticComponent<import("@alaarab/ogrid-react").IOGridProps<unknown> & import("react").RefAttributes<import("@alaarab/ogrid-react").IOGridApi<unknown>>>;
+export declare const OGrid: import("react").ForwardRefExoticComponent<import("@alaarab/ogrid-react").IOGridProps<unknown> & import("react").RefAttributes<import("@alaarab/ogrid-core").IOGridApi<unknown>>>;

package/dist/types/index.d.ts

@@ -4,4 +4,43 @@ export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnC
 export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { ColumnHeaderMenu, type ColumnHeaderMenuProps } from './ColumnHeaderMenu/ColumnHeaderMenu';
 export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
-export * from '@alaarab/ogrid-react';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-react';
+export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, } from '@alaarab/ogrid-react';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-react';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, useColumnMeta, } from '@alaarab/ogrid-react';
+export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSelectStateParams, UseSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, UseColumnMetaParams, ColumnMetaResult, } from '@alaarab/ogrid-react';
+export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
+export { OGridLayout } from '@alaarab/ogrid-react';
+export type { OGridLayoutProps } from '@alaarab/ogrid-react';
+export { StatusBar } from '@alaarab/ogrid-react';
+export type { StatusBarProps, StatusBarClassNames } from '@alaarab/ogrid-react';
+export { BaseInlineCellEditor, editorWrapperStyle, editorInputStyle, richSelectWrapperStyle, richSelectDropdownStyle, richSelectOptionStyle, richSelectOptionHighlightedStyle, richSelectNoMatchesStyle, selectEditorStyle, selectDisplayStyle, selectChevronStyle, } from '@alaarab/ogrid-react';
+export type { BaseInlineCellEditorProps } from '@alaarab/ogrid-react';
+export { GridContextMenu } from '@alaarab/ogrid-react';
+export type { GridContextMenuProps, GridContextMenuClassNames } from '@alaarab/ogrid-react';
+export { MarchingAntsOverlay } from '@alaarab/ogrid-react';
+export type { MarchingAntsOverlayProps } from '@alaarab/ogrid-react';
+export { SideBar } from '@alaarab/ogrid-react';
+export type { SideBarProps, SideBarFilterColumn } from '@alaarab/ogrid-react';
+export { BaseColumnHeaderMenu } from '@alaarab/ogrid-react';
+export type { BaseColumnHeaderMenuProps, ColumnHeaderMenuClassNames } from '@alaarab/ogrid-react';
+export { createOGrid } from '@alaarab/ogrid-react';
+export type { CreateOGridComponents, GridRowProps, InlineCellEditorProps } from '@alaarab/ogrid-react';
+export { CellErrorBoundary } from '@alaarab/ogrid-react';
+export type { CellErrorBoundaryProps } from '@alaarab/ogrid-react';
+export { EmptyState } from '@alaarab/ogrid-react';
+export type { EmptyStateProps } from '@alaarab/ogrid-react';
+export { BaseEmptyState } from '@alaarab/ogrid-react';
+export type { BaseEmptyStateProps, BaseEmptyStateClassNames } from '@alaarab/ogrid-react';
+export { BaseLoadingOverlay } from '@alaarab/ogrid-react';
+export type { BaseLoadingOverlayProps, BaseLoadingOverlayClassNames } from '@alaarab/ogrid-react';
+export { BaseDropIndicator } from '@alaarab/ogrid-react';
+export type { BaseDropIndicatorProps } from '@alaarab/ogrid-react';
+export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from '@alaarab/ogrid-react';
+export type { IColumnHeaderFilterProps as IColumnHeaderFilterBaseProps, DateFilterContentProps, DateFilterClassNames, } from '@alaarab/ogrid-react';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, } from '@alaarab/ogrid-react';
+export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, IColumnHeaderMenuItem, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, } from '@alaarab/ogrid-react';
+export { renderFilterContent } from '@alaarab/ogrid-react';
+export type { FilterContentRenderers, MultiSelectRendererProps, TextRendererProps, PeopleRendererProps, DateRendererProps, } from '@alaarab/ogrid-react';
+export type { IColumnChooserProps as IColumnChooserBaseProps } from '@alaarab/ogrid-react';
+export type { IPaginationControlsProps as IPaginationControlsBaseProps } from '@alaarab/ogrid-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,12 +9,12 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     },
     "./styles/*": "./dist/esm/*"
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/compile-styles.js",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build"
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.3"
+    "@alaarab/ogrid-react": "2.1.5"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useEffect } from 'react';
-import { Button, Checkbox, } from '@fluentui/react-components';
-import { TableSettingsRegular, ChevronDownRegular, ChevronUpRegular } from '@fluentui/react-icons';
-import { useColumnChooserState } from '@alaarab/ogrid-react';
-import styles from './ColumnChooser.module.css';
-export const ColumnChooser = (props) => {
-    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
-    const buttonRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const { open, handleToggle, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
-    useEffect(() => {
-        if (!open)
-            return;
-        const handleClickOutside = (event) => {
-            const target = event.target;
-            if (dropdownRef.current && !dropdownRef.current.contains(target) &&
-                buttonRef.current && !buttonRef.current.contains(target)) {
-                handleClose();
-            }
-        };
-        const timeoutId = setTimeout(() => {
-            document.addEventListener('mousedown', handleClickOutside);
-        }, 0);
-        return () => {
-            clearTimeout(timeoutId);
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [open, handleClose]);
-    const handleCheckboxChange = (columnKey) => (_ev, data) => {
-        setColumnVisible(columnKey)(data.checked === true);
-    };
-    return (_jsxs("div", { className: `${styles.container} ${className || ''}`, children: [_jsxs(Button, { ref: buttonRef, appearance: "outline", icon: _jsx(TableSettingsRegular, {}), onClick: handleToggle, "aria-expanded": open, "aria-haspopup": "listbox", children: ["Column Visibility (", visibleCount, " of ", totalCount, ")", open ? _jsx(ChevronUpRegular, {}) : _jsx(ChevronDownRegular, {})] }), open && (_jsxs("div", { ref: dropdownRef, className: styles.dropdown, children: [_jsxs("div", { className: styles.header, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }), _jsx("div", { className: styles.optionsList, children: columns.map((column) => (_jsx("div", { className: styles.optionItem, children: _jsx(Checkbox, { label: column.name, checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId), disabled: column.required === true }) }, column.columnId))) }), _jsxs("div", { className: styles.actions, children: [_jsx(Button, { appearance: "subtle", size: "small", onClick: handleClearAll, children: "Clear All" }), _jsx(Button, { appearance: "primary", size: "small", onClick: handleSelectAll, children: "Select All" })] })] }))] }));
-};

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

@@ -1,50 +0,0 @@
-.container {
-  position: relative;
-  display: inline-flex;
-}
-
-.dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  z-index: 10000;
-  min-width: 220px;
-  display: flex;
-  flex-direction: column;
-  background: var(--colorNeutralBackground1, #fff);
-  border: 1px solid var(--colorNeutralStroke2, #edebe9);
-  border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-  padding: 0;
-}
-
-.header {
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
-  font-weight: 600;
-  font-size: 13px;
-}
-
-.optionsList {
-  max-height: 320px;
-  overflow-y: auto;
-  padding: 0;
-}
-
-.optionItem {
-  padding: 4px 12px;
-  display: flex;
-  align-items: center;
-  min-height: 32px;
-}
-.optionItem:hover {
-  background: var(--colorNeutralBackground1Hover, #f5f5f5);
-}
-
-.actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
-}

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,30 +0,0 @@
-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 { FilterRegular } from '@fluentui/react-icons';
-import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, DateFilterContent, renderFilterContent, } 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, options, isLoadingOptions = false, selectedUser, } = props;
-    const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
-    const { headerRef, popoverRef, isFilterOpen, setFilterOpen, hasActiveFilter, handlers, } = state;
-    const { handlePopoverClick, handleInputFocus, handleInputMouseDown, handleInputClick, handleInputKeyDown, } = handlers;
-    const filterBtnRef = React.useRef(null);
-    // Fluent-specific renderers that pass additional event propagation handlers
-    const fluentRenderers = React.useMemo(() => ({
-        renderMultiSelect: (p) => (_jsx(MultiSelectFilterPopover, { searchText: p.searchText, onSearchChange: p.onSearchChange, options: p.options, filteredOptions: p.filteredOptions, selected: p.selected, onOptionToggle: p.onOptionToggle, onSelectAll: p.onSelectAll, onClearSelection: p.onClearSelection, onApply: p.onApply, isLoading: p.isLoading, onPopoverClick: handlePopoverClick, onInputFocus: handleInputFocus, onInputMouseDown: handleInputMouseDown, onInputClick: handleInputClick, onInputKeyDown: handleInputKeyDown })),
-        renderText: (p) => (_jsx(TextFilterPopover, { value: p.value, onValueChange: p.onValueChange, onApply: p.onApply, onClear: p.onClear, onPopoverClick: handlePopoverClick, onInputFocus: handleInputFocus, onInputMouseDown: handleInputMouseDown, onInputClick: handleInputClick, onInputKeyDown: handleInputKeyDown })),
-        renderPeople: (p) => (_jsx(PeopleFilterPopover, { selectedUser: p.selectedUser, searchText: p.searchText, onSearchChange: p.onSearchChange, suggestions: p.suggestions, isLoading: p.isLoading, onUserSelect: p.onUserSelect, onClearUser: p.onClearUser, onPopoverClick: handlePopoverClick, inputRef: p.inputRef })),
-        renderDate: (p) => (_jsx("div", { onClick: handlePopoverClick, children: _jsx(DateFilterContent, { tempDateFrom: p.tempDateFrom, setTempDateFrom: p.setTempDateFrom, tempDateTo: p.tempDateTo, setTempDateTo: p.setTempDateTo, onApply: p.onApply, onClear: p.onClear, classNames: {
-                    popoverActions: styles.popoverActions,
-                    clearButton: styles.clearButton,
-                    applyButton: styles.applyButton,
-                } }) })),
-    }), [handlePopoverClick, handleInputFocus, handleInputMouseDown, handleInputClick, handleInputKeyDown]);
-    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 }) }), _jsx("div", { className: styles.headerActions, children: 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, style: { padding: 0 }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, fluentRenderers)] }) })] })) })] }));
-});
-ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

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

@@ -1,412 +0,0 @@
-.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;
-}
-
-.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;
-  background-color: var(--colorNeutralBackground1, #ffffff);
-  border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
-  border-radius: var(--borderRadiusMedium, 4px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
-  font-family: var(--fontFamilyBase, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
-  font-size: 14px;
-  color: var(--colorNeutralForeground1, #242424);
-}
-
-.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);
-}
-
-.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;
-  cursor: pointer;
-}
-.popoverOption:hover {
-  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
-}
-
-.nativeCheckbox {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--colorBrandBackground, #0f6cbd);
-  flex-shrink: 0;
-}
-
-.checkboxLabel {
-  margin-left: 8px;
-  font-size: 14px;
-  color: var(--colorNeutralForeground1, #242424);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  cursor: pointer;
-}
-
-.personOption {
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background-color 0.1s ease;
-}
-.personOption:hover {
-  background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
-}
-
-.loadingContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 20px;
-}
-
-.filterSpinner {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
-  border-top-color: var(--colorBrandBackground, #0f6cbd);
-  border-radius: 50%;
-  animation: ogrid-filter-spin 0.8s linear infinite;
-}
-
-@keyframes ogrid-filter-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.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;
-}
-
-.avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--colorBrandBackground, #0f6cbd);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-.avatarImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-.avatarInitials {
-  color: var(--colorNeutralForegroundOnBrand, #ffffff);
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SearchRegular } from '@fluentui/react-icons';
-import { useListVirtualizer } from '@alaarab/ogrid-react';
-import styles from './ColumnHeaderFilter.module.css';
-const ITEM_HEIGHT = 40;
-export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options, filteredOptions, selected, onOptionToggle, onSelectAll, onClearSelection, onApply, isLoading, onPopoverClick, onInputFocus, onInputMouseDown, onInputClick, onInputKeyDown, }) => {
-    const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT });
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: [_jsxs("div", { className: styles.nativeInputWrapper, children: [_jsx(SearchRegular, { className: styles.nativeInputIcon }), _jsx("input", { type: "text", placeholder: "Search...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onFocus: onInputFocus, onMouseDown: onInputMouseDown, onClick: onInputClick, onKeyDown: onInputKeyDown, autoComplete: "off", className: styles.nativeInput })] }), _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", { ref: virt.containerRef, onScroll: virt.onScroll, className: styles.popoverOptions, onClick: onPopoverClick, children: isLoading ? (_jsxs("div", { className: styles.loadingContainer, children: [_jsx("div", { className: styles.filterSpinner }), _jsx("span", { style: { fontSize: 12, color: 'var(--colorNeutralForeground2, #616161)' }, children: "Loading..." })] })) : filteredOptions.length === 0 ? (_jsx("div", { className: styles.noResults, children: "No options found" })) : (_jsx("div", { style: { height: virt.totalHeight, position: 'relative' }, children: virt.visibleItems.map(({ index, offsetTop }) => {
-                        const option = filteredOptions[index];
-                        const isChecked = selected.has(option);
-                        return (_jsxs("label", { className: styles.popoverOption, style: { position: 'absolute', top: offsetTop, width: '100%', height: ITEM_HEIGHT, boxSizing: 'border-box', display: 'flex', alignItems: 'center' }, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: (ev) => {
-                                        ev.stopPropagation();
-                                        onOptionToggle(option, ev.target.checked);
-                                    }, className: styles.nativeCheckbox }), _jsx("span", { className: styles.checkboxLabel, children: option })] }, 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

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { SearchRegular, FilterRegular } from '@fluentui/react-icons';
-import styles from './ColumnHeaderFilter.module.css';
-function getInitials(name) {
-    const parts = name.trim().split(/\s+/);
-    if (parts.length >= 2)
-        return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-    return (parts[0]?.[0] ?? '').toUpperCase();
-}
-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("div", { className: styles.avatar, children: selectedUser.photo
-                                        ? _jsx("img", { src: selectedUser.photo, alt: "", className: styles.avatarImg })
-                                        : _jsx("span", { className: styles.avatarInitials, children: getInitials(selectedUser.displayName) }) }), _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() ? (_jsxs("div", { className: styles.loadingContainer, children: [_jsx("div", { className: styles.filterSpinner }), _jsx("span", { style: { fontSize: 12, color: 'var(--colorNeutralForeground2, #616161)' }, children: "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("div", { className: styles.avatar, children: user.photo
-                                ? _jsx("img", { src: user.photo, alt: "", className: styles.avatarImg })
-                                : _jsx("span", { className: styles.avatarInitials, children: getInitials(user.displayName) }) }), _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';