@vendure/dashboard 3.3.6-master-202507030835 → 3.3.6-master-202507031258

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507030835",
+  "version": "3.3.6-master-202507031258",
   "type": "module",
   "repository": {
     "type": "git",
@@ -54,32 +54,23 @@
     "@lingui/core": "^5.2.0",
     "@lingui/react": "^5.2.0",
     "@lingui/vite-plugin": "^5.2.0",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/vite": "^4.1.5",
     "@tanstack/eslint-plugin-query": "^5.66.1",
     "@tanstack/react-query": "^5.66.7",
@@ -95,39 +86,35 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507030835",
-    "@vendure/core": "^3.3.6-master-202507030835",
+    "@vendure/common": "^3.3.6-master-202507031258",
+    "@vendure/core": "^3.3.6-master-202507031258",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
+    "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.6.0",
     "gql.tada": "^1.8.10",
     "graphql": "^16.10.0",
-    "input-otp": "^1.4.2",
     "json-edit-react": "^1.23.1",
     "lucide-react": "^0.475.0",
     "motion": "^12.6.2",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
-    "react-day-picker": "^9.7.0",
+    "react-day-picker": "^9.6.7",
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.8",
     "react-grid-layout": "^1.5.1",
-    "react-hook-form": "^7.59.0",
-    "react-resizable-panels": "^3.0.3",
-    "recharts": "^2.15.4",
-    "sonner": "^2.0.5",
+    "react-hook-form": "^7.54.2",
+    "recharts": "^2.15.1",
+    "sonner": "^2.0.1",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.1.5",
     "tailwindcss-animate": "^1.0.7",
     "tsconfig-paths": "^4.2.0",
     "tw-animate-css": "^1.2.9",
-    "vaul": "^1.1.2",
     "vite": "^6.3.5",
-    "zod": "^3.25.71"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
@@ -143,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "d79942fa16b812acfb665834088b0416dfde4670"
+  "gitHead": "6033754f1547a7a1f9c49b1b97c645eda8405973"
 }

package/src/app/routes/_authenticated/_collections/components/move-collections-dialog.tsx

@@ -3,8 +3,8 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 
-import { Alert, AlertDescription } from '@/components/ui/alert.js';
-import { Button } from '@/components/ui/button.js';
+import { Alert, AlertDescription } from '@/vdb/components/ui/alert.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -12,11 +12,11 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { api } from '@/graphql/api.js';
-import { Trans, useLingui } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { ChevronRight, Folder, FolderOpen, Search } from 'lucide-react';
 
 import { collectionListForMoveDocument, moveCollectionDocument } from '../collections.graphql.js';

package/src/app/routes/_authenticated/_customers/components/customer-address-card.tsx

@@ -11,7 +11,6 @@ import {
     DialogTrigger,
 } from '@/vdb/components/ui/dialog.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Button } from '@/vdb/index.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { useMutation } from '@tanstack/react-query';
 import { EditIcon, TrashIcon } from 'lucide-react';
