@spree/dashboard-core 0.13.0 → 1.0.0-beta.1

package/src/components/resource-combobox.tsx

@@ -3,9 +3,11 @@ import {
   ResourceCombobox as HeadlessResourceCombobox,
   type ResourceComboboxProps as HeadlessResourceComboboxProps,
 } from '@spree/dashboard-ui'
+import { PlusIcon } from '@spree/dashboard-ui/icons'
 import { useQuery } from '@tanstack/react-query'
 import { useDeferredValue, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useTenantId } from '../providers/tenant-provider'
 
 export type { ComboboxOption } from '@spree/dashboard-ui'
 
@@ -19,14 +21,16 @@ export interface ResourceComboboxProps<T extends ComboboxOption>
     | 'placeholder'
     | 'emptyText'
     | 'disabled'
+    | 'id'
   > {
   /**
    * Server-side search. Called as the user types (debounced via React's
    * `useDeferredValue`). Receives the trimmed query string — returning
    * `{ data: [] }` for empty queries is a fine default, as is showing
-   * "recent records".
+   * "recent records". When the response includes `meta.count`, rows beyond
+   * `data.length` trigger a footer hint so a capped list does not read complete.
    */
-  search: (query: string) => Promise<{ data: T[] }>
+  search: (query: string) => Promise<{ data: T[]; meta?: { count: number } }>
 
   /**
    * Hydrate the currently-selected ID into a record so the trigger can show
@@ -44,6 +48,14 @@ export interface ResourceComboboxProps<T extends ComboboxOption>
    * Returning `false` drops the row from the dropdown.
    */
   filterOption?: (option: T) => boolean
+
+  /**
+   * A row pinned to the bottom of the dropdown, for creating what the search
+   * could not find — "New supplier" on a purchase order, say. It sits with the
+   * results rather than beside the field so it is found where the merchant is
+   * already looking, and it closes the dropdown when chosen.
+   */
+  action?: { label: string; onSelect: () => void }
 }
 
 /**
@@ -68,6 +80,8 @@ export function ResourceCombobox<T extends ComboboxOption>({
   emptyText,
   disabled,
   filterOption,
+  action,
+  id,
 }: ResourceComboboxProps<T>) {
   const { t } = useTranslation()
   const placeholderLabel = placeholder ?? t('admin.common.search_placeholder')
@@ -78,6 +92,10 @@ export function ResourceCombobox<T extends ComboboxOption>({
   // `onInputChange` on the Root rather than controlling
   // `<ComboboxInput value>` directly — controlling the input blocks Base UI
   // from updating it on selection.
+  // Scoped here, not at the call site: results are tenant-specific (a store in
+  // the dashboard, a seller in the seller panel), and a caller passing a
+  // constant key would otherwise serve one tenant's records in another.
+  const tenantId = useTenantId()
   const [input, setInput] = useState('')
   // Defer the search query so a fast typist doesn't fire one request per
   // keystroke — React batches the search to the next idle paint.
@@ -85,7 +103,7 @@ export function ResourceCombobox<T extends ComboboxOption>({
   const trimmedQuery = deferredInput.trim()
 
   const { data: searchData } = useQuery({
-    queryKey: [queryKey, 'search', trimmedQuery],
+    queryKey: [queryKey, tenantId, 'search', trimmedQuery],
     queryFn: () => search(trimmedQuery),
     staleTime: 30_000,
   })
@@ -95,7 +113,7 @@ export function ResourceCombobox<T extends ComboboxOption>({
   // Skipped when the search results already include the ID.
   const searchHasValue = !!(value && searchData?.data.some((r) => r.id === value))
   const { data: hydratedData } = useQuery({
-    queryKey: [queryKey, 'hydrate', value],
+    queryKey: [queryKey, tenantId, 'hydrate', value],
     queryFn: () => hydrate([value as string]),
     enabled: !!value && !searchHasValue,
     staleTime: 60_000,
@@ -110,6 +128,9 @@ export function ResourceCombobox<T extends ComboboxOption>({
     return filterOption ? merged.filter(filterOption) : merged
   }, [searchData, hydratedData, filterOption])
 
+  const visibleSearchCount = searchData?.data.length ?? 0
+  const hiddenCount = Math.max(0, (searchData?.meta?.count ?? 0) - visibleSearchCount)
+
   return (
     <HeadlessResourceCombobox
       value={value}
@@ -120,7 +141,34 @@ export function ResourceCombobox<T extends ComboboxOption>({
       renderOption={renderOption}
       placeholder={placeholderLabel}
       emptyText={emptyLabel}
+      listFooter={
+        hiddenCount > 0 || action ? (
+          <>
+            {hiddenCount > 0 && (
+              <p className="border-t border-border px-2.5 py-2 text-muted-foreground text-xs">
+                {t('admin.common.combobox_more_results', { count: hiddenCount })}
+              </p>
+            )}
+            {action && (
+              // `onMouseDown` rather than `onClick`: the input blurs first and
+              // the dropdown unmounts, so a click never lands.
+              <button
+                type="button"
+                className="flex w-full cursor-pointer items-center gap-2 border-t border-border px-2.5 py-2 text-left text-sm hover:bg-accent"
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  action.onSelect()
+                }}
+              >
+                <PlusIcon className="size-4" />
+                {action.label}
+              </button>
+            )}
+          </>
+        ) : undefined
+      }
       disabled={disabled}
+      id={id}
     />
   )
 }

package/src/components/resource-picker-sheet.tsx

@@ -1,28 +1,33 @@
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
   Button,
   Checkbox,
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
+  type PaginationMeta,
+  SearchInput,
   Sheet,
   SheetContent,
   SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
+  Thumbnail,
 } from '@spree/dashboard-ui'
-import { useQuery } from '@tanstack/react-query'
-import { ImageIcon, Loader2Icon, SearchIcon, XIcon } from 'lucide-react'
-import { useDeferredValue, useMemo, useState } from 'react'
+import { Loader2Icon } from '@spree/dashboard-ui/icons'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { useDeferredValue, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export interface PickerOption {
   id: string
 }
 
+/** One page of async picker search results, optionally with list pagination metadata. */
+export interface ResourcePickerSearchResult<T extends PickerOption> {
+  /** Rows returned for the requested page. */
+  data: T[]
+  /** Total match count and page cursors when the search is paginated. */
+  meta?: PaginationMeta
+}
+
 export interface ResourcePickerSheetProps<T extends PickerOption> {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -30,8 +35,8 @@ export interface ResourcePickerSheetProps<T extends PickerOption> {
   selectedIds: string[]
   /** Called with the freshly-picked IDs (excludes `selectedIds`) when the user confirms. */
   onConfirm: (ids: string[], options: T[]) => void | Promise<void>
-  /** Paginated async search. Called with the trimmed query (empty = initial list). */
-  search: (query: string) => Promise<{ data: T[] }>
+  /** Paginated async search. Called with the trimmed query (empty = initial list) and page. */
+  search: (query: string, page: number) => Promise<ResourcePickerSearchResult<T>>
   getOptionLabel: (option: T) => string
   /** Optional thumbnail URL shown as an avatar. */
   getOptionImageUrl?: (option: T) => string | null | undefined
@@ -79,20 +84,61 @@ export function ResourcePickerSheet<T extends PickerOption>({
   const deferredInput = useDeferredValue(input)
   const trimmedQuery = deferredInput.trim()
 
+  const [selectAllMeta, setSelectAllMeta] = useState<PaginationMeta | undefined>()
+  const selectAllGenerationRef = useRef(0)
+  const selectAllSessionRef = useRef({ query: trimmedQuery, open })
+
+  if (
+    selectAllSessionRef.current.query !== trimmedQuery ||
+    (selectAllSessionRef.current.open && !open)
+  ) {
+    selectAllGenerationRef.current += 1
+    selectAllSessionRef.current = { query: trimmedQuery, open }
+  }
+
   // Staging selection (ids picked in this session) + a label cache so the
   // "selected" chips keep their text even after the search results change.
   const [staged, setStaged] = useState<Map<string, T>>(new Map())
   const alreadyIn = useMemo(() => new Set(selectedIds), [selectedIds])
   const [submitting, setSubmitting] = useState(false)
+  const [selectingAll, setSelectingAll] = useState(false)
 
-  const { data, isFetching } = useQuery({
+  // The accumulated pages live in the query cache rather than in local state.
+  // Mirroring them into state via an effect broke reopening the sheet: the
+  // cached page came back reference-identical, so the effect that filled the
+  // local list never re-ran and the sheet rendered "no results" over a cache
+  // that held plenty.
+  const { data, isFetching, isFetchingNextPage, fetchNextPage } = useInfiniteQuery({
     queryKey: [queryKey, 'picker-search', trimmedQuery],
-    queryFn: () => search(trimmedQuery),
+    queryFn: ({ pageParam }) => search(trimmedQuery, pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, allPages) =>
+      lastPage.meta?.next != null ? allPages.length + 1 : undefined,
     enabled: open,
     staleTime: 30_000,
   })
 
-  const results = data?.data ?? []
+  const results = useMemo(() => {
+    const seen = new Set<string>()
+    const flattened: T[] = []
+    for (const loadedPage of data?.pages ?? []) {
+      for (const option of loadedPage.data) {
+        if (seen.has(option.id)) continue
+        seen.add(option.id)
+        flattened.push(option)
+      }
+    }
+    return flattened
+  }, [data])
+
+  const lastPage = data?.pages.at(-1)
+  const meta = selectAllMeta ?? lastPage?.meta
+  const hasMore = lastPage?.meta?.next != null
+  const matchCount = meta?.count ?? results.length
+  const currentPageResults = lastPage?.data ?? []
+  const selectableOnPage = currentPageResults.filter((option) => !alreadyIn.has(option.id))
+  const allOnPageSelected =
+    selectableOnPage.length > 0 && selectableOnPage.every((option) => staged.has(option.id))
 
   function toggle(option: T) {
     if (alreadyIn.has(option.id)) return
@@ -104,6 +150,53 @@ export function ResourcePickerSheet<T extends PickerOption>({
     })
   }
 
+  function togglePageSelection() {
+    setStaged((prev) => {
+      const next = new Map(prev)
+      if (allOnPageSelected) {
+        for (const option of selectableOnPage) next.delete(option.id)
+      } else {
+        for (const option of selectableOnPage) next.set(option.id, option)
+      }
+      return next
+    })
+  }
+
+  async function selectAllMatching() {
+    if (matchCount === 0 || selectingAll) return
+    const generation = selectAllGenerationRef.current
+    setSelectingAll(true)
+    try {
+      const collected = new Map<string, T>()
+      let nextPage = 1
+      let lastMeta: PaginationMeta | undefined
+
+      while (true) {
+        const response = await search(trimmedQuery, nextPage)
+        if (generation !== selectAllGenerationRef.current) return
+        lastMeta = response.meta
+        for (const option of response.data) {
+          if (!alreadyIn.has(option.id)) collected.set(option.id, option)
+        }
+        if (!response.meta || nextPage >= response.meta.pages) break
+        nextPage += 1
+      }
+
+      if (generation !== selectAllGenerationRef.current) return
+
+      setStaged((prev) => {
+        const next = new Map(prev)
+        for (const [id, option] of collected) next.set(id, option)
+        return next
+      })
+      if (lastMeta) setSelectAllMeta(lastMeta)
+    } catch (error) {
+      onConfirmError?.(error)
+    } finally {
+      setSelectingAll(false)
+    }
+  }
+
   async function confirm() {
     if (staged.size === 0) return
     setSubmitting(true)
@@ -111,6 +204,7 @@ export function ResourcePickerSheet<T extends PickerOption>({
       await onConfirm(Array.from(staged.keys()), Array.from(staged.values()))
       setStaged(new Map())
       setInput('')
+      setSelectAllMeta(undefined)
       onOpenChange(false)
     } catch (error) {
       // The mutation reports its own error toast; swallow so the click handler
@@ -124,12 +218,17 @@ export function ResourcePickerSheet<T extends PickerOption>({
 
   function handleOpenChange(next: boolean) {
     if (!next) {
+      selectAllGenerationRef.current += 1
       setStaged(new Map())
       setInput('')
+      setSelectAllMeta(undefined)
     }
     onOpenChange(next)
   }
 
+  const initialLoading = isFetching && results.length === 0
+  const loadingMore = isFetchingNextPage
+
   return (
     <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetContent className="w-full gap-0 p-0 sm:max-w-lg">
@@ -138,20 +237,18 @@ export function ResourcePickerSheet<T extends PickerOption>({
           {description && <SheetDescription>{description}</SheetDescription>}
         </SheetHeader>
 
-        <div className="border-b border-border p-4">
-          <InputGroup>
-            <InputGroupAddon>
-              <SearchIcon className="size-4 text-muted-foreground" />
-            </InputGroupAddon>
-            <InputGroupInput
-              type="search"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              // Enter has no action here; swallow it so it can't submit a host form.
-              onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
-              placeholder={searchPlaceholder ?? t('admin.resource_picker.search_placeholder')}
-            />
-          </InputGroup>
+        <div className="border-b border-border-subtle p-4">
+          <SearchInput
+            value={input}
+            onValueChange={(value) => {
+              setInput(value)
+              setSelectAllMeta(undefined)
+            }}
+            // Enter has no action here; swallow it so it can't submit a host form.
+            onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
+            placeholder={searchPlaceholder ?? t('admin.resource_picker.search_placeholder')}
+            clearLabel={t('admin.common.clear')}
+          />
           {staged.size > 0 && (
             <p className="mt-2 text-muted-foreground text-xs">
               {t('admin.resource_picker.selected_count', { count: staged.size })}
@@ -160,7 +257,7 @@ export function ResourcePickerSheet<T extends PickerOption>({
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto">
-          {isFetching && results.length === 0 ? (
+          {initialLoading ? (
             <div className="flex items-center justify-center py-10 text-muted-foreground">
               <Loader2Icon className="size-5 animate-spin" />
             </div>
@@ -169,59 +266,98 @@ export function ResourcePickerSheet<T extends PickerOption>({
               {t('admin.resource_picker.empty')}
             </p>
           ) : (
-            <ul className="divide-y divide-border">
-              {results.map((option) => {
-                const inList = alreadyIn.has(option.id)
-                const checked = inList || staged.has(option.id)
-                const imageUrl = getOptionImageUrl?.(option)
-                const subtitle = getOptionSubtitle?.(option)
-                return (
-                  <li key={option.id}>
-                    <button
+            <>
+              {matchCount > 0 && (
+                <div className="flex items-center justify-between gap-3 border-b border-border-subtle px-4 py-2">
+                  <button
+                    type="button"
+                    disabled={selectableOnPage.length === 0 || selectingAll}
+                    onClick={togglePageSelection}
+                    className="flex min-w-0 flex-1 items-center gap-3 text-left hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    <Checkbox
+                      checked={allOnPageSelected}
+                      disabled={selectableOnPage.length === 0 || selectingAll}
+                      className="pointer-events-none"
+                    />
+                    <span className="truncate text-sm">
+                      {t('admin.resource_picker.select_page', { count: selectableOnPage.length })}
+                    </span>
+                  </button>
+                  {matchCount > 0 &&
+                  (hasMore || !allOnPageSelected || matchCount > selectableOnPage.length) ? (
+                    <Button
                       type="button"
-                      disabled={inList}
-                      onClick={() => toggle(option)}
-                      className="flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-60"
+                      variant="link"
+                      size="sm"
+                      className="h-auto shrink-0 px-0"
+                      disabled={selectingAll}
+                      onClick={selectAllMatching}
                     >
-                      <Checkbox
-                        checked={checked}
+                      {selectingAll && <Loader2Icon className="size-3.5 animate-spin" />}
+                      {t('admin.resource_picker.select_all_matching', { count: matchCount })}
+                    </Button>
+                  ) : null}
+                </div>
+              )}
+              <ul className="divide-y divide-border">
+                {results.map((option) => {
+                  const inList = alreadyIn.has(option.id)
+                  const checked = inList || staged.has(option.id)
+                  const imageUrl = getOptionImageUrl?.(option)
+                  const subtitle = getOptionSubtitle?.(option)
+                  return (
+                    <li key={option.id}>
+                      <button
+                        type="button"
                         disabled={inList}
-                        className="pointer-events-none"
-                      />
-                      {getOptionImageUrl && (
-                        <Avatar className="size-9 rounded-md">
-                          {imageUrl ? (
-                            <AvatarImage src={imageUrl} alt="" className="object-cover" />
-                          ) : null}
-                          <AvatarFallback className="rounded-md bg-muted">
-                            <ImageIcon className="size-4 text-muted-foreground" />
-                          </AvatarFallback>
-                        </Avatar>
-                      )}
-                      <span className="min-w-0 flex-1">
-                        <span className="block truncate text-sm">{getOptionLabel(option)}</span>
-                        {subtitle && (
-                          <span className="block truncate text-muted-foreground text-xs">
-                            {subtitle}
+                        onClick={() => toggle(option)}
+                        className="flex w-full items-center gap-3 px-4 py-2.5 text-left hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-60"
+                      >
+                        <Checkbox
+                          checked={checked}
+                          disabled={inList}
+                          className="pointer-events-none"
+                        />
+                        {getOptionImageUrl && <Thumbnail src={imageUrl} size="sm" />}
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate text-sm">{getOptionLabel(option)}</span>
+                          {subtitle && (
+                            <span className="block truncate text-muted-foreground text-xs">
+                              {subtitle}
+                            </span>
+                          )}
+                        </span>
+                        {inList && (
+                          <span className="shrink-0 text-muted-foreground text-xs">
+                            {t('admin.resource_picker.already_added')}
                           </span>
                         )}
-                      </span>
-                      {inList && (
-                        <span className="shrink-0 text-muted-foreground text-xs">
-                          {t('admin.resource_picker.already_added')}
-                        </span>
-                      )}
-                    </button>
-                  </li>
-                )
-              })}
-            </ul>
+                      </button>
+                    </li>
+                  )
+                })}
+              </ul>
+              {hasMore && (
+                <div className="border-t border-border p-4">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full"
+                    disabled={loadingMore}
+                    onClick={() => fetchNextPage()}
+                  >
+                    {loadingMore && <Loader2Icon className="size-4 animate-spin" />}
+                    {t('admin.resource_picker.load_more')}
+                  </Button>
+                </div>
+              )}
+            </>
           )}
         </div>
 
         <SheetFooter className="flex-row items-center justify-between border-t border-border">
-          <Button type="button" variant="ghost" onClick={() => handleOpenChange(false)}>
-            <XIcon className="size-4" />
+          <Button type="button" variant="outline" onClick={() => handleOpenChange(false)}>
             {t('admin.actions.cancel')}
           </Button>
           <Button type="button" onClick={confirm} disabled={staged.size === 0 || submitting}>