@alaarab/ogrid-react-fluent 2.0.17 → 2.0.18

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -1,9 +1,17 @@
 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 { useListVirtualizer } from '@alaarab/ogrid-react';
 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" })] })] }));
+const ITEM_HEIGHT = 32;
+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 ? (_jsx("div", { className: styles.loadingContainer, children: _jsx(Spinner, { size: "small", label: "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%', boxSizing: 'border-box' }, children: _jsx(Checkbox, { label: option, checked: selected.has(option), onChange: (ev, data) => {
+                                    ev.stopPropagation();
+                                    onOptionToggle(option, data.checked === true);
+                                } }) }, option));
+                    }) })) }), _jsxs("div", { className: styles.popoverActions, onClick: onPopoverClick, children: [_jsx("button", { type: "button", className: styles.clearButton, onClick: onClearSelection, children: "Clear" }), _jsx("button", { type: "button", className: styles.applyButton, onClick: onApply, children: "Apply" })] })] }));
+};
 MultiSelectFilterPopover.displayName = 'MultiSelectFilterPopover';

package/dist/esm/DataGridTable/DataGridTable.js

@@ -22,7 +22,7 @@ function GridRowInner(props) {
 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, freezeRows, freezeCols, 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, 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 = {};
@@ -33,7 +33,6 @@ function DataGridTableInner(props) {
             const col = visibleCols[i];
             const columnWidth = getColumnWidth(col);
             const hasExplicitWidth = !!(columnSizingOverrides[col.columnId] || col.idealWidth != null || col.defaultWidth != null);
-            const isFreezeCol = freezeCols != null && freezeCols >= 1 && i < freezeCols;
             const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
             const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
             const hasResizeOverride = !!columnSizingOverrides[col.columnId];
@@ -63,10 +62,6 @@ function DataGridTableInner(props) {
                 ...(isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { right: pinning.rightOffsets[col.columnId] } : undefined),
             };
             const parts = [];
-            if (isFreezeCol)
-                parts.push(styles.freezeCol);
-            if (isFreezeCol && i === 0)
-                parts.push(styles.freezeColFirst);
             if (isPinnedLeft)
                 parts.push(styles.pinnedColLeft);
             if (isPinnedRight)
@@ -76,7 +71,7 @@ function DataGridTableInner(props) {
             hdrClasses[col.columnId] = cn;
         }
         return { cellStyles, cellClasses, hdrStyles, hdrClasses };
-    }, [visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, freezeCols, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
+    }, [visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
     // renderCellContent reads volatile state from refs -- keeps function identity stable so
     // GridRow's React.memo comparator can skip rows whose selection state hasn't changed.
     const renderCellContent = useCallback((item, col, rowIndex, colIdx) => {
@@ -105,7 +100,7 @@ function DataGridTableInner(props) {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps -- *Ref vars are stable refs from useLatestRef
     [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError]);
-    return (_jsxs("div", { style: GRID_ROOT_STYLE, children: [_jsxs("div", { ref: wrapperRef, tabIndex: 0, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''} ${styles[`density-${density}`] || ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? 'true' : undefined, "data-loading": isLoading && items.length === 0 ? 'true' : undefined, "data-column-count": totalColCount, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-container-width": containerWidth, "data-min-table-width": Math.round(minTableWidth), "data-has-selection": rowSelection !== 'none' ? 'true' : undefined, onContextMenu: PREVENT_DEFAULT, onKeyDown: handleGridKeyDown, style: {
+    return (_jsxs("div", { style: GRID_ROOT_STYLE, children: [_jsxs("div", { ref: wrapperRef, tabIndex: 0, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''} ${styles[`density-${density}`] || ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? 'true' : undefined, "data-loading": isLoading && items.length === 0 ? 'true' : undefined, "data-column-count": totalColCount, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-container-width": containerWidth, "data-min-table-width": Math.round(minTableWidth), "data-has-selection": rowSelection !== 'none' ? 'true' : undefined, onContextMenu: PREVENT_DEFAULT, onKeyDown: handleGridKeyDown, style: {
                     ['--data-table-column-count']: totalColCount,
                     ['--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%',

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

@@ -159,13 +159,6 @@
   pointer-events: none;
 }
 
-.freezeColFirst {
-  position: sticky;
-  left: 0;
-  z-index: 6;
-  background: var(--ogrid-bg, #ffffff);
-}
-
 .cellContent {
   width: 100%;
   height: 100%;
@@ -661,15 +654,6 @@
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
 }
 
-.freezeColFirst {
-  background-color: var(--colorNeutralBackground1, #ffffff);
-}
-
-.dataTable :global(.fui-TableHeader) .freezeColFirst {
-  background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
-}
-
-.stickyHeader .freezeColFirst,
 .stickyHeader .pinnedColLeft,
 .stickyHeader .pinnedColRight {
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "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.17"
+    "@alaarab/ogrid-react": "2.0.18"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",