@onesaz/ui 0.3.13 → 0.3.16

package/dist/index.js

@@ -3670,7 +3670,7 @@ var Combobox = React34.forwardRef(
           disabled,
           onClick: () => setOpen(!open),
           className: cn(
-            "flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
+            "flex min-h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-left",
             "ring-offset-background",
             "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -4167,7 +4167,7 @@ var ColumnVisibilityDropdown = ({
       }
     ),
     open && /* @__PURE__ */ jsxs20("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
-      /* @__PURE__ */ jsx35("div", { className: "text-sm font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
+      /* @__PURE__ */ jsx35("div", { className: "text-xs font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
       /* @__PURE__ */ jsx35("div", { className: "max-h-[300px] overflow-auto", children: allColumns.map((column) => {
         const meta = column.columnDef.meta;
         const headerName = meta?.headerName || column.id;
@@ -4183,7 +4183,7 @@ var ColumnVisibilityDropdown = ({
                   onChange: (e) => column.toggleVisibility(e.target.checked)
                 }
               ),
-              /* @__PURE__ */ jsx35("span", { className: "text-sm", children: headerName })
+              /* @__PURE__ */ jsx35("span", { className: "text-xs", children: headerName })
             ]
           },
           column.id
@@ -4251,19 +4251,19 @@ var DataGridPagination = ({
   const startRow = currentPage * pageSize + 1;
   const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
   return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
-    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
       /* @__PURE__ */ jsx35("span", { children: "Rows per page:" }),
       /* @__PURE__ */ jsx35(
         "select",
         {
           value: pageSize,
           onChange: (e) => table.setPageSize(Number(e.target.value)),
-          className: "h-8 rounded-md border border-border bg-background px-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+          className: "h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
           children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx35("option", { value: size, children: size }, size))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
       startRow,
       "-",
       endRow,
@@ -4402,7 +4402,7 @@ var ExportDropdown = ({
       /* @__PURE__ */ jsxs20(
         "button",
         {
-          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: exportToCSV,
           children: [
             /* @__PURE__ */ jsxs20("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -4416,7 +4416,7 @@ var ExportDropdown = ({
       onExport && /* @__PURE__ */ jsxs20(
         "button",
         {
-          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+          className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: handleCustomExport,
           children: [
             /* @__PURE__ */ jsxs20("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
@@ -4463,7 +4463,7 @@ var MoreOptionsDropdown = ({
     open && /* @__PURE__ */ jsx35("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs20(
       "button",
       {
-        className: "flex w-full items-center gap-2 rounded px-3 py-2 text-sm hover:bg-muted",
+        className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
         onClick: () => {
           option.onClick();
           setOpen(false);
@@ -4845,91 +4845,117 @@ var PinnedRowsRenderer = ({
   globalWrapText = false,
   columnWidths,
   pinnedColumnOffsets,
-  position
+  position,
+  columnVisibility
 }) => {
   const pinnedTable = useReactTable({
     data: pinnedData,
     columns: tanstackColumns,
     getCoreRowModel: getCoreRowModel(),
-    getRowId: getRowIdFn ? (row) => String(getRowIdFn(row)) : void 0
+    getRowId: getRowIdFn ? (row) => String(getRowIdFn(row)) : void 0,
+    state: { columnVisibility }
   });
   const pinnedRows = pinnedTable.getRowModel().rows;
   if (pinnedRows.length === 0) return null;
-  return /* @__PURE__ */ jsx35(
-    "tbody",
-    {
-      className: cn(
-        "sticky z-[2]",
-        position === "top" && "top-0",
-        position === "bottom" && "bottom-0"
-      ),
-      children: pinnedRows.map((row, rowIndex) => {
-        const customClassName = getRowClassName?.({ row: row.original, rowIndex });
-        return /* @__PURE__ */ jsx35(
-          "tr",
-          {
-            className: cn(
-              "border-b border-border bg-muted/60 font-medium",
-              position === "top" && "border-b-2 border-b-border",
-              position === "bottom" && "border-t-2 border-t-border",
-              customClassName
-            ),
-            children: row.getVisibleCells().map((cell) => {
-              const meta = cell.column.columnDef.meta;
-              const align = meta?.align || "left";
-              const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
-              const scrollable = meta?.scrollable || false;
-              const maxCellHeight = meta?.maxCellHeight || 100;
-              const cellClassName = meta?.cellClassName;
-              const colWidth = columnWidths.get(cell.column.id);
-              const width = colWidth?.width || cell.column.getSize();
-              const pinnedInfo = pinnedColumnOffsets?.get(cell.column.id);
-              return /* @__PURE__ */ jsx35(
-                "td",
+  return /* @__PURE__ */ jsx35("tbody", { children: pinnedRows.map((row, rowIndex) => {
+    const customClassName = getRowClassName?.({ row: row.original, rowIndex });
+    const visibleCells = row.getVisibleCells();
+    const colSpanSkipSet = /* @__PURE__ */ new Set();
+    const colSpanValues = /* @__PURE__ */ new Map();
+    visibleCells.forEach((cell, cellIndex) => {
+      if (colSpanSkipSet.has(cellIndex)) return;
+      const meta = cell.column.columnDef.meta;
+      const colSpanDef = meta?.colSpan;
+      if (colSpanDef) {
+        const value = cell.getValue();
+        let span;
+        if (typeof colSpanDef === "function") {
+          span = colSpanDef({ row: row.original, value, field: cell.column.id, rowIndex });
+        } else if (typeof colSpanDef === "number") {
+          span = colSpanDef;
+        }
+        if (span && span > 1) {
+          colSpanValues.set(cellIndex, span);
+          for (let j = 1; j < span && cellIndex + j < visibleCells.length; j++) {
+            colSpanSkipSet.add(cellIndex + j);
+          }
+        }
+      }
+    });
+    return /* @__PURE__ */ jsx35(
+      "tr",
+      {
+        className: cn(
+          "sticky z-[2] border-b border-border bg-muted font-medium",
+          position === "top" && "top-0 border-b-2 border-b-border",
+          position === "bottom" && "bottom-0 border-t-2 border-t-border",
+          customClassName
+        ),
+        children: visibleCells.map((cell, cellIndex) => {
+          if (colSpanSkipSet.has(cellIndex)) return null;
+          const meta = cell.column.columnDef.meta;
+          const align = meta?.align || "left";
+          const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
+          const scrollable = meta?.scrollable || false;
+          const maxCellHeight = meta?.maxCellHeight || 100;
+          const cellClassName = meta?.cellClassName;
+          const colWidth = columnWidths.get(cell.column.id);
+          const width = colWidth?.width || cell.column.getSize();
+          const pinnedInfo = pinnedColumnOffsets?.get(cell.column.id);
+          const htmlColSpan = colSpanValues.get(cellIndex);
+          let totalWidth = width;
+          if (htmlColSpan && htmlColSpan > 1) {
+            for (let j = 1; j < htmlColSpan && cellIndex + j < visibleCells.length; j++) {
+              const spannedCell = visibleCells[cellIndex + j];
+              const spannedColWidth = columnWidths.get(spannedCell.column.id);
+              totalWidth += spannedColWidth?.width || spannedCell.column.getSize();
+            }
+          }
+          return /* @__PURE__ */ jsx35(
+            "td",
+            {
+              colSpan: htmlColSpan,
+              className: cn(
+                "px-4 overflow-hidden bg-muted border-b border-border",
+                showCellVerticalBorder && "border-r border-border",
+                pinnedInfo && "sticky z-[3]",
+                pinnedInfo?.side === "left" && "border-r border-border",
+                pinnedInfo?.side === "right" && "border-l border-border"
+              ),
+              style: {
+                height: wrapText || scrollable ? "auto" : rowHeight,
+                minHeight: rowHeight,
+                textAlign: align,
+                width: htmlColSpan && htmlColSpan > 1 ? totalWidth : width,
+                maxWidth: htmlColSpan && htmlColSpan > 1 ? void 0 : colWidth?.maxWidth || width,
+                minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
+                ...pinnedInfo ? {
+                  position: "sticky",
+                  [pinnedInfo.side]: pinnedInfo.offset
+                } : {}
+              },
+              children: /* @__PURE__ */ jsx35(
+                "div",
                 {
                   className: cn(
-                    "px-4 overflow-hidden bg-muted/60 border-b border-border",
-                    showCellVerticalBorder && "border-r border-border",
-                    pinnedInfo && "sticky z-[3]",
-                    pinnedInfo?.side === "left" && "border-r border-border",
-                    pinnedInfo?.side === "right" && "border-l border-border"
+                    wrapText ? "whitespace-normal break-words" : scrollable ? "overflow-auto" : "truncate",
+                    scrollable && "max-h-[100px]",
+                    cellClassName
                   ),
                   style: {
-                    height: wrapText || scrollable ? "auto" : rowHeight,
-                    minHeight: rowHeight,
-                    textAlign: align,
-                    width,
-                    maxWidth: colWidth?.maxWidth || width,
-                    minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
-                    ...pinnedInfo ? {
-                      position: "sticky",
-                      [pinnedInfo.side]: pinnedInfo.offset
-                    } : {}
+                    maxHeight: scrollable ? `${maxCellHeight}px` : void 0
                   },
-                  children: /* @__PURE__ */ jsx35(
-                    "div",
-                    {
-                      className: cn(
-                        wrapText ? "whitespace-normal break-words" : scrollable ? "overflow-auto" : "truncate",
-                        scrollable && "max-h-[100px]",
-                        cellClassName
-                      ),
-                      style: {
-                        maxHeight: scrollable ? `${maxCellHeight}px` : void 0
-                      },
-                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                    }
-                  )
-                },
-                cell.id
-              );
-            })
-          },
-          row.id
-        );
-      })
-    }
-  );
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                }
+              )
+            },
+            cell.id
+          );
+        })
+      },
+      row.id
+    );
+  }) });
 };
 var ColumnGroupHeader = ({
   columnGroupingModel,
@@ -4985,12 +5011,12 @@ var ColumnGroupHeader = ({
     });
     return cells;
   }, [fieldToGroup, gridColumns, columnWidths, columnVisibility, checkboxSelection, pinnedColumnOffsets]);
-  return /* @__PURE__ */ jsx35("tr", { className: "bg-muted border-b border-border", children: groupCells.map((cell, idx) => /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx35("tr", { className: "bg-muted", children: groupCells.map((cell, idx) => /* @__PURE__ */ jsx35(
     "th",
     {
       colSpan: cell.colSpan,
       className: cn(
-        "px-4 text-center font-semibold text-muted-foreground border-b-2 border-border bg-muted overflow-hidden",
+        "px-4 text-center font-semibold text-muted-foreground border-b border-border bg-muted overflow-hidden",
         showColumnVerticalBorder && "border-r last:border-r-0",
         cell.pinnedInfo && "sticky z-[2]"
       ),
@@ -5033,7 +5059,7 @@ function DataGrid({
   height = 400,
   minHeight,
   maxHeight,
-  density = "standard",
+  density = "compact",
   showCellVerticalBorder = false,
   showColumnVerticalBorder = false,
   hideFooter = false,
@@ -5056,6 +5082,7 @@ function DataGrid({
   columnGroupingModel
 }) {
   const tableContainerRef = React35.useRef(null);
+  const effectiveVirtualized = virtualized && !columns.some((col) => col.rowSpan);
   const computedInitialSort = React35.useMemo(() => {
     if (initialSortModel && initialSortModel.length > 0) {
       return initialSortModel.map((s) => ({ id: s.field, desc: s.sort === "desc" }));
@@ -5151,7 +5178,7 @@ function DataGrid({
     data: rows,
     columns: tanstackColumns,
     getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: virtualized ? void 0 : paginationMode === "client" ? getPaginationRowModel() : void 0,
+    getPaginationRowModel: effectiveVirtualized ? void 0 : paginationMode === "client" ? getPaginationRowModel() : void 0,
     getSortedRowModel: sortingMode === "client" ? getSortedRowModel() : void 0,
     getFilteredRowModel: filterMode === "client" ? getFilteredRowModel() : void 0,
     getRowId: getRowId ? (row) => String(getRowId(row)) : void 0,
@@ -5159,7 +5186,7 @@ function DataGrid({
       sorting,
       globalFilter,
       rowSelection,
-      pagination: virtualized ? void 0 : pagination,
+      pagination: effectiveVirtualized ? void 0 : pagination,
       columnVisibility,
       columnSizing
     },
@@ -5170,7 +5197,7 @@ function DataGrid({
       setRowSelection(newValue);
       onRowSelectionModelChange?.(newValue);
     },
-    onPaginationChange: virtualized ? void 0 : (updater) => {
+    onPaginationChange: effectiveVirtualized ? void 0 : (updater) => {
       const newValue = typeof updater === "function" ? updater(pagination) : updater;
       setPagination(newValue);
       onPaginationModelChange?.({ page: newValue.pageIndex, pageSize: newValue.pageSize });
@@ -5196,10 +5223,10 @@ function DataGrid({
       }
     },
     enableRowSelection: checkboxSelection,
-    manualPagination: virtualized ? true : paginationMode === "server",
+    manualPagination: effectiveVirtualized ? true : paginationMode === "server",
     manualSorting: sortingMode === "server",
     manualFiltering: filterMode === "server",
-    pageCount: virtualized ? void 0 : paginationMode === "server" && rowCount ? Math.ceil(rowCount / pagination.pageSize) : void 0
+    pageCount: effectiveVirtualized ? void 0 : paginationMode === "server" && rowCount ? Math.ceil(rowCount / pagination.pageSize) : void 0
   });
   const rowHeight = densityRowHeights[density];
   const showQuickFilter = slotProps?.toolbar?.showQuickFilter !== false;
@@ -5225,7 +5252,7 @@ function DataGrid({
     "div",
     {
       className: cn(
-        "rounded-lg border border-border bg-background overflow-hidden flex flex-col",
+        "rounded-lg border border-border bg-background overflow-hidden flex flex-col text-xs",
         className
       ),
       style: containerStyle,
@@ -5255,7 +5282,7 @@ function DataGrid({
             className: "relative flex-1 overflow-auto",
             children: [
               loading && /* @__PURE__ */ jsx35("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx35(Spinner, { size: "lg" }) }),
-              /* @__PURE__ */ jsxs20("table", { className: "w-full border-collapse table-fixed", children: [
+              /* @__PURE__ */ jsxs20("table", { className: "w-full border-separate border-spacing-0 table-fixed", children: [
                 /* @__PURE__ */ jsx35("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
                   const colWidth = columnWidths.get(column.id);
                   return /* @__PURE__ */ jsx35(
@@ -5270,7 +5297,7 @@ function DataGrid({
                     column.id
                   );
                 }) }),
-                /* @__PURE__ */ jsxs20("thead", { className: "sticky top-0 z-[1]", children: [
+                /* @__PURE__ */ jsxs20("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
                   columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx35(
                     ColumnGroupHeader,
                     {
@@ -5294,13 +5321,13 @@ function DataGrid({
                       "th",
                       {
                         className: cn(
-                          "px-4 text-left font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
+                          "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
                           showColumnVerticalBorder && "border-r last:border-r-0",
                           header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
                           // Add cursor class when resizing
                           header.column.getIsResizing() && "cursor-col-resize",
                           // Pinned column styling
-                          pinnedInfo && "sticky z-[2]",
+                          pinnedInfo && "sticky z-[4]",
                           pinnedInfo?.side === "left" && "border-r border-border",
                           pinnedInfo?.side === "right" && "border-l border-border"
                         ),
@@ -5351,10 +5378,11 @@ function DataGrid({
                     globalWrapText: wrapText,
                     columnWidths,
                     pinnedColumnOffsets,
+                    columnVisibility,
                     position: "top"
                   }
                 ),
-                virtualized ? /* @__PURE__ */ jsx35(
+                effectiveVirtualized ? /* @__PURE__ */ jsx35(
                   VirtualizedTableBody,
                   {
                     table,
@@ -5400,6 +5428,7 @@ function DataGrid({
                     globalWrapText: wrapText,
                     columnWidths,
                     pinnedColumnOffsets,
+                    columnVisibility,
                     position: "bottom"
                   }
                 )
@@ -5407,7 +5436,7 @@ function DataGrid({
             ]
           }
         ),
-        !virtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx35(
+        !effectiveVirtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx35(
           DataGridPagination,
           {
             table,
@@ -5416,7 +5445,7 @@ function DataGrid({
             paginationMode
           }
         ),
-        virtualized && !hideFooter && /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: [
+        effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx35("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
           table.getFilteredRowModel().rows.length,
           " total rows (virtualized)"
         ] }) })