@uipath/apollo-vertex 1.1.0 → 1.3.0

package/dist/lib/i18n.d.ts

@@ -277,6 +277,7 @@ declare const localeLoaders: {
             scroll_to_bottom: string;
             search: string;
             search_frameworks: string;
+            search_input: string;
             secondary: string;
             select_a_framework: string;
             select_all: string;
@@ -643,6 +644,7 @@ declare const localeLoaders: {
         scroll_to_bottom: string;
         search: string;
         search_frameworks: string;
+        search_input: string;
         secondary: string;
         select_a_framework: string;
         select_all: string;

package/dist/lib/table-features.d.ts

@@ -0,0 +1,38 @@
+import { type Column, type ColumnDef, type FilterFn, type ReactTable, type Row, type RowData } from "@tanstack/react-table";
+export type { RowData };
+export declare const dataTableFeatures: {
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+    globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowExpandingFeature: import("@tanstack/react-table").TableFeature;
+    columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+    columnOrderingFeature: import("@tanstack/react-table").TableFeature;
+    columnSizingFeature: import("@tanstack/react-table").TableFeature;
+    columnResizingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+    filterFns: {
+        includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inNumberRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        arrIncludes: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        inDateRange: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+        weakEquals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    };
+};
+export type DataTableFeatures = typeof dataTableFeatures;
+export type DataTableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue>;
+export type DataTableRow<TData extends RowData> = Row<DataTableFeatures, TData>;
+export type DataTableColumn<TData extends RowData, TValue = unknown> = Column<DataTableFeatures, TData, TValue>;
+export type DataTableInstance<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+export type DataTableFilterFn<TData extends RowData> = FilterFn<DataTableFeatures, TData>;

package/dist/lib/table-features.js

@@ -0,0 +1,32 @@
+import { columnFilteringFeature, columnOrderingFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures } from "@tanstack/react-table";
+const dataTableFeatures = tableFeatures({
+    rowSortingFeature: rowSortingFeature,
+    columnFilteringFeature: columnFilteringFeature,
+    globalFilteringFeature: globalFilteringFeature,
+    rowPaginationFeature: rowPaginationFeature,
+    rowSelectionFeature: rowSelectionFeature,
+    rowExpandingFeature: rowExpandingFeature,
+    columnVisibilityFeature: columnVisibilityFeature,
+    columnOrderingFeature: columnOrderingFeature,
+    columnSizingFeature: columnSizingFeature,
+    columnResizingFeature: columnResizingFeature,
+    sortedRowModel: createSortedRowModel(),
+    filteredRowModel: createFilteredRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    expandedRowModel: createExpandedRowModel(),
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        text: sortFn_text,
+        datetime: sortFn_datetime,
+        basic: sortFn_basic
+    },
+    filterFns: {
+        includesString: filterFn_includesString,
+        inNumberRange: filterFn_inNumberRange,
+        equals: filterFn_equals,
+        arrIncludes: filterFn_arrIncludes,
+        inDateRange: filterFn_inDateRange,
+        weakEquals: filterFn_weakEquals
+    }
+});
+export { dataTableFeatures };

package/dist/locales/en.json

@@ -274,6 +274,7 @@
   "scroll_to_bottom": "Scroll to bottom",
   "search": "Search...",
   "search_frameworks": "Search frameworks",
+  "search_input": "Search",
   "secondary": "Secondary",
   "select_a_framework": "Select a framework",
   "select_all": "Select all",

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

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, Cell, LabelList, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, LabelList, Rectangle, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../chart/chart.js";
 import { BarLabel } from "./bar-label.js";
 import { MetricColumn } from "./metric-column.js";
@@ -9,6 +9,12 @@ import { isRechartsBarData } from "./util/recharts-bar-data.js";
 const BAR_SIZE = 20;
 const BAR_GAP = 4;
 const CATEGORY_GAP = 8;
+function PaletteBar(props) {
+    return /*#__PURE__*/ jsx(Rectangle, {
+        ...props,
+        fill: PALETTE[props.index % PALETTE.length]
+    });
+}
 function bar_chart_view_BarChart({ rows, series }) {
     const dimensionKeys = rows[0]?.dimensions.map((d)=>d.key) ?? [];
     const dimensionCount = dimensionKeys.length;
@@ -159,24 +165,20 @@ function bar_chart_view_BarChart({ rows, series }) {
                                 }),
                                 cursor: false
                             }),
