@vendure/dashboard 3.5.0-minor-202510071456 → 3.5.0-minor-202510201346

package/src/lib/components/data-table/column-header-wrapper.tsx

@@ -0,0 +1,106 @@
+import { CopyableText } from '@/vdb/components/shared/copyable-text.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { cn } from '@/vdb/lib/utils.js';
+import React, { useEffect, useState } from 'react';
+import { DevModeButton } from '../../framework/layout-engine/dev-mode-button.js';
+
+// Singleton state for hover tracking
+let globalHoveredColumnId: string | null = null;
+const columnHoverListeners: Set<(id: string | null) => void> = new Set();
+
+const setGlobalHoveredColumnId = (id: string | null) => {
+    globalHoveredColumnId = id;
+    columnHoverListeners.forEach(listener => listener(id));
+};
+
+export interface ColumnHeaderWrapperProps {
+    children: React.ReactNode;
+    columnId: string;
+}
+
+export function ColumnHeaderWrapper({ children, columnId }: Readonly<ColumnHeaderWrapperProps>) {
+    const { settings } = useUserSettings();
+    const page = usePage();
+    const pageBlock = usePageBlock({ optional: true });
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [hoveredId, setHoveredId] = useState<string | null>(globalHoveredColumnId);
+    const blockId = pageBlock?.blockId ?? null;
+    const pageId = page.pageId;
+    const isHovered = hoveredId === columnId;
+
+    // Subscribe to global hover changes
+    useEffect(() => {
+        const listener = (newHoveredId: string | null) => {
+            setHoveredId(newHoveredId);
+        };
+        columnHoverListeners.add(listener);
+        return () => {
+            columnHoverListeners.delete(listener);
+        };
+    }, []);
+
+    const setHoverId = (id: string | null) => {
+        setGlobalHoveredColumnId(id);
+    };
+
+    const handleMouseEnter = () => {
+        setHoverId(columnId);
+    };
+
+    const handleMouseLeave = () => {
+        setHoverId(null);
+    };
+
+    if (settings.devMode) {
+        return (
+            <div
+                className={cn(
+                    'ring-2 ring-transparent rounded-md transition-all delay-50 relative min-h-8 flex flex-col justify-center',
+                    isHovered || isPopoverOpen ? 'ring-dev-mode ring-offset-1 ring-offset-background' : '',
+                )}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div
+                    className={cn(
+                        `absolute right-0 top-0 transition-all delay-50 z-10`,
+                        isHovered || isPopoverOpen ? 'visible' : 'invisible',
+                    )}
+                >
+                    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                        <PopoverTrigger asChild>
+                            <DevModeButton className={`h-5 w-5`} />
+                        </PopoverTrigger>
+                        <PopoverContent className="w-48 p-3">
+                            <div className="space-y-2">
+                                <div className="space-y-1">
+                                    {pageId && (
+                                        <div className="text-xs">
+                                            <div className="text-muted-foreground mb-0.5">pageId</div>
+                                            <CopyableText text={pageId} />
+                                        </div>
+                                    )}
+                                    {blockId && (
+                                        <div className="text-xs">
+                                            <div className="text-muted-foreground mb-0.5">blockId</div>
+                                            <CopyableText text={blockId} />
+                                        </div>
+                                    )}
+                                    <div className="text-xs">
+                                        <div className="text-muted-foreground mb-0.5">column</div>
+                                        <CopyableText text={columnId} />
+                                    </div>
+                                </div>
+                            </div>
+                        </PopoverContent>
+                    </Popover>
+                </div>
+                {children}
+            </div>
+        );
+    }
+    return children;
+}

package/src/lib/components/data-table/data-table-bulk-action-item.tsx

