@vendure/admin-ui 2.1.0-next.3 → 2.1.0-next.5

package/catalog/components/product-variant-list/product-variant-list-bulk-actions.d.ts

@@ -1,5 +1,4 @@
-import { BulkAction, GetProductVariantListQuery, ItemOf } from '@vendure/admin-ui/core';
-import { ProductVariant } from 'package/core';
+import { BulkAction, GetProductVariantListQuery, ItemOf, ProductVariant } from '@vendure/admin-ui/core';
 import { ProductVariantListComponent } from './product-variant-list.component';
 export declare const assignProductVariantsToChannelBulkAction: BulkAction<ItemOf<GetProductVariantListQuery, 'productVariants'>, ProductVariantListComponent>;
 export declare const removeProductVariantsFromChannelBulkAction: BulkAction<any, import("@vendure/admin-ui/core").BaseListComponent<any, any, any>>;

package/core/common/base-detail.component.d.ts

@@ -15,7 +15,7 @@ import { TranslationOf } from './utilities/find-translation';
  * {@link BaseEntityResolver}.
  *
  * @example
- * ```TypeScript
+ * ```ts
  * \@Component({
  *   selector: 'app-my-entity',
  *   templateUrl: './my-entity.component.html',
@@ -95,7 +95,7 @@ export declare abstract class TypedBaseDetailComponent<T extends TypedDocumentNo
  * correct resolved detail data.
  *
  * @example
- * ```TypeScript
+ * ```ts
  * \@NgModule({
  *   imports: [ReviewsSharedModule],
  *   declarations: [/* ... *\/],

package/core/common/base-entity-resolver.d.ts

@@ -12,7 +12,7 @@ export declare function createResolveData<T extends BaseEntityResolver<R>, R>(re
  * {@link BaseDetailComponent}.
  *
  * @example
- * ```TypeScript
+ * ```ts
  * \@Injectable({
  *   providedIn: 'root',
  * })

package/core/common/version.d.ts

@@ -1 +1 @@
-export declare const ADMIN_UI_VERSION = "2.1.0-next.3";
+export declare const ADMIN_UI_VERSION = "2.1.0-next.5";

package/core/components/base-nav/base-nav.component.d.ts

@@ -1,4 +1,4 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { Injector, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DataService } from '../../data/providers/data.service';
 import { HealthCheckService } from '../../providers/health-check/health-check.service';
@@ -13,7 +13,8 @@ export declare class BaseNavComponent implements OnInit, OnDestroy {
     protected healthCheckService: HealthCheckService;
     protected jobQueueService: JobQueueService;
     protected dataService: DataService;
-    constructor(route: ActivatedRoute, router: Router, navBuilderService: NavBuilderService, healthCheckService: HealthCheckService, jobQueueService: JobQueueService, dataService: DataService);
+    protected injector: Injector;
+    constructor(route: ActivatedRoute, router: Router, navBuilderService: NavBuilderService, healthCheckService: HealthCheckService, jobQueueService: JobQueueService, dataService: DataService, injector: Injector);
     private userPermissions;
     private subscription;
     shouldDisplayLink(menuItem: Pick<NavMenuItem, 'requiresPermission'>): boolean | undefined;
@@ -21,6 +22,7 @@ export declare class BaseNavComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     getRouterLink(item: NavMenuItem): string[] | null;
     private defineNavMenu;
+    private createContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseNavComponent, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseNavComponent, "[vdrBaseNav]", never, {}, {}, never, never, false, never>;
 }

package/core/data/providers/data.service.d.ts

@@ -23,7 +23,7 @@ import * as i0 from "@angular/core";
  * advisable to always select the `id` field of any entity, which will allow the returned data
  * to be effectively cached.
  *
- * @docsCategory providers
+ * @docsCategory services
  * @docsPage DataService
  * @docsWeight 0
  */
@@ -48,7 +48,7 @@ export declare class DataService {
      * they type of result returned, e.g. stream of values, single value etc.
      *
      * @example
-     * ```TypeScript
+     * ```ts
      * const result$ = this.dataService.query(gql`
      *   query MyQuery($id: ID!) {
      *     product(id: $id) {
@@ -67,7 +67,7 @@ export declare class DataService {
      * Perform a GraphQL mutation.
      *
      * @example
-     * ```TypeScript
+     * ```ts
      * const result$ = this.dataService.mutate(gql`
      *   mutation MyMutation($Codegen.UpdateEntityInput!) {
      *     updateEntity(input: $input) {

package/core/data/query-result.d.ts

@@ -5,7 +5,7 @@ import { Observable, Subject } from 'rxjs';
  * This class wraps the Apollo Angular QueryRef object and exposes some getters
  * for convenience.
  *
- * @docsCategory providers
+ * @docsCategory services
  * @docsPage DataService
  */
 export declare class QueryResult<T, V extends Record<string, any> = Record<string, any>> {

package/core/extension/add-action-bar-item.d.ts

@@ -3,25 +3,18 @@ import { ActionBarItem } from '../providers/nav-builder/nav-builder-types';
 /**
  * @description
  * Adds a button to the ActionBar at the top right of each list or detail view. The locationId can
- * be determined by inspecting the DOM and finding the <vdr-action-bar> element and its
- * `data-location-id` attribute.
- *
- * This should be used in the NgModule `providers` array of your ui extension module.
+ * be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
  *
  * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
+ * ```ts title="providers.ts"
+ * export default [
  *     addActionBarItem({
- *      id: 'print-invoice'
- *      label: 'Print Invoice',
- *      locationId: 'order-detail',
- *      routerLink: ['/extensions/invoicing'],
+ *         id: 'print-invoice',
+ *         label: 'Print Invoice',
+ *         locationId: 'order-detail',
+ *         routerLink: ['/extensions/invoicing'],
  *     }),
- *   ],
- * })
- * export class MyUiExtensionModule {}
+ * ];
  * ```
  * @docsCategory action-bar
  */

package/core/extension/add-nav-menu-item.d.ts

@@ -9,21 +9,17 @@ import { NavMenuItem, NavMenuSection } from '../providers/nav-builder/nav-builde
  * This should be used in the NgModule `providers` array of your ui extension module.
  *
  * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
+ * ```ts title="providers.ts"
+ * export default [
  *     addNavMenuSection({
- *       id: 'reports',
- *       label: 'Reports',
- *       items: [{
- *           // ...
- *       }],
+ *         id: 'reports',
+ *         label: 'Reports',
+ *         items: [{
+ *             // ...
+ *         }],
  *     },
  *     'settings'),
- *   ],
- * })
- * export class MyUiExtensionModule {}
+ * ];
  * ```
  * @docsCategory nav-menu
  */
@@ -39,20 +35,16 @@ export declare function addNavMenuSection(config: NavMenuSection, before?: strin
  * This should be used in the NgModule `providers` array of your ui extension module.
  *
  * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
+ * ```ts title="providers.ts"
+ * export default [
  *     addNavMenuItem({
- *       id: 'reviews',
- *       label: 'Product Reviews',
- *       routerLink: ['/extensions/reviews'],
- *       icon: 'star',
+ *         id: 'reviews',
+ *         label: 'Product Reviews',
+ *         routerLink: ['/extensions/reviews'],
+ *         icon: 'star',
  *     },
  *     'marketing'),
- *   ],
- * })
- * export class MyUiExtensionModule {}
+ * ];
  * ``
  *
  * @docsCategory nav-menu

package/core/extension/register-bulk-action.d.ts

@@ -13,39 +13,35 @@ import { BulkAction } from '../providers/bulk-action-registry/bulk-action-types'
  * translation via a custom service which integrates with the translation service's API.
  *
  * @example
- * ```TypeScript
- * import { NgModule } from '\@angular/core';
+ * ```ts title="providers.ts"
  * import { ModalService, registerBulkAction, SharedModule } from '\@vendure/admin-ui/core';
+ * import { ProductDataTranslationService } from './product-data-translation.service';
  *
- * \@NgModule({
- *   imports: [SharedModule],
- *   providers: [
+ * export default [
  *     ProductDataTranslationService,
  *     registerBulkAction({
- *       location: 'product-list',
- *       label: 'Send to translation service',
- *       icon: 'language',
- *       onClick: ({ injector, selection }) => {
- *         const modalService = injector.get(ModalService);
- *         const translationService = injector.get(ProductDataTranslationService);
- *         modalService
- *           .dialog({
- *             title: `Send ${selection.length} products for translation?`,
- *             buttons: [
- *               { type: 'secondary', label: 'cancel' },
- *               { type: 'primary', label: 'send', returnValue: true },
- *             ],
- *           })
- *           .subscribe(response => {
- *             if (response) {
- *               translationService.sendForTranslation(selection.map(item => item.productId));
- *             }
- *           });
- *       },
+ *         location: 'product-list',
+ *         label: 'Send to translation service',
+ *         icon: 'language',
+ *         onClick: ({ injector, selection }) => {
+ *             const modalService = injector.get(ModalService);
+ *             const translationService = injector.get(ProductDataTranslationService);
+ *             modalService
+ *                 .dialog({
+ *                     title: `Send ${selection.length} products for translation?`,
+ *                     buttons: [
+ *                         { type: 'secondary', label: 'cancel' },
+ *                         { type: 'primary', label: 'send', returnValue: true },
+ *                     ],
+ *                 })
+ *                 .subscribe(response => {
+ *                     if (response) {
+ *                         translationService.sendForTranslation(selection.map(item => item.productId));
+ *                     }
+ *                 });
+ *         },
  *     }),
- *   ],
- * })
- * export class MyUiExtensionModule {}
+ * ];
  * ```
  * @since 1.8.0
  * @docsCategory bulk-actions

package/core/extension/register-custom-detail-component.d.ts

@@ -5,6 +5,51 @@ import { CustomDetailComponentConfig } from '../providers/custom-detail-componen
  * Registers a {@link CustomDetailComponent} to be placed in a given location. This allows you
  * to embed any type of custom Angular component in the entity detail pages of the Admin UI.
  *
+ * @example
+ * ```ts
+ * import { Component, OnInit } from '\@angular/core';
+ * import { switchMap } from 'rxjs';
+ * import { FormGroup } from '\@angular/forms';
+ * import { CustomFieldConfig } from '\@vendure/common/lib/generated-types';
+ * import {
+ *     DataService,
+ *     SharedModule,
+ *     CustomDetailComponent,
+ *     registerCustomDetailComponent,
+ *     GetProductWithVariants
+ * } from '\@vendure/admin-ui/core';
+ *
+ * \@Component({
+ *     template: `{{ extraInfo$ | async | json }}`,
+ *     standalone: true,
+ *     imports: [SharedModule],
+ * })
+ * export class ProductInfoComponent implements CustomDetailComponent, OnInit {
+ *     // These two properties are provided by Vendure and will vary
+ *     // depending on the particular detail page you are embedding this
+ *     // component into.
+ *     entity$: Observable<GetProductWithVariants.Product>
+ *     detailForm: FormGroup;
+ *
+ *     extraInfo$: Observable<any>;
+ *
+ *     constructor(private cmsDataService: CmsDataService) {}
+ *
+ *     ngOnInit() {
+ *         this.extraInfo$ = this.entity$.pipe(
+ *             switchMap(entity => this.cmsDataService.getDataFor(entity.id))
+ *         );
+ *     }
+ * }
+ *
+ * export default [
+ *     registerCustomDetailComponent({
+ *         locationId: 'product-detail',
+ *         component: ProductInfoComponent,
+ *     }),
+ * ];
+ * ```
+ *
  * @docsCategory custom-detail-components
  */
 export declare function registerCustomDetailComponent(config: CustomDetailComponentConfig): Provider;

package/core/extension/register-data-table-component.d.ts

@@ -2,14 +2,15 @@ import { DataTableComponentConfig, DataTableCustomComponentService } from '../sh
 /**
  * @description
  * Allows you to override the default component used to render the data of a particular column in a DataTable.
- * The component should implement the {@link CustomDataTableColumnComponent} interface.
+ * The component should implement the {@link CustomDataTableColumnComponent} interface. The tableId and columnId can
+ * be determined by pressing `ctrl + u` when running the Admin UI in dev mode.
  *
  * @example
  * ```ts title="components/custom-table.component.ts"
  * import { Component, Input } from '\@angular/core';
  * import { CustomColumnComponent } from '\@vendure/admin-ui/core';
  *
- * @Component({
+ * \@Component({
  *     selector: 'custom-slug-component',
  *     template: `
  *         <a [href]="'https://example.com/products/' + rowItem.slug" target="_blank">{{ rowItem.slug }}</a>

package/core/extension/register-form-input-component.d.ts

@@ -3,32 +3,33 @@ import { FormInputComponent } from '../common/component-registry-types';
 /**
  * @description
  * Registers a custom FormInputComponent which can be used to control the argument inputs
- * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc) or for
+ * of a {@link ConfigurableOperationDef} (e.g. CollectionFilter, ShippingMethod etc.) or for
  * a custom field.
  *
  * @example
- * ```TypeScript
- * \@NgModule({
- *   imports: [SharedModule],
- *   declarations: [MyCustomFieldControl],
- *   providers: [
- *       registerFormInputComponent('my-custom-input', MyCustomFieldControl),
- *   ],
- * })
- * export class MyUiExtensionModule {}
+ * ```ts title="providers.ts"
+ * import { registerFormInputComponent } from '\@vendure/admin-ui/core';
+ *
+ * export default [
+ *     // highlight-next-line
+ *     registerFormInputComponent('my-custom-input', MyCustomFieldControl),
+ * ];
  * ```
  *
  * This input component can then be used in a custom field:
  *
  * @example
- * ```TypeScript
- * const config = {
+ * ```ts title="src/vendure-config.ts"
+ * import { VendureConfig } from '\@vendure/core';
+ *
+ * const config: VendureConfig = {
  *   // ...
  *   customFields: {
  *     ProductVariant: [
  *       {
  *         name: 'rrp',
  *         type: 'int',
+ *         // highlight-next-line
  *         ui: { component: 'my-custom-input' },
  *       },
  *     ]
@@ -39,7 +40,7 @@ import { FormInputComponent } from '../common/component-registry-types';
  * or with an argument of a {@link ConfigurableOperationDef}:
  *
  * @example
- * ```TypeScript
+ * ```ts
  * args: {
  *   rrp: { type: 'int', ui: { component: 'my-custom-input' } },
  * }

package/core/extension/register-history-entry-component.d.ts

@@ -5,6 +5,61 @@ import { HistoryEntryConfig } from '../providers/custom-history-entry-component/
  * Registers a {@link HistoryEntryComponent} for displaying history entries in the Order/Customer
  * history timeline.
  *
+ * @example
+ * ```ts
+ * import { Component } from '\@angular/core';
+ * import {
+ *     CustomerFragment,
+ *     CustomerHistoryEntryComponent,
+ *     registerHistoryEntryComponent,
+ *     SharedModule,
+ *     TimelineDisplayType,
+ *     TimelineHistoryEntry,
+ * } from '\@vendure/admin-ui/core';
+ *
+ * \@Component({
+ *     selector: 'tax-id-verification-component',
+ *     template: `
+ *         <div *ngIf="entry.data.valid">
+ *           Tax ID <strong>{{ entry.data.taxId }}</strong> was verified
+ *           <vdr-history-entry-detail *ngIf="entry.data">
+ *             <vdr-object-tree [value]="entry.data"></vdr-object-tree>
+ *           </vdr-history-entry-detail>
+ *         </div>
+ *         <div *ngIf="entry.data.valid">Tax ID {{ entry.data.taxId }} could not be verified</div>
+ *     `,
+ *     standalone: true,
+ *     imports: [SharedModule],
+ * })
+ * class TaxIdHistoryEntryComponent implements CustomerHistoryEntryComponent {
+ *     entry: TimelineHistoryEntry;
+ *     customer: CustomerFragment;
+ *
+ *     getDisplayType(entry: TimelineHistoryEntry): TimelineDisplayType {
+ *         return entry.data.valid ? 'success' : 'error';
+ *     }
+ *
+ *     getName(entry: TimelineHistoryEntry): string {
+ *         return 'Tax ID Verification Plugin';
+ *     }
+ *
+ *     isFeatured(entry: TimelineHistoryEntry): boolean {
+ *         return true;
+ *     }
+ *
+ *     getIconShape(entry: TimelineHistoryEntry) {
+ *         return entry.data.valid ? 'check-circle' : 'exclamation-circle';
+ *     }
+ * }
+ *
+ * export default [
+ *     registerHistoryEntryComponent({
+ *         type: 'CUSTOMER_TAX_ID_VERIFICATION',
+ *         component: TaxIdHistoryEntryComponent,
+ *     }),
+ * ];
+ * ```
+ *
  * @since 1.9.0
  * @docsCategory custom-history-entry-components
  */

package/core/extension/register-page-tab.d.ts

@@ -0,0 +1,23 @@
+import { Provider } from '@angular/core';
+import { PageTabConfig } from '../providers/page/page.service';
+/**
+ * @description
+ * Add a tab to an existing list or detail page.
+ *
+ * @example
+ * ```ts title="providers.ts"
+ * import { registerPageTab } from '@vendure/admin-ui/core';
+ * import { DeletedProductListComponent } from './components/deleted-product-list/deleted-product-list.component';
+ *
+ * export default [
+ *     registerPageTab({
+ *         location: 'product-list',
+ *         tab: 'Deleted Products',
+ *         route: 'deleted',
+ *         component: DeletedProductListComponent,
+ *     }),
+ * ];
+ * ```
+ * @docsCategory tabs
+ */
+export declare function registerPageTab(config: PageTabConfig): Provider;

package/core/extension/register-route-component.d.ts

@@ -5,7 +5,13 @@ import { DocumentNode } from 'graphql';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { BaseDetailComponent } from '../common/base-detail.component';
 import { BreadcrumbValue } from '../providers/breadcrumb/breadcrumb.service';
-import { RouteComponent } from './components/route.component';
+import { AngularRouteComponent } from './components/angular-route.component';
+/**
+ * @description
+ * Configuration for a route component.
+ *
+ * @docsCategory routes
+ */
 export type RegisterRouteComponentOptions<Component extends any | BaseDetailComponent<Entity>, Entity extends {
     id: string;
     updatedAt?: string;
@@ -24,6 +30,46 @@ export type RegisterRouteComponentOptions<Component extends any | BaseDetailComp
 } & (Component extends BaseDetailComponent<Entity> ? {
     entityKey: R;
 } : unknown);
+/**
+ * @description
+ * Registers an Angular standalone component to be rendered in a route.
+ *
+ * @example
+ * ```ts title="routes.ts"
+ * import { registerRouteComponent } from '\@vendure/admin-ui/core';
+ * import { registerReactRouteComponent } from '\@vendure/admin-ui/react';
+ *
+ * import { ProductReviewDetailComponent } from './components/product-review-detail/product-review-detail.component';
+ * import { AllProductReviewsList } from './components/all-product-reviews-list/all-product-reviews-list.component';
+ * import { GetReviewDetailDocument } from './generated-types';
+ *
+ * export default [
+ *     registerRouteComponent({
+ *         path: '',
+ *         component: AllProductReviewsList,
+ *         breadcrumb: 'Product reviews',
+ *     }),
+ *     registerRouteComponent({
+ *         path: ':id',
+ *         component: ProductReviewDetailComponent,
+ *         query: GetReviewDetailDocument,
+ *         entityKey: 'productReview',
+ *         getBreadcrumbs: entity => [
+ *             {
+ *                 label: 'Product reviews',
+ *                 link: ['/extensions', 'product-reviews'],
+ *             },
+ *             {
+ *                 label: `#${entity?.id} (${entity?.product.name})`,
+ *                 link: [],
+ *             },
+ *         ],
+ *     }),
+ * ];
+ * ```
+ *
+ * @docsCategory routes
+ */
 export declare function registerRouteComponent<Component extends any | BaseDetailComponent<Entity>, Entity extends {
     id: string;
     updatedAt?: string;
@@ -39,7 +85,7 @@ export declare function registerRouteComponent<Component extends any | BaseDetai
     data: {
         breadcrumb: BehaviorSubject<BreadcrumbValue> | ((data: any) => any);
     };
-    component: typeof RouteComponent;
+    component: typeof AngularRouteComponent;
     title?: string | Type<import("@angular/router").Resolve<string>> | ResolveFn<string> | undefined;
     path: string;
     pathMatch?: "prefix" | "full" | undefined;

package/core/providers/bulk-action-registry/bulk-action-types.d.ts

@@ -111,7 +111,7 @@ export interface BulkAction<ItemType = any, ComponentType = any> {
      * running here.
      *
      * @example
-     * ```TypeScript
+     * ```ts
      * import { registerBulkAction, DataService } from '\@vendure/admin-ui/core';
      *
      * registerBulkAction({
@@ -132,7 +132,7 @@ export interface BulkAction<ItemType = any, ComponentType = any> {
      * Control the display of this item based on the user permissions.
      *
      * @example
-     * ```TypeScript
+     * ```ts
      * registerBulkAction({
      *   // Can be specified as a simple string
      *   requiresPermission: Permission.UpdateProduct,

package/core/providers/modal/modal.service.d.ts

@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
  * This service is responsible for instantiating a ModalDialog component and
  * embedding the specified component within.
  *
- * @docsCategory providers
+ * @docsCategory services
  * @docsPage ModalService
  * @docsWeight 0
  */

package/core/providers/modal/modal.types.d.ts

@@ -3,7 +3,7 @@
  * Any component intended to be used with the ModalService.fromComponent() method must implement
  * this interface.
  *
- * @docsCategory providers
+ * @docsCategory services
  * @docsPage ModalService
  */
 export interface Dialog<R = any> {
@@ -25,7 +25,7 @@ export interface DialogButtonConfig<T> {
  * @description
  * Configures a generic modal dialog.
  *
- * @docsCategory providers
+ * @docsCategory services
  * @docsPage ModalService
  */
 export interface DialogConfig<T> {
@@ -41,7 +41,7 @@ export interface DialogConfig<T> {
  * @description
  * Options to configure the behaviour of the modal.
  *
- * @docsCategory providers
+ * @docsCategory services
  * @docsPage ModalService
  */
 export interface ModalOptions<T> {

package/core/providers/nav-builder/nav-builder-types.d.ts

@@ -1,3 +1,4 @@
+import { Injector } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { ActionBarLocationId } from '../../common/component-registry-types';
@@ -64,15 +65,20 @@ export interface NavMenuSection {
 }
 /**
  * @description
- * Utilities available to the onClick handler of an ActionBarItem.
+ * Providers available to the onClick handler of an {@link ActionBarItem} or {@link NavMenuItem}.
  *
  * @docsCategory action-bar
  */
-export interface OnClickContext {
+export interface ActionBarContext {
     route: ActivatedRoute;
+    injector: Injector;
     dataService: DataService;
     notificationService: NotificationService;
 }
+export interface ActionBarButtonState {
+    disabled: boolean;
+    visible: boolean;
+}
 /**
  * @description
  * A button in the ActionBar area at the top of one of the list or detail views.
@@ -83,12 +89,31 @@ export interface ActionBarItem {
     id: string;
     label: string;
     locationId: ActionBarLocationId;
+    /**
+     * @description
+     * Deprecated since v2.1.0 - use `buttonState` instead.
+     * @deprecated - use `buttonState` instead.
+     */
     disabled?: Observable<boolean>;
-    onClick?: (event: MouseEvent, context: OnClickContext) => void;
+    /**
+     * @description
+     * A function which returns an observable of the button state, allowing you to
+     * dynamically enable/disable or show/hide the button.
+     *
+     * @since 2.1.0
+     */
+    buttonState?: (context: ActionBarContext) => Observable<ActionBarButtonState>;
+    onClick?: (event: MouseEvent, context: ActionBarContext) => void;
     routerLink?: RouterLinkDefinition;
     buttonColor?: 'primary' | 'success' | 'warning';
     buttonStyle?: 'solid' | 'outline' | 'link';
     icon?: string;
     requiresPermission?: string | string[];
 }
-export type RouterLinkDefinition = ((route: ActivatedRoute) => any[]) | any[];
+/**
+ * @description
+ * A function which returns the router link for an {@link ActionBarItem} or {@link NavMenuItem}.
+ *
+ * @docsCategory action-bar
+ */
+export type RouterLinkDefinition = ((route: ActivatedRoute, context: ActionBarContext) => any[]) | any[];