@facter/ds-core 1.8.0 → 1.8.1

package/dist/index.mjs

@@ -1122,7 +1122,6 @@ function useDataTableInternal({
     pageIndex: 0,
     pageSize: 10
   });
-  console.log("[useDataTableInternal] pagination state", pagination);
   const table = useReactTable({
     data,
     columns,
@@ -1176,6 +1175,7 @@ function useDataTableInternal({
     pageSize: pagination.pageSize
   };
 }
+var DataTableLoadingContext = React10.createContext(null);
 var DataTableEmptyStateConfigContext = React10.createContext(null);
 var DataTableInstanceContext = React10.createContext(null);
 DataTableInstanceContext.displayName = "DataTableInstanceContext";
@@ -1194,6 +1194,12 @@ function DataTableProvider({
   pageIndex,
   pageSize
 }) {
+  const [isLoading, setIsLoading] = React10.useState(false);
+  const [skeletonRows, setSkeletonRows] = React10.useState(5);
+  const loadingValue = React10.useMemo(
+    () => ({ isLoading, setIsLoading, skeletonRows, setSkeletonRows }),
+    [isLoading, skeletonRows]
+  );
   const [emptyStateConfig, setEmptyStateConfig] = React10.useState({});
   const emptyStateValue = React10.useMemo(
     () => ({ config: emptyStateConfig, setConfig: setEmptyStateConfig }),
@@ -1212,7 +1218,7 @@ function DataTableProvider({
     [pageIndex, pageSize]
   );
   const tableValue = table;
-  return /* @__PURE__ */ jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) });
+  return /* @__PURE__ */ jsx(DataTableLoadingContext.Provider, { value: loadingValue, children: /* @__PURE__ */ jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) }) });
 }
 function useDataTable() {
   const context = React10.useContext(DataTableInstanceContext);
@@ -1310,6 +1316,15 @@ function useDataTableColumnVisibility() {
     getAllColumns: () => table.getAllColumns().filter((col) => col.getCanHide())
   }), [table, columnVisibility]);
 }
+function useDataTableLoadingState() {
+  const context = React10.useContext(DataTableLoadingContext);
+  if (!context) {
+    throw new Error(
+      "useDataTableLoadingState must be used within <DataTable>."
+    );
+  }
+  return context;
+}
 function useDataTableEmptyStateConfig() {
   const context = React10.useContext(DataTableEmptyStateConfigContext);
   if (!context) {
@@ -1466,10 +1481,12 @@ var DataTableContent = React10.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__ */ jsx(
       EmptyState,
       {
@@ -1493,7 +1510,7 @@ var DataTableContent = React10.memo(function DataTableContent2({
       },
       header.id
     )) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
@@ -1778,24 +1795,19 @@ var DataTableEmptyState = React10.memo(function DataTableEmptyState2({
   return null;
 });
 DataTableEmptyState.displayName = "DataTable.EmptyState";
-function SkeletonRow({ columns }) {
-  return /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx(TableCell, { className: "py-4", children: /* @__PURE__ */ 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__ */ jsx("div", { className: cn("w-full", className), children: skeleton });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(SkeletonRow, { columns: columnCount || 4 }, index)) }) }) }) });
+  const { setIsLoading, setSkeletonRows } = useDataTableLoadingState();
+  React10.useLayoutEffect(() => {
+    setIsLoading(visible);
+    return () => setIsLoading(false);
+  }, [visible, setIsLoading]);
+  React10.useLayoutEffect(() => {
+    setSkeletonRows(skeletonRows);
+  }, [skeletonRows, setSkeletonRows]);
+  return null;
 }
 DataTableLoading.displayName = "DataTable.Loading";
 function DataTableColumnHeader({