@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.css

@@ -0,0 +1,67 @@
+/* ─── Group header row ───────────────────────────────────────────────────────
+   These rows live INSIDE .ogx__header-wrap, which is the single sticky block,
+   so they scroll horizontally together with the column header row below them.
+   Widths are computed dynamically from the live columnWidths state, so they
+   stay in sync with column resizing.
+────────────────────────────────────────────────────────────────────────────── */
+.ogx-col-group-row {
+    display: flex;
+    align-items: stretch;
+    background: var(--ogx-grid-header-background);
+    border-bottom: 1px solid var(--ogx-grid-border-color);
+    overflow: hidden;
+    flex-shrink: 0;
+    min-height: var(--ogx-header-height, 48px);
+}
+
+/* ─── Individual group cell ──────────────────────────────────────────────────*/
+.ogx-col-group-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    /* Same border UI as primary header cells: half-height right divider */
+}
+.ogx-col-group-cell:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 25%;
+    height: 50%;
+    width: 1px;
+    background-color: var(--ogx-color-gray-300, #cbd5e1);
+    opacity: 0.5;
+}
+
+/* ─── Group cell (has a label) ───────────────────────────────────────────────*/
+.ogx-col-group-cell--group {
+    background: transparent;
+}
+
+/* ─── Filler cell (ungrouped / prefix spacer) ────────────────────────────────*/
+.ogx-col-group-cell--filler {
+    background: transparent;
+}
+
+/* ─── Label text ─────────────────────────────────────────────────────────────*/
+.ogx-col-group-cell__label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--ogx-color-gray-700, #334155);
+    padding: 0 16px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+    text-align: center;
+    width: 100%;
+}
+
+/* ─── Dark-mode overrides ────────────────────────────────────────────────────*/
+[data-theme="dark"] .ogx-col-group-cell__label,
+.ogx--dark .ogx-col-group-cell__label {
+    color: var(--ogx-color-gray-300, #cbd5e1);
+}

package/lib/components/ColumnGroupHeader/ColumnGroupHeader.tsx

@@ -0,0 +1,220 @@
+import type { GridColumnGroup, GridColumnGroupingModel, GridColDef, GridRowModel } from '../../types';
+import './ColumnGroupHeader.css';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/** All leaf field names reachable from a group node (recursive). */
+function collectFields(group: GridColumnGroup): string[] {
+    const fields: string[] = [];
+    for (const child of group.children) {
+        if (typeof child === 'string') {
+            fields.push(child);
+        } else {
+            fields.push(...collectFields(child));
+        }
+    }
+    return fields;
+}
+
+/** Maximum nesting depth of any group tree. */
+function maxDepth(groups: GridColumnGroupingModel): number {
+    let d = 0;
+    function walk(g: GridColumnGroup, depth: number) {
+        d = Math.max(d, depth);
+        for (const child of g.children) {
+            if (typeof child !== 'string') walk(child, depth + 1);
+        }
+    }
+    groups.forEach(g => walk(g, 1));
+    return d;
+}
+
+/**
+ * Flattened cell descriptor for one row of group headers.
+ * `span` is the pixel width, `level` is 0-indexed depth.
+ */
+interface GroupCell {
+    key: string;
+    label: string;
+    width: number;          // total pixel width spanned
+    isGroup: boolean;       // false → empty "filler" cell for ungrouped columns
+    groupId?: string;
+    headerClassName?: string;
+}
+
+/** Build one row of GroupCell descriptors for a given depth level. */
+function buildRow(
+    groups: GridColumnGroupingModel,
+    leafColumns: string[],
+    columnWidths: Record<string, number>,
+    level: number,
+): GroupCell[] {
+    const cells: GroupCell[] = [];
+
+    // Assign each leaf column to the group (at `level`) that contains it, if any.
+    // Consecutive columns in the same group merge into one cell.
+
+    // Build a map: field → group-at-this-level
+    const fieldToGroup = new Map<string, GridColumnGroup | null>();
+
+    function findGroupAtLevel(
+        groups: GridColumnGroupingModel,
+        field: string,
+        currentLevel: number,
+    ): GridColumnGroup | null {
+        for (const g of groups) {
+            const leafFields = collectFields(g);
+            if (!leafFields.includes(field)) continue;
+            if (currentLevel === level) return g;
+            // Go deeper
+            for (const child of g.children) {
+                if (typeof child !== 'string') {
+                    const found = findGroupAtLevel([child], field, currentLevel + 1);
+                    if (found) return found;
+                }
+            }
+            return null;
+        }
+        return null;
+    }
+
+    for (const f of leafColumns) {
+        fieldToGroup.set(f, findGroupAtLevel(groups, f, 0));
+    }
+
+    // Merge consecutive columns belonging to the same group
+    let i = 0;
+    while (i < leafColumns.length) {
+        const field = leafColumns[i];
+        const group = fieldToGroup.get(field) ?? null;
+
+        if (!group) {
+            // Ungrouped column — filler cell spanning just this column
+            cells.push({
+                key: `filler-${field}-${level}`,
+                label: '',
+                width: columnWidths[field] ?? 100,
+                isGroup: false,
+            });
+            i++;
+        } else {
+            // Collect all consecutive columns that belong to the same group instance
+            let totalWidth = 0;
+            let j = i;
+            while (j < leafColumns.length && fieldToGroup.get(leafColumns[j]) === group) {
+                totalWidth += columnWidths[leafColumns[j]] ?? 100;
+                j++;
+            }
+            cells.push({
+                key: `${group.groupId}-${level}`,
+                label: group.headerName,
+                width: totalWidth,
+                isGroup: true,
+                groupId: group.groupId,
+                headerClassName: group.headerClassName,
+            });
+            i = j;
+        }
+    }
+
+    return cells;
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export interface ColumnGroupHeaderProps<R extends GridRowModel = GridRowModel> {
+    columnGroupingModel: GridColumnGroupingModel;
+    /** The ordered, effective columns (already filtered for visibility). */
+    columns: GridColDef<R>[];
+    /** Resolved pixel widths for every column. */
+    columnWidths: Record<string, number>;
+    /** Whether a checkbox column is prepended. */
+    checkboxSelection?: boolean;
+    /** Whether a row-reorder handle column is prepended. */
+    rowReordering?: boolean;
+    /** Whether a detail-panel expand column is prepended. */
+    hasDetailPanel?: boolean;
+    /** height (px) of each group header row */
+    groupHeaderHeight?: number;
+}
+
+export function ColumnGroupHeader<R extends GridRowModel = GridRowModel>({
+    columnGroupingModel,
+    columns,
+    columnWidths,
+    checkboxSelection = false,
+    rowReordering = false,
+    hasDetailPanel = false,
+    groupHeaderHeight = 36,
+}: ColumnGroupHeaderProps<R>) {
+
+    const levels = maxDepth(columnGroupingModel);
+    if (levels === 0 || columns.length === 0) return null;
+
+    // Ordered leaf fields (visible columns only)
+    const leafFields = columns.map(c => c.field);
+
+    // Width of any prepended utility columns
+    const CHECKBOX_W = 52;
+    const REORDER_W = 40;
+    const EXPAND_W = 52;
+    const prefixWidth =
+        (checkboxSelection ? CHECKBOX_W : 0) +
+        (rowReordering ? REORDER_W : 0) +
+        (hasDetailPanel ? EXPAND_W : 0);
+
+    return (
+        <>
+            {Array.from({ length: levels }, (_, level) => {
+                const row = buildRow(
+                    columnGroupingModel,
+                    leafFields,
+                    columnWidths,
+                    level,
+                );
+
+                return (
+                    <div
+                        key={`group-row-${level}`}
+                        className="ogx-col-group-row"
+                        style={{ height: groupHeaderHeight }}
+                        role="row"
+                        aria-rowindex={level + 1}
+                    >
+                        {/* Spacer for checkbox / reorder / expand columns */}
+                        {prefixWidth > 0 && (
+                            <div
+                                className="ogx-col-group-cell ogx-col-group-cell--filler"
+                                style={{ width: prefixWidth, minWidth: prefixWidth }}
+                                role="columnheader"
+                            />
+                        )}
+
+                        {row.map((cell) => (
+                            <div
+                                key={cell.key}
+                                role="columnheader"
+                                aria-colspan={undefined /* pixel-based layout */}
+                                className={[
+                                    'ogx-col-group-cell',
+                                    cell.isGroup
+                                        ? 'ogx-col-group-cell--group'
+                                        : 'ogx-col-group-cell--filler',
+                                    cell.headerClassName ?? '',
+                                ].join(' ').trim()}
+                                style={{ width: cell.width, minWidth: cell.width }}
+                                title={cell.isGroup ? cell.label : undefined}
+                            >
+                                {cell.isGroup && (
+                                    <span className="ogx-col-group-cell__label">
+                                        {cell.label}
+                                    </span>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                );
+            })}
+        </>
+    );
+}

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.css

@@ -0,0 +1,31 @@
+.ogx-column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -4px;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.ogx-column-resize-handle:hover .ogx-column-resize-handle__line,
+.ogx-column-resize-handle--dragging .ogx-column-resize-handle__line {
+  background: var(--ogx-color-primary);
+  opacity: 1;
+}
+.ogx-column-resize-handle__line {
+  width: 2px;
+  height: 100%;
+  background: var(--ogx-color-gray-300);
+  opacity: 0;
+  transition: opacity var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+}
+.ogx-column-resize-handle--dragging {
+  cursor: col-resize;
+}
+.ogx__header-cell:hover .ogx-column-resize-handle__line {
+  opacity: 0.5;
+}

package/lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -0,0 +1,85 @@
+
+import React, { useCallback, useRef, useState } from 'react';
+
+
+export interface ColumnResizeHandleProps {
+    field: string;
+    currentWidth: number;
+    onResize: (field: string, newWidth: number) => void;
+    minWidth?: number;
+    maxWidth?: number;
+}
+
+export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
+    const { field, currentWidth, onResize, minWidth = 50, maxWidth = 1000 } = props;
+    const [isDragging, setIsDragging] = useState(false);
+    const startXRef = useRef<number>(0);
+    const startWidthRef = useRef<number>(0);
+
+    const handleMouseDown = useCallback((event: React.MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        setIsDragging(true);
+        startXRef.current = event.clientX;
+        // Use the logical stored width — reliable for pinned, flex, and normal columns
+        startWidthRef.current = currentWidth;
+
+        let lastUpdateTime = 0;
+        const throttleMs = 16;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            const deltaX = e.clientX - startXRef.current;
+            const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + deltaX));
+
+            const now = Date.now();
+            if (now - lastUpdateTime >= throttleMs) {
+                onResize(field, newWidth);
+                lastUpdateTime = now;
+            }
+        };
+
+        const handleMouseUp = (e: MouseEvent) => {
+            setIsDragging(false);
+
+            const deltaX = e.clientX - startXRef.current;
+            const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidthRef.current + deltaX));
+
+            onResize(field, newWidth);
+
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [field, currentWidth, onResize, minWidth, maxWidth]);
+
+    const handleDoubleClick = useCallback((event: React.MouseEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+
+    const classNames = [
+        'ogx-column-resize-handle',
+        isDragging && 'ogx-column-resize-handle--dragging'
+    ].filter(Boolean).join(' ');
+
+    return (
+        <div
+            className={classNames}
+            onMouseDown={handleMouseDown}
+            onClick={(e) => e.stopPropagation()}
+            onDragStart={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }}
+            onDoubleClick={handleDoubleClick}
+            role="separator"
+            aria-orientation="vertical"
+            aria-label={`Resize ${field} column`}
+        >
+            <div className="ogx-column-resize-handle__line" />
+        </div>
+    );
+}

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.css

@@ -0,0 +1,137 @@
+.ogx-column-visibility-panel {
+  background: var(--ogx-overlay-background, var(--ogx-color-white));
+  border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
+  border-radius: var(--ogx-border-radius-sm);
+  min-width: 250px;
+  max-width: 350px;
+  box-shadow: var(--ogx-shadow-lg);
+  display: flex;
+  flex-direction: column;
+}
+
+.ogx-column-visibility-panel__search-section {
+  padding: var(--ogx-spacing-sm) var(--ogx-spacing-md);
+  border-bottom: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
+}
+
+.ogx-column-visibility-panel__search-container {
+  display: flex;
+  align-items: center;
+  padding: 6px var(--ogx-spacing-sm);
+  border: 2px solid var(--ogx-overlay-border, var(--ogx-color-primary));
+  border-radius: var(--ogx-border-radius-md);
+  gap: var(--ogx-spacing-sm);
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-500));
+  transition: border-color var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+}
+
+.ogx-column-visibility-panel__search-container:focus-within {
+  border-color: var(--ogx-color-primary-dark);
+}
+
+.ogx-column-visibility-panel__search-input {
+  border: none;
+  background: none;
+  outline: none;
+  font-family: inherit;
+  font-size: var(--ogx-font-size-md);
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-900));
+  flex: 1;
+}
+
+.ogx-column-visibility-panel__search-input::placeholder {
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
+  opacity: 0.6;
+}
+
+.ogx-column-visibility-panel__list {
+  max-height: 350px;
+  overflow-y: auto;
+  padding: var(--ogx-spacing-sm) 0;
+}
+
+.ogx-column-visibility-panel__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ogx-spacing-sm);
+  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm) var(--ogx-spacing-xs) var(--ogx-spacing-xs);
+  transition: background var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+  user-select: none;
+}
+
+.ogx-column-visibility-panel__item:hover:not(.ogx-column-visibility-panel__item--disabled) {
+  background: var(--ogx-overlay-item-hover-bg, var(--ogx-color-gray-50));
+}
+
+.ogx-column-visibility-panel__item--drag-over {
+  background: var(--ogx-color-primary-light, rgba(59, 130, 246, 0.08));
+  border-top: 2px solid var(--ogx-color-primary);
+}
+
+.ogx-column-visibility-panel__item--disabled {
+  opacity: 0.5;
+}
+
+/* ── Drag handle ──────────────────────────────────────────────────────────── */
+.ogx-column-visibility-panel__drag-handle-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 100%;
+  cursor: grab;
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
+  border-radius: 3px;
+  opacity: 0.6;
+  transition: color var(--ogx-transition-duration-fast) var(--ogx-transition-easing),
+              background var(--ogx-transition-duration-fast) var(--ogx-transition-easing),
+              opacity var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+}
+
+.ogx-column-visibility-panel__drag-handle-wrapper:hover {
+  opacity: 1;
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-600));
+  background: var(--ogx-overlay-item-hover-bg, var(--ogx-color-gray-100));
+}
+
+.ogx-column-visibility-panel__drag-handle-wrapper:active {
+  cursor: grabbing;
+  color: var(--ogx-color-primary);
+}
+
+.ogx-column-visibility-panel__drag-handle {
+  display: block;
+  pointer-events: none;
+}
+
+.ogx-column-visibility-panel__label {
+  font-size: var(--ogx-font-size-xs);
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-900));
+  user-select: none;
+}
+
+.ogx-column-visibility-panel__footer {
+  border-top: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
+  padding: var(--ogx-spacing-sm);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ogx-column-visibility-panel__reset-btn {
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: color var(--ogx-transition-duration-fast) var(--ogx-transition-easing);
+}
+
+.ogx-column-visibility-panel__reset-btn:hover {
+  color: var(--ogx-color-primary, var(--ogx-color-gray-600));
+}