@bigbinary/neeto-atoms 1.0.43 → 1.0.44

package/dist/{DataTable-B6QeW254.js → DataTable-DZYQUYKJ.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
 import { TableRow, TableCell, Table, TableHeader, TableHead, TableBody } from './primitives/Table.js';
 import { c as cn } from './utils-BJnb9o5c.js';
 import { useTranslation } from 'react-i18next';
@@ -3226,6 +3226,24 @@ const writeToLocalStorage = (key, value) => {
   } catch {
   }
 };
+const getResizeColumnStyle = ({
+  size,
+  isSelectionCol,
+  isLastDataCol,
+  enableResize,
+  pinned,
+  pinnedStart,
+  pinnedEnd
+}) => ({
+  width: isSelectionCol ? 0 : isLastDataCol ? void 0 : size,
+  ...enableResize && !isSelectionCol ? {
+    minWidth: size,
+    ...isLastDataCol ? {} : { maxWidth: size },
+    overflow: "hidden"
+  } : {},
+  ...pinned === "left" ? { left: pinnedStart } : {},
+  ...pinned === "right" ? { right: pinnedEnd } : {}
+});
 const getPageNumbers = (current, total) => {
   if (total <= 7) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -3586,6 +3604,100 @@ const useColumnOrdering = ({
   };
 };
 
+const useColumnResize = ({
+  enabled,
+  table,
+  columnVisibility,
+  hasSelectionColumn,
+  scrollContainerRef,
+  columnSizing,
+  setColumnSizing
+}) => {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const userResizedColumnsRef = useRef(/* @__PURE__ */ new Set());
+  const columns = table.options.columns;
+  const clearUserResized = useCallback((columnId) => {
+    userResizedColumnsRef.current.delete(columnId);
+  }, []);
+  const trackUserResize = useCallback(
+    (updaterOrValue) => {
+      setColumnSizing((prev) => {
+        const next = typeof updaterOrValue === "function" ? updaterOrValue(prev) : updaterOrValue;
+        for (const id of Object.keys(next)) {
+          if (next[id] !== prev[id]) {
+            userResizedColumnsRef.current.add(id);
+          }
+        }
+        return next;
+      });
+    },
+    [setColumnSizing]
+  );
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container || !enabled) return;
+    let rafId;
+    const observer = new ResizeObserver((entries) => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        setContainerWidth(Math.round(entries[0].contentRect.width));
+      });
+    });
+    observer.observe(container);
+    return () => {
+      cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [enabled, scrollContainerRef]);
+  useLayoutEffect(() => {
+    if (!enabled || containerWidth === 0) return;
+    const leafColumns = table.getAllLeafColumns().filter((col) => col.id !== "_selection");
+    let reservedWidth = 0;
+    if (hasSelectionColumn) {
+      const firstTh = scrollContainerRef.current?.querySelector("thead th");
+      if (firstTh) {
+        reservedWidth = firstTh.getBoundingClientRect().width;
+      }
+    }
+    const availableWidth = containerWidth - reservedWidth;
+    let userResizedTotal = 0;
+    let autoDefaultTotal = 0;
+    const visibleIds = new Set(leafColumns.map((col) => col.id));
+    for (const id of userResizedColumnsRef.current) {
+      if (!visibleIds.has(id)) userResizedColumnsRef.current.delete(id);
+    }
+    leafColumns.forEach((col) => {
+      if (userResizedColumnsRef.current.has(col.id)) {
+        userResizedTotal += columnSizing[col.id] ?? col.columnDef.size ?? 150;
+      } else {
+        autoDefaultTotal += col.columnDef.size ?? 150;
+      }
+    });
+    if (autoDefaultTotal === 0) return;
+    const autoAvailable = availableWidth - userResizedTotal;
+    const scale = autoAvailable > 0 ? autoAvailable / autoDefaultTotal : 0;
+    const newSizing = {};
+    let changed = false;
+    leafColumns.forEach((col) => {
+      if (userResizedColumnsRef.current.has(col.id)) {
+        newSizing[col.id] = columnSizing[col.id] ?? col.columnDef.size ?? 150;
+      } else {
+        const defaultSize = col.columnDef.size ?? 150;
+        const newSize = scale > 0 ? Math.floor(defaultSize * scale) : defaultSize;
+        if (newSize !== (columnSizing[col.id] ?? -1)) changed = true;
+        newSizing[col.id] = newSize;
+      }
+    });
+    if (changed) setColumnSizing((prev) => ({ ...prev, ...newSizing }));
+  }, [containerWidth, enabled, columns, columnVisibility, hasSelectionColumn]);
+  const lastDataColumnId = enabled ? (() => {
+    const dataCols = table.getVisibleLeafColumns().filter((col) => col.id !== "_selection");
+    const lastNonPinned = dataCols.filter((col) => !col.getIsPinned()).at(-1);
+    return (lastNonPinned ?? dataCols.at(-1))?.id;
+  })() : void 0;
+  return { trackUserResize, lastDataColumnId, clearUserResized };
+};
+
 const LoadingOverlay = () => /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/50", children: /* @__PURE__ */ jsx(Spinner, { className: "size-6" }) });
 
 const EmptyState = ({ colSpan, message }) => {
@@ -3612,14 +3724,20 @@ const SortIndicator = ({
   return null;
 };
 
-const ResizeHandle = ({ header }) => {
+const ResizeHandle = ({
+  header,
+  onReset
+}) => {
   if (!header.column.getCanResize()) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler(),
-      onDoubleClick: () => header.column.resetSize(),
+      onDoubleClick: () => {
+        header.column.resetSize();
+        onReset?.(header.column.id);
+      },
       className: cn(
         "absolute top-0 end-0 h-full w-1 cursor-col-resize select-none touch-none",
         header.column.getIsResizing() ? "bg-primary" : "bg-border opacity-0 group-hover/head:opacity-100"
@@ -3961,11 +4079,15 @@ const DataTable = ({
   });
   const showHeaderMenu = enableHeaderMenu ?? (enableColumnFreeze || enableAddColumn || !!onColumnHideProp || !!onColumnDelete || !!onColumnUpdate || !!onMoreActionClick);
   const allColumns = useMemo(() => {
+    const cols = enableColumnResize ? columns.map((col) => ({
+      ...col,
+      minSize: col.minSize ?? col.size ?? 150
+    })) : columns;
     if (selectionColumn) {
-      return [selectionColumn, ...columns];
+      return [selectionColumn, ...cols];
     }
-    return columns;
-  }, [columns, selectionColumn]);
+    return cols;
+  }, [columns, selectionColumn, enableColumnResize]);
   const resolvedColumnOrder = useMemo(() => {
     if (columnOrder.length === 0) return [];
     if (selectionColumn && !columnOrder.includes("_selection")) {
@@ -3979,6 +4101,8 @@ const DataTable = ({
     if (left.includes("_selection")) return columnPinning;
     return { ...columnPinning, left: ["_selection", ...left] };
   }, [columnPinning, selectionColumn, enableColumnFreeze]);
+  const scrollContainerRef = useRef(null);
+  const [columnSizing, setColumnSizing] = useState({});
   const table = useReactTable({
     data,
     columns: allColumns,
@@ -3992,7 +4116,8 @@ const DataTable = ({
       rowSelection,
       columnPinning: resolvedColumnPinning,
       columnVisibility,
-      columnOrder: resolvedColumnOrder
+      columnOrder: resolvedColumnOrder,
+      columnSizing
     },
     onSortingChange,
     manualPagination: true,
@@ -4007,6 +4132,19 @@ const DataTable = ({
     onColumnVisibilityChange,
     onColumnOrderChange
   });
+  const { trackUserResize, lastDataColumnId, clearUserResized } = useColumnResize({
+    enabled: enableColumnResize,
+    table,
+    columnVisibility,
+    hasSelectionColumn: !!selectionColumn,
+    scrollContainerRef,
+    columnSizing,
+    setColumnSizing
+  });
+  table.setOptions((prev) => ({
+    ...prev,
+    onColumnSizingChange: trackUserResize
+  }));
   const [bulkSelectedAllRows, setBulkSelectedAllRowsInternal] = useState(false);
   const isAutoSelectingRef = useRef(false);
   const bulkSelectedRef = useRef(false);
@@ -4033,7 +4171,6 @@ const DataTable = ({
     table.toggleAllPageRowsSelected(false);
     onRowSelect?.([], []);
   };
-  const scrollContainerRef = useRef(null);
   const [scrollState, setScrollState] = useState({
     scrolledStart: false,
     scrolledEnd: false
@@ -4093,10 +4230,6 @@ const DataTable = ({
             const dataHeaders = headerGroup.headers.filter(
               (header) => header.column.id !== "_selection"
             );
-            const totalDataSize = dataHeaders.reduce(
-              (sum, header) => sum + header.getSize(),
-              0
-            );
             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";
@@ -4114,16 +4247,15 @@ const DataTable = ({
                     isPinned === "left" && "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",
                     isPinned === "right" && "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: {
-                    width: selectionColumn && isSelectionCol ? 0 : selectionColumn ? `${header.getSize() / totalDataSize * 100}%` : header.getSize(),
-                    minWidth: enableColumnResize ? header.getSize() : void 0,
-                    ...isPinned === "left" ? {
-                      left: header.column.getStart("left")
-                    } : {},
-                    ...isPinned === "right" ? {
-                      right: header.column.getAfter("right")
-                    } : {}
-                  },
+                  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")
+                  }),
                   onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
                   children: [
                     header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -4154,7 +4286,13 @@ const DataTable = ({
                         }
                       )
                     ] }),
-                    enableColumnResize && /* @__PURE__ */ jsx(ResizeHandle, { header })
+                    enableColumnResize && /* @__PURE__ */ jsx(
+                      ResizeHandle,
+                      {
+                        header,
+                        onReset: clearUserResized
+                      }
+                    )
                   ]
                 },
                 header.id
@@ -4182,16 +4320,15 @@ const DataTable = ({
                       isPinned === "left" && "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",
                       isPinned === "right" && "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: {
-                      width: selectionColumn && isSelCell ? 0 : cell.column.getSize(),
-                      minWidth: enableColumnResize ? cell.column.getSize() : void 0,
-                      ...isPinned === "left" ? {
-                        left: cell.column.getStart("left")
-                      } : {},
-                      ...isPinned === "right" ? {
-                        right: cell.column.getAfter("right")
-                      } : {}
-                    },
+                    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")
+                    }),
                     children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
@@ -4218,4 +4355,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-B6QeW254.js.map
+//# sourceMappingURL=DataTable-DZYQUYKJ.js.map