@uipath/apollo-vertex 1.1.0 → 1.3.0

package/dist/registry/data-table/data-table-search.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SearchIcon } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Input } from "../input/input.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function DataTableSearch({ table, placeholder, className }) {
     const { t } = useVertexTranslation();
     return /*#__PURE__*/ jsxs("div", {
@@ -17,7 +17,7 @@ function DataTableSearch({ table, placeholder, className }) {
                 placeholder: placeholder ?? t("search", {
                     defaultValue: "Search..."
                 }),
-                value: String(table.getState().globalFilter ?? ""),
+                value: String(table.state.globalFilter ?? ""),
                 onChange: (e)=>table.setGlobalFilter(e.target.value),
                 className: "w-full sm:w-80 md:w-96 pl-9 border-0"
             })

package/dist/registry/data-table/data-table-toolbar.d.ts

@@ -1,11 +1,12 @@
-import type { Table } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
 import type * as React from "react";
-interface DataTableToolbarProps<TData> {
-    table: Table<TData>;
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableToolbarProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
     className?: string;
     enableSearch?: boolean;
     enableViewOptions?: boolean;
     customContent?: React.ReactNode;
 }
-declare function DataTableToolbar<TData>({ table, className, enableSearch, enableViewOptions, customContent, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+declare function DataTableToolbar<TData extends RowData>({ table, className, enableSearch, enableViewOptions, customContent, }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element | null;
 export { DataTableToolbar };

package/dist/registry/data-table/data-table-view-options.d.ts

@@ -1,7 +1,8 @@
-import type { Table as TanstackTable } from "@tanstack/react-table";
-interface DataTableViewOptionsProps<TData> {
-    table: TanstackTable<TData>;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableViewOptionsProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
     className?: string;
 }
-declare function DataTableViewOptions<TData>({ table, className, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableViewOptions<TData extends RowData>({ table, className, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
 export { DataTableViewOptions };

package/dist/registry/data-table/data-table-view-options.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Columns3Icon } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { SortableColumnList } from "./sortable-column-list.js";
 function DataTableViewOptions({ table, className }) {
     const { t } = useVertexTranslation();
     const allReorderableColumns = table.getAllColumns().filter((column)=>null != column.accessorFn && column.getCanHide());
-    const currentOrder = table.getState().columnOrder;
+    const currentOrder = table.state.columnOrder;
     const orderedColumns = ()=>{
         if (!currentOrder || 0 === currentOrder.length) return allReorderableColumns;
         const orderMap = new Map(currentOrder.map((id, index)=>[

package/dist/registry/data-table/data-table.d.ts

@@ -1,14 +1,15 @@
-import { type ColumnDef, type ColumnFiltersState, type ExpandedState, type FilterFn, type OnChangeFn, type PaginationState, type Row, type RowData, type RowSelectionState, type SortingState, type Table as TanstackTable, type VisibilityState } from "@tanstack/react-table";
+import { type ColumnFiltersState, type ColumnVisibilityState, type ExpandedState, type OnChangeFn, type PaginationState, type RowData, type RowSelectionState, type SortingState } from "@tanstack/react-table";
 import * as React from "react";
+import { type DataTableColumnDef, type DataTableFilterFn, type DataTableInstance, type DataTableRow } from "../../lib/table-features";
 declare module "@tanstack/react-table" {
-    interface ColumnMeta<TData extends RowData, TValue> {
+    interface ColumnMeta<TFeatures, TData extends RowData, TValue> {
         displayName?: string;
-        getFilterValue?: (value: unknown, row: Row<TData>) => string;
+        getFilterValue?: (value: unknown, row: DataTableRow<TData>) => string;
         overflowVisible?: boolean;
     }
 }
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
+interface DataTableProps<TData extends RowData, TValue = unknown> {
+    columns: DataTableColumnDef<TData, TValue>[];
     data: TData[];
     className?: string;
     isLoading?: boolean;
@@ -17,8 +18,8 @@ interface DataTableProps<TData, TValue> {
     onSortingChange: OnChangeFn<SortingState>;
     columnFilters: ColumnFiltersState;
     onColumnFiltersChange: OnChangeFn<ColumnFiltersState>;
-    columnVisibility: VisibilityState;
-    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    columnVisibility: ColumnVisibilityState;
+    onColumnVisibilityChange: OnChangeFn<ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: OnChangeFn<string[]>;
     rowSelection?: RowSelectionState;
@@ -27,22 +28,22 @@ interface DataTableProps<TData, TValue> {
     onGlobalFilterChange: OnChangeFn<string>;
     pagination?: PaginationState;
     onPaginationChange?: OnChangeFn<PaginationState>;
-    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
-    globalFilterFn?: FilterFn<TData>;
+    getRowId?: (originalRow: TData, index: number, parent?: DataTableRow<TData>) => string;
+    globalFilterFn?: DataTableFilterFn<TData>;
     enableSearch?: boolean;
     enableViewOptions?: boolean;
     enableColumnResizing?: boolean;
-    toolbarContent?: (table: TanstackTable<TData>) => React.ReactNode;
+    toolbarContent?: (table: DataTableInstance<TData>) => React.ReactNode;
     noResultsMessage?: React.ReactNode;
     stickyHeader?: boolean;
     expanded?: ExpandedState;
     onExpandedChange?: OnChangeFn<ExpandedState>;
-    renderExpandedRow?: (row: Row<TData>) => React.ReactNode;
+    renderExpandedRow?: (row: DataTableRow<TData>) => React.ReactNode;
     getRowClassName?: (row: TData) => string;
     skeletonColumnWidths?: string[];
     plain?: boolean;
 }
-declare function DataTable<TData, TValue>({ columns, data, className, isLoading, onRowClick, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, rowSelection, onRowSelectionChange, globalFilter, onGlobalFilterChange, pagination, onPaginationChange, getRowId, globalFilterFn, enableSearch, enableViewOptions, enableColumnResizing, toolbarContent, noResultsMessage, stickyHeader, expanded, onExpandedChange, renderExpandedRow, getRowClassName, skeletonColumnWidths, plain, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function DataTable<TData extends RowData, TValue = unknown>({ columns, data, className, isLoading, onRowClick, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, rowSelection, onRowSelectionChange, globalFilter, onGlobalFilterChange, pagination, onPaginationChange, getRowId, globalFilterFn, enableSearch, enableViewOptions, enableColumnResizing, toolbarContent, noResultsMessage, stickyHeader, expanded, onExpandedChange, renderExpandedRow, getRowClassName, skeletonColumnWidths, plain, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { DataTable };
 export type { DataTableProps };
 /** @public */

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/react-table";
+import { flexRender, useTable } from "@tanstack/react-table";
 import { Fragment } from "react";
+import { dataTableFeatures } from "../../lib/table-features.js";
 import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
-import { useReactTableCompat } from "../use-data-table/useReactTableCompat.js";
 import { cn } from "../../lib/utils.js";
 import { DataTableExpandAllToggle } from "./data-table-expand-toggle.js";
 import { DataTablePagination } from "./data-table-pagination.js";
@@ -24,9 +24,10 @@ function DataTable({ columns, data, className, isLoading = false, onRowClick, so
                 pageIndex: 0
             });
     };
-    const table = useReactTableCompat({
+    const table = useTable({
+        features: dataTableFeatures,
         data,
-        columns,
+        columns: columns,
         onSortingChange,
         onColumnFiltersChange: (updater)=>{
             onColumnFiltersChange(updater);
@@ -42,8 +43,10 @@ function DataTable({ columns, data, className, isLoading = false, onRowClick, so
             resetPageIndex();
         },
         ...isPaginationEnabled && {
-            onPaginationChange,
-            getPaginationRowModel: getPaginationRowModel()
+            onPaginationChange
+        },
+        ...!isPaginationEnabled && {
+            manualPagination: true
         },
         ...onExpandedChange ? {
             onExpandedChange
@@ -51,12 +54,6 @@ function DataTable({ columns, data, className, isLoading = false, onRowClick, so
         ...getRowId ? {
             getRowId
         } : {},
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        ...renderExpandedRow ? {
-            getExpandedRowModel: getExpandedRowModel()
-        } : {},
         ...globalFilterFn ? {
             globalFilterFn
         } : {},

package/dist/registry/data-table/index.d.ts

@@ -1,8 +1,9 @@
-export type { ColumnDef, ColumnFiltersState, ExpandedState, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, Table as TanstackTable, VisibilityState, } from "@tanstack/react-table";
+export type { ColumnFiltersState, ColumnVisibilityState, ColumnVisibilityState as VisibilityState, ExpandedState, OnChangeFn, PaginationState, RowSelectionState, SortingState, } from "@tanstack/react-table";
+export { FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, } from "../filter-dropdown/index";
+export type { DataTableColumnDef as ColumnDef, DataTableInstance as TanstackTable, DataTableRow as Row, } from "../../lib/table-features";
 export type { DataTableProps } from "./data-table";
 export { DataTable } from "./data-table";
 export { DataTableColumnHeader } from "./data-table-column-header";
-export { FilterDropdown, type FilterDropdownOption, type FilterDropdownProps, } from "../filter-dropdown/index";
 export { dataTableFacetedFilterFn, dataTableGlobalFilterFn, } from "./data-table-filters";
 export { DataTablePagination } from "./data-table-pagination";
 export { DataTableCell, DataTableRow } from "./data-table-row";

package/dist/registry/data-table/index.js

@@ -1,6 +1,6 @@
+import { FilterDropdown } from "../filter-dropdown/index.js";
 import { DataTable } from "./data-table.js";
 import { DataTableColumnHeader } from "./data-table-column-header.js";
-import { FilterDropdown } from "../filter-dropdown/index.js";
 import { dataTableFacetedFilterFn, dataTableGlobalFilterFn } from "./data-table-filters.js";
 import { DataTablePagination } from "./data-table-pagination.js";
 import { DataTableCell, DataTableRow } from "./data-table-row.js";

package/dist/registry/filter-dropdown/filter-dropdown.d.ts

@@ -1,5 +1,5 @@
-import type { Column } from "@tanstack/react-table";
 import { type ReactNode } from "react";
+import type { DataTableColumn, RowData } from "../../lib/table-features";
 interface FilterDropdownOption {
     label: string;
     value: string;
@@ -7,14 +7,14 @@ interface FilterDropdownOption {
         className?: string;
     }>;
 }
-interface FilterDropdownProps<TData = unknown, TValue = unknown> {
+interface FilterDropdownProps<TData extends RowData = RowData, TValue = unknown> {
     title: string;
     options: FilterDropdownOption[];
     className?: string;
     /** Multi-select (default) or single-select mode */
     multiSelect?: boolean;
     /** TanStack Table column integration (optional) */
-    column?: Column<TData, TValue>;
+    column?: DataTableColumn<TData, TValue>;
     /** Standalone value — used when no column is provided */
     value?: string[] | string;
     /** Standalone onChange — used when no column is provided */
@@ -56,6 +56,6 @@ interface FilterDropdownProps<TData = unknown, TValue = unknown> {
     /** Known options for selected values that may not be loaded yet (used for the trigger label) */
     selectedOptions?: FilterDropdownOption[];
 }
-declare function FilterDropdown<TData, TValue>({ title, options, className, multiSelect, column, value: valueProp, onChange: onChangeProp, enableSearch, searchThreshold, searchPlaceholder, noOptionsMessage, noResultsMessage, align, popoverWidth, isLoading, hasMore, onLoadMore, loadingMessage, onSearchChange, searchDebounceMs, error, errorMessage, onRetry, retryLabel, selectedOptions, }: FilterDropdownProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function FilterDropdown<TData extends RowData = RowData, TValue = unknown>({ title, options, className, multiSelect, column, value: valueProp, onChange: onChangeProp, enableSearch, searchThreshold, searchPlaceholder, noOptionsMessage, noResultsMessage, align, popoverWidth, isLoading, hasMore, onLoadMore, loadingMessage, onSearchChange, searchDebounceMs, error, errorMessage, onRetry, retryLabel, selectedOptions, }: FilterDropdownProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { FilterDropdown };
 export type { FilterDropdownOption, FilterDropdownProps };

package/dist/registry/filter-dropdown/filter-dropdown.js

@@ -2,12 +2,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, SearchIcon, XIcon } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { Input } from "../input/input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
 import { Separator } from "../separator/separator.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { FilterDropdownOptionRow } from "./filter-dropdown-option.js";
 import { FILTER_DROPDOWN_LIST_SLOT, FilterDropdownError, FilterDropdownLoadingMore, FilterDropdownSentinel, FilterDropdownSkeleton } from "./filter-dropdown-states.js";
 import { useFilterDropdownSearch } from "./use-filter-dropdown-search.js";

package/dist/registry/shell/shell-theme-provider.js

@@ -42,6 +42,16 @@ const cssVarMap = {
 function isValidTheme(value) {
     return "light" === value || "dark" === value || "system" === value;
 }
+function useSystemDark() {
+    return useSyncExternalStore((cb)=>{
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        mq.addEventListener("change", cb);
+        return ()=>mq.removeEventListener("change", cb);
+    }, ()=>window.matchMedia("(prefers-color-scheme: dark)").matches, ()=>false);
+}
+function resolveSystemTheme(systemDark) {
+    return systemDark ? "dark" : "light";
+}
 function applyThemeClass(resolved) {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
@@ -69,12 +79,8 @@ function ThemeProvider({ children, defaultTheme = "system", themeConfig, storage
         const stored = localStorage.getItem(storageKey);
         return isValidTheme(stored) ? stored : defaultTheme;
     });
-    const systemDark = useSyncExternalStore((cb)=>{
-        const mq = window.matchMedia("(prefers-color-scheme: dark)");
-        mq.addEventListener("change", cb);
-        return ()=>mq.removeEventListener("change", cb);
-    }, ()=>window.matchMedia("(prefers-color-scheme: dark)").matches, ()=>false);
-    const resolvedTheme = "system" === theme ? systemDark ? "dark" : "light" : theme;
+    const systemDark = useSystemDark();
+    const resolvedTheme = "system" === theme ? resolveSystemTheme(systemDark) : theme;
     const setTheme = (newTheme)=>{
         localStorage.setItem(storageKey, newTheme);
         setThemeState(newTheme);

package/dist/registry/solution-tests/config.d.ts

@@ -1,5 +1,5 @@
-import type { ColumnDef, Table as TanstackTable } from "@tanstack/react-table";
 import type { ReactNode } from "react";
+import type { DataTableColumnDef, DataTableInstance } from "../../lib/table-features";
 import type { EvaluatorRenderers } from "./evaluators/registry";
 import type { ProcessOutputRenderers } from "./outputs/registry";
 import type { SolutionTest, SolutionTestRun } from "./types";
@@ -71,9 +71,9 @@ export type TrackSolutionTestEvent = UnionToIntersection<{
 /** Per-vertical presentation config; everything else is hard-coded in `constants`. */
 export interface SolutionTestsConfig {
     /** Columns inserted between the Test Name and Version columns. */
-    subjectColumns?: ColumnDef<SolutionTest>[];
+    subjectColumns?: DataTableColumnDef<SolutionTest>[];
     /** Custom content (e.g. faceted filters) rendered in the test-cases table toolbar. */
-    subjectToolbarContent?: (table: TanstackTable<SolutionTest>) => ReactNode;
+    subjectToolbarContent?: (table: DataTableInstance<SolutionTest>) => ReactNode;
     /** When set, the test name links to its subject. */
     getSubjectHref?: (test: SolutionTest) => string | undefined;
     /** Opens a run's details. The host owns the route + navigation; the view
@@ -98,8 +98,8 @@ export interface SolutionTestsConfig {
 }
 /** Config with defaults applied — what components read from context. */
 export interface ResolvedSolutionTestsConfig {
-    subjectColumns: ColumnDef<SolutionTest>[];
-    subjectToolbarContent?: (table: TanstackTable<SolutionTest>) => ReactNode;
+    subjectColumns: DataTableColumnDef<SolutionTest>[];
+    subjectToolbarContent?: (table: DataTableInstance<SolutionTest>) => ReactNode;
     getSubjectHref?: (test: SolutionTest) => string | undefined;
     onOpenRun?: (run: SolutionTestRun) => void;
     subjectNoun?: {

package/dist/registry/solution-tests/solution-tests-view.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "@tanstack/react-router";
 import { ChevronRightIcon, Play, PlayCircle, Square, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Alert, AlertDescription } from "../alert/alert.js";
 import { Badge } from "../badge/badge.js";
 import { Button } from "../button/button.js";
@@ -15,6 +14,7 @@ import { Switch } from "../switch/switch.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs/tabs.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
 import { renderValueOrEmptyState } from "../../lib/renderValueOrEmptyState.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { defaultRunStatusLabels, defaultTestStatusLabels } from "./constants.js";
 import { useSolutionTestsConfig } from "./context.js";
 import { DeleteConfirmDialog } from "./delete-confirm-dialog.js";

package/dist/registry/sonner/sonner.d.ts

@@ -1,4 +1,4 @@
 import { type ToasterProps } from "sonner";
 export declare const apolloToastClassNames: NonNullable<NonNullable<ToasterProps["toastOptions"]>["classNames"]>;
-declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toaster: ({ theme: _theme, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
 export { Toaster };

package/dist/registry/sonner/sonner.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
-import { useTheme } from "next-themes";
 import { Toaster } from "sonner";
+import { useTheme } from "../shell/shell-theme-provider.js";
 const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5";
 const statusTextClasses = "[&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground [&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground [&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground [&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground";
 const apolloToastClassNames = {
@@ -12,10 +12,10 @@ const apolloToastClassNames = {
     error: `!border-destructive !bg-[color-mix(in_srgb,var(--destructive)_50%,var(--card)_50%)] dark:!bg-[color-mix(in_srgb,var(--destructive)_50%,var(--popover)_50%)] ${statusTextClasses} ${iconAlign}`,
     closeButton: "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm"
 };
-const sonner_Toaster = ({ ...props })=>{
-    const { theme = "system" } = useTheme();
+const sonner_Toaster = ({ theme: _theme, ...props })=>{
+    const { resolvedTheme } = useTheme();
     return /*#__PURE__*/ jsx(Toaster, {
-        theme: "light" === theme || "dark" === theme || "system" === theme ? theme : "system",
+        theme: resolvedTheme,
         className: "toaster group",
         position: "top-center",
         duration: 5000,

package/dist/registry/table-chart/table-chart-view.js

@@ -1,9 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { columnVisibilityFeature, flexRender, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
+const tableChartFeatures = tableFeatures({
+    rowSortingFeature: rowSortingFeature,
+    columnVisibilityFeature: columnVisibilityFeature
+});
 function TableChart({ columns, rows, sort, onSortChange }) {
     const { t } = useVertexTranslation();
     const [sorting, setSorting] = useState(()=>sort ? [
@@ -43,7 +47,7 @@ function TableChart({ columns, rows, sort, onSortChange }) {
                 cell: ({ getValue })=>{
                     const value = getValue();
                     return /*#__PURE__*/ jsx("div", {
-                        className: "right" === column.align ? "text-right" : "text-left",
+                        className: "right" === column.align ? "text-right tabular-nums" : "text-left",
                         children: column.format(value)
                     });
                 }
@@ -51,10 +55,10 @@ function TableChart({ columns, rows, sort, onSortChange }) {
         columns,
         t
     ]);
-    const table = useReactTable({
+    const table = useTable({
+        features: tableChartFeatures,
         data: rows,
         columns: columnDefs,
-        getCoreRowModel: getCoreRowModel(),
         manualSorting: true,
         onSortingChange: (updater)=>{
             const newSorting = "function" == typeof updater ? updater(sorting) : updater;

package/dist/registry/timeline/timeline-marker.js

@@ -26,8 +26,8 @@ function TimelineMarker({ variant, initials, compact = false }) {
         case "user":
             return /*#__PURE__*/ jsx(MarkerCircle, {
                 compact: compact,
-                className: cn("bg-muted font-medium text-muted-foreground shadow-sm", compact ? "text-[9px]" : "text-xs"),
-                children: initials ?? "?"
+                className: "bg-muted text-xs font-medium text-muted-foreground shadow-sm",
+                children: (compact ? initials?.[0] : initials) ?? "?"
             });
         case "ai-upcoming":
         case "ai-suspended":

package/dist/registry/use-data-table/types.d.ts

@@ -1,6 +1,7 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
 export type EntityRecord = Record<string, unknown>;
-export type ColumnDefWithAccessorKey<T> = ColumnDef<T> & {
+export type ColumnDefWithAccessorKey<T extends RowData> = DataTableColumnDef<T> & {
     accessorKey: string;
 };
 export interface Column {

package/dist/registry/use-data-table/useColumnVisibility.d.ts

@@ -1,10 +1,10 @@
-import type { OnChangeFn, VisibilityState } from "@tanstack/react-table";
+import type { ColumnVisibilityState, OnChangeFn } from "@tanstack/react-table";
 export interface UseColumnVisibilityOptions {
     storageKey: string;
     allColumnKeys: string[];
     defaultVisibleColumns: string[];
 }
 export declare function useColumnVisibility({ storageKey, allColumnKeys, defaultVisibleColumns, }: UseColumnVisibilityOptions): {
-    columnVisibility: VisibilityState;
-    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    columnVisibility: ColumnVisibilityState;
+    onColumnVisibilityChange: OnChangeFn<ColumnVisibilityState>;
 };

package/dist/registry/use-data-table/useDataTable.d.ts

@@ -1,20 +1,21 @@
-import type { ColumnDef, ColumnFiltersState, RowSelectionState } from "@tanstack/react-table";
-export interface UseDataTableOptions<TData> {
+import type { ColumnFiltersState, RowData, RowSelectionState } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
+export interface UseDataTableOptions<TData extends RowData> {
     data: TData[];
-    columns: ColumnDef<TData>[];
+    columns: DataTableColumnDef<TData>[];
     isLoading?: boolean;
     storageKey: string;
     defaultColumnOrder?: string[];
     defaultVisibleColumns?: string[];
 }
-export declare function useDataTable<TData>({ data, columns, isLoading, storageKey, defaultColumnOrder: defaultColumnOrderProp, defaultVisibleColumns: defaultVisibleColumnsProp, }: UseDataTableOptions<TData>): {
+export declare function useDataTable<TData extends RowData>({ data, columns, isLoading, storageKey, defaultColumnOrder: defaultColumnOrderProp, defaultVisibleColumns: defaultVisibleColumnsProp, }: UseDataTableOptions<TData>): {
     data: TData[];
     isLoading: boolean;
-    columns: ColumnDef<TData>[];
+    columns: DataTableColumnDef<TData>[];
     sorting: import("@tanstack/react-table").SortingState;
     onSortingChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").SortingState>;
-    columnVisibility: import("@tanstack/react-table").VisibilityState;
-    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").VisibilityState>;
+    columnVisibility: import("@tanstack/react-table").ColumnVisibilityState;
+    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: import("@tanstack/react-table").OnChangeFn<string[]>;
     columnFilters: ColumnFiltersState;

package/dist/registry/use-data-table/useEntityColumns.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import type { DataTableColumnDef } from "../../lib/table-features";
 import type { Column, ColumnDefWithAccessorKey, EntityRecord, ExtraColumn, VssEntity } from "./types";
 export interface UseEntityColumnsOptions<TRecord extends EntityRecord = EntityRecord> {
     entity: VssEntity;
@@ -10,5 +10,5 @@ export interface UseEntityColumnsOptions<TRecord extends EntityRecord = EntityRe
 export declare function useEntityColumns<TRecord extends EntityRecord = EntityRecord>({ entity, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityColumnsOptions<TRecord>): {
     allColumns: Column[];
     allColumnKeys: string[];
-    columns: ColumnDef<TRecord>[];
+    columns: DataTableColumnDef<TRecord>[];
 };

package/dist/registry/use-data-table/useEntityDataTable.d.ts

@@ -12,11 +12,11 @@ export interface UseEntityDataTableOptions<TRecord extends EntityRecord = Entity
 export declare function useEntityDataTable<TRecord extends EntityRecord = EntityRecord>({ entity, storageKey: storageKeyProp, initialVisibleColumnCount, systemFields, columnOrder: columnOrderProp, extraColumns, columnOverrides, }: UseEntityDataTableOptions<TRecord>): {
     data: Record<string, unknown>[];
     isLoading: boolean;
-    columns: import("@tanstack/react-table").ColumnDef<TRecord>[];
+    columns: import("../data-table").ColumnDef<TRecord>[];
     sorting: import("@tanstack/react-table").SortingState;
     onSortingChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").SortingState>;
-    columnVisibility: import("@tanstack/react-table").VisibilityState;
-    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").VisibilityState>;
+    columnVisibility: import("@tanstack/react-table").ColumnVisibilityState;
+    onColumnVisibilityChange: import("@tanstack/react-table").OnChangeFn<import("@tanstack/react-table").ColumnVisibilityState>;
     columnOrder: string[];
     onColumnOrderChange: import("@tanstack/react-table").OnChangeFn<string[]>;
     columnFilters: ColumnFiltersState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "UiPath Apollo Vertex design system components",
   "license": "MIT",
   "keywords": [
@@ -58,7 +58,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-form": "^1.33.5",
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-table": "^9.2.3",
     "@types/luxon": "^3.7.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -68,7 +68,6 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.577.0",
     "luxon": "^3.7.1",
-    "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-joyride": "^3.0.2",
     "react-resizable-panels": "^4.7.3",
@@ -95,7 +94,7 @@
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^16.5.4 || ^17.0.0",
     "react-markdown": "^10.1.0",
-    "recharts": "^2.15.4",
+    "recharts": "^3.8.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.0.0"
@@ -143,7 +142,7 @@
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^17.0.15",
     "react-markdown": "^10.1.0",
-    "recharts": "2.15.4",
+    "recharts": "3.8.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.1.17",