@vendure/dashboard 3.4.3-master-202509190229 → 3.4.3-master-202509200226

package/src/app/routes/_authenticated/_assets/components/manage-tags-dialog.tsx

@@ -0,0 +1,217 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { deleteTagDocument, tagListDocument, updateTagDocument } from '../assets.graphql.js';
+
+interface ManageTagsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onTagsUpdated?: () => void;
+}
+
+export function ManageTagsDialog({ open, onOpenChange, onTagsUpdated }: Readonly<ManageTagsDialogProps>) {
+    const queryClient = useQueryClient();
+    const [toDelete, setToDelete] = useState<string[]>([]);
+    const [toUpdate, setToUpdate] = useState<Array<{ id: string; value: string }>>([]);
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Fetch all tags
+    const { data: tagsData, isLoading } = useQuery({
+        queryKey: ['tags'],
+        queryFn: () => api.query(tagListDocument, { options: { take: 100 } }),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    // Update tag mutation
+    const updateTagMutation = useMutation({
+        mutationFn: ({ id, value }: { id: string; value: string }) =>
+            api.mutate(updateTagDocument, { input: { id, value } }),
+    });
+
+    // Delete tag mutation
+    const deleteTagMutation = useMutation({
+        mutationFn: (id: string) => api.mutate(deleteTagDocument, { id }),
+    });
+
+    const allTags = tagsData?.tags.items || [];
+
+    const toggleDelete = (id: string) => {
+        if (toDelete.includes(id)) {
+            setToDelete(toDelete.filter(_id => _id !== id));
+        } else {
+            setToDelete([...toDelete, id]);
+        }
+    };
+
+    const markedAsDeleted = (id: string) => {
+        return toDelete.includes(id);
+    };
+
+    const updateTagValue = (id: string, value: string) => {
+        const exists = toUpdate.find(i => i.id === id);
+        if (exists) {
+            if (value === allTags.find(tag => tag.id === id)?.value) {
+                // If value is reverted to original, remove from update list
+                setToUpdate(toUpdate.filter(i => i.id !== id));
+            } else {
+                exists.value = value;
+                setToUpdate([...toUpdate]);
+            }
+        } else {
+            setToUpdate([...toUpdate, { id, value }]);
+        }
+    };
+
+    const getDisplayValue = (id: string) => {
+        const updateItem = toUpdate.find(i => i.id === id);
+        if (updateItem) {
+            return updateItem.value;
+        }
+        return allTags.find(tag => tag.id === id)?.value || '';
+    };
+
+    const renderTagsList = () => {
+        if (isLoading) {
+            return (
+                <div className="text-sm text-muted-foreground">
+                    <Trans>Loading tags...</Trans>
+                </div>
+            );
+        }
+
+        if (allTags.length === 0) {
+            return (
+                <div className="text-sm text-muted-foreground">
+                    <Trans>No tags found</Trans>
+                </div>
+            );
+        }
+
+        return allTags.map(tag => {
+            const isDeleted = markedAsDeleted(tag.id);
+            const isModified = toUpdate.some(i => i.id === tag.id);
+
+            return (
+                <div
+                    key={tag.id}
+                    className={cn(
+                        'flex items-center gap-2 p-2 rounded-md',
+                        isDeleted && 'opacity-50',
+                    )}
+                >
+                    <Input
+                        value={getDisplayValue(tag.id)}
+                        onChange={e => updateTagValue(tag.id, e.target.value)}
+                        disabled={isDeleted || isSaving}
+                        className={cn('flex-1', isModified && !isDeleted && 'border-primary')}
+                    />
+                    <Button
+                        variant={isDeleted ? 'default' : 'ghost'}
+                        size="icon"
+                        onClick={() => toggleDelete(tag.id)}
+                        disabled={isSaving}
+                        className={cn(isDeleted && 'bg-destructive hover:bg-destructive/90')}
+                    >
+                        <Trash2 className="h-4 w-4" />
+                    </Button>
+                </div>
+            );
+        });
+    };
+
+    const hasChanges = toDelete.length > 0 || toUpdate.length > 0;
+
+    const handleCancel = () => {
+        setToDelete([]);
+        setToUpdate([]);
+        onOpenChange(false);
+    };
+
+    const handleSave = async () => {
+        setIsSaving(true);
+
+        try {
+            const operations = [];
+
+            // Delete operations
+            for (const id of toDelete) {
+                operations.push(deleteTagMutation.mutateAsync(id));
+            }
+
+            // Update operations (skip if marked for deletion)
+            for (const item of toUpdate) {
+                if (!toDelete.includes(item.id)) {
+                    operations.push(updateTagMutation.mutateAsync(item));
+                }
+            }
+
+            await Promise.all(operations);
+
+            // Invalidate tags query to refresh the list
+            await queryClient.invalidateQueries({ queryKey: ['tags'] });
+
+            // Also invalidate asset queries to refresh any assets using these tags
+            await queryClient.invalidateQueries({ queryKey: ['asset'] });
+
+            toast.success('Tags updated successfully');
+
+            // Call callback to notify parent component
+            if (onTagsUpdated) {
+                onTagsUpdated();
+            }
+
+            // Reset state
+            setToDelete([]);
+            setToUpdate([]);
+            onOpenChange(false);
+        } catch (error) {
+            toast.error('Failed to update tags', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+            });
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-md">
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Manage Tags</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Edit or delete existing tags</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="max-h-[400px] overflow-y-auto space-y-2 py-4">
+                    {renderTagsList()}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={handleCancel} disabled={isSaving}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button onClick={handleSave} disabled={!hasChanges || isSaving}>
+                        {isSaving ? <Trans>Saving...</Trans> : <Trans>Save Changes</Trans>}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

package/src/app/routes/_authenticated/_channels/channels.tsx

@@ -8,7 +8,7 @@ import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
-import { channelListQuery, deleteChannelDocument } from './channels.graphql.js';
+import { channelListQuery } from './channels.graphql.js';
 import { DeleteChannelsBulkAction } from './components/channel-bulk-actions.js';
 
 export const Route = createFileRoute('/_authenticated/_channels/channels')({
@@ -23,7 +23,6 @@ function ChannelListPage() {
             pageId="channel-list"
             title="Channels"
             listQuery={channelListQuery}
-            deleteMutation={deleteChannelDocument}
             route={Route}
             defaultVisibility={{
                 code: true,

package/src/app/routes/_authenticated/_collections/collections.tsx

@@ -10,11 +10,11 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { ExpandedState, getExpandedRowModel } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 import { ResultOf } from 'gql.tada';
-import { Folder, FolderOpen, FolderTreeIcon, PlusIcon } from 'lucide-react';
+import { Folder, FolderOpen, PlusIcon } from 'lucide-react';
 import { useState } from 'react';
 
 import { Badge } from '@/vdb/components/ui/badge.js';
-import { collectionListDocument, deleteCollectionDocument } from './collections.graphql.js';
+import { collectionListDocument } from './collections.graphql.js';
 import {
     AssignCollectionsToChannelBulkAction,
     DeleteCollectionsBulkAction,
@@ -23,7 +23,6 @@ import {
     RemoveCollectionsFromChannelBulkAction,
 } from './components/collection-bulk-actions.js';
 import { CollectionContentsSheet } from './components/collection-contents-sheet.js';
-import { useMoveSingleCollection } from './components/move-single-collection.js';
 
 export const Route = createFileRoute('/_authenticated/_collections/collections')({
     component: CollectionListPage,
@@ -34,7 +33,6 @@ type Collection = ResultOf<typeof collectionListDocument>['collections']['items'
 
 function CollectionListPage() {
     const [expanded, setExpanded] = useState<ExpandedState>({});
-    const { handleMoveClick, MoveDialog } = useMoveSingleCollection();
     const childrenQueries = useQueries({
         queries: Object.entries(expanded).map(([collectionId, isExpanded]) => {
             return {
@@ -96,7 +94,6 @@ function CollectionListPage() {
                         },
                     };
                 }}
-                deleteMutation={deleteCollectionDocument}
                 customizeColumns={{
                     name: {
                         header: 'Collection Name',
@@ -210,16 +207,6 @@ function CollectionListPage() {
                     };
                 }}
                 route={Route}
-                rowActions={[
-                    {
-                        label: (
-                            <div className="flex items-center gap-2">
-                                <FolderTreeIcon className="w-4 h-4" /> <Trans>Move</Trans>
-                            </div>
-                        ),
-                        onClick: row => handleMoveClick(row.original),
-                    },
-                ]}
                 bulkActions={[
                     {
                         component: AssignCollectionsToChannelBulkAction,
@@ -254,7 +241,6 @@ function CollectionListPage() {
                     </PermissionGuard>
                 </PageActionBarRight>
             </ListPage>
-            <MoveDialog />
         </>
     );
 }

package/src/app/routes/_authenticated/_countries/countries.tsx

@@ -7,7 +7,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCountriesBulkAction } from './components/country-bulk-actions.js';
-import { countriesListQuery, deleteCountryDocument } from './countries.graphql.js';
+import { countriesListQuery } from './countries.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_countries/countries')({
     component: CountryListPage,
@@ -19,7 +19,6 @@ function CountryListPage() {
         <ListPage
             pageId="country-list"
             listQuery={countriesListQuery}
-            deleteMutation={deleteCountryDocument}
             route={Route}
             title="Countries"
             defaultVisibility={{

package/src/app/routes/_authenticated/_customer-groups/customer-groups.tsx

@@ -8,7 +8,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCustomerGroupsBulkAction } from './components/customer-group-bulk-actions.js';
 import { CustomerGroupMembersSheet } from './components/customer-group-members-sheet.js';
-import { customerGroupListDocument, deleteCustomerGroupDocument } from './customer-groups.graphql.js';
+import { customerGroupListDocument } from './customer-groups.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_customer-groups/customer-groups')({
     component: CustomerGroupListPage,
@@ -21,7 +21,6 @@ function CustomerGroupListPage() {
             pageId="customer-group-list"
             title="Customer Groups"
             listQuery={customerGroupListDocument}
-            deleteMutation={deleteCustomerGroupDocument}
             route={Route}
             customizeColumns={{
                 name: {

package/src/app/routes/_authenticated/_customers/customers.tsx

@@ -8,7 +8,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteCustomersBulkAction } from './components/customer-bulk-actions.js';
 import { CustomerStatusBadge } from './components/customer-status-badge.js';
-import { customerListDocument, deleteCustomerDocument } from './customers.graphql.js';
+import { customerListDocument } from './customers.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_customers/customers')({
     component: CustomerListPage,
@@ -21,7 +21,6 @@ function CustomerListPage() {
             title="Customers"
             pageId="customer-list"
             listQuery={customerListDocument}
-            deleteMutation={deleteCustomerDocument}
             onSearchTermChange={searchTerm => {
                 return {
                     lastName: {

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -63,7 +63,6 @@ function FacetListPage() {
             pageId="facet-list"
             title="Facets"
             listQuery={facetListDocument}
-            deleteMutation={deleteFacetDocument}
             defaultVisibility={{
                 name: true,
                 isPrivate: true,

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

@@ -12,7 +12,7 @@ import {
     DeletePaymentMethodsBulkAction,
     RemovePaymentMethodsFromChannelBulkAction,
 } from './components/payment-method-bulk-actions.js';
-import { deletePaymentMethodDocument, paymentMethodListQuery } from './payment-methods.graphql.js';
+import { paymentMethodListQuery } from './payment-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_payment-methods/payment-methods')({
     component: PaymentMethodListPage,
@@ -24,7 +24,6 @@ function PaymentMethodListPage() {
         <ListPage
             pageId="payment-method-list"
             listQuery={paymentMethodListQuery}
-            deleteMutation={deletePaymentMethodDocument}
             route={Route}
             title="Payment Methods"
             defaultVisibility={{

package/src/app/routes/_authenticated/_product-variants/product-variants.tsx

@@ -11,7 +11,7 @@ import {
     DeleteProductVariantsBulkAction,
     RemoveProductVariantsFromChannelBulkAction,
 } from './components/product-variant-bulk-actions.js';
-import { deleteProductVariantDocument, productVariantListDocument } from './product-variants.graphql.js';
+import { productVariantListDocument } from './product-variants.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_product-variants/product-variants')({
     component: ProductListPage,
@@ -25,7 +25,6 @@ function ProductListPage() {
             pageId="product-variant-list"
             title={<Trans>Product Variants</Trans>}
             listQuery={productVariantListDocument}
-            deleteMutation={deleteProductVariantDocument}
             bulkActions={[
                 {
                     component: AssignProductVariantsToChannelBulkAction,

package/src/app/routes/_authenticated/_products/products.tsx

@@ -13,7 +13,7 @@ import {
     DuplicateProductsBulkAction,
     RemoveProductsFromChannelBulkAction,
 } from './components/product-bulk-actions.js';
-import { deleteProductDocument, productListDocument } from './products.graphql.js';
+import { productListDocument } from './products.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_products/products')({
     component: ProductListPage,
@@ -25,7 +25,6 @@ function ProductListPage() {
         <ListPage
             pageId="product-list"
             listQuery={productListDocument}
-            deleteMutation={deleteProductDocument}
             title="Products"
             customizeColumns={{
                 name: {

package/src/app/routes/_authenticated/_promotions/promotions.tsx

@@ -13,7 +13,7 @@ import {
     DuplicatePromotionsBulkAction,
     RemovePromotionsFromChannelBulkAction,
 } from './components/promotion-bulk-actions.js';
-import { deletePromotionDocument, promotionListDocument } from './promotions.graphql.js';
+import { promotionListDocument } from './promotions.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_promotions/promotions')({
     component: PromotionListPage,
@@ -25,7 +25,6 @@ function PromotionListPage() {
         <ListPage
             pageId="promotion-list"
             listQuery={promotionListDocument}
-            deleteMutation={deletePromotionDocument}
             route={Route}
             title="Promotions"
             defaultVisibility={{

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -12,7 +12,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { LayersIcon, PlusIcon } from 'lucide-react';
 import { ExpandablePermissions } from './components/expandable-permissions.js';
 import { DeleteRolesBulkAction } from './components/role-bulk-actions.js';
-import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
+import { roleListQuery } from './roles.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_roles/roles')({
     component: RoleListPage,
@@ -27,7 +27,6 @@ function RoleListPage() {
             pageId="role-list"
             title="Roles"
             listQuery={roleListQuery}
-            deleteMutation={deleteRoleDocument}
             route={Route}
             defaultVisibility={{
                 description: true,

package/src/app/routes/_authenticated/_sellers/sellers.tsx

@@ -7,7 +7,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteSellersBulkAction } from './components/seller-bulk-actions.js';
-import { deleteSellerDocument, sellerListQuery } from './sellers.graphql.js';
+import { sellerListQuery } from './sellers.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_sellers/sellers')({
     component: SellerListPage,
@@ -19,7 +19,6 @@ function SellerListPage() {
         <ListPage
             pageId="seller-list"
             listQuery={sellerListQuery}
-            deleteMutation={deleteSellerDocument}
             route={Route}
             title="Sellers"
             defaultVisibility={{

package/src/app/routes/_authenticated/_shipping-methods/shipping-methods.tsx

@@ -12,7 +12,7 @@ import {
     RemoveShippingMethodsFromChannelBulkAction,
 } from './components/shipping-method-bulk-actions.js';
 import { TestShippingMethodDialog } from './components/test-shipping-method-dialog.js';
-import { deleteShippingMethodDocument, shippingMethodListQuery } from './shipping-methods.graphql.js';
+import { shippingMethodListQuery } from './shipping-methods.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_shipping-methods/shipping-methods')({
     component: ShippingMethodListPage,
@@ -24,7 +24,6 @@ function ShippingMethodListPage() {
         <ListPage
             pageId="shipping-method-list"
             listQuery={shippingMethodListQuery}
-            deleteMutation={deleteShippingMethodDocument}
             route={Route}
             title="Shipping Methods"
             defaultVisibility={{

package/src/app/routes/_authenticated/_stock-locations/stock-locations.tsx

@@ -11,7 +11,7 @@ import {
     DeleteStockLocationsBulkAction,
     RemoveStockLocationsFromChannelBulkAction,
 } from './components/stock-location-bulk-actions.js';
-import { deleteStockLocationDocument, stockLocationListQuery } from './stock-locations.graphql.js';
+import { stockLocationListQuery } from './stock-locations.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_stock-locations/stock-locations')({
     component: StockLocationListPage,
@@ -24,7 +24,6 @@ function StockLocationListPage() {
             pageId="stock-location-list"
             title="Stock Locations"
             listQuery={stockLocationListQuery}
-            deleteMutation={deleteStockLocationDocument}
             route={Route}
             customizeColumns={{
                 name: {

package/src/app/routes/_authenticated/_tax-categories/tax-categories.tsx

@@ -8,7 +8,7 @@ import { Trans } from '@/vdb/lib/trans.js';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteTaxCategoriesBulkAction } from './components/tax-category-bulk-actions.js';
-import { deleteTaxCategoryDocument, taxCategoryListQuery } from './tax-categories.graphql.js';
+import { taxCategoryListQuery } from './tax-categories.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-categories/tax-categories')({
     component: TaxCategoryListPage,
@@ -20,7 +20,6 @@ function TaxCategoryListPage() {
         <ListPage
             pageId="tax-category-list"
             listQuery={taxCategoryListQuery}
-            deleteMutation={deleteTaxCategoryDocument}
             route={Route}
             title="Tax Categories"
             defaultVisibility={{

package/src/app/routes/_authenticated/_tax-rates/tax-rates.tsx

@@ -11,7 +11,7 @@ import { PlusIcon } from 'lucide-react';
 import { taxCategoryListQuery } from '../_tax-categories/tax-categories.graphql.js';
 import { zoneListQuery } from '../_zones/zones.graphql.js';
 import { DeleteTaxRatesBulkAction } from './components/tax-rate-bulk-actions.js';
-import { deleteTaxRateDocument, taxRateListQuery } from './tax-rates.graphql.js';
+import { taxRateListQuery } from './tax-rates.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_tax-rates/tax-rates')({
     component: TaxRateListPage,
@@ -23,7 +23,6 @@ function TaxRateListPage() {
         <ListPage
             pageId="tax-rate-list"
             listQuery={taxRateListQuery}
-            deleteMutation={deleteTaxRateDocument}
             route={Route}
             title="Tax Rates"
             defaultVisibility={{

package/src/app/routes/_authenticated/_zones/zones.tsx

@@ -8,7 +8,7 @@ import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { DeleteZonesBulkAction } from './components/zone-bulk-actions.js';
 import { ZoneCountriesSheet } from './components/zone-countries-sheet.js';
-import { deleteZoneDocument, zoneListQuery } from './zones.graphql.js';
+import { zoneListQuery } from './zones.graphql.js';
 
 export const Route = createFileRoute('/_authenticated/_zones/zones')({
     component: ZoneListPage,
@@ -20,7 +20,6 @@ function ZoneListPage() {
         <ListPage
             pageId="zone-list"
             listQuery={zoneListQuery}
-            deleteMutation={deleteZoneDocument}
             route={Route}
             title="Zones"
             defaultVisibility={{

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -1,5 +1,4 @@
-'use client';
-
+import { useAllBulkActions } from '@/vdb/components/data-table/use-all-bulk-actions.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
@@ -7,11 +6,8 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.js';
-import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
-import { usePage } from '@/vdb/hooks/use-page.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { Table } from '@tanstack/react-table';
 import { ChevronDown } from 'lucide-react';
@@ -26,9 +22,7 @@ export function DataTableBulkActions<TData>({
     table,
     bulkActions,
 }: Readonly<DataTableBulkActionsProps<TData>>) {
-    const { pageId } = usePage();
-    const pageBlock = usePageBlock();
-    const blockId = pageBlock?.blockId;
+    const allBulkActions = useAllBulkActions(bulkActions);
 
     // Cache to store selected items across page changes
     const selectedItemsCache = useRef<Map<string, TData>>(new Map());
@@ -63,18 +57,15 @@ export function DataTableBulkActions<TData>({
     if (!shouldShow) {
         return null;
     }
-    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
-    const allBulkActions = [...extendedBulkActions, ...(bulkActions ?? [])];
-    allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
 
     return (
         <div
             className="flex items-center gap-4 px-8 py-2 animate-in fade-in duration-200 fixed transform -translate-x-1/2 bg-white shadow-2xl rounded-md border z-50"
-            style={{ 
-                height: 'auto', 
+            style={{
+                height: 'auto',
                 maxHeight: '60px',
                 bottom: position.bottom,
-                left: position.left
+                left: position.left,
             }}
         >
             <span className="text-sm text-muted-foreground">

package/src/lib/components/data-table/use-all-bulk-actions.ts

@@ -0,0 +1,19 @@
+import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+
+/**
+ * @description
+ * Augments the provided Bulk Actions with any user-defined actions for the current
+ * page & block, and returns all of the bulk actions sorted by the `order` property.
+ */
+export function useAllBulkActions(bulkActions: BulkAction[]): BulkAction[] {
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock();
+    const blockId = pageBlock?.blockId;
+    const extendedBulkActions = pageId ? getBulkActions(pageId, blockId) : [];
+    const allBulkActions = [...extendedBulkActions, ...(bulkActions ?? [])];
+    allBulkActions.sort((a, b) => (a.order ?? 10_000) - (b.order ?? 10_000));
+    return allBulkActions;
+}