@open-mercato/ui 0.6.7-develop.6553.1.2ec7246e04 → 0.6.7-develop.6565.1.1026d85fff

package/dist/backend/DataTable.js

@@ -200,6 +200,8 @@ function resolveExportSections(config) {
 }
 const PERSPECTIVE_COOKIE_PREFIX = "om_table_perspective";
 const PERSPECTIVE_STORAGE_PREFIX = "om_table_perspective_snapshot";
+const COLUMN_MIN_WIDTH = 60;
+const COLUMN_MAX_WIDTH = 900;
 function formatDurationLabel(durationMs) {
   if (durationMs == null) return "";
   if (!Number.isFinite(durationMs)) return "";
@@ -271,6 +273,16 @@ function sanitizePerspectiveSettings(source) {
       result.columnVisibility = visibility;
     }
   }
+  if (source.columnSizing && typeof source.columnSizing === "object") {
+    const sizing = {};
+    for (const [key, value] of Object.entries(source.columnSizing)) {
+      const id = typeof key === "string" ? key.trim() : "";
+      if (!id || forbidden.has(id)) continue;
+      if (typeof value !== "number" || !Number.isFinite(value)) continue;
+      sizing[id] = Math.max(COLUMN_MIN_WIDTH, Math.min(COLUMN_MAX_WIDTH, Math.round(value)));
+    }
+    if (Object.keys(sizing).length) result.columnSizing = sizing;
+  }
   if (Array.isArray(source.sorting)) {
     const sorting = source.sorting.map((item) => {
       const id = typeof item?.id === "string" ? item.id.trim() : "";
@@ -487,7 +499,86 @@ function HeaderDndWrapper({ enabled, contextId, sensors, columnIds, onDragEnd, c
   if (!enabled) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsx(DndContext, { id: contextId, sensors, collisionDetection: closestCenter, onDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: columnIds, strategy: horizontalListSortingStrategy, children }) });
 }
-function SortableHeaderCell({ id, children, className }) {
+function ColumnResizeHandle({
+  columnId,
+  onResize,
+  onCommit,
+  onReset,
+  ariaLabel
+}) {
+  const [active, setActive] = React.useState(false);
+  const dragCleanupRef = React.useRef(null);
+  React.useEffect(() => () => {
+    dragCleanupRef.current?.();
+  }, []);
+  const handlePointerDown = React.useCallback((event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const headerCell = event.currentTarget.parentElement;
+    if (!headerCell) return;
+    const startX = event.clientX;
+    const startWidth = headerCell.getBoundingClientRect().width;
+    setActive(true);
+    let frame = 0;
+    let latest = startWidth;
+    const onMove = (moveEvent) => {
+      latest = Math.max(COLUMN_MIN_WIDTH, Math.min(COLUMN_MAX_WIDTH, Math.round(startWidth + (moveEvent.clientX - startX))));
+      if (frame) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        onResize(columnId, latest);
+      });
+    };
+    const teardown = () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      dragCleanupRef.current = null;
+    };
+    const onUp = () => {
+      onResize(columnId, latest);
+      teardown();
+      setActive(false);
+      onCommit();
+    };
+    dragCleanupRef.current = teardown;
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [columnId, onResize, onCommit]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": ariaLabel,
+      title: ariaLabel,
+      onPointerDown: handlePointerDown,
+      onClick: (event) => event.stopPropagation(),
+      onDoubleClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onReset(columnId);
+      },
+      className: "group/resize absolute right-0 top-0 z-10 flex h-full w-3 translate-x-1/2 cursor-col-resize touch-none select-none items-center justify-center",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "w-0.5 rounded-full transition-all",
+            active ? "h-full bg-primary" : "h-3.5 bg-border group-hover:h-full group-hover:bg-border group-hover/resize:h-full group-hover/resize:bg-primary"
+          )
+        }
+      )
+    }
+  );
+}
+function SortableHeaderCell({ id, children, className, width }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
   const isSticky = typeof className === "string" && className.includes("sticky");
   const style = {
@@ -495,7 +586,8 @@ function SortableHeaderCell({ id, children, className }) {
     transition,
     opacity: isDragging ? 0.5 : 1,
     cursor: "grab",
-    position: isSticky ? "sticky" : "relative"
+    position: isSticky ? "sticky" : "relative",
+    ...typeof width === "number" ? { width, minWidth: width, maxWidth: width } : {}
   };
   return /* @__PURE__ */ jsx(TableHead, { ref: setNodeRef, style, className, ...attributes, ...listeners, children });
 }
@@ -716,6 +808,11 @@ function DataTable({
   const [activePerspectiveId, setActivePerspectiveId] = React.useState(initialActiveId);
   const [columnVisibility, setColumnVisibility] = React.useState(() => mergedInitialSettings?.columnVisibility ?? {});
   const [columnOrder, setColumnOrder] = React.useState(() => mergedInitialSettings?.columnOrder ?? []);
+  const [columnSizing, setColumnSizing] = React.useState(() => mergedInitialSettings?.columnSizing ?? {});
+  const columnSizingRef = React.useRef(columnSizing);
+  React.useEffect(() => {
+    columnSizingRef.current = columnSizing;
+  }, [columnSizing]);
   const [deletingIds, setDeletingIds] = React.useState([]);
   const [roleClearingIds, setRoleClearingIds] = React.useState([]);
   const [perspectiveApiMissing, setPerspectiveApiMissing] = React.useState(false);
@@ -1147,12 +1244,13 @@ function DataTable({
     const candidate = {
       columnOrder,
       columnVisibility: visibility,
+      columnSizing,
       sorting,
       filters: filtersPayload,
       searchValue
     };
     return sanitizePerspectiveSettings(candidate) ?? {};
-  }, [columnOrder, columnVisibility, sorting, filterValues, searchValue, advancedFilter]);
+  }, [columnOrder, columnVisibility, columnSizing, sorting, filterValues, searchValue, advancedFilter]);
   const applyPerspectiveSettings = React.useCallback((settings, nextId, options) => {
     const normalized = sanitizePerspectiveSettings(settings) ?? {};
     if (normalized.columnOrder && normalized.columnOrder.length) {
@@ -1174,6 +1272,13 @@ function DataTable({
       setSorting([]);
       onSortingChange?.([]);
     }
+    if (normalized.columnSizing) {
+      setColumnSizing(normalized.columnSizing);
+      columnSizingRef.current = normalized.columnSizing;
+    } else {
+      setColumnSizing({});
+      columnSizingRef.current = {};
+    }
     if (!options?.preserveAdvancedFilter) {
       const restoredTree = isPersistedFilterTree(normalized.filters) ? deserializeTreeFromPersist(normalized.filters) : null;
       if (advancedFilter?.onApplyTree) {
@@ -1194,12 +1299,50 @@ function DataTable({
         const snapshot = { perspectiveId: nextId, settings: normalized, updatedAt: Date.now() };
         writePerspectiveSnapshot(perspectiveTableId, snapshot);
         initialSnapshotRef.current = snapshot;
+      } else if (normalized.columnSizing && Object.keys(normalized.columnSizing).length) {
+        const snapshot = {
+          perspectiveId: null,
+          settings: { columnSizing: normalized.columnSizing },
+          updatedAt: Date.now()
+        };
+        writePerspectiveSnapshot(perspectiveTableId, snapshot);
+        initialSnapshotRef.current = snapshot;
       } else {
         writePerspectiveSnapshot(perspectiveTableId, null);
         initialSnapshotRef.current = null;
       }
     }
   }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table, advancedFilter]);
+  const persistColumnSizingSnapshot = React.useCallback(() => {
+    if (!perspectiveTableId) return;
+    const sizing = columnSizingRef.current;
+    const existing = readPerspectiveSnapshot(perspectiveTableId) ?? initialSnapshotRef.current;
+    const baseSettings = existing?.settings ? { ...existing.settings } : mergedInitialSettings ? { ...mergedInitialSettings } : {};
+    if (sizing && Object.keys(sizing).length) baseSettings.columnSizing = sizing;
+    else delete baseSettings.columnSizing;
+    const snapshot = {
+      perspectiveId: existing?.perspectiveId ?? activePerspectiveId ?? null,
+      settings: baseSettings,
+      updatedAt: Date.now()
+    };
+    writePerspectiveSnapshot(perspectiveTableId, snapshot);
+    initialSnapshotRef.current = snapshot;
+  }, [perspectiveTableId, activePerspectiveId, mergedInitialSettings]);
+  const handleColumnResize = React.useCallback((colId, width) => {
+    const next = { ...columnSizingRef.current, [colId]: width };
+    columnSizingRef.current = next;
+    setColumnSizing(next);
+  }, []);
+  const commitColumnSizing = React.useCallback(() => {
+    persistColumnSizingSnapshot();
+  }, [persistColumnSizingSnapshot]);
+  const resetColumnSize = React.useCallback((colId) => {
+    const next = { ...columnSizingRef.current };
+    delete next[colId];
+    columnSizingRef.current = next;
+    setColumnSizing(next);
+    persistColumnSizingSnapshot();
+  }, [persistColumnSizingSnapshot]);
   React.useLayoutEffect(() => {
     if (!perspectiveTableId) return;
     if (snapshotHydratedTableRef.current === perspectiveTableId) return;
@@ -1470,6 +1613,7 @@ function DataTable({
   }, [table]);
   const dndSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
   const enableHeaderDnd = Boolean(columnChooser);
+  const enableColumnResize = perspectiveEnabled;
   const stableDndContextId = React.useMemo(
     () => sanitizeDndContextId(
       extensionTableId ?? perspectiveTableId ?? resolvedReplacementHandle ?? (typeof title === "string" && title.trim().length > 0 ? title : "data-table")
@@ -2177,7 +2321,33 @@ function DataTable({
                   ]
                 }
               );
-              return enableHeaderDnd ? /* @__PURE__ */ jsx(SortableHeaderCell, { id: header.id, className: responsiveClass(priority, columnMeta?.hidden) + stickyClass, children: headerCellContent }, header.id) : /* @__PURE__ */ jsx(TableHead, { className: responsiveClass(priority, columnMeta?.hidden) + stickyClass, children: headerCellContent }, header.id);
+              const columnId = header.column.id;
+              const sizedWidth = enableColumnResize && columnId ? columnSizing[columnId] : void 0;
+              const resizeHandle = enableColumnResize && !header.isPlaceholder && columnId ? /* @__PURE__ */ jsx(
+                ColumnResizeHandle,
+                {
+                  columnId,
+                  onResize: handleColumnResize,
+                  onCommit: commitColumnSizing,
+                  onReset: resetColumnSize,
+                  ariaLabel: t("ui.dataTable.resizeColumn", "Resize column")
+                }
+              ) : null;
+              return enableHeaderDnd ? /* @__PURE__ */ jsxs(SortableHeaderCell, { id: header.id, width: sizedWidth, className: cn("group", responsiveClass(priority, columnMeta?.hidden) + stickyClass), children: [
+                headerCellContent,
+                resizeHandle
+              ] }, header.id) : /* @__PURE__ */ jsxs(
+                TableHead,
+                {
+                  className: cn("group relative", responsiveClass(priority, columnMeta?.hidden) + stickyClass),
+                  style: typeof sizedWidth === "number" ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : void 0,
+                  children: [
+                    headerCellContent,
+                    resizeHandle
+                  ]
+                },
+                header.id
+              );
             }),
             rowActions || injectedRowActions.length > 0 ? /* @__PURE__ */ jsx(
               TableHead,
@@ -2259,8 +2429,18 @@ function DataTable({
                       } else {
                         tooltipText = cellValue != null ? String(cellValue) : void 0;
                       }
-                      const wrappedContent = shouldTruncate ? /* @__PURE__ */ jsx(TruncatedCell, { maxWidth, tooltipContent: tooltipText, children: content }) : content;
-                      return /* @__PURE__ */ jsx(TableCell, { className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ""), children: wrappedContent }, cell.id);
+                      const sizedWidth = enableColumnResize && columnId ? columnSizing[columnId] : void 0;
+                      const effectiveMaxWidth = typeof sizedWidth === "number" ? `${sizedWidth}px` : maxWidth;
+                      const wrappedContent = shouldTruncate ? /* @__PURE__ */ jsx(TruncatedCell, { maxWidth: effectiveMaxWidth, tooltipContent: tooltipText, children: content }) : content;
+                      return /* @__PURE__ */ jsx(
+                        TableCell,
+                        {
+                          className: responsiveClass(priority, columnMeta?.hidden) + (isStickyCell ? ` md:sticky md:left-0 md:z-10 md:bg-background ${STICKY_LEFT_SHADOW_CLASS}` : ""),
+                          style: typeof sizedWidth === "number" ? { width: sizedWidth, minWidth: sizedWidth, maxWidth: sizedWidth } : void 0,
+                          children: wrappedContent
+                        },
+                        cell.id
+                      );
                     }),
                     rowActions || injectedRowActions.length > 0 ? /* @__PURE__ */ jsx(
                       TableCell,
@@ -2353,6 +2533,7 @@ function DataTable({
 export {
   DataTable,
   readPerspectiveSnapshot,
+  sanitizePerspectiveSettings,
   withDataTableNamespaces,
   writePerspectiveSnapshot
 };