@facter/ds-core 1.16.0 → 1.17.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import * as React10 from 'react';
-import { createContext, useCallback, Children, isValidElement, useState, useMemo, useContext } from 'react';
+import { createContext, useRef, useState, useCallback, useEffect, Children, isValidElement, useMemo, useContext } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -1392,6 +1392,32 @@ var DENSITY_CONFIG = {
     padding: "py-3 px-4"
   }
 };
+function useAvailableHeight(options = {}) {
+  const { bottomOffset = 16, minHeight = 200, enabled = true } = options;
+  const ref = useRef(null);
+  const [height, setHeight] = useState(void 0);
+  const calculate = useCallback(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    const rect = el.getBoundingClientRect();
+    const available = window.innerHeight - rect.top - bottomOffset;
+    setHeight(Math.max(minHeight, Math.round(available)));
+  }, [bottomOffset, minHeight, enabled]);
+  useEffect(() => {
+    if (!enabled) return;
+    const frame = requestAnimationFrame(calculate);
+    window.addEventListener("resize", calculate);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", calculate);
+    };
+  }, [calculate, enabled]);
+  return {
+    ref,
+    height,
+    style: height ? { maxHeight: `${height}px` } : void 0
+  };
+}
 var Table = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
   "table",
   {
@@ -1475,6 +1501,8 @@ var DataTableContent = React10.memo(function DataTableContent2({
   stripedRows = false,
   highlightOnHover = true,
   onRowClick,
+  scrollable = false,
+  scrollBottomOffset = 16,
   className
 }) {
   const table = useDataTable();
@@ -1482,10 +1510,15 @@ var DataTableContent = React10.memo(function DataTableContent2({
   const { density } = useDataTableDensity();
   const { config: emptyStateConfig } = useDataTableEmptyStateConfig();
   const { isLoading, skeletonRows } = useDataTableLoadingState();
+  const { ref, style: scrollStyle } = useAvailableHeight({
+    bottomOffset: scrollBottomOffset,
+    enabled: scrollable
+  });
   const densityStyles = DENSITY_CONFIG[density];
   const cellClasses = cn(densityStyles.padding, densityStyles.fontSize);
   const columnCount = table.getVisibleLeafColumns().length;
   const hasRows = table.getRowModel().rows?.length > 0;
+  const effectiveStickyHeader = stickyHeader || scrollable;
   if (!hasRows && isEmpty && !isLoading) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -1497,34 +1530,50 @@ var DataTableContent = React10.memo(function DataTableContent2({
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("rounded-md overflow-auto bg-card", className), children: /* @__PURE__ */ jsxs(Table, { children: [
-    /* @__PURE__ */ jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-10 bg-background"), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
-      TableHead,
-      {
-        className: cn(cellClasses, "font-medium"),
-        style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
-        children: header.isPlaceholder ? null : flexRender(
-          header.column.columnDef.header,
-          header.getContext()
-        )
-      },
-      header.id
-    )) }, headerGroup.id)) }),
-    /* @__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",
-        className: cn(
-          highlightOnHover && "hover:bg-muted/50",
-          stripedRows && index % 2 === 1 && "bg-muted/30",
-          onRowClick && "cursor-pointer"
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("rounded-md overflow-auto bg-card", className),
+      style: scrollStyle,
+      children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(
+          TableHeader,
+          {
+            className: cn(
+              effectiveStickyHeader && "sticky top-0 z-10 bg-background shadow-[0_1px_0_0_hsl(var(--border))]"
+            ),
+            children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                className: cn(cellClasses, "font-medium"),
+                style: { width: header.getSize() !== 150 ? header.getSize() : void 0 },
+                children: header.isPlaceholder ? null : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              },
+              header.id
+            )) }, headerGroup.id))
+          }
         ),
-        onClick: onRowClick ? () => onRowClick(row) : void 0,
-        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-      },
-      row.id
-    )) })
-  ] }) });
+        /* @__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",
+            className: cn(
+              highlightOnHover && "hover:bg-muted/50",
+              stripedRows && index % 2 === 1 && "bg-muted/30",
+              onRowClick && "cursor-pointer"
+            ),
+            onClick: onRowClick ? () => onRowClick(row) : void 0,
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          },
+          row.id
+        )) })
+      ] })
+    }
+  );
 });
 DataTableContent.displayName = "DataTable.Content";
 var DataTableToolbar = React10.memo(function DataTableToolbar2({
@@ -8469,6 +8518,6 @@ var THEME_INFO = {
   }
 };
 
-export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, FloatingBarCompound as FloatingBar, FloatingBarAction, FloatingBarCounter, FloatingBarDivider, FloatingBarIconAction, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, ItemCard, ItemCardActionButton, ItemCardActions, ItemCardActionsRow, ItemCardBadge, ItemCardContent, ItemCardContentItem, ItemCardEmpty, ItemCardFooter, ItemCardFooterDivider, ItemCardFooterItem, ItemCardHeader, ItemCardIcon, ItemCardRoot, ItemCardSubtitle, ItemCardTitle, ItemCardTitleGroup, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, PageHeader, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, SimpleTooltip, Skeleton, Sparkline, StatsCard, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Tooltip, TooltipAction, TooltipActions, TooltipArrow, TooltipContent, TooltipDescription, TooltipHeader, TooltipIcon, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTitle, TooltipTrigger, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, itemCardBadgeVariants, itemCardIconVariants, itemCardVariants, loader, toast, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormFieldContext, useItemCard, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
+export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, FloatingBarCompound as FloatingBar, FloatingBarAction, FloatingBarCounter, FloatingBarDivider, FloatingBarIconAction, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, ItemCard, ItemCardActionButton, ItemCardActions, ItemCardActionsRow, ItemCardBadge, ItemCardContent, ItemCardContentItem, ItemCardEmpty, ItemCardFooter, ItemCardFooterDivider, ItemCardFooterItem, ItemCardHeader, ItemCardIcon, ItemCardRoot, ItemCardSubtitle, ItemCardTitle, ItemCardTitleGroup, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, PageHeader, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, SimpleTooltip, Skeleton, Sparkline, StatsCard, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Tooltip, TooltipAction, TooltipActions, TooltipArrow, TooltipContent, TooltipDescription, TooltipHeader, TooltipIcon, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTitle, TooltipTrigger, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, itemCardBadgeVariants, itemCardIconVariants, itemCardVariants, loader, toast, useAvailableHeight, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormFieldContext, useItemCard, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map