@alaarab/ogrid-react-fluent 2.1.2 → 2.1.4

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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: _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/ColumnHeaderFilter/index.js

@@ -1 +0,0 @@
-export { ColumnHeaderFilter } from './ColumnHeaderFilter';

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,12 +0,0 @@
-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.
- * Thin wrapper over BaseColumnHeaderMenu — portals into FluentProvider.
- */
-export function ColumnHeaderMenu(props) {
-    return (_jsx(BaseColumnHeaderMenu, { ...props, classNames: styles, getPortalTarget: getFluentPortalTarget }));
-}

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.module.css

@@ -1,46 +0,0 @@
-.content {
-  min-width: 140px;
-  background: var(--ogrid-bg, #ffffff);
-  border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-  border-radius: 6px;
-  padding: 4px;
-  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
-  z-index: 1000;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-}
-
-.item {
-  font-size: 13px;
-  line-height: 1;
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  display: flex;
-  align-items: center;
-  height: 28px;
-  padding: 0 8px;
-  position: relative;
-  user-select: none;
-  outline: none;
-  cursor: pointer;
-  width: 100%;
-  text-align: left;
-}
-.item:disabled {
-  color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
-  pointer-events: none;
-  cursor: not-allowed;
-}
-.item:hover:not(:disabled) {
-  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
-  color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-}
-
-.separator {
-  height: 1px;
-  background-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
-  margin: 4px 0;
-}

package/dist/esm/ColumnHeaderMenu/index.js

@@ -1 +0,0 @@
-export { ColumnHeaderMenu } from './ColumnHeaderMenu';

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,116 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React 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';
-import { ColumnHeaderMenu } from '../ColumnHeaderMenu';
-import { InlineCellEditor } from './InlineCellEditor';
-import { StatusBar } from './StatusBar';
-import { GridContextMenu } from './GridContextMenu';
-import { EmptyState } from './EmptyState';
-import { LoadingOverlay } from './LoadingOverlay';
-import { DropIndicator } from './DropIndicator';
-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) {
-    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: 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, 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 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) => {
-        const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
-        const rowId = getRowId(item);
-        let content;
-        if (descriptor.mode === 'editing-inline') {
-            content = (_jsx("div", { className: styles.editingCellContent, children: _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) }));
-        }
-        else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
-            const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
-            const CustomEditor = col.cellEditor;
-            content = (_jsxs(_Fragment, { children: [_jsx("div", { ref: (el) => { if (el)
-                            setPopoverAnchorEl(el); }, style: POPOVER_ANCHOR_STYLE, "aria-hidden": true }), _jsx(Popover, { open: !!popoverAnchorElRef.current, onOpenChange: (_, data) => { if (!data.open)
-                            cancelPopoverEdit(); }, positioning: { target: popoverAnchorElRef.current ?? undefined }, children: _jsx(PopoverSurface, { children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
-        }
-        else {
-            const displayContent = resolveCellDisplayContent(col, item, descriptor.displayValue);
-            const cellStyle = resolveCellStyle(col, item);
-            const styledContent = cellStyle ? _jsx("span", { style: cellStyle, children: displayContent }) : displayContent;
-            const cellClassNames = `${styles.cellContent}${descriptor.isActive && !descriptor.isInRange ? ` ${styles.activeCellContent}` : ''}${descriptor.isInRange ? ` ${styles.cellInRange}` : ''}${descriptor.isInCutRange ? ` ${styles.cellCut}` : ''}${descriptor.isInCopyRange ? ` ${styles.cellCopied}` : ''}`;
-            const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
-            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}`));
-    }, [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%',
-                    ['--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: o.stickyHeader ? styles.stickyHeader : undefined, 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));
-                                                            }
-                                                            // Leaf cell
-                                                            if (!cell.columnDef)
-                                                                return null;
-                                                            const col = cell.columnDef;
-                                                            // Determine aria-sort value for sorted columns
-                                                            const isSorted = props.sortBy === col.columnId;
-                                                            const ariaSort = isSorted
-                                                                ? (props.sortDirection === 'asc' ? 'ascending' : 'descending')
-                                                                : undefined;
-                                                            return (_jsxs(TableHeaderCell, { "data-column-id": col.columnId, 
-                                                                // rowSpan not supported by TableHeaderCell, use native th for grouped headers
-                                                                className: columnMeta.hdrClasses[col.columnId] || undefined, style: {
-                                                                    ...columnMeta.hdrStyles[col.columnId],
-                                                                    ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : undefined),
-                                                                }, "aria-sort": ariaSort, onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined, children: [_jsxs("div", { className: styles.headerCellContent, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("button", { className: styles.headerMenuTrigger, onClick: (e) => {
-                                                                                    e.stopPropagation();
-                                                                                    headerMenu.open(col.columnId, e.currentTarget);
-                                                                                }, "aria-label": "Column options", title: "Column options", children: "\u22EE" })] }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => {
-                                                                            // Clear cell selection/focus before resize so green outlines
-                                                                            // and blue :focus-visible rings don't persist during drag.
-                                                                            setActiveCell(null);
-                                                                            interaction.setSelectionRange(null);
-                                                                            // Move DOM focus to wrapper so no cell keeps :focus-visible
-                                                                            wrapperRef.current?.focus({ preventScroll: true });
-                                                                            handleResizeStart(e, col);
-                                                                        }, "aria-label": `Resize ${col.name}` })] }, col.columnId));
-                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsxs(TableBody, { children: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx("tr", { style: { height: visibleRange.offsetTop }, "aria-hidden": true })), (virtualScrollEnabled
-                                                        ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map((item, i) => {
-                                                            const rowIndex = visibleRange.startIndex + i;
-                                                            const rowIdStr = getRowId(item);
-                                                            return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), visibleCols: visibleCols, columnMeta: columnMeta, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
-                                                        })
-                                                        : items.map((item, rowIndex) => {
-                                                            const rowIdStr = getRowId(item);
-                                                            return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), visibleCols: visibleCols, columnMeta: columnMeta, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
-                                                        })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx("tr", { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx(DropIndicator, { dropIndicatorX: dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: columnOrder }), showEmptyInGrid && emptyState && (_jsx(EmptyState, { emptyState: emptyState }))] }) }) }), menuPosition &&
-                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: o.interaction.handleSelectAllCells, onClose: closeContextMenu }), wrapperRef.current?.closest('.fui-FluentProvider') ?? document.body), _jsx(ColumnHeaderMenu, { isOpen: headerMenu.isOpen, anchorElement: headerMenu.anchorElement, onClose: headerMenu.close, onPinLeft: headerMenu.handlePinLeft, onPinRight: headerMenu.handlePinRight, onUnpin: headerMenu.handleUnpin, onSortAsc: headerMenu.handleSortAsc, onSortDesc: headerMenu.handleSortDesc, onClearSort: headerMenu.handleClearSort, onAutosizeThis: headerMenu.handleAutosizeThis, onAutosizeAll: headerMenu.handleAutosizeAll, canPinLeft: headerMenu.canPinLeft, canPinRight: headerMenu.canPinRight, canUnpin: headerMenu.canUnpin, currentSort: headerMenu.currentSort, isSortable: headerMenu.isSortable, isResizable: headerMenu.isResizable })] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx(LoadingOverlay, { message: loadingMessage }))] }));
-}
-export const DataGridTable = React.memo(DataGridTableInner);