@opencorestack/opengridx 0.1.6 → 0.1.8

package/lib/components/DetailPanel/DetailPanel.css

@@ -0,0 +1,36 @@
+.ogx__detail-panel {
+  display: flex;
+  background: var(--ogx-color-gray-50);
+  border-top: 1px solid var(--ogx-border-color);
+  border-bottom: 1px solid var(--ogx-border-color);
+  transition: height 0.2s ease-in-out;
+  position: relative;
+  min-width: fit-content; 
+  width: 100%;
+  box-sizing: border-box;
+}
+.ogx__detail-panel-content {
+  padding: var(--ogx-spacing-md);
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+@keyframes detailPanelExpand {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ogx__detail-panel {
+  animation: detailPanelExpand 0.2s ease-out;
+}
+@media (prefers-color-scheme: dark) {
+  .ogx__detail-panel {
+    background: var(--ogx-color-gray-800);
+    border-color: var(--ogx-color-gray-700);
+  }
+}

package/lib/components/DetailPanel/DetailPanel.tsx

@@ -0,0 +1,34 @@
+
+import React from 'react';
+import type { GridRowModel, GridRowId, GridDetailPanelHeight } from '../../types';
+
+
+export interface DetailPanelProps<R extends GridRowModel = GridRowModel> {
+    row: R;
+    rowId: GridRowId;
+    rowIndex: number;
+    content: React.ReactNode;
+    height: GridDetailPanelHeight;
+    isExpanded: boolean;
+}
+
+export function DetailPanel<R extends GridRowModel = GridRowModel>(props: DetailPanelProps<R>) {
+    const { content, height, isExpanded } = props;
+
+    if (!isExpanded) {
+        return null;
+    }
+
+    const style: React.CSSProperties = {
+        height: height === 'auto' ? 'auto' : `${height}px`,
+        overflow: height === 'auto' ? 'visible' : 'auto'
+    };
+
+    return (
+        <div className="ogx__detail-panel" style={style}>
+            <div className="ogx__detail-panel-content">
+                {content}
+            </div>
+        </div>
+    );
+}

package/lib/components/FilterPanel/FilterPanel.css

@@ -0,0 +1,196 @@
+.ogx-filter__logic-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px var(--ogx-spacing-md);
+  border-bottom: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
+  background: var(--ogx-grid-header-background);
+}
+.ogx-filter__logic-label {
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-xs);
+  font-weight: 500;
+  color: var(--ogx-grid-header-text);
+  margin-right: 2px;
+}
+.ogx-filter__logic-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ogx-grid-row-text);
+  font-family: var(--ogx-font-family-mono, monospace);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+  line-height: 1;
+}
+.ogx-filter__logic-pill:hover {
+  border-color: var(--ogx-color-primary);
+  color: var(--ogx-color-primary);
+}
+.ogx-filter__logic-pill--active {
+  background: var(--ogx-toolbar-chip-active-bg, var(--ogx-color-primary));
+  border-color: var(--ogx-toolbar-chip-active-bg, var(--ogx-color-primary));
+  color: var(--ogx-toolbar-chip-active-text, #fff);
+  font-weight: 700;
+}
+.ogx-filter__row {
+  display: flex;
+  align-items: center;
+  gap: var(--ogx-spacing-sm);
+  padding: 8px var(--ogx-spacing-md);
+  border-bottom: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
+  transition: background 0.1s;
+  min-height: 44px;
+}
+.ogx-filter__row:last-child {
+  border-bottom: none;
+}
+.ogx-filter__row:hover {
+  background: var(--ogx-grid-row-hover-background);
+}
+.ogx-filter__row--active {
+  background: var(--ogx-overlay-item-selected-bg, rgba(25, 118, 210, 0.04));
+}
+.ogx-filter__row--active:hover {
+  background: var(--ogx-overlay-item-selected-bg, rgba(25, 118, 210, 0.07));
+  opacity: 0.9;
+}
+.ogx-filter__col-label {
+  flex: 0 0 140px;
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-xs);
+  font-weight: 500;
+  color: var(--ogx-grid-row-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ogx-filter__controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+.ogx-filter__op-select {
+  padding: 5px 24px 5px 8px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-sm);
+  font-family: var(--ogx-font-family-mono, monospace);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: var(--ogx-grid-background);
+  color: var(--ogx-grid-row-text);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s;
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  min-width: 130px;
+}
+.ogx-filter__op-select:focus-visible {
+  border-color: var(--ogx-color-primary);
+}
+.ogx-filter__op-select--active {
+  border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary));
+  color: var(--ogx-color-primary);
+  font-weight: 700;
+}
+.ogx-filter__value-input {
+  flex: 1;
+  min-width: 60px;
+  padding: 4px 8px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-sm);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-xs);
+  background: var(--ogx-grid-background);
+  color: var(--ogx-grid-row-text);
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.ogx-filter__value-input::placeholder {
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
+  opacity: 0.6;
+}
+.ogx-filter__value-input:focus {
+  border-color: var(--ogx-toolbar-input-focus-border, var(--ogx-color-primary));
+  box-shadow: var(--ogx-toolbar-input-focus-shadow, 0 0 0 2px rgba(25, 118, 210, 0.15));
+}
+.ogx-filter__value-input--active {
+  border-color: var(--ogx-color-primary);
+}
+.ogx-filter__value-select {
+  flex: 1;          
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 28px;
+  cursor: pointer;
+}
+.ogx-filter__row-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+.ogx-filter__row-clear:hover {
+  background: var(--ogx-toolbar-btn-danger-bg, rgba(239, 68, 68, 0.08));
+  color: var(--ogx-toolbar-btn-danger-text, #ef4444);
+}
+.ogx-filter__empty {
+  padding: var(--ogx-spacing-md);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
+  opacity: 0.7;
+  text-align: center;
+}
+.ogx-toolbar__panel--filter {
+  width: 640px;
+  max-width: calc(100vw - 24px);
+}
+.ogx-toolbar__panel-body--filter {
+  max-height: 420px;
+  overflow-y: auto;
+  padding: 0;
+}
+.ogx-toolbar__panel-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--ogx-toolbar-btn-primary-bg, var(--ogx-color-primary));
+  color: var(--ogx-toolbar-btn-primary-text, #fff);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  margin-left: 4px;
+}

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -0,0 +1,214 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+    GridFilterModel,
+    GridFilterItem,
+    GridColDef,
+    GridFilterOperator
+} from '../../types';
+import { getOperatorsForType } from '../../utils/filtering';
+
+
+interface FilterPanelProps {
+    filterModel: GridFilterModel;
+    columns: GridColDef[];
+    onFilterModelChange: (model: GridFilterModel) => void;
+}
+
+const NO_VALUE_OPERATORS = new Set(['isEmpty', 'isNotEmpty']);
+
+function getActiveFilter(items: GridFilterItem[], field: string): GridFilterItem | undefined {
+    return items.find(item => 'field' in item && item.field === field) as GridFilterItem | undefined;
+}
+
+const FilterRow: React.FC<{
+    col: GridColDef;
+    item: GridFilterItem | undefined;
+    onChange: (item: GridFilterItem | null) => void;
+}> = ({ col, item, onChange }) => {
+    const operators = getOperatorsForType(col.type);
+    const isActive = !!item;
+    const currentOperator = item?.operator ?? operators[0];
+
+    // Local input state to prevent full filter-panel re-render on every keystroke
+    const [localValue, setLocalValue] = useState(item?.value ?? '');
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+
+    // Sync when the external item changes (e.g. operator change, clear)
+    const prevItemValue = useRef(item?.value);
+    useEffect(() => {
+        if (item?.value !== prevItemValue.current) {
+            prevItemValue.current = item?.value;
+            setLocalValue(item?.value ?? '');
+        }
+    }, [item?.value]);
+
+    // Debounce propagating the value upward (300ms)
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            const currentValue = item?.value ?? '';
+            if (localValue !== currentValue) {
+                onChangeRef.current({
+                    id: item?.id ?? `${col.field}-${Date.now()}`,
+                    field: col.field,
+                    operator: currentOperator as GridFilterOperator,
+                    value: localValue,
+                });
+            }
+        }, 300);
+        return () => clearTimeout(handler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [localValue]);
+
+    const handleOperatorChange = (op: string) => {
+        const noValue = NO_VALUE_OPERATORS.has(op);
+        const newItem: GridFilterItem = {
+            id: item?.id ?? `${col.field}-${Date.now()}`,
+            field: col.field,
+            operator: op as GridFilterOperator,
+            value: noValue ? undefined : (item?.value ?? (col.type === 'boolean' ? 'true' : '')),
+        };
+        onChange(newItem);
+    };
+
+    const handleClear = () => {
+        setLocalValue('');
+        onChange(null);
+    };
+
+    const isNoValue = NO_VALUE_OPERATORS.has(String(currentOperator));
+    const isBoolean = col.type === 'boolean';
+    const showValue = !isNoValue;
+
+    return (
+        <div className={`ogx-filter__row${isActive ? ' ogx-filter__row--active' : ''}`}>
+            { }
+            <span className="ogx-filter__col-label" title={col.field}>
+                {col.headerName || col.field}
+            </span>
+
+            { }
+            <div className="ogx-filter__controls">
+                { }
+                <select
+                    id={`ogx-filter-op-${col.field}`}
+                    name={`filter-op-${col.field}`}
+                    className={`ogx-filter__op-select${isActive ? ' ogx-filter__op-select--active' : ''}`}
+                    value={String(currentOperator)}
+                    onChange={(e) => handleOperatorChange(e.target.value)}
+                    aria-label={`Filter operator for ${col.headerName || col.field}`}
+                >
+                    {operators.map(op => (
+                        <option key={op} value={op}>{op}</option>
+                    ))}
+                </select>
+
+                { }
+                {showValue && isBoolean && (
+                    <select
+                        id={`ogx-filter-val-${col.field}`}
+                        name={`filter-val-${col.field}`}
+                        className={`ogx-filter__value-input ogx-filter__value-select${isActive ? ' ogx-filter__value-input--active' : ''}`}
+                        value={String(item?.value ?? 'true')}
+                        onChange={(e) => {
+                            setLocalValue(e.target.value);
+                            onChange({
+                                id: item?.id ?? `${col.field}-${Date.now()}`,
+                                field: col.field,
+                                operator: currentOperator as GridFilterOperator,
+                                value: e.target.value,
+                            });
+                        }}
+                        aria-label={`Filter value for ${col.headerName || col.field}`}
+                    >
+                        <option value="true">true</option>
+                        <option value="false">false</option>
+                    </select>
+                )}
+
+                {showValue && !isBoolean && (
+                    <input
+                        id={`ogx-filter-val-${col.field}`}
+                        name={`filter-val-${col.field}`}
+                        className={`ogx-filter__value-input${isActive ? ' ogx-filter__value-input--active' : ''}`}
+                        type="text"
+                        value={localValue}
+                        onChange={(e) => setLocalValue(e.target.value)}
+                        placeholder={col.type === 'number' ? 'Number…' : 'Value…'}
+                        aria-label={`Filter value for ${col.headerName || col.field}`}
+                    />
+                )}
+
+                {/* Clear button — only when active */}
+                {isActive && (
+                    <button
+                        className="ogx-filter__row-clear"
+                        onClick={handleClear}
+                        aria-label={`Clear filter for ${col.headerName || col.field}`}
+                        title="Clear"
+                    >
+                        ×
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+// ── Root panel ────────────────────────────────────────────────────────────────
+
+export const FilterPanel: React.FC<FilterPanelProps> = ({ filterModel, columns, onFilterModelChange }) => {
+    const items: GridFilterItem[] = (filterModel.items ?? []) as GridFilterItem[];
+    const logicOperator = filterModel.logicOperator ?? 'and';
+
+    const handleItemChange = useCallback((field: string, newItem: GridFilterItem | null) => {
+        const rest = items.filter(i => 'field' in i && (i as GridFilterItem).field !== field);
+        const next: GridFilterItem[] = newItem ? [...rest, newItem] : rest;
+        onFilterModelChange({ ...filterModel, items: next });
+    }, [items, filterModel, onFilterModelChange]);
+
+    const handleLogicChange = useCallback((op: 'and' | 'or') => {
+        onFilterModelChange({ ...filterModel, logicOperator: op });
+    }, [filterModel, onFilterModelChange]);
+
+    const filterableColumns = columns.filter(col => col.filterable !== false);
+
+    return (
+        <>
+            { }
+            {items.length > 1 && (
+                <div className="ogx-filter__logic-bar">
+                    <span className="ogx-filter__logic-label">Match:</span>
+                    <button
+                        className={`ogx-filter__logic-pill${logicOperator === 'and' ? ' ogx-filter__logic-pill--active' : ''}`}
+                        onClick={() => handleLogicChange('and')}
+                        aria-pressed={logicOperator === 'and'}
+                    >
+                        ALL (AND)
+                    </button>
+                    <button
+                        className={`ogx-filter__logic-pill${logicOperator === 'or' ? ' ogx-filter__logic-pill--active' : ''}`}
+                        onClick={() => handleLogicChange('or')}
+                        aria-pressed={logicOperator === 'or'}
+                    >
+                        ANY (OR)
+                    </button>
+                </div>
+            )}
+
+            { }
+            {filterableColumns.length === 0 ? (
+                <div className="ogx-filter__empty">No filterable columns.</div>
+            ) : (
+                filterableColumns.map(col => (
+                    <FilterRow
+                        key={col.field}
+                        col={col}
+                        item={getActiveFilter(items, col.field)}
+                        onChange={(item) => handleItemChange(col.field, item)}
+                    />
+                ))
+            )}
+        </>
+    );
+};

package/lib/components/FilterPanel/index.ts

@@ -0,0 +1 @@
+export * from './FilterPanel';

package/lib/components/Header/ColumnMenu.css

@@ -0,0 +1,68 @@
+.ogx-column-menu {
+    position: fixed;
+    background: var(--ogx-overlay-background, #fff);
+    box-shadow: var(--ogx-overlay-shadow, 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.06));
+    border-radius: var(--ogx-border-radius-md, 8px);
+    padding: 4px 0;
+    min-width: 190px;
+    z-index: 1300;
+}
+.ogx-menu-section-label {
+    padding: 6px 14px 2px;
+    font-family: var(--ogx-font-family, system-ui, sans-serif);
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ogx-color-gray-400, #94a3b8);
+    user-select: none;
+}
+.ogx-menu-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 7px 14px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: var(--ogx-font-family, system-ui, sans-serif);
+    font-size: var(--ogx-font-size-xs);
+    color: var(--ogx-overlay-text, #334155);
+    text-align: left;
+    gap: 6px;
+    transition: background 0.1s;
+}
+.ogx-menu-item:hover {
+    background: var(--ogx-overlay-item-hover-bg, #f8fafc);
+    color: var(--ogx-overlay-item-hover-text, #0f172a);
+}
+.ogx-menu-item--active {
+    color: var(--ogx-overlay-item-selected-text, #1976d2);
+    font-weight: 600;
+}
+.ogx-menu-item--active:hover {
+    background: var(--ogx-overlay-item-selected-bg, rgba(25, 118, 210, 0.05));
+}
+.ogx-menu-item__indicator {
+    flex: 0 0 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ogx-overlay-item-selected-text, #1976d2);
+}
+.ogx-menu-item__icon {
+    flex: 0 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ogx-color-gray-400, #94a3b8);
+    transition: color 0.1s;
+}
+.ogx-menu-item--active .ogx-menu-item__icon {
+    color: var(--ogx-color-primary, #1976d2);
+}
+.ogx-menu-divider {
+    height: 1px;
+    background: var(--ogx-overlay-border, #e2e8f0);
+    margin: 4px 0;
+}