@onesaz/ui 0.3.12 → 0.3.13

package/dist/index.d.ts

@@ -752,17 +752,13 @@ interface ComboboxOption {
 type ComboboxPrimitiveOption = string;
 type ComboboxObjectOption = object;
 type ComboboxOptionInput = ComboboxPrimitiveOption | ComboboxObjectOption;
-interface ComboboxSingleProps<T extends ComboboxOptionInput = ComboboxOptionInput> {
+interface ComboboxSharedProps<T extends ComboboxOptionInput = ComboboxOptionInput> {
     options: T[];
-    value?: T | null;
-    defaultValue?: T | null;
-    onChange?: (value: T | null) => void;
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
     disabled?: boolean;
     className?: string;
-    multiple?: false;
     clearable?: boolean;
     openOnFocus?: boolean;
     inputValue?: string;
@@ -770,29 +766,30 @@ interface ComboboxSingleProps<T extends ComboboxOptionInput = ComboboxOptionInpu
     simpleOptions?: boolean;
     labelKey?: string;
     valueKey?: string;
+    /** Node rendered at the start (left) of the trigger button */
+    startAdornment?: React.ReactNode;
+    /** Click handler for the start adornment — renders it as a button when provided */
+    onStartAdornmentClick?: (e: React.MouseEvent) => void;
+    /** Node rendered at the end (right) of the trigger button, before the chevron */
+    endAdornment?: React.ReactNode;
+    /** Click handler for the end adornment — renders it as a button when provided */
+    onEndAdornmentClick?: (e: React.MouseEvent) => void;
 }
-interface ComboboxMultipleProps<T extends ComboboxOptionInput = ComboboxOptionInput> {
-    options: T[];
+interface ComboboxSingleProps<T extends ComboboxOptionInput = ComboboxOptionInput> extends ComboboxSharedProps<T> {
+    value?: T | null;
+    defaultValue?: T | null;
+    onChange?: (value: T | null) => void;
+    multiple?: false;
+}
+interface ComboboxMultipleProps<T extends ComboboxOptionInput = ComboboxOptionInput> extends ComboboxSharedProps<T> {
     value?: T[];
     defaultValue?: T[];
     onChange?: (value: T[]) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyMessage?: string;
-    disabled?: boolean;
-    className?: string;
     multiple: true;
-    clearable?: boolean;
-    openOnFocus?: boolean;
-    inputValue?: string;
-    onInputChange?: (value: string) => void;
     /** Show select-all option */
     selectAll?: boolean;
     /** Label for select-all option */
     selectAllLabel?: string;
-    simpleOptions?: boolean;
-    labelKey?: string;
-    valueKey?: string;
     /** Maximum number of items to display as chips before showing "+N more" */
     maxDisplayItems?: number;
 }
@@ -822,6 +819,8 @@ interface GridColDef<TData = any> {
     scrollable?: boolean;
     maxCellHeight?: number;
     cellClassName?: string;
+    colSpan?: number | ((params: GridSpanParams<TData>) => number | undefined);
+    rowSpan?: boolean | ((params: GridSpanParams<TData>) => number | undefined);
     export?: boolean;
     hideExport?: boolean;
     disableExport?: boolean;
@@ -843,6 +842,12 @@ interface GridValueGetterParams<TData = any> {
 interface GridValueFormatterParams {
     value: any;
 }
+interface GridSpanParams<TData = any> {
+    row: TData;
+    value: any;
+    field: string;
+    rowIndex: number;
+}
 interface PaginationModel {
     page: number;
     pageSize: number;
@@ -1722,4 +1727,4 @@ declare const RailPanelItem: React.ForwardRefExoticComponent<RailPanelItemProps
 
 declare const Playground: () => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, AreaChart, type AreaChartProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartProps, Box, type BoxProps, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, type ColumnGroupModel, type ColumnVisibilityModel, Combobox, type ComboboxMultipleProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, DataGrid, type DataGridProps, DataGrid as DataGridV0, DialogNamespace as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, type DonutChartProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, FormControl, type FormControlProps, FormGroup, type FormGroupProps, FormHelperText, type FormHelperTextProps, FormLabel, type FormLabelProps, Grid, type GridColDef, type GridProps, type GridRenderCellParams, type GridRenderHeaderParams, type GridRowSelectionModel, type GridValueFormatterParams, type GridValueGetterParams, H1, H2, H3, H4, H5, H6, HStack, IconButton, type IconButtonProps, IconRail, IconRailContent, type IconRailContentProps, IconRailFooter, type IconRailFooterProps, IconRailHeader, type IconRailHeaderProps, IconRailItem, type IconRailItemProps, type IconRailProps, Input, InputAdornment, type InputAdornmentProps, type InputProps, Label, type LabelProps, LineChart, type LineChartProps, LinearProgress, type LinearProgressProps, List, ListDivider, type ListDividerProps, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, MultiProgressDonut, type MultiProgressDonutProps, NativeSelect, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, PaginationNamespace as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, type PaginationModel, PaginationNext, PaginationPrevious, type PaginationProps, PieChart, type PieChartProps, type PinnedColumnsModel, type PinnedRowsModel, Playground, Progress, ProgressCard, type ProgressCardProps, ProgressDonut, type ProgressDonutProps, type ProgressProps, RadarChart, type RadarChartProps, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioProps, RailPanel, RailPanelGroup, type RailPanelGroupProps, RailPanelItem, type RailPanelItemProps, type RailPanelProps, ScatterChart, type ScatterChartProps, SelectNamespace as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarRail, type SidebarRailProps, SidebarSubMenu, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonTableRow, type SkeletonTableRowProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, TableNamespace as Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, TopBar, TopBarBrand, type TopBarBrandProps, TopBarDivider, type TopBarDividerProps, TopBarNav, TopBarNavItem, type TopBarNavItemProps, type TopBarNavProps, type TopBarProps, TopBarSection, type TopBarSectionProps, Typography, type TypographyProps, UnderlineTabsContent, UnderlineTabsList, UnderlineTabsTrigger, type UnderlineTabsTriggerProps, VStack, VerticalTabs, VerticalTabsContent, VerticalTabsGroupLabel, type VerticalTabsGroupLabelProps, VerticalTabsList, VerticalTabsTrigger, type VerticalTabsTriggerProps, cn, useFormControl, useSidebar, useSidebarRail, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, AreaChart, type AreaChartProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartProps, Box, type BoxProps, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, type ColumnGroupModel, type ColumnVisibilityModel, Combobox, type ComboboxMultipleProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, DataGrid, type DataGridProps, DataGrid as DataGridV0, DialogNamespace as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, type DonutChartProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, FormControl, type FormControlProps, FormGroup, type FormGroupProps, FormHelperText, type FormHelperTextProps, FormLabel, type FormLabelProps, Grid, type GridColDef, type GridProps, type GridRenderCellParams, type GridRenderHeaderParams, type GridRowSelectionModel, type GridSpanParams, type GridValueFormatterParams, type GridValueGetterParams, H1, H2, H3, H4, H5, H6, HStack, IconButton, type IconButtonProps, IconRail, IconRailContent, type IconRailContentProps, IconRailFooter, type IconRailFooterProps, IconRailHeader, type IconRailHeaderProps, IconRailItem, type IconRailItemProps, type IconRailProps, Input, InputAdornment, type InputAdornmentProps, type InputProps, Label, type LabelProps, LineChart, type LineChartProps, LinearProgress, type LinearProgressProps, List, ListDivider, type ListDividerProps, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, MultiProgressDonut, type MultiProgressDonutProps, NativeSelect, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, PaginationNamespace as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, type PaginationModel, PaginationNext, PaginationPrevious, type PaginationProps, PieChart, type PieChartProps, type PinnedColumnsModel, type PinnedRowsModel, Playground, Progress, ProgressCard, type ProgressCardProps, ProgressDonut, type ProgressDonutProps, type ProgressProps, RadarChart, type RadarChartProps, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioProps, RailPanel, RailPanelGroup, type RailPanelGroupProps, RailPanelItem, type RailPanelItemProps, type RailPanelProps, ScatterChart, type ScatterChartProps, SelectNamespace as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarRail, type SidebarRailProps, SidebarSubMenu, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, SkeletonTableRow, type SkeletonTableRowProps, SkeletonText, type SkeletonTextProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, TableNamespace as Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, TopBar, TopBarBrand, type TopBarBrandProps, TopBarDivider, type TopBarDividerProps, TopBarNav, TopBarNavItem, type TopBarNavItemProps, type TopBarNavProps, type TopBarProps, TopBarSection, type TopBarSectionProps, Typography, type TypographyProps, UnderlineTabsContent, UnderlineTabsList, UnderlineTabsTrigger, type UnderlineTabsTriggerProps, VStack, VerticalTabs, VerticalTabsContent, VerticalTabsGroupLabel, type VerticalTabsGroupLabelProps, VerticalTabsList, VerticalTabsTrigger, type VerticalTabsTriggerProps, cn, useFormControl, useSidebar, useSidebarRail, useTheme };

package/dist/index.js

@@ -3474,6 +3474,27 @@ import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-r
 function isMultipleProps(props) {
   return props.multiple === true;
 }
+function Adornment({
+  children,
+  onClick,
+  className
+}) {
+  if (onClick) {
+    return /* @__PURE__ */ jsx34(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onClick(e);
+        },
+        className: cn("shrink-0 rounded p-0.5 hover:bg-muted", className),
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx34("span", { className: cn("shrink-0 pointer-events-none opacity-50", className), children });
+}
 var Combobox = React34.forwardRef(
   (props, ref) => {
     const {
@@ -3484,7 +3505,11 @@ var Combobox = React34.forwardRef(
       disabled = false,
       clearable = true,
       openOnFocus = true,
-      className
+      className,
+      startAdornment,
+      onStartAdornmentClick,
+      endAdornment,
+      onEndAdornmentClick
     } = props;
     const labelKey = props.labelKey ?? "label";
     const valueKey = props.valueKey ?? "value";
@@ -3653,6 +3678,7 @@ var Combobox = React34.forwardRef(
             className
           ),
           children: [
+            startAdornment && /* @__PURE__ */ jsx34(Adornment, { onClick: onStartAdornmentClick, className: "mr-1.5", children: startAdornment }),
             isMultiple ? /* @__PURE__ */ jsx34("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx34("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs19(Fragment4, { children: [
               displayedOptions.map((option) => /* @__PURE__ */ jsxs19(
                 "span",
@@ -3692,7 +3718,7 @@ var Combobox = React34.forwardRef(
                 remainingCount,
                 " more"
               ] })
-            ] }) }) : /* @__PURE__ */ jsx34("span", { className: cn(!singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
+            ] }) }) : /* @__PURE__ */ jsx34("span", { className: cn("flex-1", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
             /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", children: [
               isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx34(
                 "button",
@@ -3743,6 +3769,7 @@ var Combobox = React34.forwardRef(
                   )
                 }
               ),
+              endAdornment && /* @__PURE__ */ jsx34(Adornment, { onClick: onEndAdornmentClick, children: endAdornment }),
               /* @__PURE__ */ jsx34(
                 "svg",
                 {
@@ -4001,7 +4028,9 @@ function convertColumns(columns, checkboxSelection) {
         wrapText: col.wrapText,
         scrollable: col.scrollable,
         maxCellHeight: col.maxCellHeight,
-        cellClassName: col.cellClassName
+        cellClassName: col.cellClassName,
+        colSpan: col.colSpan,
+        rowSpan: col.rowSpan
       }
     };
     tanstackColumns.push(tanstackCol);
@@ -4490,6 +4519,59 @@ var DataGridToolbar = ({
     ] })
   ] });
 };
+function computeRowSpanMap(rows, columns) {
+  const rowSpanColumns = columns.filter((col) => col.rowSpan);
+  if (rowSpanColumns.length === 0) return void 0;
+  const map = /* @__PURE__ */ new Map();
+  rowSpanColumns.forEach((col) => {
+    const colMap = /* @__PURE__ */ new Map();
+    const field = col.field;
+    if (typeof col.rowSpan === "function") {
+      const rowSpanFn = col.rowSpan;
+      let i = 0;
+      while (i < rows.length) {
+        const row = rows[i];
+        const value = row.original ? row.original[field] : row[field];
+        const span = rowSpanFn({ row: row.original || row, value, field, rowIndex: i });
+        if (span && span > 1) {
+          colMap.set(i, span);
+          for (let j = 1; j < span && i + j < rows.length; j++) {
+            colMap.set(i + j, 0);
+          }
+          i += span;
+        } else {
+          colMap.set(i, 1);
+          i++;
+        }
+      }
+    } else if (col.rowSpan === true) {
+      let i = 0;
+      while (i < rows.length) {
+        const row = rows[i];
+        const value = row.original ? row.original[field] : row[field];
+        let span = 1;
+        while (i + span < rows.length) {
+          const nextRow = rows[i + span];
+          const nextValue = nextRow.original ? nextRow.original[field] : nextRow[field];
+          if (nextValue === value) {
+            span++;
+          } else {
+            break;
+          }
+        }
+        colMap.set(i, span);
+        for (let j = 1; j < span; j++) {
+          colMap.set(i + j, 0);
+        }
+        i += span;
+      }
+    }
+    if (colMap.size > 0) {
+      map.set(field, colMap);
+    }
+  });
+  return map.size > 0 ? map : void 0;
+}
 var RowRenderer = ({
   row,
   rowIndex,
@@ -4502,9 +4584,36 @@ var RowRenderer = ({
   globalWrapText = false,
   columnWidths,
   pinnedColumnOffsets,
-  isPinnedRow = false
+  isPinnedRow = false,
+  rowSpanMap,
+  gridColumns
 }) => {
   const customClassName = getRowClassName?.({ row: row.original, rowIndex });
+  const visibleCells = row.getVisibleCells();
+  const colSpanSkipSet = /* @__PURE__ */ new Set();
+  const colSpanValues = /* @__PURE__ */ new Map();
+  if (gridColumns) {
+    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",
     {
@@ -4521,7 +4630,16 @@ var RowRenderer = ({
           row.toggleSelected();
         }
       },
-      children: row.getVisibleCells().map((cell) => {
+      children: visibleCells.map((cell, cellIndex) => {
+        if (colSpanSkipSet.has(cellIndex)) return null;
+        const colId = cell.column.id;
+        if (rowSpanMap) {
+          const colRowSpan = rowSpanMap.get(colId);
+          if (colRowSpan) {
+            const spanValue = colRowSpan.get(rowIndex);
+            if (spanValue === 0) return null;
+          }
+        }
         const meta = cell.column.columnDef.meta;
         const align = meta?.align || "left";
         const wrapText = meta?.wrapText !== void 0 ? meta.wrapText : globalWrapText;
@@ -4531,23 +4649,46 @@ var RowRenderer = ({
         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 htmlRowSpan;
+        if (rowSpanMap) {
+          const colRowSpan = rowSpanMap.get(colId);
+          if (colRowSpan) {
+            const spanValue = colRowSpan.get(rowIndex);
+            if (spanValue && spanValue > 1) {
+              htmlRowSpan = spanValue;
+            }
+          }
+        }
+        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,
+            rowSpan: htmlRowSpan,
             className: cn(
-              "px-4 overflow-hidden",
-              showCellVerticalBorder && "border-r last:border-r-0 border-border",
+              "px-4 overflow-hidden border-b border-border",
+              showCellVerticalBorder && "border-r border-border",
               pinnedInfo && "sticky z-[1] bg-background",
               pinnedInfo?.side === "left" && "border-r border-border",
-              pinnedInfo?.side === "right" && "border-l border-border"
+              pinnedInfo?.side === "right" && "border-l border-border",
+              htmlRowSpan && htmlRowSpan > 1 && "align-middle"
             ),
             style: {
-              height: wrapText || scrollable ? "auto" : rowHeight,
+              height: htmlRowSpan && htmlRowSpan > 1 ? rowHeight * htmlRowSpan : wrapText || scrollable ? void 0 : rowHeight,
               minHeight: rowHeight,
               textAlign: align,
-              width,
-              maxWidth: colWidth?.maxWidth || width,
+              width: htmlColSpan && htmlColSpan > 1 ? totalWidth : width,
+              maxWidth: htmlColSpan && htmlColSpan > 1 ? void 0 : colWidth?.maxWidth || width,
               minWidth: colWidth?.minWidth || cell.column.columnDef.minSize,
+              verticalAlign: htmlRowSpan && htmlRowSpan > 1 ? "middle" : void 0,
               ...pinnedInfo ? {
                 position: "sticky",
                 [pinnedInfo.side]: pinnedInfo.offset,
@@ -4565,10 +4706,7 @@ var RowRenderer = ({
                 style: {
                   maxHeight: scrollable ? `${maxCellHeight}px` : void 0
                 },
-                title: (
-                  // Show tooltip for truncated simple text values (not for scrollable or wrapped content)
-                  !wrapText && !scrollable && (typeof cell.getValue() === "string" || typeof cell.getValue() === "number") ? String(cell.getValue()) : void 0
-                ),
+                title: !wrapText && !scrollable && (typeof cell.getValue() === "string" || typeof cell.getValue() === "number") ? String(cell.getValue()) : void 0,
                 children: flexRender(cell.column.columnDef.cell, cell.getContext())
               }
             )
@@ -4591,7 +4729,9 @@ var VirtualizedTableBody = ({
   parentRef,
   globalWrapText = false,
   columnWidths,
-  pinnedColumnOffsets
+  pinnedColumnOffsets,
+  rowSpanMap,
+  gridColumns
 }) => {
   const rows = table.getRowModel().rows;
   const virtualizer = useVirtualizer({
@@ -4635,7 +4775,9 @@ var VirtualizedTableBody = ({
           getRowClassName,
           globalWrapText,
           columnWidths,
-          pinnedColumnOffsets
+          pinnedColumnOffsets,
+          rowSpanMap,
+          gridColumns
         },
         row.id
       );
@@ -4658,7 +4800,9 @@ var StandardTableBody = ({
   getRowClassName,
   globalWrapText = false,
   columnWidths,
-  pinnedColumnOffsets
+  pinnedColumnOffsets,
+  rowSpanMap,
+  gridColumns
 }) => {
   const rows = table.getRowModel().rows;
   if (rows.length === 0) {
@@ -4683,7 +4827,9 @@ var StandardTableBody = ({
       getRowClassName,
       globalWrapText,
       columnWidths,
-      pinnedColumnOffsets
+      pinnedColumnOffsets,
+      rowSpanMap,
+      gridColumns
     },
     row.id
   )) });
@@ -4742,8 +4888,8 @@ var PinnedRowsRenderer = ({
                 "td",
                 {
                   className: cn(
-                    "px-4 overflow-hidden bg-muted/60",
-                    showCellVerticalBorder && "border-r last:border-r-0 border-border",
+                    "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"
@@ -5061,6 +5207,12 @@ function DataGrid({
   const showExport = slotProps?.toolbar?.showExport !== false;
   const customButtons = slotProps?.toolbar?.customButtons;
   const moreOptions = slotProps?.toolbar?.moreOptions || [];
+  const rowSpanMap = React35.useMemo(() => {
+    const hasRowSpan = columns.some((col) => col.rowSpan);
+    if (!hasRowSpan) return void 0;
+    return computeRowSpanMap(table.getRowModel().rows, columns);
+  }, [table.getRowModel().rows, columns]);
+  const hasColSpan = React35.useMemo(() => columns.some((col) => col.colSpan), [columns]);
   const containerStyle = {
     ...sx
   };
@@ -5215,7 +5367,9 @@ function DataGrid({
                     parentRef: tableContainerRef,
                     globalWrapText: wrapText,
                     columnWidths,
-                    pinnedColumnOffsets
+                    pinnedColumnOffsets,
+                    rowSpanMap,
+                    gridColumns: hasColSpan ? columns : void 0
                   }
                 ) : /* @__PURE__ */ jsx35(
                   StandardTableBody,
@@ -5228,7 +5382,9 @@ function DataGrid({
                     getRowClassName,
                     globalWrapText: wrapText,
                     columnWidths,
-                    pinnedColumnOffsets
+                    pinnedColumnOffsets,
+                    rowSpanMap,
+                    gridColumns: hasColSpan ? columns : void 0
                   }
                 ),
                 pinnedBottomTable && pinnedBottomTable.length > 0 && /* @__PURE__ */ jsx35(