@moontra/moonui 6.3.0 → 6.5.0

package/src/components/ui/table.tsx

@@ -7,6 +7,32 @@ import { cn } from "../../lib/utils";
 
 export type SortDirection = "asc" | "desc" | null;
 
+/**
+ * Tablo düzeyi kontrollü sıralama bağlamı (#321).
+ *
+ * `Table`'daki `sortColumn`/`sortDirection`/`onSortChange` deklare edilmişti ama
+ * destructure'da yoruma alındığı için `...props` içinde kalıp native <table>'a
+ * sızıyordu (ölçüldü: `sortcolumn`/`sortdirection` geçersiz DOM attribute +
+ * 4 React uyarısı). Artık gerçekten bağlılar.
+ *
+ * `TableHead`'in mevcut `sorted`/`onSort` prop'ları KORUNUR ve önceliklidir —
+ * elle bağlayan tüketici kırılmaz. `columnId` verildiğinde bağlam devreye girer.
+ */
+interface TableSortContextValue {
+  sortColumn?: string;
+  sortDirection?: SortDirection;
+  onSortChange?: (column: string, direction: SortDirection) => void;
+}
+
+const TableSortContext = React.createContext<TableSortContextValue | null>(null);
+
+/** asc → desc → null → asc döngüsü */
+function nextSortDirection(current: SortDirection): SortDirection {
+  if (current === "asc") return "desc";
+  if (current === "desc") return null;
+  return "asc";
+}
+
 const tableVariants = cva(
   "w-full caption-bottom text-sm",
   {
@@ -72,18 +98,30 @@ const Table = React.forwardRef<
   size, 
   loading, 
   emptyContent,
-  // Kullanılmayan özellikleri yoruma alarak lint uyarılarını önlüyoruz
-  // sortColumn,
-  // sortDirection,
-  // onSortChange,
-  // selectedRowIds,
-  // onRowSelectionChange,
-  // disableRowSelection,
-  // getRowId,
+  // #321: Bunlar eskiden yoruma alınmıştı ve `...props` içinde kalıp native
+  // <table>'a sızıyordu (ölçüldü: `sortcolumn`/`sortdirection` geçersiz DOM
+  // attribute olarak basılıyor + 4 React uyarısı). Artık destructure ediliyorlar:
+  //   • sıralama üçlüsü GERÇEKTEN bağlandı (aşağıdaki TableSortContext)
+  //   • seçim dörtlüsü yalnız DOM'dan ÇIKARILIYOR — bağlanamazlar, çünkü `Table`
+  //     veri almıyor (tamamen kompozisyonel) ve `getRowId(row)` bir veri satırı
+  //     ister. Satır seçimi için veri-güdümlü `DataTable` kullanılmalı.
+  sortColumn,
+  sortDirection,
+  onSortChange,
+  selectedRowIds: _selectedRowIds,
+  onRowSelectionChange: _onRowSelectionChange,
+  disableRowSelection: _disableRowSelection,
+  getRowId: _getRowId,
   ...props 
 }, ref) => {
   // Apply striped styles to the tbody via a class name
   const striped = variant === "striped";
+
+  // #321: sıralama prop'ları alt başlıklara bağlam üzerinden ulaşır
+  const sortContextValue = React.useMemo<TableSortContextValue>(
+    () => ({ sortColumn, sortDirection, onSortChange }),
+    [sortColumn, sortDirection, onSortChange]
+  );
   
   // Çocukları güvenli bir şekilde işle ve tip kontrollerini doğru yap
   const childrenWithProps = React.Children.map(props.children, (child) => {
@@ -108,17 +146,19 @@ const Table = React.forwardRef<
         </div>
       )}
       
-      <table
-        ref={ref}
-        className={cn(
-          tableVariants({ variant, size }),
-          loading && "opacity-70",
-          className
-        )}
-        {...props}
-      >
-        {childrenWithProps}
-      </table>
+      <TableSortContext.Provider value={sortContextValue}>
+        <table
+          ref={ref}
+          className={cn(
+            tableVariants({ variant, size }),
+            loading && "opacity-70",
+            className
+          )}
+          {...props}
+        >
+          {childrenWithProps}
+        </table>
+      </TableSortContext.Provider>
       
     </div>
   );
