@vendure/dashboard 3.5.0-minor-202510071456 → 3.5.0-minor-202510201346

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

@@ -7,17 +7,46 @@ export type NavMenuSectionPlacement = 'top' | 'bottom';
 
 /**
  * @description
- * The base configuration for navigation items and sections of the main app nav bar.
+ * Defines an items in the navigation menu.
  *
  * @docsCategory extensions-api
  * @docsPage Navigation
  * @since 3.4.0
  */
-interface NavMenuBaseItem {
+interface NavMenuItem {
+    /**
+     * @description
+     * A unique ID for this nav menu item
+     */
     id: string;
+    /**
+     * @description
+     * The title that will appear in the nav menu
+     */
     title: string;
+    /**
+     * @description
+     * The url of the route which this nav item links to.
+     */
+    url: string;
+    /**
+     * @description
+     * An optional icon component to represent the item,
+     * which should be imported from `lucide-react`.
+     */
     icon?: LucideIcon;
+    /**
+     * @description
+     * The order is an number which allows you to control
+     * the relative position in relation to other items in the
+     * menu.
+     * A higher number appears further down the list.
+     */
     order?: number;
+    /**
+     * Whether this item should appear in the top of bottom section
+     * of the nav menu.
+     */
     placement?: NavMenuSectionPlacement;
     /**
      * @description
@@ -27,23 +56,7 @@ interface NavMenuBaseItem {
     requiresPermission?: string | string[];
 }
 
-/**
- * @description
- * Defines an items in the navigation menu.
- *
- * @docsCategory extensions-api
- * @docsPage Navigation
- * @since 3.4.0
- */
-export interface NavMenuItem extends NavMenuBaseItem {
-    /**
-     * @description
-     * The url of the route which this nav item links to.
-     */
-    url: string;
-}
-
-export interface NavMenuSection extends NavMenuBaseItem {
+export interface NavMenuSection extends Omit<NavMenuItem, 'url'> {
     defaultOpen?: boolean;
     items?: NavMenuItem[];
 }

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

@@ -0,0 +1,151 @@
+import { graphql } from '@/vdb/graphql/graphql.js';
+import type { Meta, StoryObj } from '@storybook/react';
+import { DemoRouterProvider } from '../../../../.storybook/providers.js';
+import { DetailPage, DetailPageProps } from './detail-page.js';
+
+// Sample GraphQL query for a product detail
+const productFragment = graphql(`
+    fragment ProductDetail on Product {
+        id
+        createdAt
+        updatedAt
+        name
+        slug
+        description
+        enabled
+        featuredAsset {
+            id
+        }
+        assets {
+            id
+        }
+        facetValues {
+            id
+        }
+        translations {
+            id
+            languageCode
+            name
+            slug
+            description
+        }
+    }
+`);
+
+const productQuery = graphql(
+    `
+        query Product($id: ID!) {
+            product(id: $id) {
+                ...ProductDetail
+            }
+        }
+    `,
+    [productFragment],
+);
+
+const createProductDocument = graphql(`
+    mutation CreateProduct($input: CreateProductInput!) {
+        createProduct(input: $input) {
+            id
+            name
+            slug
+            description
+            enabled
+        }
+    }
+`);
+
+const updateProductDocument = graphql(`
+    mutation UpdateProduct($input: UpdateProductInput!) {
+        updateProduct(input: $input) {
+            id
+            name
+            slug
+            description
+            enabled
+        }
+    }
+`);
+
+function DetailPageStoryWrapper(props: Omit<DetailPageProps<any, any, any>, 'route'>) {
+    return (
+        <DemoRouterProvider
+            component={route => <DetailPage {...props} route={route} />}
+            path={'/products/$id'}
+            initialPath={'/products/1'}
+        />
+    );
+}
+
+const meta = {
+    title: 'Layout/DetailPage',
+    component: DetailPageStoryWrapper,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        pageId: {
+            control: 'text',
+            description: 'Unique identifier for the detail page',
+        },
+        entityName: {
+            control: 'text',
+            description: 'Name of the entity (inferred from query if not provided)',
+        },
+        title: {
+            control: false,
+            description: 'Function that returns the page title based on the entity',
+        },
+        queryDocument: {
+            control: false,
+            description: 'GraphQL query document for fetching entity data',
+        },
+        createDocument: {
+            control: false,
+            description: 'GraphQL mutation document for creating the entity',
+        },
+        updateDocument: {
+            control: false,
+            description: 'GraphQL mutation document for updating the entity',
+        },
+        setValuesForUpdate: {
+            control: false,
+            description: 'Function to map entity data to update input',
+        },
+    },
+} satisfies Meta<typeof DetailPageStoryWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic example of a DetailPage showing a product entity.
+ * This demonstrates the minimal configuration needed to render a detail page.
+ */
+export const BasicDetail: Story = {
+    args: {
+        pageId: 'product-detail',
+        queryDocument: productQuery,
+        updateDocument: updateProductDocument,
+        title: entity => entity?.name || 'Product',
+        setValuesForUpdate: entity => ({
+            id: entity.id,
+            name: entity.name,
+            slug: entity.slug,
+            description: entity.description,
+            enabled: entity.enabled,
+            featuredAssetId: entity.featuredAsset?.id,
+            assetIds: entity.assets.map(asset => asset.id),
+            facetValueIds: entity.facetValues.map(facetValue => facetValue.id),
+            translations: entity.translations.map(translation => ({
+                id: translation.id,
+                languageCode: translation.languageCode,
+                name: translation.name,
+                slug: translation.slug,
+                description: translation.description,
+                customFields: (translation as any).customFields,
+            })),
+        }),
+    },
+};

package/src/lib/framework/page/list-page.stories.tsx

@@ -0,0 +1,217 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage, ListPageProps } from '@/vdb/framework/page/list-page.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlusIcon } from 'lucide-react';
+
+import { DemoRouterProvider } from '../../../../.storybook/providers.js';
+
+// Sample GraphQL query for countries
+const countryItemFragment = graphql(`
+    fragment CountryItem on Country {
+        id
+        createdAt
+        updatedAt
+        name
+        code
+        enabled
+    }
+`);
+
+const countriesListQuery = graphql(
+    `
+        query CountriesList($options: CountryListOptions) {
+            countries(options: $options) {
+                items {
+                    ...CountryItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [countryItemFragment],
+);
+
+const deleteCountryDocument = graphql(`
+    mutation DeleteCountry($id: ID!) {
+        deleteCountry(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+function ListPageStoryWrapper(props: Omit<ListPageProps<any, any, any, any>, 'route'>) {
+    return <DemoRouterProvider component={route => <ListPage {...props} route={() => route} />} />;
+}
+
+const meta = {
+    title: 'Layout/ListPage',
+    component: ListPageStoryWrapper,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        pageId: {
+            control: 'text',
+            description: 'Unique identifier for the list page',
+        },
+        title: {
+            control: 'text',
+            description: 'Page title displayed in the header',
+        },
+        listQuery: {
+            control: false,
+            description: 'GraphQL query document for fetching list data',
+        },
+        deleteMutation: {
+            control: false,
+            description: 'GraphQL mutation document for deleting items',
+        },
+        customizeColumns: {
+            control: false,
+            description: 'Customize column rendering and behavior',
+        },
+        defaultVisibility: {
+            control: 'object',
+            description: 'Default visible columns',
+        },
+    },
+} satisfies Meta<typeof ListPageStoryWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic example of a ListPage showing countries from the demo API.
+ * This demonstrates the minimal configuration needed to render a list.
+ */
+export const BasicList: Story = {
+    args: {
+        pageId: 'country-list',
+        listQuery: countriesListQuery,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+    },
+};
+
+/**
+ * ListPage with custom column rendering and delete mutation.
+ * Shows how to customize the name column to render as a detail page button.
+ */
+export const WithCustomColumns: Story = {
+    args: {
+        pageId: 'country-list-custom',
+        listQuery: countriesListQuery,
+        deleteMutation: deleteCountryDocument,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+        },
+    },
+};
+
+/**
+ * ListPage with search functionality.
+ * Demonstrates how to configure search to filter on multiple fields.
+ */
+export const WithSearch: Story = {
+    args: {
+        pageId: 'country-list-search',
+        listQuery: countriesListQuery,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        onSearchTermChange: (searchTerm: string) => {
+            return {
+                name: {
+                    contains: searchTerm,
+                },
+                code: {
+                    contains: searchTerm,
+                },
+            };
+        },
+        transformVariables: (variables: any) => {
+            return {
+                ...variables,
+                options: {
+                    ...variables.options,
+                    filterOperator: 'OR',
+                },
+            };
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+        },
+    },
+};
+
+/**
+ * Complete example with action bar and all features.
+ * Shows the full ListPage configuration including custom action buttons.
+ */
+export const Complete: Story = {
+    args: {
+        pageId: 'country-list-complete',
+        listQuery: countriesListQuery,
+        deleteMutation: deleteCountryDocument,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        onSearchTermChange: (searchTerm: string) => {
+            return {
+                name: {
+                    contains: searchTerm,
+                },
+                code: {
+                    contains: searchTerm,
+                },
+            };
+        },
+        transformVariables: (variables: any) => {
+            return {
+                ...variables,
+                options: {
+                    ...variables.options,
+                    filterOperator: 'OR',
+                },
+            };
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+        },
+        children: (
+            <PageActionBarRight>
+                <Button>
+                    <PlusIcon />
+                    Add Country
+                </Button>
+            </PageActionBarRight>
+        ),
+    },
+};

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

@@ -17,7 +17,13 @@ import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
-import { FullWidthPageBlock, Page, PageActionBar, PageLayout, PageTitle } from '../layout-engine/page-layout.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageActionBar,
+    PageLayout,
+    PageTitle,
+} from '../layout-engine/page-layout.js';
 
 /**
  * @description
@@ -393,6 +399,7 @@ export interface ListPageProps<
  *                 body
  *                 customFields
  *             }
+ *             totalItems
  *         }
  *     }
  * `);

package/src/lib/graphql/api.ts

@@ -69,6 +69,20 @@ const awesomeClient = new AwesomeGraphQLClient({
     },
 });
 
+/**
+ * @description
+ * Handles the scenario where there's an invalid channel token in local storage.
+ * Most often seen in local development when testing multiple backends on the same
+ * localhost origin.
+ */
+function handleInvalidChannelToken(err: unknown) {
+    if (err instanceof Error) {
+        if ((err as any).extensions?.code === 'CHANNEL_NOT_FOUND') {
+            localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+        }
+    }
+}
+
 export type VariablesAndRequestHeadersArgs<V extends Variables> =
     V extends Record<any, never>
         ? [variables?: V, requestHeaders?: HeadersInit]
@@ -79,7 +93,10 @@ function query<T, V extends Variables = Variables>(
     variables?: V,
 ): Promise<T> {
     const documentString = typeof document === 'string' ? document : print(document);
-    return awesomeClient.request(documentString, variables) as any;
+    return awesomeClient.request(documentString, variables).catch(err => {
+        handleInvalidChannelToken(err);
+        throw err;
+    }) as any;
 }
 
 function mutate<T, V extends Variables = Variables>(

package/src/lib/graphql/graphql-env.d.ts

@@ -416,7 +416,7 @@ export type introspection_types = {
     'TaxCategorySortParameter': { kind: 'INPUT_OBJECT'; name: 'TaxCategorySortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
     'TaxLine': { kind: 'OBJECT'; name: 'TaxLine'; fields: { 'description': { name: 'description'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'taxRate': { name: 'taxRate'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; }; };
     'TaxRate': { kind: 'OBJECT'; name: 'TaxRate'; fields: { 'category': { name: 'category'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'TaxCategory'; ofType: null; }; } }; 'createdAt': { name: 'createdAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'customFields': { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; } }; 'customerGroup': { name: 'customerGroup'; type: { kind: 'OBJECT'; name: 'CustomerGroup'; ofType: null; } }; 'enabled': { name: 'enabled'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'updatedAt': { name: 'updatedAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'value': { name: 'value'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'zone': { name: 'zone'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Zone'; ofType: null; }; } }; }; };
-    'TaxRateFilterParameter': { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'INPUT_OBJECT'; name: 'BooleanOperators'; ofType: null; }; defaultValue: null }, { name: 'value'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: '_and'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: '_or'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }]; };
+    'TaxRateFilterParameter': { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; isOneOf: false; inputFields: [{ name: 'zoneId'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'categoryId'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'INPUT_OBJECT'; name: 'BooleanOperators'; ofType: null; }; defaultValue: null }, { name: 'value'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: '_and'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: '_or'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }]; };
     'TaxRateList': { kind: 'OBJECT'; name: 'TaxRateList'; fields: { 'items': { name: 'items'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'TaxRate'; ofType: null; }; }; }; } }; 'totalItems': { name: 'totalItems'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
     'TaxRateListOptions': { kind: 'INPUT_OBJECT'; name: 'TaxRateListOptions'; isOneOf: false; inputFields: [{ name: 'skip'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'take'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'sort'; type: { kind: 'INPUT_OBJECT'; name: 'TaxRateSortParameter'; ofType: null; }; defaultValue: null }, { name: 'filter'; type: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; defaultValue: null }, { name: 'filterOperator'; type: { kind: 'ENUM'; name: 'LogicalOperator'; ofType: null; }; defaultValue: null }]; };
     'TaxRateSortParameter': { kind: 'INPUT_OBJECT'; name: 'TaxRateSortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'value'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };

package/src/lib/hooks/use-alerts.ts

@@ -0,0 +1,84 @@
+import { AlertSeverity, DashboardAlertDefinition } from '@/vdb/framework/extension-api/types/alerts.js';
+import { useAlertsContext } from '@/vdb/providers/alerts-provider.js';
+import { useMemo } from 'react';
+
+/**
+ * @description
+ * An individual Alert item.
+ *
+ * @docsCategory hooks
+ * @docsPage useAlerts
+ * @since 3.5.0
+ */
+export interface AlertEntry {
+    definition: DashboardAlertDefinition;
+    active: boolean;
+    currentSeverity?: AlertSeverity;
+    lastData: any;
+    dismiss: () => void;
+}
+
+/**
+ * @description
+ * Returns information about all registered Alerts, including how many are
+ * active and at what severity.
+ *
+ * @docsCategory hooks
+ * @docsPage useAlerts
+ * @docsWeight 0
+ * @since 3.5.0
+ */
+export function useAlerts(): { alerts: AlertEntry[]; activeCount: number; highestSeverity: AlertSeverity } {
+    const { alertDefs, rawResults, dismissedAlerts, setDismissedAlerts } = useAlertsContext();
+
+    const alerts = useMemo(() => {
+        return rawResults.map((result, idx) => {
+            const alertDef = alertDefs[idx];
+            const dismissedAt = dismissedAlerts.get(alertDef.id);
+            const isDismissed =
+                dismissedAt !== undefined &&
+                result.dataUpdatedAt !== undefined &&
+                dismissedAt > result.dataUpdatedAt;
+            const active = alertDef.shouldShow(result.data) && !isDismissed;
+            const currentSeverity = getSeverity(alertDef, result.data);
+            return {
+                definition: alertDef,
+                active,
+                lastData: result.data,
+                currentSeverity,
+                dismiss: () => {
+                    setDismissedAlerts(prev => new Map(prev).set(alertDef.id, Date.now()));
+                },
+            };
+        });
+    }, [rawResults, alertDefs, dismissedAlerts]);
+
+    const activeCount = useMemo(() => alerts.filter(alert => alert.active).length, [alerts]);
+    const highestSeverity: AlertSeverity =
+        alerts.length > 0
+            ? alerts.reduce((highest, a) => {
+                  if (highest === 'warning' && a.currentSeverity === 'error') {
+                      return 'error';
+                  }
+                  if (
+                      highest === 'info' &&
+                      (a.currentSeverity === 'warning' || a.currentSeverity === 'error')
+                  ) {
+                      return a.currentSeverity;
+                  }
+                  return highest;
+              }, 'info' as AlertSeverity)
+            : 'info';
+
+    return { alerts, activeCount, highestSeverity };
+}
+
+function getSeverity(alertDef: DashboardAlertDefinition, data: any) {
+    if (typeof alertDef.severity === 'string') {
+        return alertDef.severity;
+    } else if (typeof alertDef.severity === 'function') {
+        return alertDef.severity(data);
+    } else {
+        return 'info';
+    }
+}

package/src/lib/hooks/use-floating-bulk-actions.ts

@@ -32,9 +32,8 @@ export function useFloatingBulkActions({
         }
 
         const updatePosition = () => {
-            // Find the container by searching upwards from the current component
-            const currentElement = document.activeElement || document.body;
-            const container = currentElement.closest(containerSelector) as HTMLElement;
+            // Find the container in the document
+            const container = document.querySelector(containerSelector) as HTMLElement;
             if (!container) return;
 
             const containerRect = container.getBoundingClientRect();