@bigbinary/neeto-atoms 1.0.59 → 1.0.61

package/dist/{DataTable-BTdSpJfs.js → DataTable-DP06B8C7.js}

@@ -3844,7 +3844,7 @@ const HeaderCellMenu = ({
   const enableDelete = meta?.enableDelete === true;
   const moreActions = meta?.moreActions ?? [];
   const currentSort = column.getIsSorted();
-  const hasAnyAction = isSortable || isHidable || enableAddColumn || enableColumnFreeze || enableDelete || canMoveLeft || canMoveRight || moreActions.length > 0;
+  const hasAnyAction = isSortable || isHidable || enableAddColumn || enableColumnFreeze && column.getCanPin() || enableDelete || onMoveColumn && (canMoveLeft || canMoveRight) || moreActions.length > 0;
   if (!hasAnyAction) return null;
   return /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -3929,7 +3929,7 @@ const HeaderCellMenu = ({
           ]
         }
       ),
-      enableColumnFreeze && onTogglePin && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      enableColumnFreeze && onTogglePin && column.getCanPin() && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
         DropdownMenuItem,
         {
           "data-testid": "freeze-unfreeze-column-menu-button",
@@ -4053,7 +4053,8 @@ const DataTable = ({
   className,
   emptyMessage,
   onRowClick,
-  allowRowClick = true
+  allowRowClick = true,
+  renderBody
 }) => {
   const getRowId = useMemo(
     () => getRowIdProp ?? ((row) => row.id),
@@ -4246,6 +4247,7 @@ const DataTable = ({
   const firstRightPinnedId = leafColumns.filter((col) => col.getIsPinned() === "right").at(0)?.id;
   const hasProportionalSizing = enableColumnResize && Object.keys(columnSizing).length > 0;
   const totalDefaultSize = hasProportionalSizing ? 0 : leafColumns.filter((col) => col.id !== "_selection").reduce((sum, col) => sum + (col.columnDef.size ?? 150), 0);
+  const tableMinWidth = renderBody ? leafColumns.reduce((sum, c) => sum + (c.columnDef.size ?? c.getSize()), 0) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative flex min-h-0 w-full flex-col", className), children: [
     loading && /* @__PURE__ */ jsx(LoadingOverlay, {}),
     (showSelectAllCallout || showAllSelectedCallout) && /* @__PURE__ */ jsx(
@@ -4268,131 +4270,145 @@ const DataTable = ({
           "group/scroll min-h-0 flex-1 overflow-auto",
           bordered && "rounded-lg border"
         ),
-        children: /* @__PURE__ */ jsxs(Table, { children: [
-          /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map((headerGroup) => {
-            const dataHeaders = headerGroup.headers.filter(
-              (header) => header.column.id !== "_selection"
-            );
-            return /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
-              const isPinned = header.column.getIsPinned();
-              const isSelectionCol = header.column.id === "_selection";
-              const columnIndexInData = dataHeaders.findIndex(
-                (dataHeader) => dataHeader.id === header.id
-              );
-              return /* @__PURE__ */ jsxs(
-                TableHead,
+        children: /* @__PURE__ */ jsxs(
+          Table,
+          {
+            className: renderBody ? "table-fixed" : void 0,
+            style: tableMinWidth ? { minWidth: tableMinWidth } : void 0,
+            children: [
+              renderBody && /* @__PURE__ */ jsx("colgroup", { children: leafColumns.map((col) => /* @__PURE__ */ jsx("col", { style: { width: col.getSize() } }, col.id)) }),
+              /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 z-20 bg-muted", children: table.getHeaderGroups().map((headerGroup) => {
+                const dataHeaders = headerGroup.headers.filter(
+                  (header) => header.column.id !== "_selection"
+                );
+                return /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-muted", children: headerGroup.headers.map((header, headerIndex) => {
+                  const isPinned = header.column.getIsPinned();
+                  const isSelectionCol = header.column.id === "_selection";
+                  const columnIndexInData = dataHeaders.findIndex(
+                    (dataHeader) => dataHeader.id === header.id
+                  );
+                  return /* @__PURE__ */ jsxs(
+                    TableHead,
+                    {
+                      className: cn(
+                        "group/head relative",
+                        header.column.getCanSort() && "cursor-pointer select-none",
+                        isSelectionCol && "!pe-2",
+                        isPinned && "sticky z-10 bg-muted",
+                        header.column.id === lastLeftPinnedId && "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6",
+                        header.column.id === firstRightPinnedId && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"
+                      ),
+                      style: getResizeColumnStyle({
+                        size: header.getSize(),
+                        isSelectionCol,
+                        isLastDataCol: header.column.id === lastDataColumnId,
+                        enableResize: enableColumnResize,
+                        pinned: isPinned,
+                        pinnedStart: header.column.getStart("left"),
+                        pinnedEnd: header.column.getAfter("right"),
+                        percentageWidth: renderBody ? void 0 : !hasProportionalSizing && totalDefaultSize > 0 ? `${(header.column.columnDef.size ?? 150) / totalDefaultSize * 100}%` : void 0
+                      }),
+                      onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
+                      children: [
+                        header.isPlaceholder ? null : isSelectionCol ? flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "me-auto flex min-w-0 items-center", children: [
+                            /* @__PURE__ */ jsx("span", { className: "truncate", children: flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            ) }),
+                            /* @__PURE__ */ jsx(HeaderDescription, { column: header.column })
+                          ] }),
+                          /* @__PURE__ */ jsx(SortIndicator, { column: header.column }),
+                          showHeaderMenu && !isSelectionCol && /* @__PURE__ */ jsx(
+                            HeaderCellMenu,
+                            {
+                              column: header.column,
+                              columnIndex: columnIndexInData,
+                              enableAddColumn,
+                              enableColumnFreeze,
+                              isColumnPinned: isColumnPinned(
+                                header.column.id
+                              ),
+                              canMoveLeft: headerIndex > (selectionColumn ? 1 : 0),
+                              canMoveRight: headerIndex < headerGroup.headers.length - 1,
+                              onSort: handleSort,
+                              onHideColumn: onColumnHideProp ? hideColumn : void 0,
+                              onTogglePin: toggleColumnPin,
+                              onAddColumn: onColumnAdd,
+                              onDeleteColumn: onColumnDelete,
+                              onMoveColumn: onColumnUpdate ? (colId, dir) => moveColumn(colId, dir) : void 0,
+                              onMoreActionClick
+                            }
+                          )
+                        ] }),
+                        enableColumnResize && /* @__PURE__ */ jsx(
+                          ResizeHandle,
+                          {
+                            header,
+                            onReset: clearUserResized
+                          }
+                        )
+                      ]
+                    },
+                    header.id
+                  );
+                }) }, headerGroup.id);
+              }) }),
+              renderBody ? renderBody() : /* @__PURE__ */ jsx(TableBody, { className: loading ? "opacity-50" : void 0, children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+                TableRow,
                 {
+                  "data-state": row.getIsSelected() ? "selected" : void 0,
                   className: cn(
-                    "group/head relative",
-                    header.column.getCanSort() && "cursor-pointer select-none",
-                    isSelectionCol && "!pe-2",
-                    isPinned && "sticky z-10 bg-muted",
-                    header.column.id === lastLeftPinnedId && "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6",
-                    header.column.id === firstRightPinnedId && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"
+                    "group hover:bg-muted data-[state=selected]:bg-row-selected",
+                    allowRowClick && onRowClick && "cursor-pointer"
                   ),
-                  style: getResizeColumnStyle({
-                    size: header.getSize(),
-                    isSelectionCol,
-                    isLastDataCol: header.column.id === lastDataColumnId,
-                    enableResize: enableColumnResize,
-                    pinned: isPinned,
-                    pinnedStart: header.column.getStart("left"),
-                    pinnedEnd: header.column.getAfter("right"),
-                    percentageWidth: !hasProportionalSizing && totalDefaultSize > 0 ? `${(header.column.columnDef.size ?? 150) / totalDefaultSize * 100}%` : void 0
-                  }),
-                  onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
-                  children: [
-                    header.isPlaceholder ? null : isSelectionCol ? flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    ) : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "me-auto flex min-w-0 items-center", children: [
-                        /* @__PURE__ */ jsx("span", { className: "truncate", children: flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        ) }),
-                        /* @__PURE__ */ jsx(HeaderDescription, { column: header.column })
-                      ] }),
-                      /* @__PURE__ */ jsx(SortIndicator, { column: header.column }),
-                      showHeaderMenu && !isSelectionCol && /* @__PURE__ */ jsx(
-                        HeaderCellMenu,
-                        {
-                          column: header.column,
-                          columnIndex: columnIndexInData,
-                          enableAddColumn,
-                          enableColumnFreeze,
-                          isColumnPinned: isColumnPinned(
-                            header.column.id
-                          ),
-                          canMoveLeft: headerIndex > (selectionColumn ? 1 : 0),
-                          canMoveRight: headerIndex < headerGroup.headers.length - 1,
-                          onSort: handleSort,
-                          onHideColumn: onColumnHideProp ? hideColumn : void 0,
-                          onTogglePin: toggleColumnPin,
-                          onAddColumn: onColumnAdd,
-                          onDeleteColumn: onColumnDelete,
-                          onMoveColumn: onColumnUpdate ? (colId, dir) => moveColumn(colId, dir) : void 0,
-                          onMoreActionClick
-                        }
-                      )
-                    ] }),
-                    enableColumnResize && /* @__PURE__ */ jsx(
-                      ResizeHandle,
+                  onClick: allowRowClick && onRowClick ? (event) => onRowClick(event, row.original, row.index) : void 0,
+                  children: row.getVisibleCells().map((cell) => {
+                    const isPinned = cell.column.getIsPinned();
+                    const isSelCell = cell.column.id === "_selection";
+                    return /* @__PURE__ */ jsx(
+                      TableCell,
                       {
-                        header,
-                        onReset: clearUserResized
-                      }
-                    )
-                  ]
+                        className: cn(
+                          "whitespace-normal break-words",
+                          isSelCell && "!pe-2",
+                          isPinned && "sticky z-10 bg-background transition-colors group-hover:bg-muted group-data-[state=selected]:bg-row-selected",
+                          cell.column.id === lastLeftPinnedId && "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6",
+                          cell.column.id === firstRightPinnedId && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"
+                        ),
+                        style: getResizeColumnStyle({
+                          size: cell.column.getSize(),
+                          isSelectionCol: isSelCell,
+                          isLastDataCol: cell.column.id === lastDataColumnId,
+                          enableResize: enableColumnResize,
+                          pinned: isPinned,
+                          pinnedStart: cell.column.getStart("left"),
+                          pinnedEnd: cell.column.getAfter("right"),
+                          percentageWidth: !hasProportionalSizing && totalDefaultSize > 0 ? `${(cell.column.columnDef.size ?? 150) / totalDefaultSize * 100}%` : void 0
+                        }),
+                        children: flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      },
+                      cell.id
+                    );
+                  })
                 },
