@jinaan/uikit 0.1.46 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -13,6 +13,7 @@ import {
   X,
 } from "@phosphor-icons/react";
 import {
+  Fragment,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -138,6 +139,11 @@ interface DataTableProps<T> {
   bulkActions?: BulkAction<T>[];
 
   rowActions?: (row: T) => ReactNode;
+  /**
+   * Expanding rows: renders a chevron toggle cell at the row start and the
+   * returned content in a full-width muted band beneath the row.
+   */
+  renderExpanded?: (row: T) => ReactNode;
   onRowClick?: (row: T) => void;
 
   defaultSort?: { id: string; dir: "asc" | "desc" };
@@ -233,6 +239,7 @@ export function DataTable<T>({
   selectable = false,
   bulkActions,
   rowActions,
+  renderExpanded,
   onRowClick,
   defaultSort,
   sort: sortProp,
@@ -268,6 +275,15 @@ export function DataTable<T>({
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState(initialPageSize);
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const toggleExpanded = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
   const [activeFilterIds, setActiveFilterIds] = useState<string[]>([]);
 
   const propOrder = columns.map((c) => c.id);
@@ -398,7 +414,7 @@ export function DataTable<T>({
   // order). The pinned colgroup maps positionally onto the columns, so any
   // structural change invalidates the measured widths — otherwise the new
   // column steals its neighbor's width and every column shifts by one.
-  const structureKey = `${selectable ? "s" : "-"}|${rowActions ? "a" : "-"}|${columnKey}`;
+  const structureKey = `${selectable ? "s" : "-"}|${rowActions ? "a" : "-"}|${renderExpanded ? "e" : "-"}|${columnKey}`;
   const structureRef = useRef(structureKey);
   const pinned = columnWidths.length > 0;
 
@@ -772,6 +788,7 @@ export function DataTable<T>({
                     />
                   </th>
                 )}
+                {renderExpanded && <th className="h-(--table-header-h) w-11 px-(--table-pad-x)" />}
                 {visibleColumns.map((c) => (
                   <th
                     key={c.id}
@@ -886,6 +903,7 @@ export function DataTable<T>({
                 <thead className="sr-only">
                   <tr>
                     {selectable && <th scope="col">Select</th>}
+                    {renderExpanded && <th scope="col">Details</th>}
                     {visibleColumns.map((c) => (
                       <th key={c.id} scope="col" aria-sort={ariaSort(c)}>
                         {c.header}
@@ -898,22 +916,49 @@ export function DataTable<T>({
                   {pageRows.map((row) => {
                     const id = getRowId(row);
                     const isSelected = selected.has(id);
+                    const isExpanded = expanded.has(id);
+                    const columnCount =
+                      visibleColumns.length +
+                      (selectable ? 1 : 0) +
+                      (renderExpanded ? 1 : 0) +
+                      (rowActions ? 1 : 0);
                     return (
-                      <TableRow
-                        key={id}
-                        data-state={isSelected ? "selected" : undefined}
-                        onClick={onRowClick ? () => onRowClick(row) : undefined}
-                        className={onRowClick ? "cursor-pointer" : undefined}
-                      >
-                        {selectable && (
-                          <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
-                            <Checkbox
-                              aria-label="Select row"
-                              checked={isSelected}
-                              onCheckedChange={() => toggleOne(id)}
-                            />
-                          </TableCell>
-                        )}
+                      <Fragment key={id}>
+                        <TableRow
+                          data-state={isSelected ? "selected" : undefined}
+                          onClick={onRowClick ? () => onRowClick(row) : undefined}
+                          className={onRowClick ? "cursor-pointer" : undefined}
+                        >
+                          {selectable && (
+                            <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
+                              <Checkbox
+                                aria-label="Select row"
+                                checked={isSelected}
+                                onCheckedChange={() => toggleOne(id)}
+                              />
+                            </TableCell>
+                          )}
+                          {renderExpanded && (
+                            <TableCell className="w-11" onClick={(e) => e.stopPropagation()}>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="size-7"
+                                aria-label={isExpanded ? "Collapse row" : "Expand row"}
+                                aria-expanded={isExpanded}
+                                onClick={() => toggleExpanded(id)}
+                              >
+                                <CaretDown
+                                  className={cn(
+                                    "size-3.5 text-muted transition-transform motion-safe:duration-200",
+                                    isExpanded ? "" : "-rotate-90",
+                                  )}
+                                  weight="bold"
+                                />
+                              </Button>
+                            </TableCell>
+                          )}
                         {visibleColumns.map((c) => (
                           <TableCell
                             key={c.id}
@@ -923,23 +968,34 @@ export function DataTable<T>({
                             {c.cell(row)}
                           </TableCell>
                         ))}
-                        {rowActions && (
-                          <TableCell
-                            className="w-44 px-4 text-right"
-                            onClick={(e) => {
-                              // Dead-zone fix: only swallow clicks on the
-                              // action controls themselves (menus, buttons);
-                              // the cell's padding stays part of the clickable
-                              // row.
-                              if ((e.target as HTMLElement).closest("button, a, input, [role='menuitem']")) {
-                                e.stopPropagation();
-                              }
-                            }}
-                          >
-                            {rowActions(row)}
-                          </TableCell>
-                        )}
-                      </TableRow>
+                          {rowActions && (
+                            <TableCell
+                              className="w-44 px-4 text-right"
+                              onClick={(e) => {
+                                // Dead-zone fix: only swallow clicks on the
+                                // action controls themselves (menus, buttons);
+                                // the cell's padding stays part of the clickable
+                                // row.
+                                if ((e.target as HTMLElement).closest("button, a, input, [role='menuitem']")) {
+                                  e.stopPropagation();
+                                }
+                              }}
+                            >
+                              {rowActions(row)}
+                            </TableCell>
+                          )}
+                        </TableRow>
+                        {renderExpanded && isExpanded ? (
+                          <TableRow className="hover:bg-inherit" data-expanded="">
+                            <TableCell
+                              colSpan={columnCount}
+                              className="border-t border-line bg-elevated/60 px-(--table-pad-x) py-3 align-top text-[13px] text-muted"
+                            >
+                              {renderExpanded(row)}
+                            </TableCell>
+                          </TableRow>
+                        ) : null}
+                      </Fragment>
                     );
                   })}
                 </TableBody>