@alaarab/ogrid 1.2.0

package/dist/esm/DataGridTable/DataGridTable.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import * as Popover from '@radix-ui/react-popover';
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+import { InlineCellEditor } from './InlineCellEditor';
+import { StatusBar } from './StatusBar';
+import { GridContextMenu } from './GridContextMenu';
+import { useDataGridState, useColumnResize, getHeaderFilterConfig, getCellRenderDescriptor, } from '@alaarab/ogrid-core';
+import styles from './DataGridTable.module.css';
+function DataGridTableInner(props) {
+    const wrapperRef = useRef(null);
+    const state = useDataGridState({ props, wrapperRef });
+    const lastMouseShiftRef = useRef(false);
+    const { visibleCols, totalColCount, hasCheckboxCol, selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, setEditingCell, pendingEditorValue, setPendingEditorValue, setActiveCell, handleCellMouseDown, handleSelectAllCells, contextMenu, setContextMenu, handleCellContextMenu, closeContextMenu, handleCopy, handleCut, handlePaste, handleGridKeyDown, handleFillHandleMouseDown, containerWidth, minTableWidth, columnSizingOverrides, setColumnSizingOverrides, statusBarConfig, showEmptyInGrid, hasCellSelection, selectionRange, headerFilterInput, cellDescriptorInput, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl, } = state;
+    const { items, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const allowOverflowX = containerWidth > 0 && minTableWidth > containerWidth;
+    const fitToContent = layoutMode === 'content';
+    const { handleResizeStart, getColumnWidth } = useColumnResize({
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+    });
+    const renderCellContent = useCallback((item, col, rowIndex, colIdx) => {
+        const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInput);
+        if (descriptor.mode === 'editing-inline') {
+            return (_jsx(InlineCellEditor, { value: descriptor.value, item: item, column: col, rowIndex: descriptor.rowIndex, editorType: descriptor.editorType ?? 'text', onCommit: (newValue) => commitCellEdit(item, col.columnId, descriptor.value, newValue, descriptor.rowIndex, descriptor.globalColIndex), onCancel: () => setEditingCell(null) }));
+        }
+        if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
+            const oldValue = descriptor.value;
+            const displayValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
+            const CustomEditor = col.cellEditor;
+            const editorProps = {
+                value: displayValue,
+                onValueChange: setPendingEditorValue,
+                onCommit: () => {
+                    const newValue = pendingEditorValue !== undefined ? pendingEditorValue : oldValue;
+                    commitCellEdit(item, col.columnId, oldValue, newValue, descriptor.rowIndex, descriptor.globalColIndex);
+                },
+                onCancel: cancelPopoverEdit,
+                item,
+                column: col,
+                cellEditorParams: col.cellEditorParams,
+            };
+            return (_jsxs(Popover.Root, { open: !!popoverAnchorEl, onOpenChange: (open) => { if (!open)
+                    cancelPopoverEdit(); }, children: [_jsx(Popover.Anchor, { asChild: true, children: _jsx("div", { ref: (el) => el && setPopoverAnchorEl(el), style: { minHeight: '100%', minWidth: 40 }, "aria-hidden": true }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { sideOffset: 4, onOpenAutoFocus: (e) => e.preventDefault(), children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
+        }
+        let content;
+        if (col.renderCell)
+            content = col.renderCell(item);
+        else {
+            const value = descriptor.displayValue;
+            if (col.valueFormatter)
+                content = col.valueFormatter(value, item);
+            else if (value !== null && value !== undefined)
+                content = String(value);
+            else
+                content = null;
+        }
+        const cellStyle = col.cellStyle ? (typeof col.cellStyle === 'function' ? col.cellStyle(item) : col.cellStyle) : undefined;
+        if (cellStyle)
+            content = _jsx("span", { style: cellStyle, children: content });
+        const cellClassNames = [
+            styles.cellContent,
+            descriptor.isActive ? styles.activeCellContent : '',
+            descriptor.isInRange ? styles.cellInRange : '',
+            descriptor.isInCutRange ? styles.cellCut : '',
+        ].filter(Boolean).join(' ');
+        if (descriptor.canEditAny) {
+            return (_jsxs("div", { className: cellClassNames, "data-row-index": descriptor.rowIndex, "data-col-index": descriptor.globalColIndex, "data-in-range": descriptor.isInRange ? 'true' : undefined, role: "button", tabIndex: descriptor.isActive ? 0 : -1, onMouseDown: (e) => handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex), onClick: () => setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }), onDoubleClick: () => setEditingCell({ rowId: descriptor.rowId, columnId: col.columnId }), onContextMenu: handleCellContextMenu, style: { minHeight: '100%', cursor: 'cell', outline: 'none', position: 'relative', userSelect: 'none' }, children: [content, descriptor.isSelectionEndCell && (_jsx("div", { className: styles.fillHandle, onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" }))] }));
+        }
+        return (_jsx("div", { className: cellClassNames, "data-row-index": descriptor.rowIndex, "data-col-index": descriptor.globalColIndex, "data-in-range": descriptor.isInRange ? 'true' : undefined, tabIndex: descriptor.isActive ? 0 : -1, onMouseDown: (e) => handleCellMouseDown(e, descriptor.rowIndex, descriptor.globalColIndex), onClick: () => setActiveCell({ rowIndex: descriptor.rowIndex, columnIndex: descriptor.globalColIndex }), onContextMenu: handleCellContextMenu, style: { outline: 'none', userSelect: 'none' }, children: content }));
+    }, [cellDescriptorInput, pendingEditorValue, popoverAnchorEl, handleCellMouseDown, handleCellContextMenu, handleFillHandleMouseDown, setActiveCell, setEditingCell, setPendingEditorValue, setPopoverAnchorEl, commitCellEdit, cancelPopoverEdit]);
+    return (_jsxs("div", { ref: wrapperRef, tabIndex: 0, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, className: `${styles.tableWrapper} ${rowSelection !== 'none' ? styles.selectableGrid : ''}`, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, "data-empty": showEmptyInGrid ? '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: (e) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY }); }, 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`,
+        }, children: [_jsxs("div", { className: styles.tableScrollContent, children: [_jsxs("div", { className: isLoading && items.length > 0 ? styles.loadingOverlayContainer : undefined, children: [isLoading && items.length > 0 && (_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: loadingMessage })] }) })), _jsx("div", { className: isLoading && items.length > 0 ? styles.loadingDimmed : undefined, children: _jsx("div", { className: styles.tableWidthAnchor, children: _jsxs("table", { className: styles.dataTable, children: [_jsx("thead", { className: freezeRows != null && freezeRows >= 1 ? styles.stickyHeader : undefined, children: _jsxs("tr", { children: [hasCheckboxCol && (_jsx("th", { className: styles.selectionHeaderCell, scope: "col", children: _jsx("div", { className: styles.selectionHeaderCellInner, children: _jsx(Checkbox.Root, { checked: allSelected ? true : someSelected ? 'indeterminate' : false, onCheckedChange: (c) => handleSelectAll(!!c), "aria-label": "Select all rows", children: _jsx(Checkbox.Indicator, { children: "\u2713" }) }) }) })), visibleCols.map((col, colIdx) => {
+                                                            const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
+                                                            const isPinnedLeft = col.pinned === 'left';
+                                                            const isPinnedRight = col.pinned === 'right';
+                                                            const columnWidth = getColumnWidth(col);
+                                                            return (_jsxs("th", { scope: "col", "data-column-id": col.columnId, className: [
+                                                                    isFreezeCol ? styles.freezeCol : '',
+                                                                    isFreezeCol && colIdx === 0 ? styles.freezeColFirst : '',
+                                                                    isPinnedLeft ? styles.pinnedColLeft : '',
+                                                                    isPinnedRight ? styles.pinnedColRight : '',
+                                                                ].filter(Boolean).join(' '), style: {
+                                                                    minWidth: col.minWidth ?? 80,
+                                                                    width: columnWidth,
+                                                                    maxWidth: columnWidth,
+                                                                    position: 'relative',
+                                                                }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx("div", { className: styles.resizeHandle, onMouseDown: (e) => handleResizeStart(e, col), "aria-label": `Resize ${col.name}` })] }, col.columnId));
+                                                        })] }) }), !showEmptyInGrid && (_jsx("tbody", { children: items.map((item, rowIndex) => {
+                                                    const rowIdStr = getRowId(item);
+                                                    const isSelected = selectedRowIds.has(rowIdStr);
+                                                    return (_jsxs("tr", { className: isSelected ? styles.selectedRow : '', onClick: () => {
+                                                            if (rowSelection === 'single') {
+                                                                const id = getRowId(item);
+                                                                updateSelection(selectedRowIds.has(id) ? new Set() : new Set([id]));
+                                                            }
+                                                        }, children: [hasCheckboxCol && (_jsx("td", { className: styles.selectionCell, children: _jsx("div", { className: styles.selectionCellInner, "data-row-index": rowIndex, "data-col-index": 0, onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", checked: selectedRowIds.has(rowIdStr), onChange: (e) => handleRowCheckboxChange(rowIdStr, e.target.checked, rowIndex, lastMouseShiftRef.current), "aria-label": `Select row ${rowIndex + 1}` }) }) })), visibleCols.map((col, colIdx) => {
+                                                                const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
+                                                                const isPinnedLeft = col.pinned === 'left';
+                                                                const isPinnedRight = col.pinned === 'right';
+                                                                const columnWidth = getColumnWidth(col);
+                                                                return (_jsx("td", { className: [
+                                                                        isFreezeCol ? styles.freezeCol : '',
+                                                                        isFreezeCol && colIdx === 0 ? styles.freezeColFirst : '',
+                                                                        isPinnedLeft ? styles.pinnedColLeft : '',
+                                                                        isPinnedRight ? styles.pinnedColRight : '',
+                                                                    ].filter(Boolean).join(' '), style: {
+                                                                        minWidth: col.minWidth ?? 80,
+                                                                        width: columnWidth,
+                                                                        maxWidth: columnWidth,
+                                                                    }, children: renderCellContent(item, col, rowIndex, colIdx) }, col.columnId));
+                                                            })] }, rowIdStr));
+                                                }) }))] }) }) })] }), showEmptyInGrid && emptyState && (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_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.') })] })) }) }))] }), 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 })), contextMenu &&
+                createPortal(_jsx(GridContextMenu, { x: contextMenu.x, y: contextMenu.y, hasSelection: hasCellSelection, onCopy: handleCopy, onCut: handleCut, onPaste: () => void handlePaste(), onSelectAll: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }));
+}
+export const DataGridTable = React.memo(DataGridTableInner);

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

@@ -0,0 +1,421 @@
+.tableScrollContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  background: var(--ogrid-bg, #fff);
+}
+
+.tableWrapper {
+  overflow-x: hidden;
+  overflow-y: visible;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+.tableWrapper[data-overflow-x=true] {
+  overflow-x: auto;
+}
+.tableWrapper[data-empty=true] {
+  overflow-x: hidden;
+}
+
+.tableWidthAnchor {
+  width: max-content;
+  min-width: max(100%, var(--data-table-total-min-width, 0px));
+  background: var(--ogrid-bg, #fff);
+}
+
+.dataTable {
+  width: var(--data-table-width, fit-content);
+  max-width: 100%;
+  min-width: var(--data-table-min-width, max-content);
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--ogrid-border, #e0e0e0);
+  border-radius: 6px;
+  overflow: hidden;
+  box-sizing: border-box;
+  table-layout: auto;
+}
+
+.dataTable th,
+.dataTable td {
+  min-width: 80px;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  border-right: 1px solid var(--ogrid-border, #e0e0e0);
+  font-size: 13px;
+  vertical-align: middle;
+}
+
+.dataTable th:last-of-type,
+.dataTable td:last-of-type {
+  border-right: none;
+}
+
+.dataTable thead {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+/* Freeze panes: sticky header when freezeRows >= 1 */
+.dataTable thead.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+.dataTable thead.stickyHeader th {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+/* Freeze panes: sticky first column when freezeCols >= 1 */
+.dataTable .freezeColFirst {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: var(--ogrid-bg, #ffffff);
+}
+
+.dataTable thead .freezeColFirst {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+/* Pinned columns: sticky positioning based on column pinned property */
+.pinnedColLeft {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: var(--ogrid-bg, #ffffff);
+}
+.pinnedColLeft::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: -4px;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+.dataTable thead .pinnedColLeft {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+.pinnedColRight {
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  background: var(--ogrid-bg, #ffffff);
+}
+.pinnedColRight::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -4px;
+  bottom: 0;
+  width: 4px;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
+  pointer-events: none;
+}
+
+.dataTable thead .pinnedColRight {
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+}
+
+.dataTable thead th {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ogrid-fg, #242424);
+  white-space: nowrap;
+  position: relative;
+  border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+}
+
+/* Column resize handle */
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 4px;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 1;
+}
+.resizeHandle:hover {
+  background-color: var(--ogrid-accent, #0078d4);
+}
+.resizeHandle:active {
+  background-color: var(--ogrid-accent-dark, #005a9e);
+}
+
+.dataTable tbody td {
+  border-bottom: 1px solid var(--ogrid-border, #e8e8e8);
+}
+
+.dataTable tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.dataTable tbody tr:hover td {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+
+.dataTable tbody tr.selectedRow td {
+  background: var(--ogrid-bg-selected, #e6f0fb);
+}
+
+.dataTable tbody tr.selectedRow:hover td {
+  background: var(--ogrid-bg-selected-hover, #dae8f8);
+}
+
+.dataTable tbody td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cellContent {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  user-select: none;
+}
+
+.activeCellContent {
+  outline: 2px solid var(--ogrid-primary, #0066cc);
+  outline-offset: -2px;
+  border-radius: 2px;
+  z-index: 1;
+  position: relative;
+}
+
+.cellInRange {
+  background: var(--ogrid-bg-range, #cce4f7) !important;
+  box-shadow: inset 0 0 0 1px var(--ogrid-primary, #0066cc);
+}
+
+.cellCut {
+  outline: 2px dashed var(--ogrid-primary, #0066cc);
+  outline-offset: -2px;
+  background: var(--ogrid-bg-hover, rgba(0, 0, 0, 0.04)) !important;
+  animation: cellCutDash 0.6s linear infinite;
+}
+
+@keyframes cellCutDash {
+  0% {
+    outline-offset: -2px;
+  }
+  50% {
+    outline-offset: -3px;
+  }
+  100% {
+    outline-offset: -2px;
+  }
+}
+.fillHandle {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  width: 8px;
+  height: 8px;
+  background: var(--ogrid-primary, #0066cc);
+  border-radius: 2px;
+  cursor: crosshair;
+  pointer-events: auto;
+  z-index: 3;
+}
+
+.dataTable th.selectionHeaderCell,
+.dataTable td.selectionCell {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  padding: 4px !important;
+  text-align: center;
+}
+
+.selectionHeaderCellInner,
+.selectionCellInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--ogrid-muted, #616161);
+  background: var(--ogrid-bg-subtle, #f3f2f1);
+  border: 1px solid var(--ogrid-border, #e0e0e0);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  min-height: 28px;
+}
+
+.statusBarItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.statusBarItem:not(:last-child)::after {
+  content: "";
+  width: 1px;
+  height: 14px;
+  background: var(--ogrid-border, #c4c4c4);
+  margin-left: 12px;
+}
+
+.statusBarLabel {
+  color: var(--ogrid-muted, #707070);
+}
+
+.statusBarValue {
+  color: var(--ogrid-fg, #242424);
+  font-weight: 600;
+}
+
+.contextMenu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 160px;
+  padding: 4px 0;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, #e0e0e0);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+.contextMenuItem {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: none;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  color: var(--ogrid-fg, #242424);
+}
+.contextMenuItem:hover:not(:disabled) {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+.contextMenuItem:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.contextMenuDivider {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--ogrid-border, #e0e0e0);
+}
+
+.loadingOverlayContainer {
+  position: relative;
+}
+
+.loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(1px);
+  pointer-events: all;
+  border-radius: 6px;
+}
+
+.loadingOverlayContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: var(--ogrid-bg, #fff);
+  border: 1px solid var(--ogrid-border, #c4c4c4);
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
+}
+
+.loadingOverlayText {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ogrid-muted, #616161);
+}
+
+.loadingDimmed {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.emptyStateInGrid {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 20px 16px;
+  min-height: 88px;
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid var(--ogrid-border, #e0e0e0);
+  background: var(--ogrid-bg-subtle, #fafafa);
+}
+
+.emptyStateInGridTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ogrid-fg, #242424);
+  margin-bottom: 4px;
+}
+
+.emptyStateInGridMessage {
+  font-size: 13px;
+  color: var(--ogrid-muted, #616161);
+  line-height: 1.5;
+}
+
+.emptyStateInGridLink {
+  background: none;
+  border: none;
+  color: var(--ogrid-primary, #0066cc);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+}
+.emptyStateInGridLink:hover {
+  color: var(--ogrid-primary-hover, #0052a3);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--ogrid-border, #e0e0e0);
+  border-top-color: var(--ogrid-primary, #0066cc);
+  border-radius: 50%;
+  animation: ogrid-spin 0.8s linear infinite;
+}
+
+@keyframes ogrid-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers } from '@alaarab/ogrid-core';
+import styles from './DataGridTable.module.css';
+export function GridContextMenu(props) {
+    const { x, y, hasSelection, onClose } = props;
+    const ref = React.useRef(null);
+    const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                onClose();
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('mousedown', handleClickOutside, true);
+        document.addEventListener('keydown', handleKeyDown, true);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('keydown', handleKeyDown, true);
+        };
+    }, [onClose]);
+    return (_jsx("div", { ref: ref, className: styles.contextMenu, role: "menu", style: { left: x, top: y }, "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.id === 'selectAll' && _jsx("div", { className: styles.contextMenuDivider }), _jsx("button", { type: "button", className: styles.contextMenuItem, onClick: handlers[item.id], disabled: item.disabledWhenNoSelection ? !hasSelection : false, children: item.label })] }, item.id))) }));
+}

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { useInlineCellEditorState } from '@alaarab/ogrid-core';
+export function InlineCellEditor(props) {
+    const { value, column, editorType, onCommit, onCancel } = props;
+    const wrapperRef = React.useRef(null);
+    const { localValue, setLocalValue, handleKeyDown, handleBlur, commit, cancel } = useInlineCellEditorState({ value, editorType, onCommit, onCancel });
+    React.useEffect(() => {
+        const input = wrapperRef.current?.querySelector('input');
+        input?.focus();
+    }, []);
+    if (editorType === 'checkbox') {
+        const checked = value === true;
+        return (_jsx(Checkbox.Root, { checked: checked, onCheckedChange: (c) => commit(c === true), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), cancel()), children: _jsx(Checkbox.Indicator, { children: "\u2713" }) }));
+    }
+    if (editorType === 'select') {
+        const values = column.cellEditorParams?.values ?? [];
+        return (_jsx("select", { value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => commit(e.target.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), cancel()), autoFocus: true, children: values.map((v) => (_jsx("option", { value: String(v), children: String(v) }, String(v)))) }));
+    }
+    return (_jsx("div", { ref: wrapperRef, children: _jsx("input", { type: "text", value: localValue, onChange: (e) => setLocalValue(e.target.value), onBlur: handleBlur, onKeyDown: handleKeyDown, style: { minWidth: 60 }, autoFocus: true }) }));
+}

package/dist/esm/DataGridTable/StatusBar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStatusBarParts } from '@alaarab/ogrid-core';
+import styles from './DataGridTable.module.css';
+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))) }));
+}

package/dist/esm/OGrid/OGrid.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { DataGridTable } from '../DataGridTable/DataGridTable';
+import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
+import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { useOGrid, OGridLayout, } from '@alaarab/ogrid-core';
+const OGridInner = forwardRef(function OGridInner(props, ref) {
+    const { dataGridProps, page, pageSize, displayTotalCount, setPage, setPageSize, columnChooserColumns, visibleColumns, handleVisibilityChange, title, toolbar, className, entityLabelPlural, } = useOGrid(props, ref);
+    return (_jsx(OGridLayout, { className: className, gap: 16, title: title, toolbar: toolbar, columnChooser: _jsx(ColumnChooser, { columns: columnChooserColumns, visibleColumns: visibleColumns, onVisibilityChange: handleVisibilityChange }), pagination: _jsx(PaginationControls, { currentPage: page, pageSize: pageSize, totalCount: displayTotalCount, onPageChange: setPage, onPageSizeChange: (size) => {
+                setPageSize(size);
+                setPage(1);
+            }, entityLabelPlural: entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+});
+OGridInner.displayName = 'OGrid';
+export const OGrid = React.memo(OGridInner);

package/dist/esm/PaginationControls/PaginationControls.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useMemo, useCallback } from 'react';
+import { getPaginationViewModel } from '@alaarab/ogrid-core';
+import styles from './PaginationControls.module.css';
+function ChevronLeft() {
+    return _jsx("span", { "aria-hidden": true, children: "\u2039" });
+}
+function ChevronRight() {
+    return _jsx("span", { "aria-hidden": true, children: "\u203A" });
+}
+function ChevronDoubleLeft() {
+    return _jsx("span", { "aria-hidden": true, children: "\u00AB" });
+}
+function ChevronDoubleRight() {
+    return _jsx("span", { "aria-hidden": true, children: "\u00BB" });
+}
+export const PaginationControls = React.memo((props) => {
+    const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, entityLabelPlural, className } = props;
+    const labelPlural = entityLabelPlural ?? 'items';
+    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount), [currentPage, pageSize, totalCount]);
+    const handlePageSizeChange = useCallback((e) => {
+        onPageSizeChange(Number(e.target.value));
+    }, [onPageSizeChange]);
+    if (!vm) {
+        return null;
+    }
+    const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
+    return (_jsxs("div", { className: `${styles.pagination} ${className || ''}`, role: "navigation", "aria-label": "Pagination", children: [_jsxs("div", { className: styles.paginationInfo, children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs("div", { className: styles.paginationControls, children: [_jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", children: _jsx(ChevronDoubleLeft, {}) }), _jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", children: _jsx(ChevronLeft, {}) }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.pageBtn, onClick: () => onPageChange(1), "aria-label": "Page 1", children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx("button", { type: "button", className: `${styles.pageBtn} ${currentPage === pageNum ? styles.active : ''}`, onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx("button", { type: "button", className: styles.pageBtn, onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, children: totalPages })] }))] }), _jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", children: _jsx(ChevronRight, {}) }), _jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", children: _jsx(ChevronDoubleRight, {}) })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx("select", { className: styles.pageSizeSelect, value: String(pageSize), onChange: handlePageSizeChange, "aria-label": "Rows per page", children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
+});
+PaginationControls.displayName = 'PaginationControls';