@vendure/dashboard 3.3.6-master-202507030234 → 3.3.6-master-202507030648

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507030234",
+  "version": "3.3.6-master-202507030648",
   "type": "module",
   "repository": {
     "type": "git",
@@ -86,8 +86,8 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.3.6-master-202507030234",
-    "@vendure/core": "^3.3.6-master-202507030234",
+    "@vendure/common": "^3.3.6-master-202507030648",
+    "@vendure/core": "^3.3.6-master-202507030648",
     "@vitejs/plugin-react": "^4.3.4",
     "awesome-graphql-client": "^2.1.0",
     "class-variance-authority": "^0.7.1",
@@ -130,5 +130,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "ca527d7a89a9cff83d965e384e5f3d27c24efe82"
+  "gitHead": "04f25e9d0bd06d8031d2f5dbc4373ec0e322f535"
 }

package/src/lib/components/data-input/index.ts

@@ -0,0 +1,11 @@
+// Existing data input components
+export * from './affixed-input.js';
+export * from './customer-group-input.js';
+export * from './datetime-input.js';
+export * from './facet-value-input.js';
+export * from './money-input.js';
+export * from './rich-text-input.js';
+
+// Relation selector components
+export * from './relation-input.js';
+export * from './relation-selector.js';

package/src/lib/components/data-input/relation-input.tsx

@@ -0,0 +1,156 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { createRelationSelectorConfig, RelationSelector } from './relation-selector.js';
+
+// Re-export for convenience
+export { createRelationSelectorConfig };
+
+/**
+ * Single relation input component
+ */
+export interface SingleRelationInputProps<T = any> {
+    value: string;
+    onChange: (value: string) => void;
+    config: Parameters<typeof createRelationSelectorConfig<T>>[0];
+    disabled?: boolean;
+    className?: string;
+}
+
+export function SingleRelationInput<T>({
+    value,
+    onChange,
+    config,
+    disabled,
+    className,
+}: Readonly<SingleRelationInputProps<T>>) {
+    const singleConfig = createRelationSelectorConfig<T>({
+        ...config,
+        multiple: false,
+    });
+
+    return (
+        <RelationSelector
+            config={singleConfig}
+            value={value}
+            onChange={newValue => onChange(newValue as string)}
+            disabled={disabled}
+            className={className}
+        />
+    );
+}
+
+/**
+ * Multi relation input component
+ */
+export interface MultiRelationInputProps<T = any> {
+    value: string[];
+    onChange: (value: string[]) => void;
+    config: Parameters<typeof createRelationSelectorConfig<T>>[0];
+    disabled?: boolean;
+    className?: string;
+}
+
+export function MultiRelationInput<T>({
+    value,
+    onChange,
+    config,
+    disabled,
+    className,
+}: Readonly<MultiRelationInputProps<T>>) {
+    const multiConfig = createRelationSelectorConfig<T>({
+        ...config,
+        multiple: true,
+    });
+
+    return (
+        <RelationSelector
+            config={multiConfig}
+            value={value}
+            onChange={newValue => onChange(newValue as string[])}
+            disabled={disabled}
+            className={className}
+        />
+    );
+}
+
+// Example configurations for common entities
+
+/**
+ * Product relation selector configuration
+ */
+export const productRelationConfig = createRelationSelectorConfig({
+    listQuery: graphql(`
+        query GetProductsForRelationSelector($options: ProductListOptions) {
+            products(options: $options) {
+                items {
+                    id
+                    name
+                    slug
+                    featuredAsset {
+                        id
+                        preview
+                    }
+                }
+                totalItems
+            }
+        }
+    `),
+    idKey: 'id' as const,
+    labelKey: 'name' as const,
+    placeholder: 'Search products...',
+    buildSearchFilter: (term: string) => ({
+        name: { contains: term },
+    }),
+});
+
+/**
+ * Customer relation selector configuration
+ */
+export const customerRelationConfig = createRelationSelectorConfig({
+    listQuery: graphql(`
+        query GetCustomersForRelationSelector($options: CustomerListOptions) {
+            customers(options: $options) {
+                items {
+                    id
+                    firstName
+                    lastName
+                    emailAddress
+                }
+                totalItems
+            }
+        }
+    `),
+    idKey: 'id' as const,
+    labelKey: 'emailAddress' as const,
+    placeholder: 'Search customers...',
+    buildSearchFilter: (term: string) => ({
+        emailAddress: { contains: term },
+    }),
+});
+
+/**
+ * Collection relation selector configuration
+ */
+export const collectionRelationConfig = createRelationSelectorConfig({
+    listQuery: graphql(`
+        query GetCollectionsForRelationSelector($options: CollectionListOptions) {
+            collections(options: $options) {
+                items {
+                    id
+                    name
+                    slug
+                    featuredAsset {
+                        id
+                        preview
+                    }
+                }
+                totalItems
+            }
+        }
+    `),
+    idKey: 'id' as const,
+    labelKey: 'name' as const,
+    placeholder: 'Search collections...',
+    buildSearchFilter: (term: string) => ({
+        name: { contains: term },
+    }),
+});

