@facter/ds-core 1.16.0 → 1.18.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 "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';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, Check, Inbox, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, Circle, PinOff, Pin, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Building2, Star, ArrowRight, Search, User, LogOut, Menu, Loader2, AlertCircle, TrendingUp, TrendingDown, Sun, Moon, Bell, MoreHorizontal, Settings } from 'lucide-react';
+import { ChevronDown, Check, Inbox, Search, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, Circle, PinOff, Pin, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Building2, Star, ArrowRight, User, LogOut, Menu, Loader2, AlertCircle, TrendingUp, TrendingDown, Sun, Moon, Bell, MoreHorizontal, Settings } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -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({
@@ -1571,32 +1620,38 @@ var DataTableSearch = React10.memo(function DataTableSearch2({
   className
 }) {
   const table = useDataTableInstance();
-  const columnInstance = table.getColumn(column);
+  const columnInstance = column ? table.getColumn(column) : null;
   const [value, setValue] = React10.useState(
     columnInstance?.getFilterValue() ?? ""
   );
   const debouncedValue = useDebounce(value, debounce);
   React10.useEffect(() => {
-    columnInstance?.setFilterValue(debouncedValue);
+    if (columnInstance) {
+      columnInstance.setFilterValue(debouncedValue || void 0);
+    }
     if (onSearch) {
       onSearch(debouncedValue);
     }
   }, [debouncedValue, columnInstance, onSearch]);
   React10.useEffect(() => {
-    const filterValue = columnInstance?.getFilterValue() ?? "";
+    if (!columnInstance) return;
+    const filterValue = columnInstance.getFilterValue() ?? "";
     if (filterValue !== value) {
       setValue(filterValue);
     }
   }, [columnInstance?.getFilterValue()]);
-  return /* @__PURE__ */ jsx(
-    Input,
-    {
-      placeholder,
-      value,
-      onChange: (e) => setValue(e.target.value),
-      className: cn("h-9 w-[150px] lg:w-[250px]", className)
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-[150px] lg:w-[250px]", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder,
+        value,
+        onChange: (e) => setValue(e.target.value),
+        className: "h-9 pl-9"
+      }
+    )
+  ] });
 });
 var DataTableFilters = React10.memo(function DataTableFilters2({
   onChange,
@@ -1618,21 +1673,26 @@ var DataTableFilter = React10.memo(function DataTableFilter2({
   column: columnId,
   title,
   options,
+  onValueChange: onServerValueChange,
   className
 }) {
   const table = useDataTableInstance();
-  const column = table.getColumn(columnId);
+  const column = columnId ? table.getColumn(columnId) : null;
   const filterValue = column?.getFilterValue() ?? [];
-  const currentValue = filterValue.length > 0 ? filterValue[0] : "all";
+  const [localValue, setLocalValue] = React10.useState("all");
+  const currentValue = column ? filterValue.length > 0 ? filterValue[0] : "all" : localValue;
   const handleValueChange = React10.useCallback(
     (value) => {
-      if (value === "all") {
-        column?.setFilterValue(void 0);
-      } else {
-        column?.setFilterValue([value]);
+      const resolvedValue = value === "all" ? void 0 : value;
+      if (column) {
+        column.setFilterValue(resolvedValue ? [resolvedValue] : void 0);
+      }
+      if (onServerValueChange) {
+        onServerValueChange(resolvedValue);
       }
+      setLocalValue(value);
     },
-    [column]
+    [column, onServerValueChange]
   );
   return /* @__PURE__ */ jsxs(
     Select,
@@ -8469,6 +8529,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