@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -0,0 +1,190 @@
+import { useState, useMemo, useRef } from 'react';
+import { Checkbox } from '../ui/Checkbox';
+import type { GridColDef, GridRowModel } from '../../types';
+
+
+export interface ColumnVisibilityPanelProps<R extends GridRowModel = GridRowModel> {
+    columns: GridColDef<R>[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (field: string, isVisible: boolean) => void;
+    onShowAll: () => void;
+    onHideAll: () => void;
+    onColumnReorder?: (fromField: string, toField: string) => void;
+}
+
+function SearchIcon() {
+    return (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+    );
+}
+
+function DragHandleIcon() {
+    return (
+        <svg
+            className="ogx-column-visibility-panel__drag-handle"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+        >
+            <circle cx="9"  cy="5"  r="1.5" />
+            <circle cx="15" cy="5"  r="1.5" />
+            <circle cx="9"  cy="12" r="1.5" />
+            <circle cx="15" cy="12" r="1.5" />
+            <circle cx="9"  cy="19" r="1.5" />
+            <circle cx="15" cy="19" r="1.5" />
+        </svg>
+    );
+}
+
+export function ColumnVisibilityPanel<R extends GridRowModel = GridRowModel>(
+    props: ColumnVisibilityPanelProps<R>
+) {
+    const { columns, visibleColumns, onVisibilityChange, onShowAll, onHideAll, onColumnReorder } = props;
+    const [searchQuery, setSearchQuery] = useState('');
+    const [dragOverField, setDragOverField] = useState<string | null>(null);
+    const dragFieldRef = useRef<string | null>(null);
+
+    const hideableColumns = useMemo(() => columns.filter(col => col.hideable !== false), [columns]);
+    const allVisible = hideableColumns.every(col => visibleColumns.has(col.field));
+
+    const filteredColumns = useMemo(() => {
+        if (!searchQuery) return columns;
+        const lowerQuery = searchQuery.toLowerCase();
+        return columns.filter(col =>
+            (col.headerName || col.field).toLowerCase().includes(lowerQuery)
+        );
+    }, [columns, searchQuery]);
+
+    const handleToggleAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.checked) {
+            onShowAll();
+        } else {
+            onHideAll();
+        }
+    };
+
+    // ── Drag handlers ──────────────────────────────────────────────────────────
+    const handleDragStart = (field: string) => (e: React.DragEvent) => {
+        dragFieldRef.current = field;
+        e.dataTransfer.effectAllowed = 'move';
+        // Use a ghost image offset so the handle looks natural
+        e.dataTransfer.setDragImage(e.currentTarget.closest('.ogx-column-visibility-panel__item') as HTMLElement, 20, 20);
+    };
+
+    const handleDragOver = (field: string) => (e: React.DragEvent) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        if (field !== dragFieldRef.current) {
+            setDragOverField(field);
+        }
+    };
+
+    const handleDragLeave = () => {
+        setDragOverField(null);
+    };
+
+    const handleDrop = (toField: string) => (e: React.DragEvent) => {
+        e.preventDefault();
+        const fromField = dragFieldRef.current;
+        setDragOverField(null);
+        dragFieldRef.current = null;
+        if (fromField && fromField !== toField && onColumnReorder) {
+            onColumnReorder(fromField, toField);
+        }
+    };
+
+    const handleDragEnd = () => {
+        setDragOverField(null);
+        dragFieldRef.current = null;
+    };
+
+    return (
+        <div className="ogx-column-visibility-panel">
+            <div className="ogx-column-visibility-panel__search-section">
+                <div className="ogx-column-visibility-panel__search-container">
+                    <SearchIcon />
+                    <input
+                        id="ogx-column-search"
+                        name="ogx-column-search"
+                        autoComplete="off"
+                        className="ogx-column-visibility-panel__search-input"
+                        placeholder="Search"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                    />
+                </div>
+            </div>
+
+            <div className="ogx-column-visibility-panel__list">
+                {filteredColumns.map(col => {
+                    const isVisible = visibleColumns.has(col.field);
+                    const isHideable = col.hideable !== false;
+                    const isDragOver = dragOverField === col.field;
+                    const canReorder = !!onColumnReorder && !searchQuery;
+
+                    return (
+                        <div
+                            key={col.field}
+                            className={[
+                                'ogx-column-visibility-panel__item',
+                                !isHideable && 'ogx-column-visibility-panel__item--disabled',
+                                isDragOver && 'ogx-column-visibility-panel__item--drag-over',
+                            ].filter(Boolean).join(' ')}
+                            draggable={canReorder}
+                            onDragOver={canReorder ? handleDragOver(col.field) : undefined}
+                            onDragLeave={canReorder ? handleDragLeave : undefined}
+                            onDrop={canReorder ? handleDrop(col.field) : undefined}
+                            onDragEnd={canReorder ? handleDragEnd : undefined}
+                        >
+                            {canReorder && (
+                                <span
+                                    className="ogx-column-visibility-panel__drag-handle-wrapper"
+                                    draggable
+                                    onDragStart={handleDragStart(col.field)}
+                                    title="Drag to reorder"
+                                >
+                                    <DragHandleIcon />
+                                </span>
+                            )}
+                            <label
+                                className="ogx-column-visibility-panel__item-label"
+                                style={{ display: 'flex', alignItems: 'center', gap: 'var(--ogx-spacing-md)', flex: 1, cursor: isHideable ? 'pointer' : 'not-allowed' }}
+                            >
+                                <Checkbox
+                                    checked={isVisible}
+                                    onChange={(e) => onVisibilityChange(col.field, e.target.checked)}
+                                    disabled={!isHideable}
+                                />
+                                <span className="ogx-column-visibility-panel__label">
+                                    {col.headerName || col.field}
+                                </span>
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+
+            <div className="ogx-column-visibility-panel__footer">
+                <label className="ogx-column-visibility-panel__item">
+                    <Checkbox
+                        checked={allVisible}
+                        onChange={handleToggleAll}
+                    />
+                    <span className="ogx-column-visibility-panel__label">
+                        Show/Hide All
+                    </span>
+                </label>
+                <button
+                    className="ogx-column-visibility-panel__reset-btn"
+                    onClick={onShowAll}
+                >
+                    Reset
+                </button>
+            </div>
+        </div>
+    );
+}

package/lib/components/DataGrid/DataGrid.css

@@ -0,0 +1,224 @@
+.ogx {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--ogx-grid-background);
+  border: 1px solid var(--ogx-grid-border-color);
+  border-radius: var(--ogx-border-radius-lg);
+  font-family: var(--ogx-font-family);
+  position: relative;
+  box-shadow: var(--ogx-shadow-sm);
+  transition: box-shadow var(--ogx-transition-duration-normal);
+  overflow: hidden;
+}
+.ogx > :first-child {
+  border-top-left-radius: calc(var(--ogx-border-radius-lg) - 1px);
+  border-top-right-radius: calc(var(--ogx-border-radius-lg) - 1px);
+}
+.ogx > :last-child {
+  border-bottom-left-radius: calc(var(--ogx-border-radius-lg) - 1px);
+  border-bottom-right-radius: calc(var(--ogx-border-radius-lg) - 1px);
+}
+.ogx:hover {
+  box-shadow: var(--ogx-shadow-md);
+}
+.ogx__viewport {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  scrollbar-gutter: stable;
+}
+.ogx__content {
+  position: relative;
+  min-width: fit-content;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+.ogx__virtual-container {
+  position: relative;
+  flex: 1 0 auto;
+}
+.ogx__rows {
+  position: relative;
+  will-change: transform;
+}
+.ogx__pinned-rows {
+  position: relative;
+  z-index: 3;
+}
+.ogx__pinned-rows--top {
+  position: sticky;
+  top: var(--ogx-header-height);
+  z-index: 10; 
+  background: var(--ogx-grid-background);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+.ogx__pinned-rows--bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  background: var(--ogx-grid-background);
+  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
+  margin-top: auto;
+}
+.ogx--loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.ogx--loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--ogx-grid-background) 60%, transparent);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--ogx-z-index-modal);
+}
+.ogx--auto-height {
+  height: auto;
+}
+.ogx--auto-height .ogx__viewport {
+  overflow-y: visible;
+}
+.ogx__viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.ogx__viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ogx__viewport::-webkit-scrollbar-thumb {
+  background: var(--ogx-color-gray-300);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+.ogx__viewport::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ogx-border-color-hover);
+}
+.ogx__viewport {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+.ogx__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ogx-spacing-xxl);
+  color: var(--ogx-color-gray-500);
+  font-size: var(--ogx-font-size-lg);
+  text-align: center;
+  gap: var(--ogx-spacing-md);
+  min-height: 200px;
+}
+.ogx__empty svg {
+  color: var(--ogx-color-gray-300);
+}
+
+.ogx-error-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--ogx-grid-background) 10%, transparent);
+  backdrop-filter: blur(2px);
+  z-index: var(--ogx-z-index-modal);
+  gap: var(--ogx-spacing-md);
+  padding: var(--ogx-spacing-xl);
+  text-align: center;
+  border-radius: var(--ogx-border-radius-lg);
+  overflow: hidden;
+}
+.ogx-error-overlay > svg {
+  flex-shrink: 0;
+  overflow: visible;
+  display: block;
+}
+.ogx-error-overlay__title {
+  font-weight: 600;
+  color: var(--ogx-grid-row-text);
+}
+.ogx-error-overlay__message {
+  font-size: var(--ogx-font-size-sm);
+  color: var(--ogx-color-gray-500);
+  max-width: 400px;
+}
+
+.ogx__aggregation-footer {
+  display: flex;
+  align-items: center;
+  border-top: 2px solid var(--ogx-grid-border-color);
+  background: var(--ogx-grid-header-background);
+  font-weight: 600;
+  font-size: 0.85em;
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  width: 100%;
+}
+.ogx__aggregation-cell {
+  flex-shrink: 0;
+  padding: 0 var(--ogx-grid-cell-padding-x);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  border-right: 1px solid var(--ogx-grid-border-color);
+}
+.ogx__aggregation-label {
+  font-size: 0.7em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--ogx-color-gray-500);
+  line-height: 1.2;
+}
+.ogx__aggregation-value {
+  color: var(--ogx-color-primary);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ogx--density-compact .ogx__cell,
+.ogx--density-compact .ogx__header-cell {
+  padding: var(--ogx-spacing-xs) var(--ogx-spacing-sm);
+  font-size: var(--ogx-font-size-xs);
+}
+.ogx--density-comfortable .ogx__cell,
+.ogx--density-comfortable .ogx__header-cell {
+  padding: var(--ogx-spacing-md) var(--ogx-spacing-lg);
+  font-size: var(--ogx-font-size-md);
+}
+.ogx__group-cell-content {
+  font-weight: 500;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ogx-aria-live-status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}