@facter/ds-core 1.8.0 → 1.8.1

package/dist/index.d.mts

@@ -534,13 +534,7 @@ declare namespace DataTableRoot {
     var displayName: string;
 }
 
-/**
- * DataTable.Loading - Componente de loading state
- *
- * Renderiza um skeleton ou overlay quando visible=true.
- * Não renderiza nada quando visible=false.
- */
-declare function DataTableLoading({ visible, skeleton, skeletonRows, className, }: DataTableLoadingProps): react_jsx_runtime.JSX.Element | null;
+declare function DataTableLoading({ visible, skeletonRows, }: DataTableLoadingProps): null;
 declare namespace DataTableLoading {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -534,13 +534,7 @@ declare namespace DataTableRoot {
     var displayName: string;
 }
 
-/**
- * DataTable.Loading - Componente de loading state
- *
- * Renderiza um skeleton ou overlay quando visible=true.
- * Não renderiza nada quando visible=false.
- */
-declare function DataTableLoading({ visible, skeleton, skeletonRows, className, }: DataTableLoadingProps): react_jsx_runtime.JSX.Element | null;
+declare function DataTableLoading({ visible, skeletonRows, }: DataTableLoadingProps): null;
 declare namespace DataTableLoading {
     var displayName: string;
 }

package/dist/index.js

@@ -1153,7 +1153,6 @@ function useDataTableInternal({
     pageIndex: 0,
     pageSize: 10
   });
-  console.log("[useDataTableInternal] pagination state", pagination);
   const table = reactTable.useReactTable({
     data,
     columns,
@@ -1207,6 +1206,7 @@ function useDataTableInternal({
     pageSize: pagination.pageSize
   };
 }
+var DataTableLoadingContext = React10__namespace.createContext(null);
 var DataTableEmptyStateConfigContext = React10__namespace.createContext(null);
 var DataTableInstanceContext = React10__namespace.createContext(null);
 DataTableInstanceContext.displayName = "DataTableInstanceContext";
@@ -1225,6 +1225,12 @@ function DataTableProvider({
   pageIndex,
   pageSize
 }) {
+  const [isLoading, setIsLoading] = React10__namespace.useState(false);
+  const [skeletonRows, setSkeletonRows] = React10__namespace.useState(5);
+  const loadingValue = React10__namespace.useMemo(
+    () => ({ isLoading, setIsLoading, skeletonRows, setSkeletonRows }),
+    [isLoading, skeletonRows]
+  );
   const [emptyStateConfig, setEmptyStateConfig] = React10__namespace.useState({});
   const emptyStateValue = React10__namespace.useMemo(
     () => ({ config: emptyStateConfig, setConfig: setEmptyStateConfig }),
@@ -1243,7 +1249,7 @@ function DataTableProvider({
     [pageIndex, pageSize]
   );
   const tableValue = table;
-  return /* @__PURE__ */ jsxRuntime.jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataTableLoadingContext.Provider, { value: loadingValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) }) });
 }
 function useDataTable() {
   const context = React10__namespace.useContext(DataTableInstanceContext);
@@ -1341,6 +1347,15 @@ function useDataTableColumnVisibility() {
     getAllColumns: () => table.getAllColumns().filter((col) => col.getCanHide())
   }), [table, columnVisibility]);
 }
+function useDataTableLoadingState() {
+  const context = React10__namespace.useContext(DataTableLoadingContext);
+  if (!context) {
+    throw new Error(
+      "useDataTableLoadingState must be used within <DataTable>."
+    );
+  }
+  return context;
+}
 function useDataTableEmptyStateConfig() {
   const context = React10__namespace.useContext(DataTableEmptyStateConfigContext);
   if (!context) {
@@ -1497,10 +1512,12 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
   const { isEmpty } = useDataTableMeta();
   const { density } = useDataTableDensity();
   const { config: emptyStateConfig } = useDataTableEmptyStateConfig();
+  const { isLoading, skeletonRows } = useDataTableLoadingState();
   const densityStyles = DENSITY_CONFIG[density];
   const cellClasses = cn(densityStyles.padding, densityStyles.fontSize);
+  const columnCount = table.getVisibleLeafColumns().length;
   const hasRows = table.getRowModel().rows?.length > 0;
-  if (!hasRows && isEmpty) {
+  if (!hasRows && isEmpty && !isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       EmptyState,
       {
@@ -1524,7 +1541,7 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
       },
       header.id
     )) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
@@ -1809,24 +1826,19 @@ var DataTableEmptyState = React10__namespace.memo(function DataTableEmptyState2(
   return null;
 });
 DataTableEmptyState.displayName = "DataTable.EmptyState";
-function SkeletonRow({ columns }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, index)) });
-}
 function DataTableLoading({
   visible,
-  skeleton,
-  skeletonRows = 5,
-  className
+  skeletonRows = 5
 }) {
-  const table = useDataTable();
-  const columnCount = table.getVisibleLeafColumns().length;
-  if (!visible) {
-    return null;
-  }
-  if (skeleton) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children: skeleton });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { columns: columnCount || 4 }, index)) }) }) }) });
+  const { setIsLoading, setSkeletonRows } = useDataTableLoadingState();
+  React10__namespace.useLayoutEffect(() => {
+    setIsLoading(visible);
+    return () => setIsLoading(false);
+  }, [visible, setIsLoading]);
+  React10__namespace.useLayoutEffect(() => {
+    setSkeletonRows(skeletonRows);
+  }, [skeletonRows, setSkeletonRows]);
+  return null;
 }
 DataTableLoading.displayName = "DataTable.Loading";
 function DataTableColumnHeader({