@databricks/appkit-ui 0.36.0 → 0.38.0

package/dist/react/index.js

@@ -47,6 +47,7 @@ import { useGenieChat } from "./genie/use-genie-chat.js";
 import { GenieChat } from "./genie/genie-chat.js";
 import "./genie/index.js";
 import { useAgentChat } from "./hooks/use-agent-chat.js";
+import { useIsMobile } from "./hooks/use-mobile.js";
 import { usePluginClientConfig } from "./hooks/use-plugin-config.js";
 import { useServingInvoke } from "./hooks/use-serving-invoke.js";
 import { useServingStream } from "./hooks/use-serving-stream.js";
@@ -98,4 +99,4 @@ import { Toggle, toggleVariants } from "./ui/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group.js";
 import "./ui/index.js";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useGenieChat, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useServingInvoke, useServingStream, useSidebar, useThemeColors };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BaseChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLOR_VARS, CHART_COLOR_VARS_CATEGORICAL, CHART_COLOR_VARS_DIVERGING, CHART_COLOR_VARS_SEQUENTIAL, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChartWrapper, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DATE_FIELD_PATTERNS, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectoryList, DonutChart, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FALLBACK_COLORS_CATEGORICAL, FALLBACK_COLORS_DIVERGING, FALLBACK_COLORS_SEQUENTIAL, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileBreadcrumb, FileEntry, FilePreviewPanel, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GenieChat, GenieChatInput, GenieChatMessage, GenieChatMessageList, GenieQueryVisualization, HeatmapChart, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, LineChart, METADATA_DATE_PATTERNS, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NAME_FIELD_PATTERNS, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NewFolderInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalContainerContext, PortalContainerProvider, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buildCartesianOption, buildHeatmapOption, buildHorizontalBarOption, buildPieOption, buildRadarOption, buttonGroupVariants, buttonVariants, cn, createChart, createTimeSeriesData, formatFileSize, formatLabel, getCompatibleChartTypes, inferChartType, isArrowTable, isDataProps, isQueryProps, navigationMenuTriggerStyle, normalizeChartData, normalizeHeatmapData, sortTimeSeriesAscending, toChartArray, toChartValue, toggleVariants, transformGenieData, truncateLabel, useAgentChat, useAllThemeColors, useAnalyticsQuery, useChartData, useFormField, useGenieChat, useIsMobile, usePluginClientConfig, usePortalContainer, useResolvedPortalContainer, useServingInvoke, useServingStream, useSidebar, useThemeColors };

package/dist/react/table/data-table.js

@@ -155,9 +155,9 @@ function DataTable(props) {
 						})
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between py-4",
+						className: "flex flex-col-reverse sm:flex-row items-start sm:items-center justify-between gap-3 py-4",
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-6",
+							className: "flex flex-wrap items-center gap-3 sm:gap-6",
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "text-foreground text-sm",
 								children: totalRows > 0 ? finalLabels.showing.replace(`\${from}`, fromRow.toString()).replace(`\${to}`, toRow.toString()).replace(`\${total}`, totalRows.toString()) : finalLabels.noResults

