@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/components/Header/ColumnMenu.tsx

@@ -0,0 +1,249 @@
+import React, { useRef, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import type { GridColDef, GridSortDirection, GridColumnPinning } from '../../types';
+
+
+interface ColumnMenuProps {
+    colDef: GridColDef<any>;
+    sortModel?: Array<{ field: string; sort: 'asc' | 'desc' }>;
+    onSort?: (field: string, direction: GridSortDirection) => void;
+    onHide?: (field: string) => void;
+    onPin?: (field: string, side: 'left' | 'right' | null) => void;
+    pinnedColumns?: GridColumnPinning;
+    onManageColumns?: () => void;
+    onClose: () => void;
+    anchorEl: HTMLElement | null;
+}
+
+function ActiveDotIcon() {
+    return (
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor">
+            <circle cx="4" cy="4" r="4" />
+        </svg>
+    );
+}
+
+function InactiveDotIcon() {
+    return (
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="none" stroke="currentColor" strokeWidth="1.5">
+            <circle cx="4" cy="4" r="3" />
+        </svg>
+    );
+}
+
+function ManageColumnsIcon() {
+    return (
+        <svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" width="13" height="13" fill="none">
+            <rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" strokeWidth="1.8" />
+            <rect x="8.5" y="4" width="7" height="16" fill="currentColor" opacity="0.3" />
+            <line x1="8.5" y1="4" x2="8.5" y2="20" stroke="currentColor" strokeWidth="1.8" />
+            <line x1="15.5" y1="4" x2="15.5" y2="20" stroke="currentColor" strokeWidth="1.8" />
+            <line x1="2" y1="9" x2="22" y2="9" stroke="currentColor" strokeWidth="1.2" />
+            <line x1="2" y1="14" x2="22" y2="14" stroke="currentColor" strokeWidth="1.2" />
+        </svg>
+    );
+}
+
+function AscIcon() {
+    return (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="12" y1="19" x2="12" y2="5" />
+            <polyline points="5 12 12 5 19 12" />
+        </svg>
+    );
+}
+
+function DescIcon() {
+    return (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <polyline points="19 12 12 19 5 12" />
+        </svg>
+    );
+}
+
+function UnsortIcon() {
+    return (
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+            <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+    );
+}
+
+function HideIcon() {
+    return (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+            <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+            <line x1="1" y1="1" x2="23" y2="23" />
+        </svg>
+    );
+}
+
+function PinLeftIcon() {
+    return (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            { }
+            <line x1="4" y1="2" x2="4" y2="22" />
+            { }
+            <polyline points="11 8 4 12 11 16" />
+            { }
+            <line x1="4" y1="12" x2="20" y2="12" />
+        </svg>
+    );
+}
+
+function PinRightIcon() {
+    return (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            { }
+            <line x1="20" y1="2" x2="20" y2="22" />
+            { }
+            <polyline points="13 8 20 12 13 16" />
+            { }
+            <line x1="20" y1="12" x2="4" y2="12" />
+        </svg>
+    );
+}
+
+function UnpinIcon() {
+    return (
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="2" y1="2" x2="22" y2="22" />
+            <line x1="4" y1="4" x2="4" y2="20" />
+            <line x1="4" y1="12" x2="20" y2="12" />
+        </svg>
+    );
+}
+
+export function ColumnMenu({ colDef, sortModel, onSort, onHide, onPin, pinnedColumns, onManageColumns, onClose, anchorEl }: ColumnMenuProps) {
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [style, setStyle] = useState<React.CSSProperties>({ position: 'fixed', zIndex: 1300, top: 0, left: 0, visibility: 'hidden' });
+
+    React.useLayoutEffect(() => {
+        if (!anchorEl || !menuRef.current) return;
+
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const margin = 8;
+
+        let left = anchorRect.left;
+        if (left + menuRect.width + margin > vw) {
+            left = vw - menuRect.width - margin;
+        }
+        if (left < margin) left = margin;
+
+        let top = anchorRect.bottom + 4;
+        if (top + menuRect.height + margin > vh) {
+            top = anchorRect.top - menuRect.height - 4;
+        }
+
+        setStyle({ position: 'fixed', zIndex: 1300, top, left, visibility: 'visible' });
+    }, [anchorEl]);
+
+
+    useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (
+                menuRef.current && !menuRef.current.contains(event.target as Node) &&
+                anchorEl && !anchorEl.contains(event.target as Node)
+            ) onClose();
+        }
+        function handleKey(e: KeyboardEvent) {
+            if (e.key === 'Escape') onClose();
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleKey);
+        // Close menu on any scroll or resize so it doesn't float detached from its anchor
+        window.addEventListener('scroll', onClose, true);
+        window.addEventListener('resize', onClose);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKey);
+            window.removeEventListener('scroll', onClose, true);
+            window.removeEventListener('resize', onClose);
+        };
+    }, [anchorEl, onClose]);
+
+    const handleSort = (direction: GridSortDirection) => { onSort?.(colDef.field, direction); onClose(); };
+    const handleHide = () => { onHide?.(colDef.field); onClose(); };
+    const handlePin = (side: 'left' | 'right' | null) => { onPin?.(colDef.field, side); onClose(); };
+
+    const currentSort = sortModel?.find(item => item.field === colDef.field)?.sort;
+    const isUnsorted = currentSort === undefined || currentSort === null;
+
+    const isPinnedLeft = pinnedColumns?.left?.includes(colDef.field) ?? false;
+    const isPinnedRight = pinnedColumns?.right?.includes(colDef.field) ?? false;
+    const isUnpinned = !isPinnedLeft && !isPinnedRight;
+
+    const colLabel = colDef.headerName || colDef.field;
+
+    return ReactDOM.createPortal(
+        <div ref={menuRef} className="ogx-column-menu" style={style} role="menu" aria-label={`Column options for ${colLabel}`}>
+
+            { }
+            {onSort && colDef.sortable !== false && (
+                <>
+                    <button className={`ogx-menu-item${currentSort === 'asc' ? ' ogx-menu-item--active' : ''}`}
+                        onClick={() => handleSort('asc')} role="menuitemradio" aria-checked={currentSort === 'asc'}>
+                        <span className="ogx-menu-item__indicator" aria-hidden="true">{currentSort === 'asc' ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                        <span className="ogx-menu-item__icon" aria-hidden="true"><AscIcon /></span>
+                        Sort Ascending
+                    </button>
+                    <button className={`ogx-menu-item${currentSort === 'desc' ? ' ogx-menu-item--active' : ''}`}
+                        onClick={() => handleSort('desc')} role="menuitemradio" aria-checked={currentSort === 'desc'}>
+                        <span className="ogx-menu-item__indicator" aria-hidden="true">{currentSort === 'desc' ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                        <span className="ogx-menu-item__icon" aria-hidden="true"><DescIcon /></span>
+                        Sort Descending
+                    </button>
+                    <button className={`ogx-menu-item${isUnsorted ? ' ogx-menu-item--active' : ''}`}
+                        onClick={() => handleSort(null)} role="menuitemradio" aria-checked={isUnsorted}>
+                        <span className="ogx-menu-item__indicator" aria-hidden="true">{isUnsorted ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                        <span className="ogx-menu-item__icon" aria-hidden="true"><UnsortIcon /></span>
+                        Unsort
+                    </button>
+                    <div className="ogx-menu-divider" />
+                </>
+            )}
+
+            { }
+            <div className="ogx-menu-section-label" aria-hidden="true">Pin column</div>
+            <button className={`ogx-menu-item${isPinnedLeft ? ' ogx-menu-item--active' : ''}`}
+                onClick={() => handlePin('left')} role="menuitemradio" aria-checked={isPinnedLeft} aria-label="Pin to left">
+                <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedLeft ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                <span className="ogx-menu-item__icon" aria-hidden="true"><PinLeftIcon /></span>
+                Pin to Left
+            </button>
+            <button className={`ogx-menu-item${isPinnedRight ? ' ogx-menu-item--active' : ''}`}
+                onClick={() => handlePin('right')} role="menuitemradio" aria-checked={isPinnedRight} aria-label="Pin to right">
+                <span className="ogx-menu-item__indicator" aria-hidden="true">{isPinnedRight ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                <span className="ogx-menu-item__icon" aria-hidden="true"><PinRightIcon /></span>
+                Pin to Right
+            </button>
+            <button className={`ogx-menu-item${isUnpinned ? ' ogx-menu-item--active' : ''}`}
+                onClick={() => handlePin(null)} role="menuitemradio" aria-checked={isUnpinned} aria-label="Unpin column">
+                <span className="ogx-menu-item__indicator" aria-hidden="true">{isUnpinned ? <ActiveDotIcon /> : <InactiveDotIcon />}</span>
+                <span className="ogx-menu-item__icon" aria-hidden="true"><UnpinIcon /></span>
+                Unpin
+            </button>
+            <div className="ogx-menu-divider" />
+
+            { }
+            <button className="ogx-menu-item" onClick={handleHide} role="menuitem" aria-label={`Hide ${colLabel} column`}>
+                <span className="ogx-menu-item__indicator" aria-hidden="true" />
+                <span className="ogx-menu-item__icon" aria-hidden="true"><HideIcon /></span>
+                Hide Column
+            </button>
+
+            <div className="ogx-menu-divider" />
+            <button className="ogx-menu-item" onClick={() => { onManageColumns?.(); onClose(); }} role="menuitem" aria-label="Manage all columns">
+                <span className="ogx-menu-item__indicator" aria-hidden="true" />
+                <span className="ogx-menu-item__icon" aria-hidden="true"><ManageColumnsIcon /></span>
+                Manage columns
+            </button>
+        </div>,
+        (anchorEl?.closest('.ogx-theme-provider') || document.body)
+    );
+}

package/lib/components/Header/Header.css

@@ -0,0 +1,224 @@
+/* Sticky wrapper — holds group header rows AND the column header row */
+.ogx__header-wrap {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.ogx__header {
+  display: flex;
+  align-items: stretch;
+  background: var(--ogx-grid-header-background);
+  border-bottom: 1px solid var(--ogx-grid-border-color);
+  min-height: var(--ogx-header-height);
+  box-shadow: var(--ogx-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.03));
+}
+.ogx__header-cell--expand {
+  width: 48px;
+  min-width: 48px;
+  flex-shrink: 0;
+  border-right: 1px solid transparent; 
+}
+.ogx__header-cell {
+  display: flex;
+  align-items: center;
+  padding: var(--ogx-grid-cell-padding-y) var(--ogx-grid-cell-padding-x);
+  position: relative;
+  font-size: var(--ogx-grid-header-font-size);
+  font-weight: 600; 
+  color: var(--ogx-grid-header-text);
+  overflow: hidden;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  user-select: none;
+  transition: background-color 0.2s;
+}
+.ogx__header-cell:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 25%;
+  height: 50%;
+  width: 1px;
+  background-color: var(--ogx-color-gray-300);
+  opacity: 0.5;
+}
+.ogx__header-cell-content {
+  display: flex;
+  align-items: center;
+  gap: var(--ogx-spacing-xs);
+  width: 100%;
+  overflow: hidden;
+}
+.ogx__header-cell-title-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  overflow: hidden;
+}
+.ogx__header-cell-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.ogx__header-cell-aggregation {
+  font-size: 0.6rem;
+  font-weight: 500;
+  color: var(--ogx-color-gray-500);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 2px;
+}
+.ogx__header-cell--align-left {
+  justify-content: flex-start;
+}
+.ogx__header-cell--align-center {
+  justify-content: center;
+}
+.ogx__header-cell--align-right {
+  justify-content: flex-start;
+}
+/* Right-aligned header: reverse the content row so the title appears on the right */
+.ogx__header-cell--align-center .ogx__header-cell-content {
+  text-align: center;
+}
+.ogx__header-cell--align-right .ogx__header-cell-content {
+  flex-direction: row-reverse;
+}
+.ogx__header-cell--align-right .ogx__header-cell-title-wrapper {
+  align-items: flex-end;
+  text-align: right;
+}
+.ogx__header-cell--align-right .ogx__menu-icon-btn {
+  margin-left: 0;
+  margin-right: auto;
+}
+.ogx__header-cell--sortable {
+  cursor: pointer;
+}
+.ogx__header-cell--sortable:hover {
+  background: var(--ogx-grid-header-hover-background);
+}
+.ogx__header-cell--sorted {
+  background: var(--ogx-grid-header-sorted-background); 
+  color: var(--ogx-color-primary-dark);
+}
+.ogx__header-cell--sorted .ogx__header-cell-title {
+  color: var(--ogx-color-primary-dark);
+}
+.ogx__sort-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+.ogx__sort-icon::before {
+  transition: all 0.2s;
+}
+.ogx__sort-icon--asc::before {
+  content: '↑';
+}
+.ogx__sort-icon--desc::before {
+  content: '↓';
+}
+.ogx__header-cell--checkbox, .ogx__cell--checkbox {
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  flex: 0 0 48px;
+  justify-content: center;
+  padding: 0;
+}
+.ogx__header-cell--pinned {
+  background: var(--ogx-grid-header-background);
+  z-index: 12; 
+}
+.ogx__header-cell--pinned-left {
+  box-shadow: var(--ogx-grid-pinned-left-shadow, 4px 0 12px -4px rgba(0, 0, 0, 0.05)); 
+}
+.ogx__header-cell--pinned-right {
+  box-shadow: var(--ogx-grid-pinned-right-shadow, -4px 0 12px -4px rgba(0, 0, 0, 0.05));
+}
+.ogx__header-cell--pinned::after {
+  display: none;
+}
+.ogx__header-cell--dragging {
+  cursor: move !important;
+  opacity: 0.5;
+  background: var(--ogx-color-gray-200);
+}
+.ogx__header-drag-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  color: var(--ogx-color-primary);
+  animation: ogx-pulse 1.5s infinite ease-in-out;
+}
+@keyframes ogx-pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+.ogx__header-cell--drag-over {
+  border-left: 2px solid var(--ogx-color-primary) !important;
+  background: var(--ogx-color-blue-50);
+}
+/* Show ring on header cells during keyboard navigation */
+.ogx--kb .ogx__header-cell--focused {
+  outline: 2px solid var(--ogx-color-primary, #2563eb);
+  outline-offset: -2px;
+  background-color: var(--ogx-grid-header-hover-background);
+  z-index: 6;
+}
+.ogx__header-cell--focus-visible {
+  outline: 2px solid var(--ogx-color-primary);
+  outline-offset: -2px;
+  background-color: var(--ogx-grid-header-hover-background);
+  z-index: 6; 
+}
+.ogx__header-cell:focus, .ogx__header-cell:focus-visible {
+  outline: none !important;
+}
+.ogx__menu-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  color: var(--ogx-color-gray-500);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
+  margin-left: auto;
+}
+.ogx__header-cell:hover .ogx__menu-icon-btn,
+.ogx__header-cell--sorted .ogx__menu-icon-btn {
+  opacity: 1;
+}
+.ogx__menu-icon-btn:hover {
+  background: var(--ogx-grid-header-hover-background);
+  color: var(--ogx-grid-header-text);
+}
+.ogx__menu-icon-btn--active {
+  opacity: 1;
+  background: var(--ogx-color-primary-light);
+  color: var(--ogx-color-primary);
+}