@snksergio/design-system 0.4.0 → 0.5.0

package/dist-lib/chunks/{panel-DZ7X1NZV.mjs → panel-CCYNbXJR.mjs}

@@ -290,7 +290,7 @@ const Avatar = forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-const DEFAULT_COLUMN_WIDTH = 160;
+const DEFAULT_COLUMN_WIDTH$1 = 160;
 function useColumnWidths(columns) {
   return useMemo(() => {
     const widths = {};
@@ -298,7 +298,7 @@ function useColumnWidths(columns) {
     let totalPinLeft = 0;
     let totalPinRight = 0;
     for (const col of columns) {
-      widths[col.field] = col.width ?? col.defaultWidth ?? DEFAULT_COLUMN_WIDTH;
+      widths[col.field] = col.width ?? col.defaultWidth ?? DEFAULT_COLUMN_WIDTH$1;
     }
     let leftSum = 0;
     for (const col of columns) {
@@ -5326,7 +5326,8 @@ function useDataTableColumns({
   initialWidthOverrides,
   initialPinnedOverrides,
   initialHiddenColumns,
-  initialColumnOrder
+  initialColumnOrder,
+  autoWidths
 }) {
   const [widthOverrides, setWidthOverrides] = useState(
     () => initialWidthOverrides ?? {}
@@ -5355,13 +5356,13 @@ function useDataTableColumns({
       const typeDef = col.type ? columnTypeRegistry.get(col.type) : void 0;
       ordered.push({
         ...col,
-        width: widthOverrides[field] ?? col.width ?? typeDef?.defaultWidth,
+        width: widthOverrides[field] ?? autoWidths?.[field] ?? col.width ?? typeDef?.defaultWidth,
         sortable: col.sortable ?? typeDef?.defaultSortable,
         pinned: field in pinnedOverrides ? pinnedOverrides[field] : col.pinned
       });
     }
     return ordered;
-  }, [columns, columnOrder, hiddenColumns, widthOverrides, pinnedOverrides]);
+  }, [columns, columnOrder, hiddenColumns, widthOverrides, pinnedOverrides, autoWidths]);
   const widthsInput = useMemo(
     () => effectiveColumns.map((c) => ({
       field: String(c.field),
@@ -5429,6 +5430,177 @@ function useDataTableColumns({
     applyColumnState
   };
 }
+let measureCanvas = null;
+let measureCtx = null;
+const DEFAULT_FONT = "13px Geist, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+function ensureCtx(font = DEFAULT_FONT) {
+  if (typeof document === "undefined") return null;
+  if (!measureCanvas) {
+    measureCanvas = document.createElement("canvas");
+    measureCtx = measureCanvas.getContext("2d");
+  }
+  if (measureCtx) measureCtx.font = font;
+  return measureCtx;
+}
+function measureTextWidth(text, font) {
+  if (!text) return 0;
+  const ctx = ensureCtx(font);
+  if (!ctx) return 0;
+  return ctx.measureText(text).width;
+}
+function getFieldValue$1(row, field) {
+  if (!field.includes(".")) {
+    return row[field];
+  }
+  return field.split(".").reduce(
+    (acc, key) => acc?.[key],
+    row
+  );
+}
+function applyValueGetter(row, column2) {
+  if (column2.valueGetter) return column2.valueGetter(row);
+  return getFieldValue$1(row, String(column2.field));
+}
+function applyFormatter(row, column2) {
+  const value = applyValueGetter(row, column2);
+  if (column2.valueFormatter) return column2.valueFormatter(value);
+  return value == null ? "" : String(value);
+}
+const DEFAULT_COLUMN_WIDTH = 160;
+const CELL_PADDING_PX = 32;
+const DEFAULT_SAMPLE_SIZE = 20;
+function calculateColumnWidths(columns, rows, options) {
+  const { containerWidth, autoFit, sampleSize = DEFAULT_SAMPLE_SIZE } = options;
+  if (containerWidth <= 0) return {};
+  const widths = {};
+  let totalContentWidth = 0;
+  for (const col of columns) {
+    const field = String(col.field);
+    if (col.width !== void 0) {
+      totalContentWidth += col.width;
+      continue;
+    }
+    const typeDef = col.type ? columnTypeRegistry.get(col.type) : void 0;
+    let calculatedWidth = typeDef?.defaultWidth ?? DEFAULT_COLUMN_WIDTH;
+    if (autoFit) {
+      const headerText = String(col.headerName ?? field);
+      let maxWidth = measureTextWidth(headerText) + CELL_PADDING_PX;
+      const sample = rows.slice(0, sampleSize);
+      for (const row of sample) {
+        const text = applyFormatter(row, col);
+        if (!text) continue;
+        const w = measureTextWidth(text) + CELL_PADDING_PX;
+        if (w > maxWidth) maxWidth = w;
+      }
+      if (maxWidth > calculatedWidth) calculatedWidth = maxWidth;
+    }
+    if (col.minWidth !== void 0 && calculatedWidth < col.minWidth) {
+      calculatedWidth = col.minWidth;
+    }
+    if (col.maxWidth !== void 0 && calculatedWidth > col.maxWidth) {
+      calculatedWidth = col.maxWidth;
+    }
+    widths[field] = Math.round(calculatedWidth);
+    totalContentWidth += calculatedWidth;
+  }
+  if (totalContentWidth < containerWidth) {
+    const remainingSpace = containerWidth - totalContentWidth;
+    const flexibleColumns = columns.filter((col) => col.width === void 0);
+    const targets = flexibleColumns.length > 0 ? flexibleColumns : autoFit ? columns : [];
+    if (targets.length > 0) {
+      const extraPerColumn = Math.floor(remainingSpace / targets.length);
+      let distributed = 0;
+      targets.forEach((col, index) => {
+        const field = String(col.field);
+        const isLast = index === targets.length - 1;
+        const extra = isLast ? remainingSpace - distributed : extraPerColumn;
+        const current = widths[field] ?? col.width ?? 0;
+        let next = current + extra;
+        if (col.maxWidth !== void 0 && next > col.maxWidth) {
+          next = col.maxWidth;
+        }
+        widths[field] = Math.round(next);
+        distributed += extra;
+      });
+    }
+  }
+  return widths;
+}
+function useColumnAutoWidth(containerRef, columns, rows, options) {
+  const { enabled, sampleSize, reservedWidth = 0 } = options;
+  const [autoWidths, setAutoWidths] = useState({});
+  const rafIdRef = useRef(null);
+  const columnsRef = useRef(columns);
+  const rowsRef = useRef(rows);
+  columnsRef.current = columns;
+  rowsRef.current = rows;
+  useEffect(() => {
+    if (!enabled) {
+      setAutoWidths((prev) => Object.keys(prev).length === 0 ? prev : {});
+      return;
+    }
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const recalculate = (containerWidth) => {
+      const effectiveWidth = Math.max(0, containerWidth - reservedWidth);
+      const calcOptions = {
+        containerWidth: effectiveWidth,
+        autoFit: enabled,
+        sampleSize
+      };
+      const next = calculateColumnWidths(
+        columnsRef.current,
+        rowsRef.current,
+        calcOptions
+      );
+      setAutoWidths((prev) => {
+        const prevKeys = Object.keys(prev);
+        const nextKeys = Object.keys(next);
+        if (prevKeys.length === nextKeys.length) {
+          let same = true;
+          for (const k of nextKeys) {
+            if (prev[k] !== next[k]) {
+              same = false;
+              break;
+            }
+          }
+          if (same) return prev;
+        }
+        return next;
+      });
+    };
+    const initialRect = el.getBoundingClientRect();
+    recalculate(initialRect.width);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = requestAnimationFrame(() => {
+        rafIdRef.current = null;
+        recalculate(entry.contentRect.width);
+      });
+    });
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, [
+    enabled,
+    containerRef,
+    sampleSize,
+    reservedWidth,
+    columns.length,
+    rows.length,
+    // Inclui campos das columns pra recalcular quando consumer muda a schema
+    columns.map((c) => String(c.field)).join("|")
+  ]);
+  return { autoWidths };
+}
 function toArray(v) {
   if (v == null) return [];
   if (Array.isArray(v)) return v;
@@ -5483,10 +5655,11 @@ function useDataTablePagination({
   paginationModel: controlledModel,
   onPaginationModelChange,
   initialPageSize = DEFAULT_PAGE_SIZE,
+  initialPage = 1,
   resetTriggers = []
 } = {}) {
   const [uncontrolled, setUncontrolled] = useState({
-    page: 1,
+    page: initialPage,
     pageSize: initialPageSize
   });
   const isControlled = controlledModel !== void 0;
@@ -5641,9 +5814,10 @@ const DEFAULT_DEBOUNCE = 500;
 function useDataTableSearch({
   search: controlledSearch,
   onSearchChange,
-  debounceMs = DEFAULT_DEBOUNCE
+  debounceMs = DEFAULT_DEBOUNCE,
+  initialSearch
 } = {}) {
-  const [uncontrolled, setUncontrolled] = useState("");
+  const [uncontrolled, setUncontrolled] = useState(initialSearch ?? "");
   const isControlled = controlledSearch !== void 0;
   const inputValue = isControlled ? controlledSearch : uncontrolled;
   const [debouncedValue, setDebouncedValue] = useState(inputValue);
@@ -5693,24 +5867,6 @@ function useDataTableFilters({
   }, [setFilterModel]);
   return { filterModel, setFilterModel, clearFilters };
 }
-function getFieldValue$1(row, field) {
-  if (!field.includes(".")) {
-    return row[field];
-  }
-  return field.split(".").reduce(
-    (acc, key) => acc?.[key],
-    row
-  );
-}
-function applyValueGetter(row, column2) {
-  if (column2.valueGetter) return column2.valueGetter(row);
-  return getFieldValue$1(row, String(column2.field));
-}
-function applyFormatter(row, column2) {
-  const value = applyValueGetter(row, column2);
-  if (column2.valueFormatter) return column2.valueFormatter(value);
-  return value == null ? "" : String(value);
-}
 function matchesFilter(value, item, col) {
   const { operator } = item;
   const target = item.value;
@@ -5956,7 +6112,7 @@ function downloadCsv(csv, filename) {
   URL.revokeObjectURL(url);
 }
 const STORAGE_PREFIX$1 = "igreen-datatable:";
-const SCHEMA_VERSION = 3;
+const SCHEMA_VERSION = 4;
 function storageKey$1(persistId) {
   return `${STORAGE_PREFIX$1}${persistId}`;
 }
@@ -6121,12 +6277,22 @@ function useDataTableController(props, ref) {
     () => loadPersistedState(props.persistId),
     [props.persistId]
   );
+  const scrollContainerRef = useRef(null);
+  const autoFitEnabled = props.autoFit !== false;
+  const selectionReservedWidth = props.selectionConfig?.enabled ? SELECTION_COLUMN_WIDTH : 0;
+  const { autoWidths } = useColumnAutoWidth(
+    scrollContainerRef,
+    props.columns,
+    props.rows ?? [],
+    { enabled: autoFitEnabled, reservedWidth: selectionReservedWidth }
+  );
   const cols = useDataTableColumns({
     columns: props.columns,
     initialWidthOverrides: persistedInitial?.columnWidths,
     initialPinnedOverrides: persistedInitial?.pinnedColumns,
     initialHiddenColumns: persistedInitial?.hiddenColumns,
-    initialColumnOrder: persistedInitial?.columnOrder
+    initialColumnOrder: persistedInitial?.columnOrder,
+    autoWidths
   });
   const sort = useDataTableSort({
     sortModel: props.sortModel,
@@ -6135,16 +6301,23 @@ function useDataTableController(props, ref) {
   });
   const filters = useDataTableFilters({
     filterModel: props.filterModel,
-    onFilterModelChange: props.onFilterModelChange
+    onFilterModelChange: props.onFilterModelChange,
+    // Hidrata filtros do workspace Default (v4+). Quando uma view custom estava
+    // ativa no último mount, o effect de restore (linha ~410) aplica a view depois.
+    initialFilterModel: persistedInitial?.filterModel
   });
   const search = useDataTableSearch({
     search: props.search,
-    onSearchChange: props.onSearchChange
+    onSearchChange: props.onSearchChange,
+    // Hidrata texto de busca do workspace Default (v4+).
+    initialSearch: persistedInitial?.search
   });
   const pagination = useDataTablePagination({
     paginationModel: props.paginationModel,
     onPaginationModelChange: props.onPaginationModelChange,
     initialPageSize: persistedInitial?.pageSize ?? props.paginationConfig?.initialPageSize,
+    // Hidrata página atual do workspace Default (v4+).
+    initialPage: persistedInitial?.currentPage,
     resetTriggers: [filters.filterModel.items.length, search.debouncedValue]
   });
   const density = useDataTableDensity({
@@ -6268,10 +6441,17 @@ function useDataTableController(props, ref) {
     density: density.density,
     sortModel: sort.sortModels,
     pageSize: pagination.paginationModel.pageSize,
+    // v4 — currentPage/filterModel/search persistem como parte do workspace Default.
+    // O defaultSnapshotRef abaixo só atualiza quando currentViewId === null, ou seja
+    // só "captura" esses valores quando a Default está ativa. Aplicar uma view custom
+    // não polui o Default (o save sempre usa defaultSnapshotRef, não persistedSnapshot).
+    currentPage: pagination.paginationModel.page,
     columnWidths: cols.columnWidths,
     pinnedColumns: cols.pinnedColumns,
     hiddenColumns: Array.from(cols.hiddenColumns),
     columnOrder: cols.columnOrder,
+    filterModel: filters.filterModel,
+    search: search.debouncedValue,
     // Fase v3 — features novas também persistem (workspace completo da Default)
     viewMode,
     groupBy,
@@ -6282,10 +6462,13 @@ function useDataTableController(props, ref) {
     density.density,
     sort.sortModels,
     pagination.paginationModel.pageSize,
+    pagination.paginationModel.page,
     cols.columnWidths,
     cols.pinnedColumns,
     cols.hiddenColumns,
     cols.columnOrder,
+    filters.filterModel,
+    search.debouncedValue,
     viewMode,
     groupBy,
     expandedRowIds,
@@ -6298,9 +6481,13 @@ function useDataTableController(props, ref) {
       defaultSnapshotRef.current = rest;
     }
   }, [persistedSnapshot, savedViews.currentViewId]);
+  const persistedSnapshotForSave = useMemo(() => {
+    const base = savedViews.currentViewId === null ? persistedSnapshot : { ...defaultSnapshotRef.current, lastActiveViewId: savedViews.currentViewId };
+    return base;
+  }, [persistedSnapshot, savedViews.currentViewId]);
   useDataTableStatePersistence({
     persistId: props.persistId,
-    state: persistedSnapshot
+    state: persistedSnapshotForSave
   });
   const applyViewState = useCallback(
     (id, state) => {
@@ -6412,6 +6599,12 @@ function useDataTableController(props, ref) {
       setViewMode(snapshot.viewMode ?? "table");
       setGroupBy(snapshot.groupBy);
       setExpandedRowIds(snapshot.expandedRowIds ?? []);
+      filters.setFilterModel(snapshot.filterModel ?? { items: [], logicOperator: "AND" });
+      search.setInputValue(snapshot.search ?? "");
+      pagination.setPaginationModel({
+        page: snapshot.currentPage ?? 1,
+        pageSize: snapshot.pageSize ?? pagination.paginationModel.pageSize
+      });
     } else {
       density.setDensity("standard");
       sort.setSortModels([]);
@@ -6424,10 +6617,11 @@ function useDataTableController(props, ref) {
       setViewMode("table");
       setGroupBy(void 0);
       setExpandedRowIds([]);
+      filters.setFilterModel({ items: [], logicOperator: "AND" });
+      search.setInputValue("");
     }
-    filters.setFilterModel({ items: [], logicOperator: "AND" });
     savedViews.setCurrentViewId(null);
-  }, [props.persistId, props.columns, density, sort, filters, cols, setViewMode, setGroupBy, setExpandedRowIds, savedViews]);
+  }, [props.persistId, props.columns, density, sort, filters, search, pagination, cols, setViewMode, setGroupBy, setExpandedRowIds, savedViews]);
   useImperativeHandle(ref, () => ({
     refresh: () => {
       if (isServerMode) query.refresh();
@@ -6483,6 +6677,8 @@ function useDataTableController(props, ref) {
     isLoading,
     isDataEmpty,
     isNoResults,
+    /** Ref ao scroll container (compartilhado entre Table.scrollRef + useColumnAutoWidth). */
+    scrollContainerRef,
     rowsToRender: effectiveRows,
     /** Todas as rows após filter/search/sort (sem paginate) — usado por totalizers
      *  pra agregar sobre tudo, nao só pagina atual. Em server mode = current page. */
@@ -7769,6 +7965,7 @@ function DataTableInternal(props, ref) {
     isLoading,
     isDataEmpty,
     isNoResults,
+    scrollContainerRef,
     rowsToRender,
     rowsAllPagesProcessed,
     totalAfterFilter,
@@ -8163,7 +8360,6 @@ function DataTableInternal(props, ref) {
     rowsToRender,
     contextValue
   ]);
-  const scrollContainerRef = useRef(null);
   const defaultRowHeight = density.density === "compact" ? 40 : density.density === "comfortable" ? 64 : 56;
   const estimateRowHeight = props.estimateRowHeight ?? defaultRowHeight;
   const virtualize = props.virtualize === true;
@@ -10002,4 +10198,4 @@ export {
   PanelFooter as y,
   PanelHeader as z
 };
-//# sourceMappingURL=panel-DZ7X1NZV.mjs.map
+//# sourceMappingURL=panel-CCYNbXJR.mjs.map