@@ -207,12 +247,43 @@ interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   sorted?: SortDirection;
   /** Sıralama değiştiğinde çağrılacak fonksiyon */
   onSort?: () => void;
+  /**
+   * Tablo düzeyi kontrollü sıralamada bu sütunun kimliği (#321).
+   *
+   * Verildiğinde `Table`'ın `sortColumn`/`sortDirection`/`onSortChange`
+   * prop'larıyla otomatik bağlanır: yön bağlamdan okunur, tıklama/klavye
+   * `onSortChange(columnId, sonrakiYön)` çağırır.
+   *
+   * Elle bağlayan mevcut kullanım (`sorted` + `onSort`) ÖNCELİKLİDİR ve
+   * çalışmaya devam eder — bu prop eklemeli, kırıcı değil.
+   */
+  columnId?: string;
   /** Text alignment */
   align?: 'left' | 'center' | 'right';
 }
 
 const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ className, sortable, sorted, onSort, align = 'left', children, ...props }, ref) => {
+  ({ className, sortable, sorted, onSort, columnId, align = 'left', children, ...props }, ref) => {
+    const sortCtx = React.useContext(TableSortContext);
+
+    // Elle verilen `sorted`/`onSort` önceliklidir; yoksa bağlamdan türetilir.
+    const ctxSorted: SortDirection =
+      columnId && sortCtx && sortCtx.sortColumn === columnId
+        ? sortCtx.sortDirection ?? null
+        : null;
+    const effectiveSorted: SortDirection = sorted !== undefined ? sorted : ctxSorted;
+
+    const handleSort = React.useCallback(() => {
+      if (onSort) {
+        onSort();
+        return;
+      }
+      if (columnId && sortCtx?.onSortChange) {
+        sortCtx.onSortChange(columnId, nextSortDirection(ctxSorted));
+      }
+    }, [onSort, columnId, sortCtx, ctxSorted]);
+
+    const isInteractive = Boolean(sortable && (onSort || (columnId && sortCtx?.onSortChange)));
     // Sıralama için simgeler
     const renderSortIcon = () => {
       if (!sortable) return null;
@@ -282,11 +353,41 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
           sortable && "cursor-pointer hover:text-foreground select-none",
           className
         )}
-        onClick={sortable ? onSort : undefined}
+        /* #321: sıralama durumu ekran okuyucuya YANSIMIYORDU (`aria-sort`
+           grep'i 0 idi) — yalnız görsel ok ikonu değişiyordu. Sıralanamayan
+           sütunda öznitelik hiç basılmaz. */
+        aria-sort={
+          sortable
+            ? effectiveSorted === "asc"
+              ? "ascending"
+              : effectiveSorted === "desc"
+                ? "descending"
+                : "none"
+            : undefined
+        }
+        onClick={isInteractive ? handleSort : undefined}
         {...props}
       >
         {sortable || align !== 'left' ? (
-          <div className={cn("flex items-center", alignmentClasses[align].split(' ')[1])}>
+          <div
+            className={cn("flex items-center", alignmentClasses[align].split(' ')[1])}
+            /* #321: sıralama kontrolü yalnız fareyle çalışıyordu (dosyada
+               `tabIndex` grep'i 0, `onKeyDown` yok). Görsel olarak div kalır ama
+               role/tabIndex/onKeyDown ile gerçek düğme gibi davranır; erişilebilir
+               adı sütun başlığıdır. Pro DataTable'da aynı düzeltme #291'de yapıldı. */
+            role={isInteractive ? "button" : undefined}
+            tabIndex={isInteractive ? 0 : undefined}
+            onKeyDown={
+              isInteractive
+                ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleSort();
+                    }
+                  }
+                : undefined
+            }
+          >
             {children}
             {sortable && renderSortIcon()}
           </div>
@@ -347,4 +448,5 @@ export {
   TableCaption,
 };
 
-export type { TableBodyProps };
+// #321: TableProps/TableHeadProps/TableCellProps export edilmiyordu
+export type { TableProps, TableBodyProps, TableHeadProps, TableCellProps };