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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507030234",
+  "version": "3.3.6-master-202507030732",
   "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-202507030732",
+    "@vendure/core": "^3.3.6-master-202507030732",
     "@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": "0caf3b1c7a4e75924dab2e3e92673c34dadc36f9"
 }

package/src/app/routes/_authenticated/_collections/collections_.$id.tsx

@@ -1,4 +1,4 @@
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -1,4 +1,4 @@
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';

package/src/app/routes/_authenticated/_products/products_.$id.tsx

@@ -1,4 +1,4 @@
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { AssignedFacetValues } from '@/vdb/components/shared/assigned-facet-values.js';
 import { EntityAssets } from '@/vdb/components/shared/entity-assets.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';

package/src/app/routes/_authenticated/_promotions/promotions_.$id.tsx

@@ -1,5 +1,5 @@
 import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
-import { RichTextInput } from '@/vdb/components/data-input/richt-text-input.js';
+import { RichTextInput } from '@/vdb/components/data-input/rich-text-input.js';
 import { ErrorPage } from '@/vdb/components/shared/error-page.js';
 import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';

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/money-input.tsx

@@ -1,18 +1,11 @@
+import { DataInputComponentProps } from '@/vdb/framework/component-registry/component-registry.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { useEffect, useMemo, useState } from 'react';
 import { AffixedInput } from './affixed-input.js';
 
 // Original component
-function MoneyInputInternal({
-    value,
-    currency,
-    onChange,
-}: {
-    value: number;
-    currency: string;
-    onChange: (value: number) => void;
-}) {
+function MoneyInputInternal({ value, currency, onChange }: DataInputComponentProps) {
     const {
         settings: { displayLanguage, displayLocale },
     } = useUserSettings();

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/components/shared/form-field-wrapper.tsx

@@ -1,25 +1,34 @@
-import {
-    FormControl,
-    FormDescription,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormField,
-} from '../ui/form.js';
-import { FieldValues, FieldPath } from 'react-hook-form';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 
 export type FormFieldWrapperProps<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @description
+     * Whether to render the form control.
+     * If false, the form control will not be rendered.
+     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
+     * where the FormControl needs to nested in the root component.
+     * @default true
+     */
+    renderFormControl?: boolean;
 };
 
 export function FormFieldWrapper<
     TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({ control, name, render, label, description }: FormFieldWrapperProps<TFieldValues, TName>) {
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    control,
+    name,
+    render,
+    label,
+    description,
+    renderFormControl = true,
+}: FormFieldWrapperProps<TFieldValues, TName>) {
     return (
         <FormField
             control={control}
@@ -27,7 +36,7 @@ export function FormFieldWrapper<
             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/framework/component-registry/component-registry.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import { addDisplayComponent, getDisplayComponent } from '../extension-api/display-component-extensions.js';
 import { addInputComponent, getInputComponent } from '../extension-api/input-component-extensions.js';
 
@@ -13,9 +14,10 @@ export interface DataDisplayComponentProps {
     [key: string]: any;
 }
 
-export interface DataInputComponentProps {
-    value: any;
-    onChange: (value: any) => void;
+export interface DataInputComponentProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends ControllerRenderProps<TFieldValues, TName> {
     [key: string]: any;
 }
 

package/src/lib/framework/page/detail-page.tsx

@@ -17,6 +17,7 @@ import {
 } from '../document-introspection/get-document-structure.js';
 
 import { TranslatableFormFieldWrapper } from '@/vdb/components/shared/translatable-form-field.js';
+import { FormControl } from '@/vdb/components/ui/form.js';
 import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';
 import { useComponentRegistry } from '../component-registry/component-registry.js';
 import { generateInputComponentKey } from '../extension-api/input-component-extensions.js';
@@ -120,23 +121,31 @@ function FieldInputRenderer<
         return <InputComponent {...field} />;
     }
 
-    switch (fieldInfo.type) {
-        case 'Int':
-        case 'Float':
-            return (
-                <Input
-                    type="number"
-                    value={field.value}
-                    onChange={e => field.onChange(e.target.valueAsNumber)}
-                />
-            );
-        case 'DateTime':
-            return <DateTimeInput {...field} />;
-        case 'Boolean':
-            return <Checkbox value={field.value} onCheckedChange={field.onChange} />;
-        default:
-            return <Input {...field} />;
-    }
+    const DefaultComponent = () => {
+        switch (fieldInfo.type) {
+            case 'Int':
+            case 'Float':
+                return (
+                    <Input
+                        type="number"
+                        value={field.value}
+                        onChange={e => field.onChange(e.target.valueAsNumber)}
+                    />
+                );
+            case 'DateTime':
+                return <DateTimeInput {...field} />;
+            case 'Boolean':
+                return <Checkbox value={field.value} onCheckedChange={field.onChange} />;
+            default:
+                return <Input {...field} />;
+        }
+    };
+
+    return (
+        <FormControl>
+            <DefaultComponent />
+        </FormControl>
+    );
 }
 
 /**
@@ -227,6 +236,7 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
+                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer
                                                 fieldInfo={fieldInfo}
@@ -249,6 +259,7 @@ export function DetailPage<
                                         control={form.control}
                                         name={fieldInfo.name as never}
                                         label={fieldInfo.name}
+                                        renderFormControl={false}
                                         render={({ field }) => (
                                             <FieldInputRenderer
                                                 fieldInfo={fieldInfo}

package/src/lib/index.ts

@@ -9,7 +9,9 @@ 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/money-input.js';
-export * from './components/data-input/richt-text-input.js';
+export * from './components/data-input/relation-input.js';
+export * from './components/data-input/relation-selector.js';
+export * from './components/data-input/rich-text-input.js';
 export * from './components/data-table/add-filter-menu.js';
 export * from './components/data-table/data-table-bulk-action-item.js';
 export * from './components/data-table/data-table-bulk-actions.js';