-                header.id
-              );
-            }) }, headerGroup.id);
-          }) }),
-          /* @__PURE__ */ jsx(TableBody, { className: loading ? "opacity-50" : void 0, children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
-            TableRow,
-            {
-              "data-state": row.getIsSelected() ? "selected" : void 0,
-              className: cn(
-                "group hover:bg-muted data-[state=selected]:bg-row-selected",
-                allowRowClick && onRowClick && "cursor-pointer"
-              ),
-              onClick: allowRowClick && onRowClick ? (event) => onRowClick(event, row.original, row.index) : void 0,
-              children: row.getVisibleCells().map((cell) => {
-                const isPinned = cell.column.getIsPinned();
-                const isSelCell = cell.column.id === "_selection";
-                return /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    className: cn(
-                      "whitespace-normal break-words",
-                      isSelCell && "!pe-2",
-                      isPinned && "sticky z-10 bg-background transition-colors group-hover:bg-muted group-data-[state=selected]:bg-row-selected",
-                      cell.column.id === lastLeftPinnedId && "after:pointer-events-none after:absolute after:inset-y-0 after:-right-2 after:w-2 after:bg-gradient-to-r after:from-black/6 after:to-transparent after:opacity-0 after:transition-opacity after:duration-200 after:content-[''] group-data-[scrolled-start]/scroll:after:opacity-100 dark:after:from-white/6",
-                      cell.column.id === firstRightPinnedId && "before:pointer-events-none before:absolute before:inset-y-0 before:-left-2 before:w-2 before:bg-gradient-to-l before:from-black/6 before:to-transparent before:opacity-0 before:transition-opacity before:duration-200 before:content-[''] group-data-[scrolled-end]/scroll:before:opacity-100 dark:before:from-white/6"
-                    ),
-                    style: getResizeColumnStyle({
-                      size: cell.column.getSize(),
-                      isSelectionCol: isSelCell,
-                      isLastDataCol: cell.column.id === lastDataColumnId,
-                      enableResize: enableColumnResize,
-                      pinned: isPinned,
-                      pinnedStart: cell.column.getStart("left"),
-                      pinnedEnd: cell.column.getAfter("right"),
-                      percentageWidth: !hasProportionalSizing && totalDefaultSize > 0 ? `${(cell.column.columnDef.size ?? 150) / totalDefaultSize * 100}%` : void 0
-                    }),
-                    children: flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )
-                  },
-                  cell.id
-                );
-              })
-            },
-            row.id
-          )) : /* @__PURE__ */ jsx(EmptyState, { colSpan: allColumns.length, message: emptyMessage }) })
-        ] })
+                row.id
+              )) : /* @__PURE__ */ jsx(
+                EmptyState,
+                {
+                  colSpan: allColumns.length,
+                  message: emptyMessage
+                }
+              ) })
+            ]
+          }
+        )
       }
     ),
     totalCount !== void 0 && totalCount > 0 && /* @__PURE__ */ jsx(
@@ -4407,4 +4423,4 @@ const DataTable = ({
 };
 
 export { DataTable as D, useColumnPinning as a, useColumnVisibility as b, useTablePagination as c, useTableSelection as d, useTableSort as e, useColumnOrdering as u };
-//# sourceMappingURL=DataTable-BTdSpJfs.js.map
+//# sourceMappingURL=DataTable-DP06B8C7.js.map