@vendure/dashboard 3.5.0-minor-202510161257 → 3.5.0

package/src/lib/components/data-input/{password-input.stories.tsx → password-form-input.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useForm } from 'react-hook-form';
 import { withDescription } from '../../../.storybook/with-description.js';
-import { PasswordInput } from './password-input.js';
+import { PasswordFormInput } from './password-form-input.js';
 
 const meta = {
-    title: 'Form Inputs/PasswordInput',
-    component: PasswordInput,
-    ...withDescription(import.meta.url, './password-input.js'),
+    title: 'Form Inputs/PasswordFormInput',
+    component: PasswordFormInput,
+    ...withDescription(import.meta.url, './password-form-input.js'),
     parameters: {
         layout: 'centered',
     },
@@ -21,7 +21,7 @@ const meta = {
             description: 'Whether the input is disabled',
         },
     },
-} satisfies Meta<typeof PasswordInput>;
+} satisfies Meta<typeof PasswordFormInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -36,7 +36,7 @@ export const Playground: Story = {
         const field = register('password');
         return (
             <div className="w-[300px]">
-                <PasswordInput {...field} {...args} />
+                <PasswordFormInput {...field} {...args} />
             </div>
         );
     },
@@ -49,15 +49,15 @@ export const ChangePassword: Story = {
             <div className="w-[300px] space-y-4">
                 <div className="space-y-2">
                     <label className="text-sm font-medium">Current Password</label>
-                    <PasswordInput {...register('currentPassword')} />
+                    <PasswordFormInput {...register('currentPassword')} />
                 </div>
                 <div className="space-y-2">
                     <label className="text-sm font-medium">New Password</label>
-                    <PasswordInput {...register('newPassword')} />
+                    <PasswordFormInput {...register('newPassword')} />
                 </div>
                 <div className="space-y-2">
                     <label className="text-sm font-medium">Confirm New Password</label>
-                    <PasswordInput {...register('confirmPassword')} />
+                    <PasswordFormInput {...register('confirmPassword')} />
                 </div>
             </div>
         );

package/src/lib/components/data-input/{password-input.tsx → password-form-input.tsx}

@@ -9,7 +9,7 @@ import { Input } from '../ui/input.js';
  * @docsCategory form-components
  * @docsPage PasswordInput
  */
