@bigbinary/neeto-atoms 1.0.46 → 1.0.48

package/dist/cjs/{DataTable-buERtmN8.js → DataTable-CgQRfaIc.js}

@@ -3254,12 +3254,13 @@ const getResizeColumnStyle = ({
   enableResize,
   pinned,
   pinnedStart,
-  pinnedEnd
+  pinnedEnd,
+  percentageWidth
 }) => ({
-  width: isLastDataCol ? void 0 : size,
+  width: isLastDataCol ? void 0 : percentageWidth && !isSelectionCol ? percentageWidth : size,
   ...enableResize ? {
     minWidth: size,
-    ...!isSelectionCol && !isLastDataCol ? { maxWidth: size } : {}
+    ...!isSelectionCol && !isLastDataCol && !percentageWidth ? { maxWidth: size } : {}
   } : {},
   ...pinned === "left" ? { left: pinnedStart } : {},
   ...pinned === "right" ? { right: pinnedEnd } : {}
@@ -3670,16 +3671,22 @@ const useColumnResize = ({
     };
   }, [enabled, scrollContainerRef]);
   React.useLayoutEffect(() => {
-    if (!enabled || containerWidth === 0) return;
+    if (!enabled) return;
+    const container = scrollContainerRef.current;
+    const measuredWidth = Math.max(
+      container ? Math.round(container.clientWidth) : 0,
+      containerWidth
+    );
+    if (measuredWidth === 0) return;
     const leafColumns = table.getAllLeafColumns().filter((col) => col.id !== "_selection");
     let reservedWidth = 0;
     if (hasSelectionColumn) {
-      const firstTh = scrollContainerRef.current?.querySelector("thead th");
+      const firstTh = container?.querySelector("thead th");
       if (firstTh) {
         reservedWidth = firstTh.getBoundingClientRect().width;
       }
     }
-    const availableWidth = containerWidth - reservedWidth;
+    const availableWidth = measuredWidth - reservedWidth;
     let userResizedTotal = 0;
     let autoDefaultTotal = 0;
     const visibleIds = new Set(leafColumns.map((col) => col.id));
@@ -4226,6 +4233,8 @@ const DataTable = ({
   const leafColumns = table.getVisibleLeafColumns();
   const lastLeftPinnedId = leafColumns.filter((col) => col.getIsPinned() === "left").at(-1)?.id;
   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);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative flex min-h-0 w-full flex-col", className), children: [
     loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingOverlay, {}),
     (showSelectAllCallout || showAllSelectedCallout) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4277,7 +4286,8 @@ const DataTable = ({
                     enableResize: enableColumnResize,
                     pinned: isPinned,
                     pinnedStart: header.column.getStart("left"),
-                    pinnedEnd: header.column.getAfter("right")
+                    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: [
@@ -4339,7 +4349,7 @@ const DataTable = ({
                   {
                     className: utils.cn(
                       isSelCell && "!pe-2",
-                      isPinned && "sticky z-10 bg-background group-hover:bg-muted/50 group-data-[state=selected]:bg-info",
+                      isPinned && "sticky z-10 bg-background group-hover:bg-muted group-data-[state=selected]:bg-info",
                       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"
                     ),
@@ -4350,7 +4360,8 @@ const DataTable = ({
                       enableResize: enableColumnResize,
                       pinned: isPinned,
                       pinnedStart: cell.column.getStart("left"),
-                      pinnedEnd: cell.column.getAfter("right")
+                      pinnedEnd: cell.column.getAfter("right"),
+                      percentageWidth: !hasProportionalSizing && totalDefaultSize > 0 ? `${(cell.column.columnDef.size ?? 150) / totalDefaultSize * 100}%` : void 0
                     }),
                     children: flexRender(
                       cell.column.columnDef.cell,
@@ -4384,4 +4395,4 @@ exports.useColumnVisibility = useColumnVisibility;
 exports.useTablePagination = useTablePagination;
 exports.useTableSelection = useTableSelection;
 exports.useTableSort = useTableSort;
-//# sourceMappingURL=DataTable-buERtmN8.js.map
+//# sourceMappingURL=DataTable-CgQRfaIc.js.map