@alaarab/ogrid-react-fluent 2.0.19 → 2.0.22

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,14 +1,14 @@
 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 { 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, isSorted = false, isSortedDescending = false, onSort, options, isLoadingOptions = false, selectedUser, } = props;
+    const { columnName, filterType, options, isLoadingOptions = false, selectedUser, } = props;
     const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
     const { headerRef, popoverRef, isFilterOpen, setFilterOpen, hasActiveFilter, handlers, } = state;
     const filterBtnRef = React.useRef(null);
@@ -23,7 +23,7 @@ export const ColumnHeaderFilter = React.memo((props) => {
                     applyButton: styles.applyButton,
                 } }) })),
     }), [handlers]);
-    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, style: { padding: 0 }, children: [_jsxs("div", { className: styles.popoverHeader, children: ["Filter: ", columnName] }), renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, fluentRenderers)] }) })] }))] })] }));
+    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

@@ -58,36 +58,6 @@
   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;
@@ -144,6 +114,9 @@
   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 {
@@ -159,12 +132,6 @@
   padding: 10px 12px;
   border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
 }
-.popoverSearch .searchInput {
-  width: 100%;
-}
-.popoverSearch .searchInput :global .fui-Input__input {
-  border-width: 1px !important;
-}
 
 .nativeInputWrapper {
   display: flex;
@@ -255,11 +222,32 @@
 .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;
@@ -323,6 +311,32 @@
   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;

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Input, Checkbox } from '@fluentui/react-components';
 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: [_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", { 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 }) => {
+    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];
-                        return (_jsx("div", { className: styles.popoverOption, style: { position: 'absolute', top: offsetTop, width: '100%', height: ITEM_HEIGHT, boxSizing: 'border-box', display: 'flex', alignItems: 'center' }, children: _jsx(Checkbox, { label: option, checked: selected.has(option), onChange: (ev, data) => {
-                                    ev.stopPropagation();
-                                    onOptionToggle(option, data.checked === true);
-                                } }) }, option));
+                        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,9 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { 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() ? (_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) => {
+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(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" }) }))] }));
+                }, 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';

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -1,12 +1,11 @@
 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" })] })] }));
+export const TextFilterPopover = ({ value, onValueChange, onApply, onClear, onPopoverClick, onInputFocus, onInputMouseDown, onInputClick, onInputKeyDown, }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverSearch, onClick: onPopoverClick, children: _jsxs("div", { className: styles.nativeInputWrapper, children: [_jsx(SearchRegular, { className: styles.nativeInputIcon }), _jsx("input", { type: "text", placeholder: "Enter search term...", value: value, onChange: (e) => onValueChange(e.target.value), onKeyDown: (e) => {
+                            onInputKeyDown(e);
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                onApply();
+                            }
+                        }, onFocus: onInputFocus, onMouseDown: onInputMouseDown, onClick: onInputClick, autoComplete: "off", className: styles.nativeInput })] }) }), _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';

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,77 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useEffect, useState, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseColumnHeaderMenu } from '@alaarab/ogrid-react';
 import styles from './ColumnHeaderMenu.module.css';
+/** Portal into the closest FluentProvider so --ogrid-* bridged variables are available */
+const getFluentPortalTarget = (anchorElement) => anchorElement.closest('.fui-FluentProvider') ?? document.body;
 /**
  * Column header dropdown menu for pin/sort/autosize actions.
- * Uses positioned div with portal rendering.
+ * Thin wrapper over BaseColumnHeaderMenu — portals into FluentProvider.
  */
 export function ColumnHeaderMenu(props) {
-    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, } = props;
-    const [position, setPosition] = useState(null);
-    const menuRef = useRef(null);
-    useEffect(() => {
-        if (!isOpen || !anchorElement) {
-            setPosition(null);
-            return;
-        }
-        const rect = anchorElement.getBoundingClientRect();
-        setPosition({
-            top: rect.bottom + 4,
-            left: rect.left,
-        });
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            // Don't close if clicking inside the menu itself (portal) — let onClick fire first
-            if (menuRef.current && menuRef.current.contains(target))
-                return;
-            if (anchorElement && !anchorElement.contains(target)) {
-                onClose();
-            }
-        };
-        const handleEscape = (e) => {
-            if (e.key === 'Escape') {
-                onClose();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleEscape);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleEscape);
-        };
-    }, [isOpen, anchorElement, onClose]);
-    const menuInput = useMemo(() => ({
-        canPinLeft,
-        canPinRight,
-        canUnpin,
-        currentSort,
-        isSortable,
-        isResizable,
-    }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
-    const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
-    const handlers = {
-        pinLeft: onPinLeft,
-        pinRight: onPinRight,
-        unpin: onUnpin,
-        sortAsc: onSortAsc,
-        sortDesc: onSortDesc,
-        clearSort: onClearSort,
-        autosizeThis: onAutosizeThis,
-        autosizeAll: onAutosizeAll,
-    };
-    if (!isOpen || !position)
-        return null;
-    // Portal into the closest FluentProvider so --ogrid-* bridged variables are available
-    const portalTarget = anchorElement?.closest('.fui-FluentProvider') ?? document.body;
-    return createPortal(_jsx("div", { ref: menuRef, className: styles.content, style: {
-            position: 'fixed',
-            top: position.top,
-            left: position.left,
-            zIndex: 1000,
-        }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx("button", { className: styles.item, disabled: item.disabled, onClick: () => {
-                        handlers[item.id]();
-                        onClose();
-                    }, children: item.label }), item.divider && idx < items.length - 1 && (_jsx("div", { className: styles.separator }))] }, item.id))) }), portalTarget);
+    return (_jsx(BaseColumnHeaderMenu, { ...props, classNames: styles, getPortalTarget: getFluentPortalTarget }));
 }