package/dist/react/table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport { ChevronDown } from \"lucide-react\";\nimport { formatFieldLabel } from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { Input } from \"../ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport { TableWrapper } from \"./table-wrapper\";\nimport type { DataTableLabels, DataTableProps } from \"./types\";\n\n/**\n * Production-ready data table with automatic data fetching and state management\n *\n * Features:\n *  - Automatic column generation from data structure\n *  - Integrated with useAnalyticsQuery for data fetching\n *  - Built-in loading, error, and empty states\n *  - Dynamic filtering, sorting and pagination\n *  - Column visibility controls\n *  - Responsive design\n *  - Supports opinionated mode (auto columns) and full-control mode (`children(table)`)\n *\n * @param props - Props for the DataTable component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query. Required - use `{}` if none.\n * @param props.filterColumn - The column to filter by\n * @param props.filterPlaceholder - The placeholder for the filter input\n * @param props.children - Optional children for full control mode\n * @returns - The rendered data table component\n *\n * @example\n * // Opinionated mode\n * <DataTable\n *  queryKey=\"users-list\"\n *  parameters={{ status: \"active\" }}\n *  filterColumn=\"email\"\n *  filterPlaceholder=\"Filter by email...\"\n * />\n * @example\n * // full control mode\n * <DataTable queryKey=\"users-list\" parameters={{ status: \"active\" }}>\n *   {(table) => (\n *     <div>\n *       <h2>Custom Table UI</h2>\n *       {table.getRowModel().rows.map(row => (\n *         <div key={row.id}>{row.original.name}</div>\n *       ))}\n *     </div>\n *   )}\n * </DataTable>\n */\nexport function DataTable(props: DataTableProps) {\n  const {\n    parameters,\n    queryKey,\n    filterColumn,\n    filterPlaceholder,\n    transform,\n    labels,\n    ariaLabel,\n    testId,\n    className,\n    enableRowSelection,\n    onRowSelectionChange,\n    children,\n    pageSize = 10,\n    pageSizeOptions = [10, 25, 50, 100],\n  } = props;\n\n  const defaultLabels: Required<DataTableLabels> = {\n    columnsButton: \"Columns\",\n    noResults: \"No results found.\",\n    rowsFound: `\\${count} row(s) found`,\n    previousButton: \"Previous\",\n    nextButton: \"Next\",\n    rowsPerPage: \"Rows per page\",\n    showing: `Showing \\${from} to \\${to} of \\${total}`,\n  };\n\n  const finalLabels = { ...defaultLabels, ...labels };\n\n  return (\n    <TableWrapper\n      queryKey={queryKey}\n      parameters={parameters}\n      ariaLabel={ariaLabel}\n      testId={testId}\n      className={className}\n      transformer={transform}\n      enableRowSelection={enableRowSelection}\n      onRowSelectionChange={onRowSelectionChange}\n      pageSize={pageSize}\n    >\n      {(table) => {\n        if (children) {\n          return children(table);\n        }\n\n        const data = table.options.data;\n\n        const defaultFilterColumn =\n          filterColumn ||\n          (data && data.length > 0\n            ? Object.keys(data[0] as Record<string, any>).find(\n                (key) =>\n                  typeof (data[0] as Record<string, any>)[key] === \"string\",\n              )\n            : null);\n\n        const totalRows = table.getFilteredRowModel().rows.length;\n        const currentPage = table.getState().pagination.pageIndex + 1;\n        const currentPageSize = table.getState().pagination.pageSize;\n        const fromRow =\n          totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;\n        const toRow = Math.min(currentPage * currentPageSize, totalRows);\n\n        return (\n          <div className=\"w-full\">\n            <div className=\"flex items-center py-4 gap-2\">\n              {defaultFilterColumn && (\n                <Input\n                  placeholder={\n                    filterPlaceholder ||\n                    `Filter by ${formatFieldLabel(defaultFilterColumn)}...`\n                  }\n                  value={\n                    (table\n                      .getColumn(defaultFilterColumn)\n                      ?.getFilterValue() as string) ?? \"\"\n                  }\n                  onChange={(event) =>\n                    table\n                      .getColumn(defaultFilterColumn)\n                      ?.setFilterValue(event.target.value)\n                  }\n                  className=\"max-w-sm\"\n                />\n              )}\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                    {finalLabels.columnsButton}{\" \"}\n                    <ChevronDown className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onCheckedChange={(value) =>\n                            column.toggleVisibility(!!value)\n                          }\n                        >\n                          {formatFieldLabel(column.id)}\n                        </DropdownMenuCheckboxItem>\n                      );\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n            <div className=\"overflow-hidden rounded-md border border-border\">\n              <div className=\"max-h-[600px] overflow-y-auto\">\n                <Table>\n                  <TableHeader className=\"sticky top-0 bg-background z-10\">\n                    {table.getHeaderGroups().map((headerGroup) => (\n                      <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                          const isSelectColumn = header.column.id === \"select\";\n                          return (\n                            <TableHead\n                              key={header.id}\n                              style={{\n                                width: header.getSize(),\n                                position: \"relative\",\n                              }}\n                              className={\n                                isSelectColumn ? \"w-[40px] p-0\" : undefined\n                              }\n                            >\n                              {header.isPlaceholder\n                                ? null\n                                : flexRender(\n                                    header.column.columnDef.header,\n                                    header.getContext(),\n                                  )}\n                            </TableHead>\n                          );\n                        })}\n                      </TableRow>\n                    ))}\n                  </TableHeader>\n                  <TableBody>\n                    {table.getRowModel().rows?.length ? (\n                      table.getRowModel().rows.map((row) => (\n                        <TableRow\n                          key={row.id}\n                          data-state={row.getIsSelected() && \"selected\"}\n                        >\n                          {row.getVisibleCells().map((cell) => {\n                            const isSelectColumn = cell.column.id === \"select\";\n                            return (\n                              <TableCell\n                                key={cell.id}\n                                style={{\n                                  width: cell.column.getSize(),\n                                }}\n                                className={\n                                  isSelectColumn ? \"w-[40px] p-0\" : undefined\n                                }\n                              >\n                                {flexRender(\n                                  cell.column.columnDef.cell,\n                                  cell.getContext(),\n                                )}\n                              </TableCell>\n                            );\n                          })}\n                        </TableRow>\n                      ))\n                    ) : (\n                      <TableRow>\n                        <TableCell\n                          colSpan={table.getAllColumns().length}\n                          className=\"h-24 text-center\"\n                        >\n                          {finalLabels.noResults}\n                        </TableCell>\n                      </TableRow>\n                    )}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n            <div className=\"flex items-center justify-between py-4\">\n              <div className=\"flex items-center gap-6\">\n                <div className=\"text-foreground text-sm\">\n                  {totalRows > 0\n                    ? finalLabels.showing\n                        .replace(`\\${from}`, fromRow.toString())\n                        .replace(`\\${to}`, toRow.toString())\n                        .replace(`\\${total}`, totalRows.toString())\n                    : finalLabels.noResults}\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-foreground\">\n                    {finalLabels.rowsPerPage}\n                  </span>\n                  <Select\n                    value={currentPageSize.toString()}\n                    onValueChange={(value) => {\n                      table.setPageSize(Number(value));\n                    }}\n                  >\n                    <SelectTrigger className=\"w-[70px]\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {pageSizeOptions.map((size) => (\n                        <SelectItem key={size} value={size.toString()}>\n                          {size}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n              <div className=\"space-x-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  {finalLabels.previousButton}\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  {finalLabels.nextButton}\n                </Button>\n              </div>\n            </div>\n          </div>\n        );\n      }}\n    </TableWrapper>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":["Table"],"sources":["../../../src/react/table/data-table.tsx"],"sourcesContent":["import { flexRender } from \"@tanstack/react-table\";\nimport { ChevronDown } from \"lucide-react\";\nimport { formatFieldLabel } from \"../lib/format\";\nimport { Button } from \"../ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { Input } from \"../ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"../ui/select\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../ui/table\";\nimport { TableWrapper } from \"./table-wrapper\";\nimport type { DataTableLabels, DataTableProps } from \"./types\";\n\n/**\n * Production-ready data table with automatic data fetching and state management\n *\n * Features:\n *  - Automatic column generation from data structure\n *  - Integrated with useAnalyticsQuery for data fetching\n *  - Built-in loading, error, and empty states\n *  - Dynamic filtering, sorting and pagination\n *  - Column visibility controls\n *  - Responsive design\n *  - Supports opinionated mode (auto columns) and full-control mode (`children(table)`)\n *\n * @param props - Props for the DataTable component\n * @param props.queryKey - The query key to fetch the data\n * @param props.parameters - The parameters to pass to the query. Required - use `{}` if none.\n * @param props.filterColumn - The column to filter by\n * @param props.filterPlaceholder - The placeholder for the filter input\n * @param props.children - Optional children for full control mode\n * @returns - The rendered data table component\n *\n * @example\n * // Opinionated mode\n * <DataTable\n *  queryKey=\"users-list\"\n *  parameters={{ status: \"active\" }}\n *  filterColumn=\"email\"\n *  filterPlaceholder=\"Filter by email...\"\n * />\n * @example\n * // full control mode\n * <DataTable queryKey=\"users-list\" parameters={{ status: \"active\" }}>\n *   {(table) => (\n *     <div>\n *       <h2>Custom Table UI</h2>\n *       {table.getRowModel().rows.map(row => (\n *         <div key={row.id}>{row.original.name}</div>\n *       ))}\n *     </div>\n *   )}\n * </DataTable>\n */\nexport function DataTable(props: DataTableProps) {\n  const {\n    parameters,\n    queryKey,\n    filterColumn,\n    filterPlaceholder,\n    transform,\n    labels,\n    ariaLabel,\n    testId,\n    className,\n    enableRowSelection,\n    onRowSelectionChange,\n    children,\n    pageSize = 10,\n    pageSizeOptions = [10, 25, 50, 100],\n  } = props;\n\n  const defaultLabels: Required<DataTableLabels> = {\n    columnsButton: \"Columns\",\n    noResults: \"No results found.\",\n    rowsFound: `\\${count} row(s) found`,\n    previousButton: \"Previous\",\n    nextButton: \"Next\",\n    rowsPerPage: \"Rows per page\",\n    showing: `Showing \\${from} to \\${to} of \\${total}`,\n  };\n\n  const finalLabels = { ...defaultLabels, ...labels };\n\n  return (\n    <TableWrapper\n      queryKey={queryKey}\n      parameters={parameters}\n      ariaLabel={ariaLabel}\n      testId={testId}\n      className={className}\n      transformer={transform}\n      enableRowSelection={enableRowSelection}\n      onRowSelectionChange={onRowSelectionChange}\n      pageSize={pageSize}\n    >\n      {(table) => {\n        if (children) {\n          return children(table);\n        }\n\n        const data = table.options.data;\n\n        const defaultFilterColumn =\n          filterColumn ||\n          (data && data.length > 0\n            ? Object.keys(data[0] as Record<string, any>).find(\n                (key) =>\n                  typeof (data[0] as Record<string, any>)[key] === \"string\",\n              )\n            : null);\n\n        const totalRows = table.getFilteredRowModel().rows.length;\n        const currentPage = table.getState().pagination.pageIndex + 1;\n        const currentPageSize = table.getState().pagination.pageSize;\n        const fromRow =\n          totalRows === 0 ? 0 : (currentPage - 1) * currentPageSize + 1;\n        const toRow = Math.min(currentPage * currentPageSize, totalRows);\n\n        return (\n          <div className=\"w-full\">\n            <div className=\"flex items-center py-4 gap-2\">\n              {defaultFilterColumn && (\n                <Input\n                  placeholder={\n                    filterPlaceholder ||\n                    `Filter by ${formatFieldLabel(defaultFilterColumn)}...`\n                  }\n                  value={\n                    (table\n                      .getColumn(defaultFilterColumn)\n                      ?.getFilterValue() as string) ?? \"\"\n                  }\n                  onChange={(event) =>\n                    table\n                      .getColumn(defaultFilterColumn)\n                      ?.setFilterValue(event.target.value)\n                  }\n                  className=\"max-w-sm\"\n                />\n              )}\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" className=\"ml-auto\">\n                    {finalLabels.columnsButton}{\" \"}\n                    <ChevronDown className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  {table\n                    .getAllColumns()\n                    .filter((column) => column.getCanHide())\n                    .map((column) => {\n                      return (\n                        <DropdownMenuCheckboxItem\n                          key={column.id}\n                          className=\"capitalize\"\n                          checked={column.getIsVisible()}\n                          onCheckedChange={(value) =>\n                            column.toggleVisibility(!!value)\n                          }\n                        >\n                          {formatFieldLabel(column.id)}\n                        </DropdownMenuCheckboxItem>\n                      );\n                    })}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </div>\n            <div className=\"overflow-hidden rounded-md border border-border\">\n              <div className=\"max-h-[600px] overflow-y-auto\">\n                <Table>\n                  <TableHeader className=\"sticky top-0 bg-background z-10\">\n                    {table.getHeaderGroups().map((headerGroup) => (\n                      <TableRow key={headerGroup.id}>\n                        {headerGroup.headers.map((header) => {\n                          const isSelectColumn = header.column.id === \"select\";\n                          return (\n                            <TableHead\n                              key={header.id}\n                              style={{\n                                width: header.getSize(),\n                                position: \"relative\",\n                              }}\n                              className={\n                                isSelectColumn ? \"w-[40px] p-0\" : undefined\n                              }\n                            >\n                              {header.isPlaceholder\n                                ? null\n                                : flexRender(\n                                    header.column.columnDef.header,\n                                    header.getContext(),\n                                  )}\n                            </TableHead>\n                          );\n                        })}\n                      </TableRow>\n                    ))}\n                  </TableHeader>\n                  <TableBody>\n                    {table.getRowModel().rows?.length ? (\n                      table.getRowModel().rows.map((row) => (\n                        <TableRow\n                          key={row.id}\n                          data-state={row.getIsSelected() && \"selected\"}\n                        >\n                          {row.getVisibleCells().map((cell) => {\n                            const isSelectColumn = cell.column.id === \"select\";\n                            return (\n                              <TableCell\n                                key={cell.id}\n                                style={{\n                                  width: cell.column.getSize(),\n                                }}\n                                className={\n                                  isSelectColumn ? \"w-[40px] p-0\" : undefined\n                                }\n                              >\n                                {flexRender(\n                                  cell.column.columnDef.cell,\n                                  cell.getContext(),\n                                )}\n                              </TableCell>\n                            );\n                          })}\n                        </TableRow>\n                      ))\n                    ) : (\n                      <TableRow>\n                        <TableCell\n                          colSpan={table.getAllColumns().length}\n                          className=\"h-24 text-center\"\n                        >\n                          {finalLabels.noResults}\n                        </TableCell>\n                      </TableRow>\n                    )}\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n            {/* On mobile, flex-col-reverse places pagination buttons above the info row for easier thumb access */}\n            <div className=\"flex flex-col-reverse sm:flex-row items-start sm:items-center justify-between gap-3 py-4\">\n              <div className=\"flex flex-wrap items-center gap-3 sm:gap-6\">\n                <div className=\"text-foreground text-sm\">\n                  {totalRows > 0\n                    ? finalLabels.showing\n                        .replace(`\\${from}`, fromRow.toString())\n                        .replace(`\\${to}`, toRow.toString())\n                        .replace(`\\${total}`, totalRows.toString())\n                    : finalLabels.noResults}\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm text-foreground\">\n                    {finalLabels.rowsPerPage}\n                  </span>\n                  <Select\n                    value={currentPageSize.toString()}\n                    onValueChange={(value) => {\n                      table.setPageSize(Number(value));\n                    }}\n                  >\n                    <SelectTrigger className=\"w-[70px]\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {pageSizeOptions.map((size) => (\n                        <SelectItem key={size} value={size.toString()}>\n                          {size}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </div>\n              </div>\n              <div className=\"space-x-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  {finalLabels.previousButton}\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  {finalLabels.nextButton}\n                </Button>\n              </div>\n            </div>\n          </div>\n        );\n      }}\n    </TableWrapper>\n  );\n}\n"],"mappings":"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"}

package/dist/react/ui/sidebar.js

@@ -3,10 +3,10 @@
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { Skeleton } from "./skeleton.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
 import { Input } from "./input.js";
 import { Separator } from "./separator.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
-import { useIsMobile } from "../hooks/use-mobile.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";