doom-design-system 0.5.0 → 0.6.0

package/dist/components/Table/FilterBuilder/FilterSheet.module.css

@@ -1,72 +1,69 @@
-.conditionList {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  margin-bottom: var(--spacing-4);
-}
-
-.emptyState {
-  padding: var(--spacing-6);
-  text-align: center;
-  font-size: var(--text-sm);
-  color: var(--on-surface-muted);
-  background: var(--surface-accent);
-  border-radius: var(--radius);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.logicToggle {
-  align-self: center;
-  padding: var(--spacing-1) var(--spacing-2);
-  font-family: var(--font-family);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--primary);
-  background: transparent;
-  border: var(--border-width) solid var(--primary);
-  border-radius: var(--radius);
-  cursor: pointer;
-  transition: all var(--duration-fast) var(--ease-in-out);
-}
-.logicToggle:hover {
-  background: var(--primary);
-  color: var(--primary-foreground);
-}
-.logicToggle:focus-visible, .logicToggle[aria-expanded=true] {
-  outline: none;
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0px 0px var(--shadow-primary);
-  border-color: var(--primary);
-}
-.logicToggle:focus {
-  outline: none;
-}
-
-.addButton {
-  width: 100%;
-}
-
-.siblingLogic {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-2) 0;
-}
-.siblingLogic span {
-  padding: var(--spacing-1) var(--spacing-2);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--secondary-foreground);
-  background: var(--secondary);
-  border: var(--border-width) solid var(--secondary);
-  border-radius: var(--radius);
-}
-
-.addSiblingButton {
-  margin-top: var(--spacing-2);
+@layer doom.components {
+  .conditionList {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin-bottom: var(--space-4);
+  }
+  .emptyState {
+    padding: var(--space-6);
+    text-align: center;
+    font-size: var(--text-sm);
+    color: var(--on-surface-muted);
+    background: var(--surface-accent);
+    border-radius: var(--radius-md);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .logicToggle {
+    align-self: center;
+    padding: var(--space-1) var(--space-2);
+    font-family: var(--font-family);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--primary);
+    background: transparent;
+    border: var(--surface-border-width) solid var(--primary);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--duration-fast) var(--ease-in-out);
+  }
+  .logicToggle:hover {
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .logicToggle:focus-visible {
+    outline: none;
+    transform: translate(calc(-1 * var(--space-0\.5)), calc(-1 * var(--space-0\.5)));
+    box-shadow: var(--shadow-offset-xl) var(--shadow-primary);
+    border-color: var(--primary);
+  }
+  .logicToggle:focus {
+    outline: none;
+  }
+  .addButton {
+    width: 100%;
+  }
+  .siblingLogic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) 0;
+  }
+  .siblingLogic span {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--secondary-foreground);
+    background: var(--secondary);
+    border: var(--surface-border-width) solid var(--secondary);
+    border-radius: var(--radius-md);
+  }
+  .addSiblingButton {
+    margin-top: var(--space-2);
+  }
 }

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, Row } from "@tanstack/react-table";
 import React from "react";
 import { type FilterOperatorKey } from "./FilterBuilder/FilterBuilder";
 import type { FilterGroupItem } from "./FilterBuilder/FilterGroup";
@@ -36,5 +36,7 @@ export interface TableProps<T> {
         operators?: FilterOperatorKey[];
     }[];
     striped?: boolean;
+    onRowClick?: (row: Row<T>, e: React.MouseEvent) => void;
+    renderExpandedRow?: (row: Row<T>) => React.ReactNode | null;
 }