package/dist/esm/DataGridTable/DataGridTable.js

@@ -11,18 +11,19 @@ import { GridContextMenu } from './GridContextMenu';
 import { EmptyState } from './EmptyState';
 import { LoadingOverlay } from './LoadingOverlay';
 import { DropIndicator } from './DropIndicator';
-import { useDataGridTableOrchestration, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, } from '@alaarab/ogrid-react';
+import { useDataGridTableOrchestration, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
+// --- Memoized row component (skips re-render for rows unaffected by selection changes) ---
 function GridRowInner(props) {
     const { item, rowIndex, rowId, isSelected, visibleCols, columnMeta, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, hasRowNumbersCol, rowNumberOffset, } = props;
-    return (_jsxs(TableRow, { className: isSelected ? styles.selectedRow : undefined, "data-row-id": rowId, onClick: handleSingleRowClick, children: [hasCheckboxCol && (_jsx(TableCell, { className: styles.selectionCellWrapper, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { checked: isSelected, onChange: (e, data) => {
+    return (_jsxs(TableRow, { className: isSelected ? styles.selectedRow : undefined, "data-row-id": rowId, onClick: handleSingleRowClick, children: [hasCheckboxCol && (_jsx(TableCell, { className: styles.selectionCellWrapper, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: STOP_PROPAGATION, children: _jsx(Checkbox, { checked: isSelected, onChange: (e, data) => {
                             handleRowCheckboxChange(rowId, !!data.checked, rowIndex, lastMouseShiftRef.current);
                         }, "aria-label": `Select row ${rowIndex + 1}` }) }) })), hasRowNumbersCol && (_jsx(TableCell, { className: styles.rowNumberCellWrapper, children: _jsx("div", { className: styles.rowNumberCellInner, children: rowNumberOffset + rowIndex + 1 }) })), visibleCols.map((col, colIdx) => (_jsx(TableCell, { "data-column-id": col.columnId, className: columnMeta.cellClasses[col.columnId] || undefined, style: columnMeta.cellStyles[col.columnId], children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId)))] }));
 }
 const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
 function DataGridTableInner(props) {
     const o = useDataGridTableOrchestration({ props });
-    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, rowSelection, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, visibleColumns, columnOrder, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, columnSizingOverrides, measuredColumnWidths, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, headerMenu, } = o;
+    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, rowSelection, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, visibleColumns, columnOrder, columnReorder, density, rowHeight, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, totalColCount, hasCheckboxCol, hasRowNumbersCol, colOffset, containerWidth, minTableWidth, columnSizingOverrides, measuredColumnWidths, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, headerMenu, } = o;
     // Pre-compute column styles and classNames (avoids per-cell object creation in the row loop)
     const columnMeta = useMemo(() => {
         const cellStyles = {};
@@ -105,6 +106,7 @@ function DataGridTableInner(props) {
                     ['--data-table-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'fit-content' : fitToContent ? 'fit-content' : '100%',
                     ['--data-table-min-width']: showEmptyInGrid ? '100%' : allowOverflowX ? 'max-content' : fitToContent ? 'max-content' : '100%',
                     ['--data-table-total-min-width']: `${minTableWidth}px`,
+                    ...(rowHeight ? { ['--ogrid-row-height']: `${rowHeight}px` } : {}),
                 }, children: [_jsx("div", { className: styles.tableScrollContent, children: _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsxs("div", { className: styles.tableWidthAnchor, ref: tableContainerRef, children: [_jsxs(Table, { role: "grid", className: styles.dataTable, children: [_jsx(TableHeader, { className: styles.stickyHeader, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableHeaderCell, { className: styles.selectionHeaderCellWrapper, children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox, { checked: allSelected ? true : someSelected ? 'mixed' : false, onChange: (_, data) => handleSelectAll(!!data.checked), "aria-label": "Select all rows" }) }) }, "__selection__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__selection_placeholder__")), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableHeaderCell, { className: styles.rowNumberHeaderCellWrapper, children: _jsx("div", { className: styles.rowNumberHeaderCellInner, children: "#" }) }, "__row_number__")), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx("th", { rowSpan: headerRows.length - 1 }, "__row_number_placeholder__")), row.map((cell, cellIdx) => {
                                                             if (cell.isGroup) {
                                                                 return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -48,6 +48,9 @@
   background-color: var(--ogrid-bg, #fff);
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
 }
+.dataTable tbody tr {
+  height: var(--ogrid-row-height, auto);
+}
 
 .groupHeaderCell {
   text-align: center;

package/dist/esm/DataGridTable/DropIndicator.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseDropIndicator } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
 export function DropIndicator({ dropIndicatorX, wrapperLeft }) {
-    return (_jsx("div", { className: styles.dropIndicator, style: { left: dropIndicatorX - wrapperLeft } }));
+    return _jsx(BaseDropIndicator, { dropIndicatorX: dropIndicatorX, wrapperLeft: wrapperLeft, className: styles.dropIndicator });
 }

package/dist/esm/DataGridTable/EmptyState.js

@@ -1,5 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseEmptyState } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
+const classNames = {
+    emptyStateInGrid: styles.emptyStateInGrid,
+    emptyStateInGridInner: styles.emptyStateInGridMessageSticky,
+    emptyStateInGridIcon: styles.emptyStateInGridIcon,
+    emptyStateInGridTitle: styles.emptyStateInGridTitle,
+    emptyStateInGridMessage: styles.emptyStateInGridMessage,
+    emptyStateInGridLink: styles.emptyStateInGridLink,
+};
 export function EmptyState({ emptyState }) {
-    return (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { className: styles.emptyStateInGridMessageSticky, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.emptyStateInGridIcon, "aria-hidden": true, children: '\uD83D\uDCCB' }), _jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }));
+    return _jsx(BaseEmptyState, { emptyState: emptyState, classNames: classNames, icon: '\uD83D\uDCCB' });
 }

package/dist/esm/DataGridTable/LoadingOverlay.js

@@ -1,5 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseLoadingOverlay } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
+const classNames = {
+    loadingOverlay: styles.loadingOverlay,
+    loadingOverlayContent: styles.loadingOverlayContent,
+    spinner: styles.spinner,
+    loadingOverlayText: styles.loadingOverlayText,
+};
 export function LoadingOverlay({ message }) {
-    return (_jsx("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx("div", { className: styles.spinner }), _jsx("span", { className: styles.loadingOverlayText, children: message })] }) }));
+    return _jsx(BaseLoadingOverlay, { message: message, classNames: classNames });
 }

package/dist/esm/DataGridTable/StatusBar.js

@@ -1,7 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getStatusBarParts } from '@alaarab/ogrid-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatusBar as BaseStatusBar } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
+const statusBarClassNames = {
+    statusBar: styles.statusBar,
+    statusBarItem: styles.statusBarItem,
+    statusBarLabel: styles.statusBarLabel,
+    statusBarValue: styles.statusBarValue,
+};
 export function StatusBar(props) {
-    const parts = getStatusBarParts(props);
-    return (_jsx("div", { className: styles.statusBar, role: "status", "aria-live": "polite", children: parts.map((p) => (_jsxs("span", { className: styles.statusBarItem, children: [_jsx("span", { className: styles.statusBarLabel, children: p.label }), _jsx("span", { className: styles.statusBarValue, children: p.value.toLocaleString() })] }, p.key))) }));
+    return _jsx(BaseStatusBar, { ...props, classNames: statusBarClassNames });
 }

package/dist/esm/OGrid/OGrid.js

@@ -1,16 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { forwardRef } from 'react';
+import { createOGrid } from '@alaarab/ogrid-react';
 import { DataGridTable } from '../DataGridTable/DataGridTable';
 import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
 import { PaginationControls } from '../PaginationControls/PaginationControls';
-import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
-const OGridInner = forwardRef(function OGridInner(props, ref) {
-    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
-    return (_jsx(OGridLayout, { className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
-                pagination.setPageSize(size);
-                pagination.setPage(1);
-            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+export const OGrid = createOGrid({
+    DataGridTable: DataGridTable,
+    ColumnChooser: ColumnChooser,
+    PaginationControls,
 });
-OGridInner.displayName = 'OGrid';
-export const OGrid = React.memo(OGridInner);

package/dist/esm/index.js

@@ -5,5 +5,7 @@ export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
 export { PaginationControls } from './PaginationControls/PaginationControls';
-// Re-export everything from core
+// Re-export all from base package for consumer convenience.
+// Note: This prevents tree-shaking of unused utilities.
+// Consider explicit named exports in a future major version.
 export * from '@alaarab/ogrid-react';

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -1,25 +1,7 @@
-import React from 'react';
-export interface ColumnHeaderMenuProps {
-    isOpen: boolean;
-    anchorElement: HTMLElement | null;
-    onClose: () => void;
-    onPinLeft: () => void;
-    onPinRight: () => void;
-    onUnpin: () => void;
-    onSortAsc: () => void;
-    onSortDesc: () => void;
-    onClearSort: () => void;
-    onAutosizeThis: () => void;
-    onAutosizeAll: () => void;
-    canPinLeft: boolean;
-    canPinRight: boolean;
-    canUnpin: boolean;
-    currentSort: 'asc' | 'desc' | null;
-    isSortable: boolean;
-    isResizable: boolean;
-}
+import type { BaseColumnHeaderMenuProps } from '@alaarab/ogrid-react';
+export type ColumnHeaderMenuProps = Omit<BaseColumnHeaderMenuProps, 'classNames' | 'getPortalTarget'>;
 /**
  * Column header dropdown menu for pin/sort/autosize actions.
- * Uses positioned div with portal rendering.
+ * Thin wrapper over BaseColumnHeaderMenu — portals into FluentProvider.
  */
-export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): React.ReactPortal | null;
+export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/DataGridTable/EmptyState.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
+import type { BaseEmptyStateProps } from '@alaarab/ogrid-react';
 interface EmptyStateProps {
-    emptyState: {
-        render?: () => React.ReactNode;
-        message?: React.ReactNode;
-        hasActiveFilters?: boolean;
-        onClearAll?: () => void;
-    };
+    emptyState: BaseEmptyStateProps['emptyState'];
 }
 export declare function EmptyState({ emptyState }: EmptyStateProps): React.ReactElement;
 export {};

package/dist/types/DataGridTable/InlineCellEditor.d.ts

@@ -1,12 +1,4 @@
 import * as React from 'react';
-import type { IColumnDef } from '@alaarab/ogrid-react';
-export interface InlineCellEditorProps<T> {
-    value: unknown;
-    item: T;
-    column: IColumnDef<T>;
-    rowIndex: number;
-    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
-    onCommit: (value: unknown) => void;
-    onCancel: () => void;
-}
+import type { InlineCellEditorProps } from '@alaarab/ogrid-react';
+export type { InlineCellEditorProps } from '@alaarab/ogrid-react';
 export declare function InlineCellEditor<T>(props: InlineCellEditorProps<T>): React.ReactElement;

package/dist/types/DataGridTable/StatusBar.d.ts

@@ -1,16 +1,4 @@
 import * as React from 'react';
-export interface StatusBarProps {
-    totalCount: number;
-    filteredCount?: number;
-    selectedCount?: number;
-    selectedCellCount?: number;
-    aggregation?: {
-        sum: number;
-        avg: number;
-        min: number;
-        max: number;
-        count: number;
-    } | null;
-    suppressRowCount?: boolean;
-}
+import type { StatusBarProps as BaseStatusBarProps } from '@alaarab/ogrid-react';
+export type StatusBarProps = Omit<BaseStatusBarProps, 'classNames'>;
 export declare function StatusBar(props: StatusBarProps): React.ReactElement;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.0.19",
+  "version": "2.0.22",
   "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",
@@ -40,7 +40,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.19"
+    "@alaarab/ogrid-react": "2.0.22"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",