@onesaz/ui 0.3.20 → 0.3.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +168 -155
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2222,7 +2222,7 @@ var DialogContent = React24.forwardRef(({ className, children, hideCloseButton =
2222
2222
  {
2223
2223
  ref,
2224
2224
  className: cn(
2225
- "fixed z-50 grid w-full gap-4 p-6 shadow-lg",
2225
+ "fixed z-50 flex flex-col w-full gap-4 p-6 shadow-lg",
2226
2226
  "bg-popover border border-border text-popover-foreground",
2227
2227
  "rounded-lg",
2228
2228
  "data-[state=open]:animate-zoom-in data-[state=closed]:animate-zoom-out",
@@ -2230,8 +2230,8 @@ var DialogContent = React24.forwardRef(({ className, children, hideCloseButton =
2230
2230
  size === "sm" && "left-1/2 top-1/2 max-w-sm -translate-x-1/2 -translate-y-1/2",
2231
2231
  size === "md" && "left-1/2 top-1/2 max-w-md -translate-x-1/2 -translate-y-1/2",
2232
2232
  size === "lg" && "left-1/2 top-1/2 max-w-lg -translate-x-1/2 -translate-y-1/2",
2233
- size === "xl" && "left-1/2 top-1/2 max-w-xl -translate-x-1/2 -translate-y-1/2",
2234
- size === "2xl" && "left-1/2 top-1/2 max-w-2xl -translate-x-1/2 -translate-y-1/2",
2233
+ size === "xl" && "left-1/2 top-[5vh] max-w-xl max-h-[90vh] -translate-x-1/2",
2234
+ size === "2xl" && "left-1/2 top-[5vh] max-w-2xl max-h-[90vh] -translate-x-1/2",
2235
2235
  size === "full" && "inset-0 h-full w-full max-w-full rounded-none",
2236
2236
  className
2237
2237
  ),
@@ -5503,6 +5503,12 @@ function DataGrid({
5503
5503
  return computeRowSpanMap(table.getRowModel().rows, columns);
5504
5504
  }, [table.getRowModel().rows, columns]);
5505
5505
  const hasColSpan = React36.useMemo(() => columns.some((col) => col.colSpan), [columns]);
5506
+ const totalColumnsWidth = React36.useMemo(() => {
5507
+ return table.getVisibleLeafColumns().reduce((sum, column) => {
5508
+ const colWidth = columnWidths.get(column.id);
5509
+ return sum + (colWidth?.width || column.getSize());
5510
+ }, 0);
5511
+ }, [table.getVisibleLeafColumns(), columnWidths]);
5506
5512
  const containerStyle = {
5507
5513
  ...sx
5508
5514
  };
@@ -5515,7 +5521,7 @@ function DataGrid({
5515
5521
  "div",
5516
5522
  {
5517
5523
  className: cn(
5518
- "rounded-lg border border-border bg-background overflow-hidden flex flex-col text-xs",
5524
+ "rounded-lg border border-border bg-background flex flex-col text-xs",
5519
5525
  className
5520
5526
  ),
5521
5527
  style: containerStyle,
@@ -5539,167 +5545,174 @@ function DataGrid({
5539
5545
  moreOptions
5540
5546
  }
5541
5547
  ),
5542
- /* @__PURE__ */ jsxs22(
5548
+ /* @__PURE__ */ jsx36("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs22(
5543
5549
  "div",
5544
5550
  {
5545
5551
  ref: tableContainerRef,
5546
5552
  className: "relative flex-1 overflow-auto",
5547
5553
  children: [
5548
5554
  loading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx36(Spinner, { size: "lg" }) }),
5549
- /* @__PURE__ */ jsxs22("table", { className: "w-full border-separate border-spacing-0 table-fixed", children: [
5550
- /* @__PURE__ */ jsx36("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
5551
- const colWidth = columnWidths.get(column.id);
5552
- return /* @__PURE__ */ jsx36(
5553
- "col",
5554
- {
5555
- style: {
5556
- width: colWidth?.width || column.getSize(),
5557
- minWidth: colWidth?.minWidth || column.columnDef.minSize,
5558
- maxWidth: colWidth?.maxWidth || column.columnDef.maxSize
5555
+ /* @__PURE__ */ jsxs22(
5556
+ "table",
5557
+ {
5558
+ className: "border-separate border-spacing-0 table-fixed",
5559
+ style: { width: totalColumnsWidth, minWidth: "100%" },
5560
+ children: [
5561
+ /* @__PURE__ */ jsx36("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
5562
+ const colWidth = columnWidths.get(column.id);
5563
+ return /* @__PURE__ */ jsx36(
5564
+ "col",
5565
+ {
5566
+ style: {
5567
+ width: colWidth?.width || column.getSize(),
5568
+ minWidth: colWidth?.minWidth || column.columnDef.minSize,
5569
+ maxWidth: colWidth?.maxWidth || column.columnDef.maxSize
5570
+ }
5571
+ },
5572
+ column.id
5573
+ );
5574
+ }) }),
5575
+ /* @__PURE__ */ jsxs22("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
5576
+ columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx36(
5577
+ ColumnGroupHeader,
5578
+ {
5579
+ columnGroupingModel,
5580
+ columns,
5581
+ columnWidths,
5582
+ showColumnVerticalBorder,
5583
+ rowHeight,
5584
+ columnVisibility,
5585
+ checkboxSelection,
5586
+ pinnedColumnOffsets
5587
+ }
5588
+ ),
5589
+ table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx36("tr", { className: "bg-muted", children: headerGroup.headers.map((header) => {
5590
+ const meta = header.column.columnDef.meta;
5591
+ const align = meta?.headerAlign || meta?.align || "left";
5592
+ const colWidth = columnWidths.get(header.column.id);
5593
+ const effectiveWidth = colWidth?.width || header.getSize();
5594
+ const pinnedInfo = pinnedColumnOffsets?.get(header.column.id);
5595
+ return /* @__PURE__ */ jsxs22(
5596
+ "th",
5597
+ {
5598
+ className: cn(
5599
+ "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
5600
+ showColumnVerticalBorder && "border-r last:border-r-0",
5601
+ header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
5602
+ // Add cursor class when resizing
5603
+ header.column.getIsResizing() && "cursor-col-resize",
5604
+ // Pinned column styling
5605
+ pinnedInfo && "sticky z-[4]",
5606
+ pinnedInfo?.side === "left" && "border-r border-border",
5607
+ pinnedInfo?.side === "right" && "border-l border-border"
5608
+ ),
5609
+ style: {
5610
+ height: rowHeight,
5611
+ width: effectiveWidth,
5612
+ minWidth: colWidth?.minWidth || header.column.columnDef.minSize,
5613
+ maxWidth: colWidth?.maxWidth || header.column.columnDef.maxSize,
5614
+ textAlign: align,
5615
+ ...pinnedInfo ? {
5616
+ position: "sticky",
5617
+ [pinnedInfo.side]: pinnedInfo.offset
5618
+ } : {}
5619
+ },
5620
+ onClick: header.column.getToggleSortingHandler(),
5621
+ children: [
5622
+ /* @__PURE__ */ jsxs22("div", { className: cn(
5623
+ "flex items-center gap-1 truncate",
5624
+ align === "center" && "justify-center",
5625
+ align === "right" && "justify-end"
5626
+ ), children: [
5627
+ header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
5628
+ header.column.getCanSort() && /* @__PURE__ */ jsx36(SortIcon, { direction: header.column.getIsSorted() })
5629
+ ] }),
5630
+ resizableColumns && header.column.id !== "__select__" && /* @__PURE__ */ jsx36(
5631
+ ColumnResizeHandle,
5632
+ {
5633
+ header,
5634
+ isResizing: header.column.getIsResizing()
5635
+ }
5636
+ )
5637
+ ]
5638
+ },
5639
+ header.id
5640
+ );
5641
+ }) }, headerGroup.id))
5642
+ ] }),
5643
+ pinnedTopTable && pinnedTopTable.length > 0 && /* @__PURE__ */ jsx36(
5644
+ PinnedRowsRenderer,
5645
+ {
5646
+ pinnedData: pinnedTopTable,
5647
+ columns,
5648
+ tanstackColumns,
5649
+ getRowId,
5650
+ rowHeight,
5651
+ showCellVerticalBorder,
5652
+ getRowClassName,
5653
+ globalWrapText: wrapText,
5654
+ columnWidths,
5655
+ pinnedColumnOffsets,
5656
+ columnVisibility,
5657
+ position: "top"
5559
5658
  }
5560
- },
5561
- column.id
5562
- );
5563
- }) }),
5564
- /* @__PURE__ */ jsxs22("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
5565
- columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx36(
5566
- ColumnGroupHeader,
5567
- {
5568
- columnGroupingModel,
5569
- columns,
5570
- columnWidths,
5571
- showColumnVerticalBorder,
5572
- rowHeight,
5573
- columnVisibility,
5574
- checkboxSelection,
5575
- pinnedColumnOffsets
5576
- }
5577
- ),
5578
- table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx36("tr", { className: "bg-muted", children: headerGroup.headers.map((header) => {
5579
- const meta = header.column.columnDef.meta;
5580
- const align = meta?.headerAlign || meta?.align || "left";
5581
- const colWidth = columnWidths.get(header.column.id);
5582
- const effectiveWidth = colWidth?.width || header.getSize();
5583
- const pinnedInfo = pinnedColumnOffsets?.get(header.column.id);
5584
- return /* @__PURE__ */ jsxs22(
5585
- "th",
5659
+ ),
5660
+ effectiveVirtualized ? /* @__PURE__ */ jsx36(
5661
+ VirtualizedTableBody,
5586
5662
  {
5587
- className: cn(
5588
- "px-4 text-left text-xs font-medium text-muted-foreground border-b border-border bg-muted overflow-hidden relative",
5589
- showColumnVerticalBorder && "border-r last:border-r-0",
5590
- header.column.getCanSort() && "cursor-pointer select-none hover:bg-muted/80",
5591
- // Add cursor class when resizing
5592
- header.column.getIsResizing() && "cursor-col-resize",
5593
- // Pinned column styling
5594
- pinnedInfo && "sticky z-[4]",
5595
- pinnedInfo?.side === "left" && "border-r border-border",
5596
- pinnedInfo?.side === "right" && "border-l border-border"
5597
- ),
5598
- style: {
5599
- height: rowHeight,
5600
- width: effectiveWidth,
5601
- minWidth: colWidth?.minWidth || header.column.columnDef.minSize,
5602
- maxWidth: colWidth?.maxWidth || header.column.columnDef.maxSize,
5603
- textAlign: align,
5604
- ...pinnedInfo ? {
5605
- position: "sticky",
5606
- [pinnedInfo.side]: pinnedInfo.offset
5607
- } : {}
5608
- },
5609
- onClick: header.column.getToggleSortingHandler(),
5610
- children: [
5611
- /* @__PURE__ */ jsxs22("div", { className: cn(
5612
- "flex items-center gap-1 truncate",
5613
- align === "center" && "justify-center",
5614
- align === "right" && "justify-end"
5615
- ), children: [
5616
- header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
5617
- header.column.getCanSort() && /* @__PURE__ */ jsx36(SortIcon, { direction: header.column.getIsSorted() })
5618
- ] }),
5619
- resizableColumns && header.column.id !== "__select__" && /* @__PURE__ */ jsx36(
5620
- ColumnResizeHandle,
5621
- {
5622
- header,
5623
- isResizing: header.column.getIsResizing()
5624
- }
5625
- )
5626
- ]
5627
- },
5628
- header.id
5629
- );
5630
- }) }, headerGroup.id))
5631
- ] }),
5632
- pinnedTopTable && pinnedTopTable.length > 0 && /* @__PURE__ */ jsx36(
5633
- PinnedRowsRenderer,
5634
- {
5635
- pinnedData: pinnedTopTable,
5636
- columns,
5637
- tanstackColumns,
5638
- getRowId,
5639
- rowHeight,
5640
- showCellVerticalBorder,
5641
- getRowClassName,
5642
- globalWrapText: wrapText,
5643
- columnWidths,
5644
- pinnedColumnOffsets,
5645
- columnVisibility,
5646
- position: "top"
5647
- }
5648
- ),
5649
- effectiveVirtualized ? /* @__PURE__ */ jsx36(
5650
- VirtualizedTableBody,
5651
- {
5652
- table,
5653
- rowHeight,
5654
- showCellVerticalBorder,
5655
- checkboxSelection,
5656
- disableRowSelectionOnClick,
5657
- getRowClassName,
5658
- overscan,
5659
- parentRef: tableContainerRef,
5660
- globalWrapText: wrapText,
5661
- columnWidths,
5662
- pinnedColumnOffsets,
5663
- rowSpanMap,
5664
- gridColumns: hasColSpan ? columns : void 0
5665
- }
5666
- ) : /* @__PURE__ */ jsx36(
5667
- StandardTableBody,
5668
- {
5669
- table,
5670
- rowHeight,
5671
- showCellVerticalBorder,
5672
- checkboxSelection,
5673
- disableRowSelectionOnClick,
5674
- getRowClassName,
5675
- globalWrapText: wrapText,
5676
- columnWidths,
5677
- pinnedColumnOffsets,
5678
- rowSpanMap,
5679
- gridColumns: hasColSpan ? columns : void 0
5680
- }
5681
- ),
5682
- pinnedBottomTable && pinnedBottomTable.length > 0 && /* @__PURE__ */ jsx36(
5683
- PinnedRowsRenderer,
5684
- {
5685
- pinnedData: pinnedBottomTable,
5686
- columns,
5687
- tanstackColumns,
5688
- getRowId,
5689
- rowHeight,
5690
- showCellVerticalBorder,
5691
- getRowClassName,
5692
- globalWrapText: wrapText,
5693
- columnWidths,
5694
- pinnedColumnOffsets,
5695
- columnVisibility,
5696
- position: "bottom"
5697
- }
5698
- )
5699
- ] })
5663
+ table,
5664
+ rowHeight,
5665
+ showCellVerticalBorder,
5666
+ checkboxSelection,
5667
+ disableRowSelectionOnClick,
5668
+ getRowClassName,
5669
+ overscan,
5670
+ parentRef: tableContainerRef,
5671
+ globalWrapText: wrapText,
5672
+ columnWidths,
5673
+ pinnedColumnOffsets,
5674
+ rowSpanMap,
5675
+ gridColumns: hasColSpan ? columns : void 0
5676
+ }
5677
+ ) : /* @__PURE__ */ jsx36(
5678
+ StandardTableBody,
5679
+ {
5680
+ table,
5681
+ rowHeight,
5682
+ showCellVerticalBorder,
5683
+ checkboxSelection,
5684
+ disableRowSelectionOnClick,
5685
+ getRowClassName,
5686
+ globalWrapText: wrapText,
5687
+ columnWidths,
5688
+ pinnedColumnOffsets,
5689
+ rowSpanMap,
5690
+ gridColumns: hasColSpan ? columns : void 0
5691
+ }
5692
+ ),
5693
+ pinnedBottomTable && pinnedBottomTable.length > 0 && /* @__PURE__ */ jsx36(
5694
+ PinnedRowsRenderer,
5695
+ {
5696
+ pinnedData: pinnedBottomTable,
5697
+ columns,
5698
+ tanstackColumns,
5699
+ getRowId,
5700
+ rowHeight,
5701
+ showCellVerticalBorder,
5702
+ getRowClassName,
5703
+ globalWrapText: wrapText,
5704
+ columnWidths,
5705
+ pinnedColumnOffsets,
5706
+ columnVisibility,
5707
+ position: "bottom"
5708
+ }
5709
+ )
5710
+ ]
5711
+ }
5712
+ )
5700
5713
  ]
5701
5714
  }
5702
- ),
5715
+ ) }),
5703
5716
  !effectiveVirtualized && !hideFooter && !hideFooterPagination && /* @__PURE__ */ jsx36(
5704
5717
  DataGridPagination,
5705
5718
  {