@vendure/dashboard 3.5.2-master-202512020233 → 3.5.2-master-202512170238

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 function Slider({
   className,

package/src/lib/components/ui/toggle-group.tsx

@@ -4,8 +4,8 @@ import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/vdb/lib/utils"
-import { toggleVariants } from "@/vdb/components/ui/toggle"
+import { cn } from "@/vdb/lib/utils.js"
+import { toggleVariants } from "@/vdb/components/ui/toggle.js"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

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

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/vdb/lib/utils"
+import { cn } from "@/vdb/lib/utils.js"
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",

package/src/lib/framework/component-registry/component-registry.tsx

@@ -1,13 +1,9 @@
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
-import * as React from 'react';
+import React from 'react';
 import { getDisplayComponent } from '../extension-api/display-component-extensions.js';
 import { getInputComponent } from '../extension-api/input-component-extensions.js';
 
-export type DataDisplayComponentProps<T extends Record<string, any> = Record<string, any>> = {
-    value: any;
-} & T;
-
-export type DataDisplayComponent = React.ComponentType<DataDisplayComponentProps>;
+export type DataDisplayComponent<T extends Record<string, any> = Record<string, any>> = React.ComponentType<T & { value: any}>;
 
 // Component registry hook that uses the global registry
 export function useComponentRegistry() {

package/src/lib/framework/extension-api/display-component-extensions.tsx

@@ -5,6 +5,7 @@ import { Money } from '@/vdb/components/data-display/money.js';
 import { VendureImage } from '@/vdb/components/shared/vendure-image.js';
 import { DataDisplayComponent } from '../component-registry/component-registry.js';
 import { globalRegistry } from '../registry/global-registry.js';
+import { DataTableDisplayComponent } from './types/data-table.js';
 
 globalRegistry.register('displayComponents', new Map<string, DataDisplayComponent>());
 
@@ -21,7 +22,7 @@ displayComponents.set('vendure:money', Money);
 displayComponents.set('vendure:json', Json);
 
 export function getDisplayComponent(id: string): DataDisplayComponent | undefined {
-    return globalRegistry.get('displayComponents').get(id);
+    return globalRegistry.get('displayComponents').get(id) as DataDisplayComponent | undefined;
 }
 
 /**
@@ -42,10 +43,10 @@ export function addDisplayComponent({
     pageId: string;
     blockId: string;
     field: string;
-    component: React.ComponentType<{ value: any; [key: string]: any }>;
+    component: DataDisplayComponent | DataTableDisplayComponent;
 }) {
     const displayComponents = globalRegistry.get('displayComponents');
-
+    
     // Generate the key using the helper function
     const key = generateDisplayComponentKey(pageId, blockId, field);
 

package/src/lib/framework/extension-api/logic/detail-forms.ts

@@ -1,7 +1,6 @@
 import { addDetailQueryDocument } from '@/vdb/framework/form-engine/custom-form-component-extensions.js';
 import { parse } from 'graphql';
 
-import { addDisplayComponent } from '../display-component-extensions.js';
 import { addInputComponent } from '../input-component-extensions.js';
 import { DashboardDetailFormExtensionDefinition } from '../types/detail-forms.js';
 
@@ -31,18 +30,6 @@ export function registerDetailFormExtensions(detailForms?: DashboardDetailFormEx
                     });
                 }
             }
-
-            // Register display components for this detail form
-            if (detailForm.displays) {
-                for (const displayComponent of detailForm.displays) {
-                    addDisplayComponent({
-                        pageId: detailForm.pageId,
-                        blockId: displayComponent.blockId,
-                        field: displayComponent.field,
-                        component: displayComponent.component,
-                    });
-                }
-            }
         }
     }
 }

package/src/lib/framework/extension-api/types/data-table.ts

@@ -1,9 +1,11 @@
-import { DataDisplayComponentProps } from '@/vdb/framework/component-registry/component-registry.js';
+import { DataDisplayComponent } from '@/vdb/framework/component-registry/component-registry.js';
 import { Table } from '@tanstack/react-table';
 import { CellContext } from '@tanstack/table-core';
 import { DocumentNode } from 'graphql';
 import React from 'react';
 
+export type DataTableDisplayComponent = DataDisplayComponent<CellContext<any, any>>;
+
 /**
  * @description
  * Allows you to define custom display components for specific columns in data tables.
@@ -24,7 +26,7 @@ export interface DashboardDataTableDisplayComponent {
      * The React component that will be rendered as the display.
      * It should accept `value` and other standard display props.
      */
-    component: React.ComponentType<DataDisplayComponentProps<CellContext<any, any>>>;
+    component: DataTableDisplayComponent;
 }
 
 export type BulkActionContext<Item extends { id: string } & Record<string, any>> = {

package/src/lib/framework/extension-api/types/navigation.ts

@@ -39,7 +39,7 @@ export interface DashboardRouteDefinition {
      * The value is a Tanstack Router
      * [loader function](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#route-loaders)
      */
-    loader?: RouteOptions['loader'];
+    loader?: RouteOptions<any>['loader'];
 
     /**
      * @description
@@ -47,7 +47,7 @@ export interface DashboardRouteDefinition {
      * The value is a Tanstack Router
      * [validateSearch function](https://tanstack.com/router/latest/docs/framework/react/guide/search-params#search-param-validation)
      */
-    validateSearch?: RouteOptions['validateSearch'];
+    validateSearch?: RouteOptions<any>['validateSearch'];
 
     /**
      * @description

package/src/lib/framework/form-engine/use-generated-form.tsx

@@ -9,6 +9,10 @@ import { getOperationVariablesFields } from '../document-introspection/get-docum
 import { createFormSchemaFromFields, getDefaultValuesFromFields } from './form-schema-tools.js';
 import { removeEmptyIdFields, transformRelationFields } from './utils.js';
 
+export type WithLooseCustomFields<T> = T extends { customFields?: any }
+    ? Omit<T, 'customFields'> & { customFields?: T['customFields'] | unknown }
+    : T;
+
 /**
  * @description
  * Options for the useGeneratedForm hook.
@@ -40,7 +44,9 @@ export interface GeneratedFormOptions<
     customFieldConfig?: any[]; // Add custom field config for validation
     setValues: (
         entity: NonNullable<E>,
-    ) => VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>;
+    ) => WithLooseCustomFields<
+        VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>
+    >;
     onSubmit?: (
         values: VarName extends keyof VariablesOf<T> ? VariablesOf<T>[VarName] : VariablesOf<T>,
     ) => void;

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -547,7 +547,7 @@ export type PageBlockProps = {
      * @description
      * Which column this block should appear in
      */
-    column: 'main' | 'side';
+    column: 'main' | 'side' | 'full';
     /**
      * @description
      * The ID of the block, e.g. "gift-cards" or "related-products".

package/src/lib/framework/nav-menu/nav-menu-extensions.ts

@@ -13,7 +13,7 @@ export type NavMenuSectionPlacement = 'top' | 'bottom';
  * @docsPage Navigation
  * @since 3.4.0
  */
-interface NavMenuItem {
+export interface NavMenuItem {
     /**
      * @description
      * A unique ID for this nav menu item

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

@@ -29,7 +29,7 @@ export function detailPageRouteLoader<T extends TypedDocumentNode<any, any>>({
     queryDocument,
     breadcrumb,
 }: DetailPageRouteLoaderConfig<T>) {
-    const loader: FileBaseRouteOptions<any, any>['loader'] = async ({
+    const loader: FileBaseRouteOptions<any, any, any>['loader'] = async ({
         context,
         params,
         location,

package/src/lib/framework/page/page-api.ts

@@ -1,4 +1,4 @@
-import { DashboardRouteDefinition } from '../extension-api/extension-api-types.js';
+import { DashboardRouteDefinition } from '../extension-api/types/navigation.js';
 
 export const extensionRoutes = new Map<string, DashboardRouteDefinition>();
 

package/src/lib/framework/page/use-detail-page.ts

@@ -22,7 +22,7 @@ import {
     getMutationName,
     getQueryName,
 } from '../document-introspection/get-document-structure.js';
-import { useGeneratedForm } from '../form-engine/use-generated-form.js';
+import { useGeneratedForm, WithLooseCustomFields } from '../form-engine/use-generated-form.js';
 
 import { DetailEntityPath } from './page-types.js';
 
@@ -95,7 +95,9 @@ export interface DetailPageOptions<
      * @description
      * The function to set the values for the update document.
      */
-    setValuesForUpdate: (entity: NonNullable<ResultOf<T>[EntityField]>) => VariablesOf<U>[VarNameUpdate];
+    setValuesForUpdate: (
+        entity: NonNullable<ResultOf<T>[EntityField]>,
+    ) => WithLooseCustomFields<VariablesOf<U>[VarNameUpdate]>;
     transformCreateInput?: (input: VariablesOf<C>[VarNameCreate]) => VariablesOf<C>[VarNameCreate];
     transformUpdateInput?: (input: VariablesOf<U>[VarNameUpdate]) => VariablesOf<U>[VarNameUpdate];
     /**

package/src/lib/framework/page/use-extended-router.tsx

@@ -21,10 +21,7 @@ export const useExtendedRouter = (
 
         // Only extend if extensions are loaded
         if (!extensionsLoaded) {
-            return createRouter({
-                ...routerOptions,
-                routeTree,
-            });
+            return createExtendedRouter(routerOptions, routeTree);
         }
 
         const authenticatedRouteIndex = routeTree.children.findIndex(
@@ -33,10 +30,7 @@ export const useExtendedRouter = (
 
         if (authenticatedRouteIndex === -1) {
             // No authenticated route found, return router with base tree
-            return createRouter({
-                ...routerOptions,
-                routeTree,
-            });
+            return createExtendedRouter(routerOptions, routeTree);
         }
 
         let authenticatedRoute: AnyRoute = routeTree.children[authenticatedRouteIndex];
@@ -106,10 +100,7 @@ export const useExtendedRouter = (
 
         // Only extend the tree if we have new routes to add
         if (newAuthenticatedRoutes.length === 0 && newRootRoutes.length === 0) {
-            return createRouter({
-                ...routerOptions,
-                routeTree,
-            });
+            return createExtendedRouter(routerOptions, routeTree);
         }
 
         const childrenWithoutAuthenticated = routeTree.children.filter(
@@ -127,9 +118,22 @@ export const useExtendedRouter = (
             ...newRootRoutes,
         ]);
 
-        return createRouter({
-            ...routerOptions,
-            routeTree: extendedRouteTree,
-        });
+        return createExtendedRouter(routerOptions, extendedRouteTree);
     }, [baseRouteTree, routerOptions, extensionsLoaded]);
 };
+
+/**
+ * Helper to create a router with extended route tree, handling some
+ * type issues with hydrate/dehydrate functions.
+ */
+function createExtendedRouter(
+    routerOptions: Omit<RouterOptions<AnyRoute, any>, 'routeTree'>,
+    extendedRouteTree: AnyRoute,
+) {
+    return createRouter({
+        ...routerOptions,
+        dehydrate: routerOptions.dehydrate as any,
+        hydrate: routerOptions.hydrate as any,
+        routeTree: extendedRouteTree,
+    });
+}

package/src/lib/framework/registry/registry-types.ts

@@ -11,6 +11,7 @@ import { DocumentNode } from 'graphql';
 
 import { DataDisplayComponent } from '../component-registry/component-registry.js';
 import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
+import { DataTableDisplayComponent } from '../extension-api/types/data-table.js';
 import { NavMenuConfig } from '../nav-menu/nav-menu-extensions.js';
 
 export interface GlobalRegistryContents {
@@ -22,7 +23,7 @@ export interface GlobalRegistryContents {
     dashboardWidgetRegistry: Map<string, DashboardWidgetDefinition>;
     dashboardAlertRegistry: Map<string, DashboardAlertDefinition>;
     inputComponents: Map<string, DashboardFormComponent>;
-    displayComponents: Map<string, DataDisplayComponent>;
+    displayComponents: Map<string, DataDisplayComponent | DataTableDisplayComponent>;
     bulkActionsRegistry: Map<string, BulkAction[]>;
     listQueryDocumentRegistry: Map<string, DocumentNode[]>;
     detailQueryDocumentRegistry: Map<string, DocumentNode[]>;