Updating some components to latest versions

Author: SpicyPete

frontend/bun.lock

@@ -73,11 +73,11 @@
     "@a2a-js/sdk": "^0.3.13",
     "@autoform/react": "^4.0.0",
     "@autoform/zod": "^5.0.0",
-    "@base-ui/react": "^1.0.0",
+    "@base-ui/react": "^1.4.0",
     "@buf/redpandadata_cloud.connectrpc_query-es": "^2.2.0-20251128173054-b9f9fc6e5a70.1",
     "@buf/redpandadata_common.bufbuild_es": "^2.11.0-20260316210807-5d899910f714.1",
     "@bufbuild/cel": "^0.4.0",
-    "@bufbuild/protobuf": "^2.0.0",
+    "@bufbuild/protobuf": "^2.11.0",
     "@bufbuild/protoc-gen-es": "^2.10.0",
     "@builder.io/sdk-react": "^4.2.4",
     "@chakra-ui/object-utils": "^2.1",
@@ -97,12 +97,12 @@
     "@module-federation/runtime": "^2.3.2",
     "@monaco-editor/react": "^4.7.0",
     "@redpanda-data/ui": "^4.2.0",
-    "@stepperize/react": "^5.0.0",
+    "@stepperize/react": "^5.1.9",
     "@tailwindcss/postcss": "^4.2.4",
     "@tanstack/react-form": "^1.12.3",
     "@tanstack/react-query": "^5.90.7",
-    "@tanstack/react-router": "^1.0.0",
-    "@tanstack/react-table": "^8.0.0",
+    "@tanstack/react-router": "^1.168.10",
+    "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@tanstack/zod-adapter": "^1.158.0",
     "@types/prismjs": "^1.26.5",
@@ -112,25 +112,25 @@
     "chakra-react-select": "5.0.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "date-fns": "^4.0.0",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dexie": "^4.2.1",
     "dexie-react-hooks": "^4.2.0",
     "dotenv": "^17.2.3",
     "es-cookie": "^1.5.0",
     "framer-motion": "^7.10.3",
     "hast": "^1.0.0",
-    "hast-util-to-jsx-runtime": "^2.0.0",
+    "hast-util-to-jsx-runtime": "^2.3.6",
     "js-base64": "^3.7.8",
     "json-bigint": "^1.0.0",
     "jwt-decode": "^4.0.0",
-    "lottie-react": "^2.0.0",
+    "lottie-react": "^2.4.1",
     "lucide-react": "^1.7.0",
     "moment": "^2.30.1",
     "monaco-editor": "^0.55.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
     "monaco-yaml": "^5.4.0",
-    "motion": "^12.0.0",
+    "motion": "^12.38.0",
     "nanoid": "^5.1.6",
     "nuqs": "^2.6.0",
     "pretty-bytes": "^5.6.0",
@@ -144,26 +144,26 @@
     "react-draggable": "^4.5.0",
     "react-dropzone": "^15.0.0",
     "react-highlight-words": "^0.21.0",
-    "react-hook-form": "^7.0.0",
+    "react-hook-form": "^7.72.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^3.0.0",
+    "react-resizable-panels": "^3.0.6",
     "react-simple-code-editor": "^0.14.1",
     "react-syntax-highlighter": "^16.0.0",
-    "recharts": "^2.0.0",
+    "recharts": "^2.15.4",
     "remark-emoji": "^5.0.2",
     "remark-gfm": "^4.0.1",
-    "shiki": "^3.0.0",
-    "sonner": "^2.0.0",
+    "shiki": "^3.23.0",
+    "sonner": "^2.0.7",
     "stacktrace-js": "^2.0.2",
     "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.1",
     "uuid": "^13.0.0",
-    "vaul": "^1.0.0",
+    "vaul": "^1.1.2",
     "yaml": "^2.8.3",
-    "zod": "^4.0.0",
+    "zod": "^4.3.6",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

frontend/package.json