@@ -1,6 +1,6 @@
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
-import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { LucideIcon } from 'lucide-react';
 import { useState } from 'react';
 import {
@@ -30,6 +30,7 @@ export interface DataTableBulkActionItemProps {
     onClick: () => void;
     className?: string;
     requiresPermission?: string[];
+    disabled?: boolean;
 }
 
 /**
@@ -63,13 +64,14 @@ export interface DataTableBulkActionItemProps {
  * @since 3.4.0
  */
 export function DataTableBulkActionItem({
-                                            label,
-                                            icon: Icon,
-                                            confirmationText,
-                                            className,
-                                            onClick,
-                                            requiresPermission,
-                                        }: Readonly<DataTableBulkActionItemProps>) {
+    label,
+    icon: Icon,
+    confirmationText,
+    className,
+    onClick,
+    requiresPermission,
+    disabled,
+}: Readonly<DataTableBulkActionItemProps>) {
     const [isOpen, setIsOpen] = useState(false);
     const { hasPermissions } = usePermissions();
     const userHasPermission = hasPermissions(requiresPermission ?? []);
@@ -100,7 +102,7 @@ export function DataTableBulkActionItem({
         return (
             <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
                 <AlertDialogTrigger asChild>
-                    <DropdownMenuItem onClick={handleClick} disabled={!userHasPermission}>
+                    <DropdownMenuItem onClick={handleClick} disabled={!userHasPermission || disabled}>
                         {Icon && <Icon className={cn('mr-1 h-4 w-4', className)} />}
                         <span className={cn('text-sm', className)}>
                             <Trans>{label}</Trans>

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

@@ -19,9 +19,9 @@ interface DataTableBulkActionsProps<TData> {
 }
 
 export function DataTableBulkActions<TData>({
-                                                table,
-                                                bulkActions,
-                                            }: Readonly<DataTableBulkActionsProps<TData>>) {
+    table,
+    bulkActions,
+}: Readonly<DataTableBulkActionsProps<TData>>) {
     const allBulkActions = useAllBulkActions(bulkActions);
 
     // Cache to store selected items across page changes
@@ -60,7 +60,7 @@ export function DataTableBulkActions<TData>({
 
     return (
         <div
-            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
+            className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 shadow-2xl bg-background rounded-md border z-50"
             style={{
                 height: 'auto',
                 maxHeight: '60px',

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

@@ -3,6 +3,7 @@ import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js'
 import { ColumnDef, HeaderContext } from '@tanstack/table-core';
 import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
 import { useMemo } from 'react';
+import { ColumnHeaderWrapper } from './column-header-wrapper.js';
 
 export interface DataTableColumnHeaderProps {
     customConfig: Partial<ColumnDef<any>>;
@@ -29,19 +30,21 @@ export function DataTableColumnHeader({ headerContext, customConfig }: Readonly<
     const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;
 
     return (
-        <div className="flex items-center">
-            {isSortable && (
-                <Button size="icon-sm" variant="ghost" onClick={() => column.toggleSorting(nextSort)}>
-                    {columSort === 'desc' ? (
-                        <ArrowUp />
-                    ) : columSort === 'asc' ? (
-                        <ArrowDown />
-                    ) : (
-                        <ArrowUpDown className="opacity-50" />
-                    )}
-                </Button>
-            )}
-            <div>{display}</div>
-        </div>
+        <ColumnHeaderWrapper columnId={column.id}>
+            <div className="flex items-center">
+                {isSortable && (
+                    <Button size="icon-sm" variant="ghost" onClick={() => column.toggleSorting(nextSort)}>
+                        {columSort === 'desc' ? (
+                            <ArrowUp />
+                        ) : columSort === 'asc' ? (
+                            <ArrowDown />
+                        ) : (
+                            <ArrowUpDown className="opacity-50" />
+                        )}
+                    </Button>
+                )}
+                <div>{display}</div>
+            </div>
+        </ColumnHeaderWrapper>
     );
 }

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

@@ -69,6 +69,7 @@ export function DataTableFacetedFilter<TData, TValue>({
             setResolvedOptions(options);
         }
     }, [optionsFn]);
+    const isBoolean = (column?.columnDef?.meta as any)?.fieldInfo.type === 'Boolean';
 
     return (
         <Popover>
@@ -108,7 +109,7 @@ export function DataTableFacetedFilter<TData, TValue>({
             </PopoverTrigger>
             <PopoverContent className="w-[200px] p-0" align="start">
                 <Command>
-                    <CommandInput placeholder={title} />
+                    {resolvedOptions.length > 2 ? <CommandInput placeholder={title} /> : null}
                     <CommandList>
                         <CommandEmpty>No results found.</CommandEmpty>
                         <CommandGroup>
@@ -118,26 +119,47 @@ export function DataTableFacetedFilter<TData, TValue>({
                                     <CommandItem
                                         key={option.value}
                                         onSelect={() => {
-                                            if (isSelected) {
-                                                selectedValues.delete(option.value);
+                                            if (isBoolean) {
+                                                // Radio button behavior: single selection only
+                                                if (isSelected) {
+                                                    // Deselect if clicking the same option
+                                                    column?.setFilterValue(undefined);
+                                                } else {
+                                                    // Select only this option
+                                                    column?.setFilterValue({ eq: option.value });
+                                                }
                                             } else {
-                                                selectedValues.add(option.value);
+                                                // Checkbox behavior: multi-selection
+                                                if (isSelected) {
+                                                    selectedValues.delete(option.value);
+                                                } else {
+                                                    selectedValues.add(option.value);
+                                                }
+                                                const filterValues = Array.from(selectedValues);
+                                                column?.setFilterValue(
+                                                    filterValues.length ? filterValues : undefined,
+                                                );
                                             }
-                                            const filterValues = Array.from(selectedValues);
-                                            column?.setFilterValue(
-                                                filterValues.length ? filterValues : undefined,
-                                            );
                                         }}
                                     >
                                         <div
                                             className={cn(
-                                                'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                                                'mr-2 flex h-4 w-4 items-center justify-center border border-primary',
+                                                isBoolean ? 'rounded-full' : 'rounded-sm',
                                                 isSelected
                                                     ? 'bg-primary text-primary-foreground'
-                                                    : 'opacity-50 [&_svg]:invisible',
+                                                    : isBoolean
+                                                      ? '' // Empty circle for unselected radio buttons
+                                                      : 'opacity-50 [&_svg]:invisible', // Grey checkbox for unselected checkboxes
                                             )}
                                         >
-                                            <Check />
+                                            {isBoolean ? (
+                                                isSelected && (
+                                                    <div className="h-2 w-2 rounded-full bg-primary-foreground" />
+                                                )
+                                            ) : (
+                                                <Check />
+                                            )}
                                         </div>
                                         {option.icon && (
                                             <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />

package/src/lib/components/data-table/data-table-filter-badge-editable.tsx

@@ -0,0 +1,35 @@
+import { Dialog } from '@/vdb/components/ui/dialog.js';
+import { Column } from '@tanstack/react-table';
+import { useState } from 'react';
+import { DataTableFilterBadge } from './data-table-filter-badge.js';
+import { DataTableFilterDialog } from './data-table-filter-dialog.js';
+import { ColumnDataType } from './types.js';
+
+export function DataTableFilterBadgeEditable({
+    filter,
+    column,
+    onRemove,
+    dataType,
+    currencyCode,
+}: {
+    filter: any;
+    column: Column<any> | undefined;
+    onRemove: (filter: any) => void;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    return (
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DataTableFilterBadge
+                filter={filter}
+                onRemove={onRemove}
+                onClick={() => setIsDialogOpen(true)}
+                dataType={dataType}
+                currencyCode={currencyCode}
+            />
+            {column && <DataTableFilterDialog column={column} onEnter={() => setIsDialogOpen(false)} />}
+        </Dialog>
+    );
+}

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

@@ -7,33 +7,40 @@ import { ColumnDataType } from './types.js';
 export function DataTableFilterBadge({
     filter,
     onRemove,
+    onClick,
     dataType,
     currencyCode,
 }: {
     filter: any;
     onRemove: (filter: any) => void;
+    onClick?: (filter: any) => void;
     dataType: ColumnDataType;
     currencyCode: string;
 }) {
     const [operator, value] = Object.entries(filter.value as Record<string, unknown>)[0];
     return (
-        <Badge
-            key={filter.id}
-            className="flex gap-1 flex-wrap items-center font-mono cursor-pointer"
-            variant="outline"
-            onClick={() => onRemove(filter)}
-        >
-            <Filter size="12" className="opacity-50 flex-shrink-0" />
-            <div className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap" title={filter.id}>
-                {filter.id}
+        <Badge key={filter.id} className="flex gap-2 flex-wrap items-center" variant="outline">
+            <div
+                className="flex gap-1 flex-wrap items-center cursor-pointer flex-1"
+                onClick={() => onClick?.(filter)}
+            >
+                <Filter size="12" className="opacity-50 flex-shrink-0" />
+                <div
+                    className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap"
+                    title={filter.id}
+                >
+                    {filter.id}
+                </div>
+                <div className="text-muted-foreground flex-shrink-0">
+                    <HumanReadableOperator operator={operator as Operator} mode="short" />
+                </div>
+                <div className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap flex flex-col @xl:flex-row @2xl:gap-1">
+                    <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+                </div>
             </div>
-            <div className="text-muted-foreground flex-shrink-0">
-                <HumanReadableOperator operator={operator as Operator} mode="short" />
-            </div>
-            <div className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap flex flex-col @xl:flex-row @2xl:gap-1">
-                <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
-            </div>
-            <XIcon className="h-4 flex-shrink-0" />
+            <button className="border-l -mr-2" onClick={() => onRemove(filter)}>
+                <XIcon className="h-4 flex-shrink-0 cursor-pointer" />
+            </button>
         </Badge>
     );
 }

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

@@ -2,14 +2,13 @@ import { Button } from '@/vdb/components/ui/button.js';
 import {
     DialogClose,
     DialogContent,
-    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
 } from '@/vdb/components/ui/dialog.js';
 import { Trans } from '@lingui/react/macro';
 import { Column } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';
 import { DataTableDateTimeFilter } from './filters/data-table-datetime-filter.js';
 import { DataTableIdFilter } from './filters/data-table-id-filter.js';
@@ -19,21 +18,38 @@ import { ColumnDataType } from './types.js';
 
 export interface DataTableFilterDialogProps {
     column: Column<any>;
+    onEnter?: () => void;
 }
 
-export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialogProps>) {
+export function DataTableFilterDialog({ column, onEnter }: Readonly<DataTableFilterDialogProps>) {
     const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
     const [filter, setFilter] = useState(columnFilter);
 
+    useEffect(() => {
+        setFilter(columnFilter);
+    }, [columnFilter]);
+
     const columnDataType = (column.columnDef.meta as any)?.fieldInfo?.type as ColumnDataType;
     const columnId = column.id;
+    const isEmpty = !filter || Object.keys(filter).length === 0;
+    const setFilterOnColumn = () => {
+        column.setFilterValue(filter);
+        setFilter(undefined);
+    };
+    const handleEnter = (e: React.KeyboardEvent<any>) => {
+        if (e.key === 'Enter') {
+            if (!isEmpty) {
+                setFilterOnColumn();
+                onEnter?.();
+            }
+        }
+    };
     return (
-        <DialogContent>
+        <DialogContent onKeyDown={handleEnter}>
             <DialogHeader>
                 <DialogTitle>
                     <Trans>Filter by {columnId}</Trans>
                 </DialogTitle>
-                <DialogDescription></DialogDescription>
             </DialogHeader>
             {columnDataType === 'String' ? (
                 <DataTableStringFilter value={filter} onChange={e => setFilter(e)} />
@@ -50,7 +66,11 @@ export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialog
             ) : null}
             <DialogFooter className="sm:justify-end">
                 {columnFilter && (
-                    <Button type="button" variant="secondary" onClick={e => column.setFilterValue(undefined)}>
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={() => column.setFilterValue(undefined)}
+                    >
                         <Trans>Clear filter</Trans>
                     </Button>
                 )}
@@ -58,9 +78,9 @@ export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialog
                     <Button
                         type="button"
                         variant="secondary"
+                        disabled={isEmpty}
                         onClick={() => {
-                            column.setFilterValue(filter);
-                            setFilter(undefined);
+                            setFilterOnColumn();
                         }}
                     >
                         <Trans>Apply filter</Trans>

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

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/react/macro';
 import { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 
@@ -17,7 +18,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             </div>
             <div className="flex items-center space-x-6 lg:space-x-8">
                 <div className="flex items-center space-x-2">
-                    <p className="text-sm font-medium">Rows per page</p>
+                    <p className="hidden md:block text-sm font-medium">
+                        <Trans>Rows per page</Trans>
+                    </p>
                     <Select
                         value={`${table.getState().pagination.pageSize}`}
                         onValueChange={value => {
@@ -36,8 +39,12 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         </SelectContent>
                     </Select>
                 </div>
-                <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-                    Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+                <div className=" flex items-center justify-center text-sm font-medium">
+                    <span className="hidden md:block w-[100px] ">
+                        <Trans>
+                            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+                        </Trans>
+                    </span>
                 </div>
                 <div className="flex items-center space-x-2">
                     <Button
@@ -47,7 +54,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         onClick={() => table.setPageIndex(0)}
                         disabled={!table.getCanPreviousPage()}
                     >
-                        <span className="sr-only">Go to first page</span>
+                        <span className="sr-only">
+                            <Trans>Go to first page</Trans>
+                        </span>
                         <ChevronsLeft />
                     </Button>
                     <Button
@@ -57,9 +66,12 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         onClick={() => table.previousPage()}
                         disabled={!table.getCanPreviousPage()}
                     >
-                        <span className="sr-only">Go to previous page</span>
+                        <span className="sr-only">
+                            <Trans>Go to previous page</Trans>
+                        </span>
                         <ChevronLeft />
                     </Button>
+                    <span className="md:hidden">{table.getState().pagination.pageIndex + 1}</span>
                     <Button
                         variant="outline"
                         type="button"
@@ -67,7 +79,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         onClick={() => table.nextPage()}
                         disabled={!table.getCanNextPage()}
                     >
-                        <span className="sr-only">Go to next page</span>
+                        <span className="sr-only">
+                            <Trans>Go to next page</Trans>
+                        </span>
                         <ChevronRight />
                     </Button>
                     <Button
@@ -77,7 +91,9 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         onClick={() => table.setPageIndex(table.getPageCount() - 1)}
                         disabled={!table.getCanNextPage()}
                     >
-                        <span className="sr-only">Go to last page</span>
+                        <span className="sr-only">
+                            <Trans>Go to last page</Trans>
+                        </span>
                         <ChevronsRight />
                     </Button>
                 </div>