@@ -121,10 +120,8 @@ export function CustomerAddressCard({
                 <div className="flex gap-4 mt-3 pt-3 border-t border-border">
                     {editable && (
                         <Dialog open={open} onOpenChange={setOpen}>
-                            <DialogTrigger asChild>
-                                <Button size="icon" variant="secondary">
-                                    <EditIcon />
-                                </Button>
+                            <DialogTrigger>
+                                <EditIcon className="w-4 h-4" />
                             </DialogTrigger>
                             <DialogContent>
                                 <DialogHeader>
@@ -148,9 +145,7 @@ export function CustomerAddressCard({
                                 onDelete?.();
                             }}
                         >
-                            <Button size="icon" variant="destructive">
-                                <TrashIcon />
-                            </Button>
+                            <TrashIcon className="w-4 h-4 text-destructive" />
                         </ConfirmationDialog>
                     )}
                 </div>

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -21,7 +21,10 @@ interface DataTableBulkActionsProps<TData> {
     bulkActions: BulkAction[];
 }
 
-export function DataTableBulkActions<TData>({ table, bulkActions }: DataTableBulkActionsProps<TData>) {
+export function DataTableBulkActions<TData>({
+    table,
+    bulkActions,
+}: Readonly<DataTableBulkActionsProps<TData>>) {
     const { pageId } = usePage();
     const { blockId } = usePageBlock();
 
@@ -57,13 +60,16 @@ export function DataTableBulkActions<TData>({ table, bulkActions }: DataTableBul
     allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
 
     return (
-        <div className="flex items-center gap-2 px-2 py-1 bg-muted/50 rounded-md border">
+        <div
+            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-white shadow-2xl rounded-md border"
+            style={{ height: 'auto', maxHeight: '60px' }}
+        >
             <span className="text-sm text-muted-foreground">
                 <Trans>{selection.length} selected</Trans>
             </span>
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-8">
+                    <Button variant="outline" size="sm" className="h-8 shadow-none">
                         <Trans>With selected...</Trans>
                         <ChevronDown className="ml-2 h-4 w-4" />
                     </Button>

package/src/lib/components/data-table/data-table.tsx

@@ -207,8 +207,8 @@ export function DataTable<TData>({
                     {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
                 </div>
             </div>
-            <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
-            <div className="rounded-md border my-2">
+
+            <div className="rounded-md border my-2 relative">
                 <Table>
                     <TableHeader>
                         {table.getHeaderGroups().map(headerGroup => (
@@ -268,6 +268,7 @@ export function DataTable<TData>({
                         )}
                     </TableBody>
                 </Table>
+                <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
             </div>
             <DataTablePagination table={table} />
         </>

package/src/lib/components/shared/translatable-form-field.tsx

@@ -49,6 +49,7 @@ export const TranslatableFormFieldWrapper = <
     label,
     description,
     render,
+    renderFormControl,
     ...props
 }: TranslatableFormFieldWrapperProps<TFieldValues>) => {
     return (
@@ -58,7 +59,7 @@ export const TranslatableFormFieldWrapper = <
             render={renderArgs => (
                 <FormItem>
                     {label && <FormLabel>{label}</FormLabel>}
-                    <FormControl>{render(renderArgs)}</FormControl>
+                    {renderFormControl ? <FormControl>{render(renderArgs)}</FormControl> : render(renderArgs)}
                     {description && <FormDescription>{description}</FormDescription>}
                     <FormMessage />
                 </FormItem>

package/src/lib/components/ui/accordion.tsx

@@ -1,64 +1,59 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from '@/vdb/lib/utils.js';
 
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+    return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+    return (
+        <AccordionPrimitive.Item
+            data-slot="accordion-item"
+            className={cn('border-b last:border-b-0', className)}
+            {...props}
+        />
+    );
 }
 
 function AccordionTrigger({
-  className,
-  children,
-  ...props
+    className,
+    children,
+    ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
+    return (
+        <AccordionPrimitive.Header className="flex">
+            <AccordionPrimitive.Trigger
+                data-slot="accordion-trigger"
+                className={cn(
+                    'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+            </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+    );
 }
 
 function AccordionContent({
-  className,
-  children,
-  ...props
+    className,
+    children,
+    ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
+    return (
+        <AccordionPrimitive.Content
+            data-slot="accordion-content"
+            className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+            {...props}
+        >
+            <div className={cn('pt-0 pb-4', className)}>{children}</div>
+        </AccordionPrimitive.Content>
+    );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/lib/components/ui/alert-dialog.tsx

@@ -1,157 +1,128 @@
-"use client"
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { buttonVariants } from '@/vdb/components/ui/button.js';
+import { cn } from '@/vdb/lib/utils.js';
 
-import { cn } from "@/vdb/lib/utils"
-import { buttonVariants } from "@/vdb/components/ui/button"
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+    return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+    return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
 function AlertDialogOverlay({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <AlertDialogPrimitive.Overlay
+            data-slot="alert-dialog-overlay"
+            className={cn(
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+                className,
+            )}
+            {...props}
+        />
+    );
 }
 
 function AlertDialogContent({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Content
+                data-slot="alert-dialog-content"
+                className={cn(
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    );
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-dialog-header"
+            className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+            {...props}
+        />
+    );
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return (
+        <div
+            data-slot="alert-dialog-footer"
+            className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+            {...props}
+        />
+    );
 }
 
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return (
+        <AlertDialogPrimitive.Title
+            data-slot="alert-dialog-title"
+            className={cn('text-lg font-semibold', className)}
+            {...props}
+        />
+    );
 }
 
 function AlertDialogDescription({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+    return (
+        <AlertDialogPrimitive.Description
+            data-slot="alert-dialog-description"
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    );
 }
 
 function AlertDialogAction({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
+    return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
 }
 
 function AlertDialogCancel({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
+    return (
+        <AlertDialogPrimitive.Cancel
+            className={cn(buttonVariants({ variant: 'outline' }), className)}
+            {...props}
+        />
+    );
 }
 
 export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+};