package/src/lib/components/data-input/relation-selector.tsx

@@ -0,0 +1,350 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { getQueryName } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import type { DocumentNode } from 'graphql';
+import { CheckIcon, Loader2, Plus, X } from 'lucide-react';
+import React, { useState } from 'react';
+
+export interface RelationSelectorConfig<T = any> {
+    /** The GraphQL query document for fetching items */
+    listQuery: DocumentNode;
+    /** The property key for the entity ID */
+    idKey: keyof T;
+    /** The property key for the display label */
+    labelKey: keyof T;
+    /** Number of items to load per page */
+    pageSize?: number;
+    /** Placeholder text for the search input */
+    placeholder?: string;
+    /** Whether to enable multi-select mode */
+    multiple?: boolean;
+    /** Custom filter function for search */
+    buildSearchFilter?: (searchTerm: string) => any;
+    /** Custom label renderer function for rich display */
+    label?: (item: T) => React.ReactNode;
+}
+
+export interface RelationSelectorProps<T = any> {
+    config: RelationSelectorConfig<T>;
+    value?: string | string[];
+    onChange: (value: string | string[]) => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+export interface RelationSelectorItemProps<T = any> {
+    item: T;
+    config: RelationSelectorConfig<T>;
+    isSelected: boolean;
+    onSelect: () => void;
+    showCheckbox?: boolean;
+}
+
+/**
+ * Abstract relation selector item component
+ */
+export function RelationSelectorItem<T>({
+    item,
+    config,
+    isSelected,
+    onSelect,
+    showCheckbox = false,
+}: Readonly<RelationSelectorItemProps<T>>) {
+    const id = String(item[config.idKey]);
+    const label = config.label ? config.label(item) : String(item[config.labelKey]);
+
+    return (
+        <CommandItem key={id} value={id} onSelect={onSelect} className="flex items-center gap-2">
+            {showCheckbox && (
+                <Checkbox
+                    checked={isSelected}
+                    onChange={onSelect}
+                    onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                />
+            )}
+            {isSelected && !showCheckbox && <CheckIcon className="h-4 w-4" />}
+            <span className="flex-1">{label}</span>
+        </CommandItem>
+    );
+}
+
+/**
+ * Hook for managing relation selector state and queries
+ */
+export function useRelationSelector<T>(config: RelationSelectorConfig<T>) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const debouncedSearch = useDebounce(searchTerm, 300);
+
+    const pageSize = config.pageSize ?? 25;
+
+    // Build the default search filter if none provided
+    const buildFilter =
+        config.buildSearchFilter ??
+        ((term: string) => ({
+            [config.labelKey]: { contains: term },
+        }));
+
+    const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage, error } = useInfiniteQuery({
+        queryKey: ['relationSelector', getQueryName(config.listQuery), debouncedSearch],
+        queryFn: async ({ pageParam = 0 }) => {
+            const variables: any = {
+                options: {
+                    skip: pageParam * pageSize,
+                    take: pageSize,
+                    sort: { [config.labelKey]: 'ASC' },
+                },
+            };
+
+            // Add search filter if there's a search term
+            if (debouncedSearch.trim().length > 0) {
+                variables.options.filter = buildFilter(debouncedSearch.trim());
+            }
+
+            const response = (await api.query(config.listQuery, variables)) as any;
+            return response[getQueryName(config.listQuery)];
+        },
+        getNextPageParam: (lastPage, allPages) => {
+            if (!lastPage) return undefined;
+            const totalFetched = allPages.length * pageSize;
+            return totalFetched < lastPage.totalItems ? allPages.length : undefined;
+        },
+        initialPageParam: 0,
+    });
+
+    const items = data?.pages.flatMap(page => page?.items ?? []) ?? [];
+
+    return {
+        items,
+        isLoading,
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage,
+        error,
+        searchTerm,
+        setSearchTerm,
+    };
+}
+
+/**
+ * Abstract relation selector component
+ */
+export function RelationSelector<T>({
+    config,
+    value,
+    onChange,
+    disabled,
+    className,
+}: Readonly<RelationSelectorProps<T>>) {
+    const [open, setOpen] = useState(false);
+    const [selectedItemsCache, setSelectedItemsCache] = useState<T[]>([]);
+    const isMultiple = config.multiple ?? false;
+
+    const { items, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage, searchTerm, setSearchTerm } =
+        useRelationSelector(config);
+
+    // Normalize value to always be an array for easier handling
+    const selectedIds = React.useMemo(() => {
+        if (isMultiple) {
+            return Array.isArray(value) ? value : value ? [value] : [];
+        }
+        return value ? [String(value)] : [];
+    }, [value, isMultiple]);
+
+    const handleSelect = (item: T) => {
+        const itemId = String(item[config.idKey]);
+
+        if (isMultiple) {
+            const isCurrentlySelected = selectedIds.includes(itemId);
+            const newSelectedIds = isCurrentlySelected
+                ? selectedIds.filter(id => id !== itemId)
+                : [...selectedIds, itemId];
+
+            // Update cache: add item if selecting, remove if deselecting
+            setSelectedItemsCache(prev => {
+                if (isCurrentlySelected) {
+                    return prev.filter(prevItem => String(prevItem[config.idKey]) !== itemId);
+                } else {
+                    // Only add if not already in cache
+                    const alreadyInCache = prev.some(prevItem => String(prevItem[config.idKey]) === itemId);
+                    return alreadyInCache ? prev : [...prev, item];
+                }
+            });
+
+            onChange(newSelectedIds);
+        } else {
+            // For single select, update cache with the new item
+            setSelectedItemsCache([item]);
+            onChange(itemId);
+            setOpen(false);
+            setSearchTerm('');
+        }
+    };
+
+    const handleRemove = (itemId: string) => {
+        if (isMultiple) {
+            const newSelectedIds = selectedIds.filter(id => id !== itemId);
+            // Remove from cache as well
+            setSelectedItemsCache(prev => prev.filter(prevItem => String(prevItem[config.idKey]) !== itemId));
+            onChange(newSelectedIds);
+        } else {
+            // Clear cache for single select
+            setSelectedItemsCache([]);
+            onChange('');
+        }
+    };
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const target = e.currentTarget;
+        const scrolledToBottom = Math.abs(target.scrollHeight - target.clientHeight - target.scrollTop) < 1;
+
+        if (scrolledToBottom && hasNextPage && !isFetchingNextPage) {
+            fetchNextPage();
+        }
+    };
+
+    // Clean up cache when selectedIds change externally (e.g., form reset)
+    React.useEffect(() => {
+        setSelectedItemsCache(prev => prev.filter(item => selectedIds.includes(String(item[config.idKey]))));
+    }, [selectedIds, config.idKey]);
+
+    // Populate cache with items from search results that are selected but not yet cached
+    React.useEffect(() => {
+        const itemsToAdd = items.filter(item => {
+            const itemId = String(item[config.idKey]);
+            const isSelected = selectedIds.includes(itemId);
+            const isAlreadyCached = selectedItemsCache.some(
+                cachedItem => String(cachedItem[config.idKey]) === itemId,
+            );
+            return isSelected && !isAlreadyCached;
+        });
+
+        if (itemsToAdd.length > 0) {
+            setSelectedItemsCache(prev => [...prev, ...itemsToAdd]);
+        }
+    }, [items, selectedIds, selectedItemsCache, config.idKey]);
+
+    // Get selected items for display from cache, filtered by current selection
+    const selectedItems = React.useMemo(() => {
+        return selectedItemsCache.filter(item => selectedIds.includes(String(item[config.idKey])));
+    }, [selectedItemsCache, selectedIds, config.idKey]);
+
+    return (
+        <div className={className}>
+            {/* Display selected items */}
+            {selectedItems.length > 0 && (
+                <div className="flex flex-wrap gap-2 mb-2">
+                    {selectedItems.map(item => {
+                        const itemId = String(item[config.idKey]);
+                        const label = config.label ? config.label(item) : String(item[config.labelKey]);
+                        return (
+                            <div
+                                key={itemId}
+                                className="inline-flex items-center gap-1 bg-secondary text-secondary-foreground px-2 py-1 rounded-md text-sm"
+                            >
+                                <span>{label}</span>
+                                {!disabled && (
+                                    <button
+                                        type="button"
+                                        onClick={() => handleRemove(itemId)}
+                                        className="text-secondary-foreground/70 hover:text-secondary-foreground"
+                                    >
+                                        <X className="h-3 w-3" />
+                                    </button>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            {/* Selector trigger */}
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
+                        <Plus className="h-4 w-4" />
+                        <Trans>
+                            {isMultiple
+                                ? selectedItems.length > 0
+                                    ? `Add more (${selectedItems.length} selected)`
+                                    : 'Select items'
+                                : selectedItems.length > 0
+                                  ? 'Change selection'
+                                  : 'Select item'}
+                        </Trans>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0 w-[400px]" align="start">
+                    <Command shouldFilter={false}>
+                        <CommandInput
+                            placeholder={config.placeholder ?? 'Search...'}
+                            value={searchTerm}
+                            onValueChange={setSearchTerm}
+                            disabled={disabled}
+                        />
+                        <CommandList className="h-[300px] overflow-y-auto" onScroll={handleScroll}>
+                            <CommandEmpty>
+                                {isLoading ? (
+                                    <div className="flex items-center justify-center py-6">
+                                        <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                                        <Trans>Loading...</Trans>
+                                    </div>
+                                ) : (
+                                    <Trans>No results found</Trans>
+                                )}
+                            </CommandEmpty>
+
+                            {items.map(item => {
+                                const itemId = String(item[config.idKey]);
+                                const isSelected = selectedIds.includes(itemId);
+
+                                return (
+                                    <RelationSelectorItem
+                                        key={itemId}
+                                        item={item}
+                                        config={config}
+                                        isSelected={isSelected}
+                                        onSelect={() => handleSelect(item)}
+                                        showCheckbox={isMultiple}
+                                    />
+                                );
+                            })}
+
+                            {(isFetchingNextPage || isLoading) && (
+                                <div className="flex items-center justify-center py-2">
+                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                </div>
+                            )}
+
+                            {!hasNextPage && items.length > 0 && (
+                                <div className="text-center py-2 text-sm text-muted-foreground">
+                                    <Trans>No more items</Trans>
+                                </div>
+                            )}
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    );
+}
+
+/**
+ * Utility function to create a relation selector configuration
+ */
+export function createRelationSelectorConfig<T>(
+    config: Readonly<RelationSelectorConfig<T>>,
+): RelationSelectorConfig<T> {
+    return config;
+}

package/src/lib/index.ts

@@ -8,7 +8,10 @@ export * from './components/data-input/affixed-input.js';
 export * from './components/data-input/customer-group-input.js';
 export * from './components/data-input/datetime-input.js';
 export * from './components/data-input/facet-value-input.js';
+export * from './components/data-input/index.js';
 export * from './components/data-input/money-input.js';
+export * from './components/data-input/relation-input.js';
+export * from './components/data-input/relation-selector.js';
 export * from './components/data-input/richt-text-input.js';
 export * from './components/data-table/add-filter-menu.js';
 export * from './components/data-table/data-table-bulk-action-item.js';
@@ -184,10 +187,6 @@ export * from './framework/page/use-detail-page.js';
 export * from './framework/page/use-extended-router.js';
 export * from './framework/registry/global-registry.js';
 export * from './framework/registry/registry-types.js';
-export * from './graphql/api.js';
-export * from './graphql/common-operations.js';
-export * from './graphql/fragments.js';
-export * from './graphql/graphql.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
@@ -204,3 +203,7 @@ export * from './hooks/use-theme.js';
 export * from './hooks/use-user-settings.js';
 export * from './lib/trans.js';
 export * from './lib/utils.js';
+export * from './graphql/api.js';
+export * from './graphql/common-operations.js';
+export * from './graphql/fragments.js';
+export * from './graphql/graphql.js';