@@ -293,7 +293,6 @@ export function DynamicCodeBlock({
 
   return (
     <>
-      {/* @ts-expect-error React 19 style hoisting attributes (href/precedence) not yet in TS DOM types */}
       <style href="shiki-dual-theme" precedence="medium">
         {shikiDualThemeStyles}
       </style>

frontend/src/components/redpanda-ui/components/code-block-dynamic.tsx

@@ -192,8 +192,8 @@ const dialogFooterVariants = cva('flex shrink-0 p-4 [[data-slot=dialog-body]+&]:
   variants: {
     direction: {
       column: 'flex-col',
-      row: 'flex-row',
-      responsive: 'flex-col-reverse sm:flex-row',
+      row: 'flex-row items-center',
+      responsive: 'flex-col-reverse sm:flex-row sm:items-center',
     },
     justify: {
       start: 'justify-start',

frontend/src/components/redpanda-ui/components/dialog.tsx

@@ -42,7 +42,7 @@ function EditableText({
   const [isEditing, setIsEditing] = useState(autoFocus ?? false);
   const [draft, setDraft] = useState(value);
   const [textWidth, setTextWidth] = useState<number | undefined>(undefined);
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const spanRef = useRef<HTMLButtonElement>(null);
   const measureRef = useRef<HTMLSpanElement>(null);
 

frontend/src/components/redpanda-ui/components/editable-text.tsx

@@ -349,25 +349,16 @@ const MultiSelectContent = React.forwardRef<React.ComponentRef<typeof PopoverPri
         <PopoverPrimitive.Positioner align="start" className="z-50" collisionPadding={10} sideOffset={4}>
           <PopoverPrimitive.Popup
             className={cn(
-              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-[state=closed]:animate-out data-[state=open]:animate-in',
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 data-[state=closed]:animate-out data-[state=open]:animate-in',
               className
             )}
             data-testid={testId}
             ref={ref}
             render={renderWithDataState('div')}
-            style={
-              {
-                '--radix-select-content-transform-origin': 'var(--transform-origin)',
-                '--radix-select-content-available-width': 'var(--available-width)',
-                '--radix-select-content-available-height': 'var(--available-height)',
-                '--radix-select-trigger-width': 'var(--anchor-width)',
-                '--radix-select-trigger-height': 'var(--anchor-height)',
-              } as React.CSSProperties
-            }
             {...props}
           >
             <Command
-              className={cn('max-h-96 w-full min-w-[var(--radix-select-trigger-width)] px-1', className)}
+              className={cn('max-h-96 w-full min-w-[var(--anchor-width)] px-1', className)}
               shouldFilter={!context.onSearch}
             >
               {children}

frontend/src/components/redpanda-ui/components/multi-select.tsx

@@ -154,17 +154,10 @@ const SelectContent = React.forwardRef<React.ComponentRef<typeof SelectPrimitive
           className="z-50 max-h-[var(--available-height)]"
           side={side}
           sideOffset={sideOffset}
-          style={
-            {
-              '--radix-select-content-available-height': 'var(--available-height)',
-              '--radix-select-content-transform-origin': 'var(--transform-origin)',
-              '--radix-select-trigger-width': 'var(--anchor-width)',
-            } as React.CSSProperties
-          }
         >
           <SelectPrimitive.Popup
             className={cn(
-              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
               position === 'popper' &&
                 'data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
               className
@@ -178,8 +171,8 @@ const SelectContent = React.forwardRef<React.ComponentRef<typeof SelectPrimitive
             <SelectScrollUpButton />
             <SelectPrimitive.List
               className={cn(
-                'max-h-(--radix-select-content-available-height) w-full overflow-y-auto overflow-x-hidden p-1',
-                position === 'popper' && 'min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+                'max-h-(--available-height) w-full overflow-y-auto overflow-x-hidden p-1',
+                position === 'popper' && 'min-w-[var(--anchor-width)] scroll-my-1'
               )}
             >
               {children}
@@ -214,7 +207,7 @@ const SelectItem = React.forwardRef<
 >(({ className, children, testId, ...props }, ref) => (
   <SelectPrimitive.Item
     className={cn(
-      "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+      "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden *:last:flex *:last:items-center *:last:gap-2 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
       className
     )}
     data-slot="select-item"