@optilogic/core 1.3.0 → 1.3.2

package/dist/index.cjs

@@ -3471,6 +3471,7 @@ function HeaderCell({
   sorting,
   filter,
   isResizable,
+  fillWidth,
   onSort,
   onFilterChange,
   onResizeMouseDown,
@@ -3514,7 +3515,8 @@ function HeaderCell({
     "div",
     {
       className: cn(
-        "relative flex-shrink-0 border-r border-border last:border-r-0",
+        "relative border-r border-border last:border-r-0",
+        !fillWidth && "flex-shrink-0",
         "bg-muted select-none",
         isResizing && "bg-accent/20"
       ),
@@ -4454,11 +4456,15 @@ function useColumnResizeManager(options) {
     resizableColumns,
     onColumnResize,
     onColumnResizeStart,
-    onColumnResizeEnd
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths
   } = options;
   const [resizingColumn, setResizingColumn] = React20.useState(null);
   const startXRef = React20.useRef(0);
   const startWidthRef = React20.useRef(0);
+  const startEffectiveWidthsRef = React20.useRef({});
   const getColumn = React20.useCallback(
     (columnKey) => {
       return columns.find((c) => c.key === columnKey);
@@ -4482,9 +4488,20 @@ function useColumnResizeManager(options) {
         resizingColumn,
         startWidthRef.current + deltaX
       );
+      if (fillWidth && containerWidth) {
+        const otherCols = columns.filter((c) => c.key !== resizingColumn);
+        const startEffective = startEffectiveWidthsRef.current;
+        const otherTotal = otherCols.reduce((s, c) => s + (startEffective[c.key] || 0), 0);
+        const remaining = containerWidth - newWidth;
+        for (const col of otherCols) {
+          const proportion = (startEffective[col.key] || 0) / otherTotal;
+          const adjusted = clampWidth(col.key, Math.floor(remaining * proportion));
+          onColumnResize(col.key, adjusted);
+        }
+      }
       onColumnResize(resizingColumn, newWidth);
     },
-    [resizingColumn, clampWidth, onColumnResize]
+    [resizingColumn, clampWidth, onColumnResize, fillWidth, containerWidth, columns]
   );
   const handleMouseUp = React20.useCallback(() => {
     if (!resizingColumn) return;
@@ -4518,6 +4535,9 @@ function useColumnResizeManager(options) {
         document.body.style.userSelect = "none";
         document.body.style.cursor = "col-resize";
         onColumnResizeStart?.(columnKey);
+        if (fillWidth && effectiveColumnWidths) {
+          startEffectiveWidthsRef.current = { ...effectiveColumnWidths };
+        }
       };
       const handleDoubleClick = (event) => {
         if (!isResizable) return;
@@ -4543,7 +4563,9 @@ function useColumnResizeManager(options) {
       resizingColumn,
       onColumnResize,
       onColumnResizeStart,
-      onColumnResizeEnd
+      onColumnResizeEnd,
+      fillWidth,
+      effectiveColumnWidths
     ]
   );
   return {
@@ -4768,6 +4790,7 @@ function DataGrid({
   tooltipMinLength = 30,
   enableKeyboardNavigation = true,
   showColumnBorders = true,
+  fillWidth,
   enableInternalSorting = true,
   enableInternalFiltering = true,
   // Controlled sorting
@@ -4822,6 +4845,26 @@ function DataGrid({
   const headerRef = React20__namespace.useRef(null);
   const [headerHeight, setHeaderHeight] = React20__namespace.useState(40);
   const [hoveredCell, setHoveredCell] = React20__namespace.useState(null);
+  const [containerWidth, setContainerWidth] = React20__namespace.useState(0);
+  const fillWidthObserverRef = React20__namespace.useRef(null);
+  const parentCallbackRef = React20__namespace.useCallback(
+    (node) => {
+      fillWidthObserverRef.current?.disconnect();
+      fillWidthObserverRef.current = null;
+      parentRef.current = node;
+      if (!fillWidth || !node) return;
+      const observer = new ResizeObserver((entries) => {
+        const w = entries[0]?.contentRect.width;
+        if (w && w > 0) setContainerWidth(w);
+      });
+      observer.observe(node);
+      fillWidthObserverRef.current = observer;
+    },
+    [fillWidth]
+  );
+  React20__namespace.useEffect(() => {
+    return () => fillWidthObserverRef.current?.disconnect();
+  }, []);
   const visibleColumns = React20__namespace.useMemo(
     () => columns.filter((col) => !col.hidden),
     [columns]
@@ -4875,14 +4918,6 @@ function DataGrid({
     visibleColumns
   ]);
   processedDataRef.current = processedData;
-  const { resizingColumn, getResizeProps } = useColumnResizeManager({
-    columns: visibleColumns,
-    columnWidths: state.columnWidths,
-    resizableColumns,
-    onColumnResize: actions.setColumnWidth,
-    onColumnResizeStart,
-    onColumnResizeEnd
-  });
   const shouldVirtualize = virtualized ?? processedData.length > 100;
   React20__namespace.useLayoutEffect(() => {
     if (headerRef.current && shouldVirtualize) {
@@ -4896,12 +4931,38 @@ function DataGrid({
     overscan: DEFAULT_OVERSCAN,
     enabled: shouldVirtualize
   });
-  const tableWidth = React20__namespace.useMemo(() => {
-    return visibleColumns.reduce((acc, col) => {
-      const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
-      return acc + width;
-    }, 0);
-  }, [visibleColumns, state.columnWidths]);
+  const { tableWidth, effectiveColumnWidths } = React20__namespace.useMemo(() => {
+    const rawWidths = {};
+    let rawTotal = 0;
+    for (const col of visibleColumns) {
+      const w = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
+      rawWidths[col.key] = w;
+      rawTotal += w;
+    }
+    if (!fillWidth || !containerWidth || rawTotal >= containerWidth) {
+      return { tableWidth: rawTotal, effectiveColumnWidths: rawWidths };
+    }
+    const scale = containerWidth / rawTotal;
+    const scaled = {};
+    for (const col of visibleColumns) {
+      let w = Math.floor(rawWidths[col.key] * scale);
+      if (col.minWidth) w = Math.max(w, col.minWidth);
+      if (col.maxWidth) w = Math.min(w, col.maxWidth);
+      scaled[col.key] = w;
+    }
+    return { tableWidth: containerWidth, effectiveColumnWidths: scaled };
+  }, [visibleColumns, state.columnWidths, fillWidth, containerWidth]);
+  const { resizingColumn, getResizeProps } = useColumnResizeManager({
+    columns: visibleColumns,
+    columnWidths: state.columnWidths,
+    resizableColumns,
+    onColumnResize: actions.setColumnWidth,
+    onColumnResizeStart,
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths
+  });
   const visibleRowCount = React20__namespace.useMemo(() => {
     if (!parentRef.current) return 10;
     return Math.floor(parentRef.current.clientHeight / DEFAULT_ROW_HEIGHT);
@@ -5106,7 +5167,7 @@ function DataGrid({
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              ref: parentRef,
+              ref: parentCallbackRef,
               className: "flex-1 overflow-auto bg-background relative w-full min-h-0 max-h-full",
               style: { contain: "strict" },
               children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5133,7 +5194,7 @@ function DataGrid({
                         },
                         role: "row",
                         children: visibleColumns.map((column, colIndex) => {
-                          const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                          const width = effectiveColumnWidths[column.key];
                           const resizeProps = getResizeProps(column.key);
                           return /* @__PURE__ */ jsxRuntime.jsx(
                             HeaderCell,
@@ -5144,6 +5205,7 @@ function DataGrid({
                               sorting: getColumnSort(column.key),
                               filter: getColumnFilter(column.key),
                               isResizable: resizableColumns && column.resizable !== false,
+                              fillWidth,
                               onSort: () => handleSort(column.key),
                               onFilterChange: (filter) => handleFilterChange(column.key, filter),
                               onResizeMouseDown: resizeProps.handleMouseDown,
@@ -5192,7 +5254,7 @@ function DataGrid({
                           "aria-rowindex": virtualRow.index + 1,
                           "aria-selected": isSelected,
                           children: visibleColumns.map((column, colIndex) => {
-                            const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                            const width = effectiveColumnWidths[column.key];
                             const isEditingThisCell = state.editingCell?.rowIndex === virtualRow.index && state.editingCell?.columnKey === column.key;
                             const isFocused = state.focusedCell?.rowIndex === virtualRow.index && state.focusedCell?.columnKey === column.key;
                             const cellContent = renderCell(
@@ -5207,7 +5269,8 @@ function DataGrid({
                               "div",
                               {
                                 className: cn(
-                                  "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                                  "px-3 py-2 text-sm overflow-hidden",
+                                  !fillWidth && "flex-shrink-0",
                                   showColumnBorders && "border-r border-border last:border-r-0",
                                   isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                                   isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
@@ -5319,7 +5382,7 @@ function DataGrid({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto min-h-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: parentCallbackRef, className: "flex-1 overflow-auto min-h-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -5330,7 +5393,7 @@ function DataGrid({
               style: { width: tableWidth ? `${tableWidth}px` : "100%" },
               role: "row",
               children: visibleColumns.map((column, colIndex) => {
-                const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                const width = effectiveColumnWidths[column.key];
                 const resizeProps = getResizeProps(column.key);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   HeaderCell,
@@ -5341,6 +5404,7 @@ function DataGrid({
                     sorting: getColumnSort(column.key),
                     filter: getColumnFilter(column.key),
                     isResizable: resizableColumns && column.resizable !== false,
+                    fillWidth,
                     onSort: () => handleSort(column.key),
                     onFilterChange: (filter) => handleFilterChange(column.key, filter),
                     onResizeMouseDown: resizeProps.handleMouseDown,
@@ -5370,14 +5434,15 @@ function DataGrid({
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 role: "row",
                 children: visibleColumns.map((column) => {
-                  const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                  const width = effectiveColumnWidths[column.key];
                   const isEditingThisCell = state.editingCell?.rowIndex === rowIndex && state.editingCell?.columnKey === column.key;
                   const isFocused = state.focusedCell?.rowIndex === rowIndex && state.focusedCell?.columnKey === column.key;
                   return /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn(
-                        "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                        "px-3 py-2 text-sm overflow-hidden",
+                        !fillWidth && "flex-shrink-0",
                         showColumnBorders && "border-r border-border last:border-r-0",
                         isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                         isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",