-                            1 === seriesCount ? /*#__PURE__*/ jsxs(Bar, {
+                            1 === seriesCount ? /*#__PURE__*/ jsx(Bar, {
                                 dataKey: series[0]?.label ?? "",
                                 barSize: BAR_SIZE,
-                                children: [
-                                    /*#__PURE__*/ jsx(LabelList, {
-                                        content: (props)=>{
-                                            const payload = isRechartsBarData(props.payload) ? props.payload : null;
-                                            const formatted = payload && series[0] ? payload.__formatted[series[0].id] ?? "" : "";
-                                            return /*#__PURE__*/ jsx(BarLabel, {
-                                                ...props,
-                                                formatted: formatted
-                                            });
-                                        }
-                                    }),
-                                    rechartsData.map((row, index)=>/*#__PURE__*/ jsx(Cell, {
-                                            fill: PALETTE[index % PALETTE.length]
-                                        }, row.__id))
-                                ]
+                                shape: PaletteBar,
+                                children: /*#__PURE__*/ jsx(LabelList, {
+                                    content: (props)=>{
+                                        const payload = isRechartsBarData(props.payload) ? props.payload : null;
+                                        const formatted = payload && series[0] ? payload.__formatted[series[0].id] ?? "" : "";
+                                        return /*#__PURE__*/ jsx(BarLabel, {
+                                            ...props,
+                                            formatted: formatted
+                                        });
+                                    }
+                                })
                             }) : series.map((s, idx)=>/*#__PURE__*/ jsx(Bar, {
                                     dataKey: s.label,
                                     fill: s.color ?? COLORS[idx % COLORS.length],

package/dist/registry/bar-chart/util/get-bar-color.js

@@ -5,8 +5,8 @@ function getBarColor({ seriesCount, seriesIndex, item, payload, rechartsData })
     const payloadFill = item.payload?.fill;
     if (1 === seriesCount) {
         const rowIndex = rechartsData.findIndex((row)=>row.__id === payload?.__id);
-        const fallbackColor = PALETTE[rowIndex >= 0 ? rowIndex % PALETTE.length : 0];
-        return assertDefined(itemColor ?? payloadFill ?? fallbackColor, "Bar color");
+        if (rowIndex >= 0) return assertDefined(PALETTE[rowIndex % PALETTE.length], "Bar color");
+        return assertDefined(itemColor ?? payloadFill ?? PALETTE["0"], "Bar color");
     }
     const fallbackColor = COLORS[seriesIndex % COLORS.length];
     return assertDefined(itemColor ?? payloadFill ?? fallbackColor, "Bar color");

package/dist/registry/calendar/calendar.js

@@ -34,10 +34,10 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
             caption_label: cn("select-none font-medium", "label" === captionLayout ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
             weekdays: cn("flex", defaultClassNames.weekdays),
-            weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
+            weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-xs select-none", defaultClassNames.weekday),
             week: cn("flex w-full mt-2", defaultClassNames.week),
             week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
-            week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+            week_number: cn("text-xs select-none text-muted-foreground", defaultClassNames.week_number),
             day: cn("relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
             range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
             range_middle: cn("rounded-none", defaultClassNames.range_middle),

package/dist/registry/chart/chart.d.ts

@@ -4,21 +4,23 @@ declare const THEMES: {
     readonly light: "";
     readonly dark: ".dark";
 };
-export type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+export type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
 }): import("react/jsx-runtime").JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
@@ -31,10 +33,10 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps, "accessibilityLayer">): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+} & RechartsPrimitive.DefaultLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/registry/chart/chart.js

@@ -1,19 +1,33 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { Legend, ResponsiveContainer, Tooltip } from "recharts";
 import { cn } from "../../lib/utils.js";
 const THEMES = {
     light: "",
     dark: ".dark"
 };
+const THEME_SELECTORS = [
+    [
+        "light",
+        THEMES.light
+    ],
+    [
+        "dark",
+        THEMES.dark
+    ]
+];
+const INITIAL_DIMENSION = {
+    width: 320,
+    height: 200
+};
 const ChartContext = /*#__PURE__*/ createContext(null);
 function useChart() {
     const context = useContext(ChartContext);
     if (!context) throw new Error("useChart must be used within a <ChartContainer />");
     return context;
 }
-function ChartContainer({ id, className, children, config, ...props }) {
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
     const uniqueId = useId();
     const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`;
     return /*#__PURE__*/ jsx(ChartContext.Provider, {
@@ -23,7 +37,7 @@ function ChartContainer({ id, className, children, config, ...props }) {
         children: /*#__PURE__*/ jsxs("div", {
             "data-slot": "chart",
             "data-chart": chartId,
-            className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+            className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
             ...props,
             children: [
                 /*#__PURE__*/ jsx(ChartStyle, {
@@ -31,6 +45,7 @@ function ChartContainer({ id, className, children, config, ...props }) {
                     config: config
                 }),
                 /*#__PURE__*/ jsx(ResponsiveContainer, {
+                    initialDimension: initialDimension,
                     children: children
                 })
             ]
@@ -42,7 +57,7 @@ const ChartStyle = ({ id, config })=>{
     if (0 === colorConfig.length) return null;
     return /*#__PURE__*/ jsx("style", {
         dangerouslySetInnerHTML: {
-            __html: Object.entries(THEMES).map(([theme, prefix])=>`
+            __html: THEME_SELECTORS.map(([theme, prefix])=>`
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, itemConfig])=>{
                     const color = itemConfig.theme?.[theme] ?? itemConfig.color;
@@ -56,10 +71,10 @@ ${colorConfig.map(([key, itemConfig])=>{
 const ChartTooltip = Tooltip;
 function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
     const { config } = useChart();
-    function getTooltipLabel() {
+    const tooltipLabel = useMemo(()=>{
         if (hideLabel || !payload?.length) return null;
         const [item] = payload;
-        const key = `${(labelKey ?? item?.dataKey) || (item?.name ?? "value")}`;
+        const key = chartConfigKey(labelKey ?? item?.dataKey ?? item?.name);
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         const value = labelKey || "string" != typeof label ? itemConfig?.label : config[label]?.label ?? label;
         if (labelFormatter) return /*#__PURE__*/ jsx("div", {
@@ -71,22 +86,29 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
             className: cn("font-medium", labelClassName),
             children: value
         });
-    }
-    const tooltipLabel = getTooltipLabel();
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
     if (!active || !payload?.length) return null;
     const nestLabel = 1 === payload.length && "dot" !== indicator;
     return /*#__PURE__*/ jsxs("div", {
-        className: cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
+        className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
         children: [
             nestLabel ? null : tooltipLabel,
             /*#__PURE__*/ jsx("div", {
                 className: "grid gap-1.5",
                 children: payload.filter((item)=>"none" !== item.type).map((item, index)=>{
-                    const key = `${(nameKey ?? item.name) || (item.dataKey ?? "value")}`;
+                    const key = chartConfigKey(nameKey ?? item.name ?? item.dataKey);
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
-                    const indicatorColor = color ?? item.payload.fill ?? item.color;
+                    const indicatorColor = readIndicatorColor(color, item);
                     return /*#__PURE__*/ jsx("div", {
-                        className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", "dot" === indicator && "items-center"),
+                        className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", "dot" === indicator && "items-center"),
                         children: formatter && item?.value != null && item.name ? formatter(item.value, item.name, item, index, item.payload) : /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 itemConfig?.icon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ jsx("div", {
@@ -114,15 +136,15 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                                                 })
                                             ]
                                         }),
-                                        item.value && /*#__PURE__*/ jsx("span", {
-                                            className: "text-foreground font-mono font-medium tabular-nums",
-                                            children: item.value.toLocaleString()
+                                        null != item.value && /*#__PURE__*/ jsx("span", {
+                                            className: "font-mono font-medium text-foreground tabular-nums",
+                                            children: "number" == typeof item.value ? item.value.toLocaleString() : String(item.value)
                                         })
                                     ]
                                 })
                             ]
                         })
-                    }, item.dataKey);
+                    }, index);
                 })
             })
         ]
@@ -134,11 +156,11 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
     if (!payload?.length) return null;
     return /*#__PURE__*/ jsx("div", {
         className: cn("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className),
-        children: payload.filter((item)=>"none" !== item.type).map((item)=>{
-            const key = String(nameKey ?? item.dataKey ?? "value");
+        children: payload.filter((item)=>"none" !== item.type).map((item, index)=>{
+            const key = chartConfigKey(nameKey ?? item.dataKey);
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             return /*#__PURE__*/ jsxs("div", {
-                className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
+                className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
                 children: [
                     itemConfig?.icon && !hideIcon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : /*#__PURE__*/ jsx("div", {
                         className: "h-2 w-2 shrink-0 rounded-[2px]",
@@ -148,10 +170,20 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
                     }),
                     itemConfig?.label
                 ]
-            }, item.value);
+            }, index);
         })
     });
 }
+function chartConfigKey(value) {
+    if ("string" == typeof value || "number" == typeof value || "function" == typeof value) return String(value);
+    return "value";
+}
+function readIndicatorColor(color, item) {
+    const point = item.payload;
+    if ("object" != typeof point || null === point || !("fill" in point)) return color ?? item.color;
+    const { fill } = point;
+    return color ?? ("string" == typeof fill ? fill : item.color);
+}
 function getPayloadConfigFromPayload(config, payload, key) {
     if ("object" != typeof payload || null === payload) return;
     const payloadPayload = "payload" in payload && "object" == typeof payload.payload && null !== payload.payload ? payload.payload : null;

package/dist/registry/command/command.js

@@ -5,6 +5,7 @@ import { SearchIcon } from "lucide-react";
 import "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function command_Command({ className, ...props }) {
     return /*#__PURE__*/ jsx(Command, {
         "data-slot": "command",
@@ -39,6 +40,7 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
     });
 }
 function CommandInput({ className, ...props }) {
+    const { t } = useVertexTranslation();
     return /*#__PURE__*/ jsxs("div", {
         "data-slot": "command-input-wrapper",
         className: "flex h-9 items-center gap-2 border-b px-3",
@@ -48,6 +50,7 @@ function CommandInput({ className, ...props }) {
             }),
             /*#__PURE__*/ jsx(Command.Input, {
                 "data-slot": "command-input",
+                "aria-label": t("search_input"),
                 className: cn("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
                 ...props
             })

package/dist/registry/confidence-signal/confidence-signal-chip.js

@@ -5,7 +5,7 @@ import { SignalBars } from "./confidence-signal-bars.js";
 import { LEVEL_CONFIG } from "./confidence-signal-levels.js";
 function ConfidenceSignalChip({ level, label, accessibleLabel, animateIn = false, interactive = false, className, ...props }) {
     return /*#__PURE__*/ jsxs("button", {
-        className: cn("inline-flex items-center gap-1.5 text-xs font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", LEVEL_CONFIG[level].textClass, interactive && "cursor-pointer", className),
+        className: cn("relative inline-flex items-center gap-1.5 text-xs font-semibold focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", "after:absolute after:top-1/2 after:left-1/2 after:size-full after:min-h-6 after:min-w-6 after:-translate-x-1/2 after:-translate-y-1/2", LEVEL_CONFIG[level].textClass, interactive && "cursor-pointer", className),
         "aria-label": accessibleLabel,
         ...props,
         type: "button",

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

@@ -1,8 +1,9 @@
-import type { Column } from "@tanstack/react-table";
+import { type RowData } from "@tanstack/react-table";
 import * as React from "react";
-interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
-    column: Column<TData, TValue>;
+import type { DataTableColumn } from "../../lib/table-features";
+interface DataTableColumnHeaderProps<TData extends RowData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+    column: DataTableColumn<TData, TValue>;
     title: string;
 }
-declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableColumnHeader<TData extends RowData, TValue>({ column, title, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export { DataTableColumnHeader };

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Subscribe } from "@tanstack/react-table";
 import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
 import "react";
 import { Button } from "../button/button.js";
@@ -16,29 +17,31 @@ function SortIcon({ sortDirection }) {
     });
 }
 function DataTableColumnHeader({ column, title, className }) {
-    "use no memo";
     if (!column.getCanSort()) return /*#__PURE__*/ jsx("div", {
         className: cn(className),
         children: title
     });
-    return /*#__PURE__*/ jsx("div", {
-        "data-slot": "data-table-column-header",
-        className: cn("flex items-center gap-2", className),
-        children: /*#__PURE__*/ jsxs(Button, {
-            variant: "ghost",
-            size: "sm",
-            onClick: ()=>column.toggleSorting("asc" === column.getIsSorted()),
-            className: "group/sort gap-1.5 -mx-2.5 -my-1 px-2.5 text-xs font-semibold text-muted-foreground",
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: "truncate",
-                    children: title
-                }),
-                /*#__PURE__*/ jsx(SortIcon, {
-                    sortDirection: column.getIsSorted()
+    return /*#__PURE__*/ jsx(Subscribe, {
+        source: column.table.atoms.sorting,
+        children: ()=>/*#__PURE__*/ jsx("div", {
+                "data-slot": "data-table-column-header",
+                className: cn("flex items-center gap-2", className),
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: ()=>column.toggleSorting("asc" === column.getIsSorted()),
+                    className: "group/sort gap-1.5 -mx-2.5 -my-1 px-2.5 text-xs font-semibold text-muted-foreground",
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx(SortIcon, {
+                            sortDirection: column.getIsSorted()
+                        })
+                    ]
                 })
-            ]
-        })
+            })
     });
 }
 export { DataTableColumnHeader };

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

@@ -1,12 +1,13 @@
-import type { Table as TanstackTable } from "@tanstack/react-table";
-interface DataTableExpandAllToggleProps<TData> {
-    table: TanstackTable<TData>;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableInstance } from "../../lib/table-features";
+interface DataTableExpandAllToggleProps<TData extends RowData> {
+    table: DataTableInstance<TData>;
 }
 /**
  * Expand/collapse-all toggle for a data table's expand-column header. Reflects
  * and toggles the table's all-rows-expanded state, with distinct double-chevron
  * icons to set it apart from the per-row single-chevron expand controls.
  */
-declare function DataTableExpandAllToggle<TData>({ table, }: DataTableExpandAllToggleProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableExpandAllToggle<TData extends RowData>({ table, }: DataTableExpandAllToggleProps<TData>): import("react/jsx-runtime").JSX.Element;
 export { DataTableExpandAllToggle };
 export type { DataTableExpandAllToggleProps };

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { ChevronsDownUp, ChevronsUpDown } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function DataTableExpandAllToggle({ table }) {
     const { t } = useVertexTranslation();
     const allExpanded = table.getIsAllRowsExpanded();

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

@@ -1,3 +1,4 @@
-import type { Row, RowData } from "@tanstack/react-table";
-export declare const dataTableGlobalFilterFn: (row: Row<RowData>, _columnId: string, filterValue: string) => boolean;
-export declare const dataTableFacetedFilterFn: (row: Row<RowData>, columnId: string, filterValue: unknown) => boolean;
+import type { RowData } from "@tanstack/react-table";
+import type { DataTableRow } from "../../lib/table-features";
+export declare function dataTableGlobalFilterFn<TData extends RowData>(row: DataTableRow<TData>, _columnId: string, filterValue: string): boolean;
+export declare function dataTableFacetedFilterFn<TData extends RowData>(row: DataTableRow<TData>, columnId: string, filterValue: unknown): boolean;

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

@@ -1,4 +1,4 @@
-const dataTableGlobalFilterFn = (row, _columnId, filterValue)=>{
+function dataTableGlobalFilterFn(row, _columnId, filterValue) {
     if (!filterValue) return true;
     const searchStr = filterValue.toLowerCase();
     return row.getVisibleCells().some((cell)=>{
@@ -7,10 +7,10 @@ const dataTableGlobalFilterFn = (row, _columnId, filterValue)=>{
         const displayValue = meta?.getFilterValue ? meta.getFilterValue(value, row) : "string" == typeof value ? value : "number" == typeof value || "boolean" == typeof value ? String(value) : "";
         return displayValue.toLowerCase().includes(searchStr);
     });
-};
-const dataTableFacetedFilterFn = (row, columnId, filterValue)=>{
+}
+function dataTableFacetedFilterFn(row, columnId, filterValue) {
     if (!filterValue || !Array.isArray(filterValue) || 0 === filterValue.length) return true;
     const cellValue = String(row.getValue(columnId) ?? "");
     return filterValue.includes(cellValue);
-};
+}
 export { dataTableFacetedFilterFn, dataTableGlobalFilterFn };

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

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

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

@@ -1,19 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
-import { useVertexTranslation } from "../../lib/vertex-translation.js";
 import { Button } from "../button/button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
 import { cn } from "../../lib/utils.js";
+import { useVertexTranslation } from "../../lib/vertex-translation.js";
 function DataTablePagination({ table, paginationSizes = [
     10,
     25,
     50,
     100
 ], className }) {
-    "use no memo";
     const { t } = useVertexTranslation();
-    const { pageIndex, pageSize } = table.getState().pagination;
+    const { pageIndex, pageSize } = table.state.pagination;
     const totalRows = table.getFilteredRowModel().rows.length;
     const pageCount = table.getPageCount();
     const canPreviousPage = pageIndex > 0;

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

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