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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.3.6-master-202507030648",
+  "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-202507030648",
-    "@vendure/core": "^3.3.6-master-202507030648",
+    "@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": "04f25e9d0bd06d8031d2f5dbc4373ec0e322f535"
+  "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/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/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

@@ -8,11 +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-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';
@@ -187,6 +186,10 @@ 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';
@@ -203,7 +206,3 @@ 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';