-export function PasswordInput(props: Readonly<DashboardFormComponentProps>) {
+export function PasswordFormInput(props: Readonly<DashboardFormComponentProps>) {
     const readOnly = props.disabled || isReadonlyField(props.fieldDef);
     return (
         <Input

package/src/lib/components/data-table/data-table-pagination.tsx

@@ -18,7 +18,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             </div>
             <div className="flex items-center space-x-6 lg:space-x-8">
                 <div className="flex items-center space-x-2">
-                    <p className="hidden md:block text-sm font-medium">
+                    <p className="hidden @xl/table:block text-sm font-medium">
                         <Trans>Rows per page</Trans>
                     </p>
                     <Select
@@ -40,7 +40,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                     </Select>
                 </div>
                 <div className=" flex items-center justify-center text-sm font-medium">
-                    <span className="hidden md:block w-[100px] ">
+                    <span className="hidden @sm/table:block w-[100px] ">
                         <Trans>
                             Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
                         </Trans>
@@ -50,7 +50,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                     <Button
                         variant="outline"
                         type="button"
-                        className="hidden h-8 w-8 p-0 lg:flex"
+                        className="hidden h-8 w-8 p-0 @lg:flex"
                         onClick={() => table.setPageIndex(0)}
                         disabled={!table.getCanPreviousPage()}
                     >
@@ -71,7 +71,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         </span>
                         <ChevronLeft />
                     </Button>
-                    <span className="md:hidden">{table.getState().pagination.pageIndex + 1}</span>
+                    <span className="@md/table:hidden">{table.getState().pagination.pageIndex + 1}</span>
                     <Button
                         variant="outline"
                         type="button"

package/src/lib/components/data-table/data-table.stories.tsx

@@ -30,7 +30,7 @@ const sampleData: Product[] = Array.from({ length: 100 }, (_, i) => ({
 }));
 
 const meta = {
-    title: 'Components/DataTable',
+    title: 'Framework/DataTable',
     component: DataTable,
     ...withDescription(import.meta.url, './data-table.js'),
     parameters: {

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

@@ -236,7 +236,7 @@ export function DataTable<TData>({
             isLoading={isLoading}
             table={table}
         >
-            <div className="space-y-2">
+            <div className="space-y-2 @container/table">
                 <div className="flex items-center justify-between gap-2">
                     <div className="flex items-center gap-2">
                         {onSearchTermChange && (

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -252,7 +252,11 @@ function getRowActions(
                             </DropdownMenuItem>
                         ))}
                         {bulkActions?.map((action, index) => (
-                            <action.component key={`bulk-action-${index}`} selection={[row]} table={table} />
+                            <action.component
+                                key={`bulk-action-${index}`}
+                                selection={[row.original]}
+                                table={table}
+                            />
                         ))}
                         {deleteMutation && (
                             <DeleteMutationRowAction deleteMutation={deleteMutation} row={row} />

package/src/lib/components/layout/app-layout.tsx

@@ -1,7 +1,6 @@
 import { AppSidebar } from '@/vdb/components/layout/app-sidebar.js';
 import { DevModeIndicator } from '@/vdb/components/layout/dev-mode-indicator.js';
 import { GeneratedBreadcrumbs } from '@/vdb/components/layout/generated-breadcrumbs.js';
-import { PrereleasePopup } from '@/vdb/components/layout/prerelease-popup.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/vdb/components/ui/sidebar.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
@@ -31,7 +30,6 @@ export function AppLayout() {
                     <Outlet />
                 </div>
             </SidebarInset>
-            <PrereleasePopup />
         </SidebarProvider>
     );
 }

package/src/lib/components/shared/asset/asset-gallery.stories.tsx

@@ -6,7 +6,7 @@ import { createDemoRoute } from '../../../../../.storybook/providers.js';
 import { withDescription } from '../../../../../.storybook/with-description.js';
 
 const meta = {
-    title: 'Components/AssetGallery',
+    title: 'Framework/AssetGallery',
     component: AssetGallery,
     ...withDescription(import.meta.url, './asset-gallery.js'),
     parameters: {

package/src/lib/components/shared/asset/asset-picker-dialog.stories.tsx

@@ -7,7 +7,7 @@ import { withDescription } from '../../../../../.storybook/with-description.js';
 import { AssetPickerDialog } from './asset-picker-dialog.js';
 
 const meta = {
-    title: 'Components/AssetPickerDialog',
+    title: 'Framework/AssetPickerDialog',
     component: AssetPickerDialog,
     ...withDescription(import.meta.url, './asset-picker-dialog.js'),
     parameters: {

package/src/lib/components/shared/detail-page-button.stories.tsx

@@ -5,7 +5,7 @@ import { withDescription } from '../../../../.storybook/with-description.js';
 import { DetailPageButton } from './detail-page-button.js';
 
 const meta = {
-    title: 'Components/DetailPageButton',
+    title: 'Framework/DetailPageButton',
     component: DetailPageButton,
     ...withDescription(import.meta.url, './detail-page-button.js'),
     parameters: {

package/src/lib/components/shared/facet-value-selector.stories.tsx

@@ -3,7 +3,7 @@ import { withDescription } from '../../../../.storybook/with-description.js';
 import { FacetValueSelector } from './facet-value-selector.js';
 
 const meta = {
-    title: 'Components/FacetValueSelector',
+    title: 'Framework/FacetValueSelector',
     component: FacetValueSelector,
     ...withDescription(import.meta.url, './facet-value-selector.js'),
     parameters: {

package/src/lib/components/shared/paginated-list-data-table.stories.tsx

@@ -39,7 +39,7 @@ const productsListDocument = graphql(`
 `);
 
 const meta = {
-    title: 'Components/PaginatedListDataTable',
+    title: 'Framework/PaginatedListDataTable',
     component: PaginatedListDataTable,
     ...withDescription(import.meta.url, './paginated-list-data-table.js'),
     parameters: {

package/src/lib/components/shared/permission-guard.stories.tsx

@@ -4,7 +4,7 @@ import { withDescription } from '../../../../.storybook/with-description.js';
 import { PermissionGuard } from './permission-guard.js';
 
 const meta = {
-    title: 'Components/PermissionGuard',
+    title: 'Framework/PermissionGuard',
     component: PermissionGuard,
     ...withDescription(import.meta.url, './permission-guard.js'),
     parameters: {

package/src/lib/components/shared/vendure-image.stories.tsx

@@ -18,7 +18,7 @@ const mockAssetWithFocalPoint: AssetLike = {
 };
 
 const meta = {
-    title: 'Components/VendureImage',
+    title: 'Framework/VendureImage',
     component: VendureImage,
     ...withDescription(import.meta.url, './vendure-image.js'),
     parameters: {

package/src/lib/components/ui/password-input.tsx

@@ -1,18 +1,14 @@
-import { t } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { Eye, EyeOff } from 'lucide-react';
 import * as React from 'react';
 
-import {
-    InputGroup,
-    InputGroupAddon,
-    InputGroupButton,
-    InputGroupInput,
-} from './input-group.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group.js';
 
 type PasswordInputProps = Readonly<Omit<React.ComponentProps<'input'>, 'type'>>;
 
 function PasswordInput({ ...props }: PasswordInputProps) {
     const [showPassword, setShowPassword] = React.useState(false);
+    const { t } = useLingui();
 
     return (
         <InputGroup>

package/src/lib/framework/alert/alert-item.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@/vdb/components/ui/button.js';
-import { Alert } from '@/vdb/hooks/use-alerts.js';
+import { AlertEntry } from '@/vdb/hooks/use-alerts.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { ComponentProps } from 'react';
 
 interface AlertItemProps extends ComponentProps<'div'> {
-    alert: Alert;
+    alert: AlertEntry;
 }
 
 export function AlertItem({ alert, className, ...props }: Readonly<AlertItemProps>) {

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

@@ -8,7 +8,7 @@ import {
     RichTextInput,
     SelectWithOptions,
 } from '@/vdb/components/data-input/index.js';
-import { PasswordInput } from '@/vdb/components/data-input/password-input.js';
+import { PasswordFormInput } from '@/vdb/components/data-input/password-form-input.js';
 import { TextareaInput } from '@/vdb/components/data-input/textarea-input.js';
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { globalRegistry } from '../registry/global-registry.js';
@@ -32,7 +32,7 @@ inputComponents.set('json-editor-form-input', TextareaInput);
 inputComponents.set('textarea-form-input', TextareaInput);
 inputComponents.set('html-editor-form-input', RichTextInput);
 inputComponents.set('rich-text-form-input', RichTextInput);
-inputComponents.set('password-form-input', PasswordInput);
+inputComponents.set('password-form-input', PasswordFormInput);
 inputComponents.set('product-selector-form-input', DefaultProductInput);
 inputComponents.set('relation-form-input', DefaultRelationInput);
 inputComponents.set('select-form-input', SelectWithOptions);

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

@@ -10,7 +10,7 @@ import { useMemo } from 'react';
  * @docsPage useAlerts
  * @since 3.5.0
  */
-export interface Alert {
+export interface AlertEntry {
     definition: DashboardAlertDefinition;
     active: boolean;
     currentSeverity?: AlertSeverity;
@@ -28,7 +28,7 @@ export interface Alert {
  * @docsWeight 0
  * @since 3.5.0
  */
-export function useAlerts(): { alerts: Alert[]; activeCount: number; highestSeverity: AlertSeverity } {
+export function useAlerts(): { alerts: AlertEntry[]; activeCount: number; highestSeverity: AlertSeverity } {
     const { alertDefs, rawResults, dismissedAlerts, setDismissedAlerts } = useAlertsContext();
 
     const alerts = useMemo(() => {

package/src/lib/index.ts

@@ -16,7 +16,7 @@ export * from './components/data-input/default-relation-input.js';
 export * from './components/data-input/facet-value-input.js';
 export * from './components/data-input/money-input.js';
 export * from './components/data-input/number-input.js';
-export * from './components/data-input/password-input.js';
+export * from './components/data-input/password-form-input.js';
 export * from './components/data-input/product-multi-selector-input.js';
 export * from './components/data-input/relation-input.js';
 export * from './components/data-input/relation-selector.js';
@@ -27,11 +27,13 @@ export * from './components/data-input/struct-form-input.js';
 export * from './components/data-input/text-input.js';
 export * from './components/data-input/textarea-input.js';
 export * from './components/data-table/add-filter-menu.js';
+export * from './components/data-table/column-header-wrapper.js';
 export * from './components/data-table/data-table-bulk-action-item.js';
 export * from './components/data-table/data-table-bulk-actions.js';
 export * from './components/data-table/data-table-column-header.js';
 export * from './components/data-table/data-table-context.js';
 export * from './components/data-table/data-table-faceted-filter.js';
+export * from './components/data-table/data-table-filter-badge-editable.js';
 export * from './components/data-table/data-table-filter-badge.js';
 export * from './components/data-table/data-table-filter-dialog.js';
 export * from './components/data-table/data-table-pagination.js';
@@ -70,7 +72,6 @@ export * from './components/layout/nav-item-wrapper.js';
 export * from './components/layout/nav-main.js';
 export * from './components/layout/nav-projects.js';
 export * from './components/layout/nav-user.js';
-export * from './components/layout/prerelease-popup.js';
 export * from './components/login/login-form.js';
 export * from './components/shared/alerts.js';
 export * from './components/shared/animated-number.js';
@@ -160,12 +161,14 @@ export * from './components/ui/dropdown-menu.js';
 export * from './components/ui/form.js';
 export * from './components/ui/grid-layout.js';
 export * from './components/ui/hover-card.js';
+export * from './components/ui/input-group.js';
 export * from './components/ui/input-otp.js';
 export * from './components/ui/input.js';
 export * from './components/ui/label.js';
 export * from './components/ui/menubar.js';
 export * from './components/ui/navigation-menu.js';
 export * from './components/ui/pagination.js';
+export * from './components/ui/password-input.js';
 export * from './components/ui/popover.js';
 export * from './components/ui/progress.js';
 export * from './components/ui/radio-group.js';
@@ -174,6 +177,7 @@ export * from './components/ui/scroll-area.js';
 export * from './components/ui/select.js';
 export * from './components/ui/separator.js';
 export * from './components/ui/sheet.js';
+export * from './components/ui/sidebar-context.js';
 export * from './components/ui/sidebar.js';
 export * from './components/ui/skeleton.js';
 export * from './components/ui/slider.js';
@@ -188,6 +192,7 @@ export * from './components/ui/tooltip.js';
 export * from './framework/alert/alert-extensions.js';
 export * from './framework/alert/alert-item.js';
 export * from './framework/alert/alerts-indicator.js';
+export * from './framework/alert/search-index-buffer-alert/search-index-buffer-alert.js';
 export * from './framework/component-registry/component-registry.js';
 export * from './framework/component-registry/display-component.js';
 export * from './framework/dashboard-widget/base-widget.js';
@@ -251,7 +256,6 @@ export * from './framework/layout-engine/page-provider.js';
 export * from './framework/nav-menu/nav-menu-extensions.js';
 export * from './framework/page/detail-page-route-loader.js';
 export * from './framework/page/detail-page.js';
-export * from './framework/page/list-page.stories.js';
 export * from './framework/page/list-page.js';
 export * from './framework/page/page-api.js';
 export * from './framework/page/page-types.js';
@@ -259,6 +263,12 @@ 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 './graphql/settings-store-operations.js';
+export * from './hooks/use-alerts.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
@@ -281,8 +291,3 @@ export * from './hooks/use-user-settings.js';
 export * from './lib/load-i18n-messages.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';
-export * from './graphql/settings-store-operations.js';

package/src/lib/components/layout/prerelease-popup.tsx

@@ -1,34 +0,0 @@
-import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { useState } from 'react';
-import { toast } from 'sonner';
-
-export function PrereleasePopup() {
-    const { settings, setHasSeenOnboarding } = useUserSettings();
-    const [isOpen, setIsOpen] = useState(false);
-    if (!settings.hasSeenOnboarding && !isOpen) {
-        setIsOpen(true);
-        toast('Welcome to the new Dashboard!', {
-            description: (
-                <div className="space-y-2">
-                    <p>
-                        This is a <span className="font-bold">beta</span> version of our new Vendure
-                        Dashboard!
-                    </p>
-                    <p>
-                        This release allows you to explore the new interface and functionality, but it's not
-                        yet ready for production use.
-                    </p>
-                </div>
-            ),
-            duration: 1000 * 60,
-            action: {
-                label: 'Got it',
-                onClick: () => {
-                    setHasSeenOnboarding(true);
-                    setIsOpen(false);
-                },
-            },
-        });
-    }
-    return null;
-}