@alaarab/ogrid-react-fluent 2.0.23 → 2.1.0

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -5,10 +5,10 @@ import { TableSettingsRegular, ChevronDownRegular, ChevronUpRegular } from '@flu
 import { useColumnChooserState } from '@alaarab/ogrid-react';
 import styles from './ColumnChooser.module.css';
 export const ColumnChooser = (props) => {
-    const { columns, visibleColumns, onVisibilityChange, className } = 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 });
+    const { open, handleToggle, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
     useEffect(() => {
         if (!open)
             return;
@@ -30,5 +30,5 @@ export const ColumnChooser = (props) => {
     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) }) }, 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" })] })] }))] }));
+    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/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -11,18 +11,19 @@ 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: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.handleInputKeyDown })),
-        renderText: (p) => (_jsx(TextFilterPopover, { value: p.value, onValueChange: p.onValueChange, onApply: p.onApply, onClear: p.onClear, onPopoverClick: handlers.handlePopoverClick, onInputFocus: handlers.handleInputFocus, onInputMouseDown: handlers.handleInputMouseDown, onInputClick: handlers.handleInputClick, onInputKeyDown: handlers.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: handlers.handlePopoverClick, inputRef: p.inputRef })),
-        renderDate: (p) => (_jsx("div", { onClick: handlers.handlePopoverClick, children: _jsx(DateFilterContent, { tempDateFrom: p.tempDateFrom, setTempDateFrom: p.setTempDateFrom, tempDateTo: p.tempDateTo, setTempDateTo: p.setTempDateTo, onApply: p.onApply, onClear: p.onClear, classNames: {
+        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,
                 } }) })),
-    }), [handlers]);
+    }), [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)] }) })] })) })] }));
 });

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, Checkbox, Popover, PopoverSurface, } from '@fluentui/react-components';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
@@ -11,7 +11,7 @@ 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, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
+import { useDataGridTableOrchestration, useColumnMeta, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, 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) {
@@ -24,55 +24,21 @@ 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, 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 = {};
-        const cellClasses = {};
-        const hdrStyles = {};
-        const hdrClasses = {};
-        for (let i = 0; i < visibleCols.length; i++) {
-            const col = visibleCols[i];
-            const columnWidth = getColumnWidth(col);
-            const hasExplicitWidth = !!(columnSizingOverrides[col.columnId] || col.idealWidth != null || col.defaultWidth != null);
-            const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
-            const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
-            const hasResizeOverride = !!columnSizingOverrides[col.columnId];
-            const isPinned = isPinnedLeft || isPinnedRight;
-            // Use previously-measured DOM width as a minWidth floor to prevent columns
-            // from shrinking when new data loads (e.g. server-side pagination).
-            const measuredW = measuredColumnWidths[col.columnId];
-            const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
-            const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
-            cellStyles[col.columnId] = {
-                minWidth: effectiveMinWidth,
-                width: hasExplicitWidth ? columnWidth : undefined,
-                maxWidth: hasExplicitWidth ? columnWidth : undefined,
-                textAlign: col.type === 'numeric' ? 'right' : col.type === 'boolean' ? 'center' : undefined,
-                // Fluent UI's TableCell injects atomic CSS `position: relative` which overrides the
-                // shared `.pinnedColLeft { position: sticky }` class. Inline style wins over atomic CSS.
-                ...(isPinned ? { position: 'sticky' } : undefined),
-                ...(isPinnedLeft && pinning.leftOffsets[col.columnId] != null ? { left: pinning.leftOffsets[col.columnId] } : undefined),
-                ...(isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { right: pinning.rightOffsets[col.columnId] } : undefined),
-            };
-            hdrStyles[col.columnId] = {
-                minWidth: effectiveMinWidth,
-                width: hasExplicitWidth ? columnWidth : undefined,
-                maxWidth: hasExplicitWidth ? columnWidth : undefined,
-                ...(isPinned ? { position: 'sticky' } : undefined),
-                ...(isPinnedLeft && pinning.leftOffsets[col.columnId] != null ? { left: pinning.leftOffsets[col.columnId] } : undefined),
-                ...(isPinnedRight && pinning.rightOffsets[col.columnId] != null ? { right: pinning.rightOffsets[col.columnId] } : undefined),
-            };
-            const parts = [];
-            if (isPinnedLeft)
-                parts.push(styles.pinnedColLeft);
-            if (isPinnedRight)
-                parts.push(styles.pinnedColRight);
-            const cn = parts.join(' ');
-            cellClasses[col.columnId] = cn;
-            hdrClasses[col.columnId] = cn;
-        }
-        return { cellStyles, cellClasses, hdrStyles, hdrClasses };
-    }, [visibleCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
+    // Pre-compute column styles and classNames via shared hook (avoids per-cell object creation).
+    // addStickyPosition=true: Fluent UI's TableCell injects atomic `position: relative` via CSS-in-JS,
+    // overriding the shared `.pinnedColLeft { position: sticky }` class. Inline style wins over atomic CSS.
+    const columnMeta = useColumnMeta({
+        visibleCols,
+        getColumnWidth,
+        columnSizingOverrides,
+        measuredColumnWidths,
+        pinnedColumns: pinning.pinnedColumns,
+        leftOffsets: pinning.leftOffsets,
+        rightOffsets: pinning.rightOffsets,
+        pinnedColLeftClass: styles.pinnedColLeft,
+        pinnedColRightClass: styles.pinnedColRight,
+        addStickyPosition: true,
+    });
     // 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) => {
@@ -98,9 +64,7 @@ function DataGridTableInner(props) {
             content = (_jsxs("div", { className: cellClassNames, ...interactionProps, style: descriptor.canEditAny ? CURSOR_CELL_STYLE : undefined, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" }))] }));
         }
         return (_jsx(CellErrorBoundary, { onError: onCellError, children: content }, `${rowId}-${col.columnId}`));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- *Ref vars are stable refs from useLatestRef
-    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError]);
+    }, [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef]);
     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%',
@@ -112,6 +76,8 @@ function DataGridTableInner(props) {
                                                                 return (_jsx("th", { colSpan: cell.colSpan, className: styles.groupHeaderCell, scope: "colgroup", children: cell.label }, cellIdx));
                                                             }
                                                             // Leaf cell
+                                                            if (!cell.columnDef)
+                                                                return null;
                                                             const col = cell.columnDef;
                                                             // Determine aria-sort value for sorted columns
                                                             const isSorted = props.sortBy === col.columnId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.0.23",
+  "version": "2.1.0",
   "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",
@@ -10,7 +10,8 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/esm/index.js"
-    }
+    },
+    "./styles/*": "./dist/esm/*"
   },
   "scripts": {
     "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/compile-styles.js",
@@ -40,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.23"
+    "@alaarab/ogrid-react": "2.1.0"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",
@@ -67,5 +68,12 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alaarab/ogrid.git",
+    "directory": "packages/react-fluent"
+  },
+  "homepage": "https://ogrid.dev",
+  "bugs": "https://github.com/alaarab/ogrid/issues"
 }