-export declare function Table<T>({ data, columns, enablePagination, enableFiltering, enableColumnFilters, enableSorting, enableVirtualization, enableAdvancedFiltering, onAdvancedFilterChange, pageSize, height, className, style, variant, density, toolbarContent, filters, striped, maxHeight, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<T>({ data, columns, enablePagination, enableFiltering, enableColumnFilters, enableSorting, enableVirtualization, enableAdvancedFiltering, onAdvancedFilterChange, pageSize, height, className, style, variant, density, toolbarContent, filters, striped, maxHeight, onRowClick, renderExpandedRow, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import clsx from "clsx";
-import { Filter, ListFilter, Search } from "lucide-react";
-import { useMemo, useState } from "react";
+import { ChevronRight, Filter, ListFilter, Search } from "lucide-react";
+import React, { useMemo, useState } from "react";
 import { Button } from "../Button/Button.js";
 import { Chip } from "../Chip/Chip.js";
 import { Input } from "../Input/Input.js";
@@ -19,6 +19,7 @@ const coreRowModel = getCoreRowModel();
 const sortedRowModel = getSortedRowModel();
 const paginationRowModel = getPaginationRowModel();
 const filteredRowModel = getFilteredRowModel();
+const expandedRowModel = getExpandedRowModel();
 const convertToFilterNode = (item) => {
     if (item.type === "group") {
         return {
@@ -35,7 +36,7 @@ const convertToFilterNode = (item) => {
         logic: item.logic,
     };
 };
-function VirtualTableBody({ table, columns, striped, density, scrollElement, }) {
+function VirtualTableBody({ table, columns, striped, density, scrollElement, onRowClick, renderExpandedRow, totalColumns, }) {
     const { rows } = table.getRowModel();
     const rowVirtualizer = useVirtualizer({
         count: rows.length,
@@ -47,20 +48,30 @@ function VirtualTableBody({ table, columns, striped, density, scrollElement, })
                     height: `${rowVirtualizer.getVirtualItems()[0].start}px`,
                 }, children: _jsx("td", { colSpan: columns.length, style: { border: 0, padding: 0 } }) })), rowVirtualizer.getVirtualItems().map((virtualRow) => {
                 const row = rows[virtualRow.index];
-                return (_jsx("tr", { ref: rowVirtualizer.measureElement, className: clsx(styles.tr, {
-                        [styles.striped]: striped && virtualRow.index % 2 !== 0,
-                    }), "data-index": virtualRow.index, children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[`density-${density}`]), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                const expandedContent = row.getIsExpanded() && renderExpandedRow
+                    ? renderExpandedRow(row)
+                    : null;
+                return (_jsxs(React.Fragment, { children: [_jsx("tr", { ref: rowVirtualizer.measureElement, className: clsx(styles.tr, {
+                                [styles.striped]: striped && virtualRow.index % 2 !== 0,
+                                [styles.clickable]: !!onRowClick,
+                            }), "data-index": virtualRow.index, onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[`density-${density}`], cell.column.id === "__expand" && styles.expandCol), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }), expandedContent && (_jsx("tr", { className: styles.expandedRow, children: _jsx("td", { colSpan: totalColumns, children: expandedContent }) }))] }, row.id));
             }), rowVirtualizer.getVirtualItems().length > 0 && (_jsx("tr", { style: {
                     height: `${rowVirtualizer.getTotalSize() -
                         rowVirtualizer.getVirtualItems()[rowVirtualizer.getVirtualItems().length - 1].end}px`,
                 }, children: _jsx("td", { colSpan: columns.length, style: { border: 0, padding: 0 } }) }))] }));
 }
-function StandardTableBody({ table, striped, density }) {
-    return (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: clsx(styles.tr, striped && styles.striped, "group"), children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[density]), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }));
+function StandardTableBody({ table, striped, density, onRowClick, renderExpandedRow, totalColumns, }) {
+    return (_jsx("tbody", { children: table.getRowModel().rows.map((row) => {
+            const expandedContent = row.getIsExpanded() && renderExpandedRow
+                ? renderExpandedRow(row)
+                : null;
+            return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: clsx(styles.tr, striped && styles.striped, onRowClick && styles.clickable, "group"), onClick: onRowClick ? (e) => onRowClick(row, e) : undefined, children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[density], cell.column.id === "__expand" && styles.expandCol), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }), expandedContent && (_jsx("tr", { className: styles.expandedRow, children: _jsx("td", { colSpan: totalColumns, children: expandedContent }) }))] }, row.id));
+        }) }));
 }
-export function Table({ data, columns, enablePagination = true, enableFiltering = true, enableColumnFilters = true, enableSorting = true, enableVirtualization = false, enableAdvancedFiltering = false, onAdvancedFilterChange, pageSize = 10, height, className, style, variant = "default", density = "standard", toolbarContent, filters, striped = false, maxHeight, }) {
+export function Table({ data, columns, enablePagination = true, enableFiltering = true, enableColumnFilters = true, enableSorting = true, enableVirtualization = false, enableAdvancedFiltering = false, onAdvancedFilterChange, pageSize = 10, height, className, style, variant = "default", density = "standard", toolbarContent, filters, striped = false, maxHeight, onRowClick, renderExpandedRow, }) {
     var _a;
     const [sorting, setSorting] = useState([]);
+    const [expanded, setExpanded] = useState({});
     const [globalFilter, setGlobalFilter] = useState("");
     const [columnFilters, setColumnFilters] = useState([]);
     const [isFilterExpanded, setIsFilterExpanded] = useState(true);
@@ -114,24 +125,50 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
             return Object.assign(Object.assign({}, col), { id: `column-${index}` });
         });
     }, [columns]);
+    const finalColumns = useMemo(() => {
+        if (!renderExpandedRow) {
+            return normalizedColumns;
+        }
+        const expandColumn = {
+            id: "__expand",
+            header: "",
+            size: 40,
+            enableSorting: false,
+            enableColumnFilter: false,
+            cell: ({ row }) => {
+                const content = renderExpandedRow(row);
+                if (!content) {
+                    return null;
+                }
+                return (_jsx("button", { "aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row", className: styles.expandToggle, onClick: (e) => {
+                        e.stopPropagation();
+                        row.toggleExpanded();
+                    }, children: _jsx(ChevronRight, { className: clsx(styles.expandToggleIcon, row.getIsExpanded() && styles.expanded), size: 20 }) }));
+            },
+        };
+        return [expandColumn, ...normalizedColumns];
+    }, [normalizedColumns, renderExpandedRow]);
     const table = useReactTable({
         data: filteredData,
-        columns: normalizedColumns,
+        columns: finalColumns,
         state: {
             sorting,
             globalFilter,
             columnFilters,
             pagination,
+            expanded,
         },
         enableSorting,
         onSortingChange: setSorting,
         onGlobalFilterChange: setGlobalFilter,
         onColumnFiltersChange: setColumnFilters,
         onPaginationChange: setPagination,
+        onExpandedChange: setExpanded,
         getCoreRowModel: coreRowModel,
         getSortedRowModel: sortedRowModel,
         getPaginationRowModel: enablePagination ? paginationRowModel : undefined,
         getFilteredRowModel: enableFiltering || enableColumnFilters ? filteredRowModel : undefined,
+        getExpandedRowModel: renderExpandedRow ? expandedRowModel : undefined,
         defaultColumn: {
             filterFn: smartColumnFilterFn,
         },
@@ -152,7 +189,7 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
                                             height: "24px",
                                             padding: "0 4px",
                                             marginRight: "-4px",
-                                        }, variant: "ghost", onClick: () => setIsFilterBuilderOpen(true), children: _jsx(Filter, { size: 16, strokeWidth: 2.5 }) })) : undefined, placeholder: "Search...", startAdornment: _jsx(Search, { size: 16 }), value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "", onChange: (e) => setGlobalFilter(e.target.value) }) })), _jsxs("div", { className: styles.actionsWrapper, children: [filters && filters.length > 0 && !enableAdvancedFiltering && (_jsxs(Button, { variant: "outline", onClick: () => setIsFilterExpanded(!isFilterExpanded), children: [_jsx(ListFilter, { size: 16 }), "FILTERS"] })), toolbarContent && (_jsx("div", { className: styles.controls, children: toolbarContent }))] })] })), enableAdvancedFiltering && activeAdvancedCount > 0 && (_jsx("div", { className: styles.filterBar, children: _jsxs(Chip, { onClick: () => setIsFilterBuilderOpen(true), onDismiss: () => {
+                                        }, variant: "ghost", onClick: () => setIsFilterBuilderOpen(true), children: _jsx(Filter, { size: 20, strokeWidth: 2.5 }) })) : undefined, placeholder: "Search...", startAdornment: _jsx(Search, { size: 20 }), value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "", onChange: (e) => setGlobalFilter(e.target.value) }) })), _jsxs("div", { className: styles.actionsWrapper, children: [filters && filters.length > 0 && !enableAdvancedFiltering && (_jsxs(Button, { variant: "outline", onClick: () => setIsFilterExpanded(!isFilterExpanded), children: [_jsx(ListFilter, { size: 20 }), "FILTERS"] })), toolbarContent && (_jsx("div", { className: styles.controls, children: toolbarContent }))] })] })), enableAdvancedFiltering && activeAdvancedCount > 0 && (_jsx("div", { className: styles.filterBar, children: _jsxs(Chip, { onClick: () => setIsFilterBuilderOpen(true), onDismiss: () => {
                                 setAdvancedFilterValue(null);
                                 onAdvancedFilterChange === null || onAdvancedFilterChange === void 0 ? void 0 : onAdvancedFilterChange(null);
                             }, children: [activeAdvancedCount, " Filter", activeAdvancedCount > 1 ? "s" : ""] }) })), !enableAdvancedFiltering &&
@@ -184,7 +221,7 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
                                                         }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : null), enableColumnFilters &&
                                                         !enableAdvancedFiltering &&
                                                         header.column.getCanFilter() && (_jsx(TableHeaderFilter, { column: header.column }))] }) }, header.id));
-                                    }) }, headerGroup.id))) }), isVirtual ? (_jsx(VirtualTableBody, { columns: normalizedColumns, density: density, scrollElement: scrollElement, striped: striped, table: table })) : (_jsx(StandardTableBody, { columns: normalizedColumns, density: density, striped: striped, table: table }))] }), table.getRowModel().rows.length === 0 && (_jsx("div", { className: styles.noResults, children: "No results found." }))] }), enablePagination && !isVirtual && (_jsx("div", { className: styles.paginationContainer, children: _jsxs(Flex, { align: "center", gap: 4, style: { width: "100%", justifyContent: "space-between" }, children: [_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { options: [
+                                    }) }, headerGroup.id))) }), isVirtual ? (_jsx(VirtualTableBody, { columns: finalColumns, density: density, renderExpandedRow: renderExpandedRow, scrollElement: scrollElement, striped: striped, table: table, totalColumns: finalColumns.length, onRowClick: onRowClick })) : (_jsx(StandardTableBody, { columns: finalColumns, density: density, renderExpandedRow: renderExpandedRow, striped: striped, table: table, totalColumns: finalColumns.length, onRowClick: onRowClick }))] }), table.getRowModel().rows.length === 0 && (_jsx("div", { className: styles.noResults, children: "No results found." }))] }), enablePagination && !isVirtual && (_jsx("div", { className: styles.paginationContainer, children: _jsxs(Flex, { align: "center", gap: 4, style: { width: "100%", justifyContent: "space-between" }, children: [_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { options: [
                                     { value: 10, label: "10 rows" },
                                     { value: 20, label: "20 rows" },
                                     { value: 50, label: "50 rows" },