@spree/dashboard-core 0.13.1 → 1.0.0-beta.2

package/src/components/country-combobox.tsx

@@ -1,19 +1,20 @@
 import {
   Combobox,
+  ComboboxButtonTrigger,
   ComboboxChip,
   ComboboxChips,
   ComboboxChipsInput,
   ComboboxContent,
   ComboboxEmpty,
-  ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  ComboboxSearch,
+  ComboboxTriggerPlaceholder,
   ComboboxValue,
   CountryFlag,
-  InputGroupAddon,
   useComboboxAnchor,
 } from '@spree/dashboard-ui'
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useCountries } from '../hooks/use-countries'
 import { useDisplayName } from '../hooks/use-display-name'
@@ -23,11 +24,19 @@ export type CountryOption = { iso: string; iso3: string; name: string }
 /**
  * Resolves a country's display name in the admin UI language (keyed on the
  * stable ISO code), falling back to the API's backend-locale `name` when the
- * runtime lacks coverage.
+ * runtime lacks coverage. Exported so every country-labelled surface
+ * (pickers, grid cells) reads the same.
+ *
+ * The resolver is referentially stable across renders — callers feed it into
+ * `useMemo` deps, and a fresh closure each render would rebuild every derived
+ * option list (and, downstream, every grid column) on each keystroke.
  */
-function useCountryDisplayName() {
+export function useCountryDisplayName() {
   const displayName = useDisplayName('region')
-  return (country: CountryOption) => displayName(country.iso) ?? country.name
+  return useCallback(
+    (country: CountryOption) => displayName(country.iso) ?? country.name,
+    [displayName],
+  )
 }
 
 /**
@@ -79,32 +88,51 @@ function CountryRow({ country, label }: { country: CountryOption; label: string
   )
 }
 
+/** Maps the cached country list onto the flat option shape both pickers use. */
+function useCountryOptions(): CountryOption[] {
+  const { countries } = useCountries()
+  return useMemo(
+    () => countries.map((c) => ({ iso: c.iso, iso3: c.iso3, name: c.name })),
+    [countries],
+  )
+}
+
 /**
  * Searchable single-select country picker. Value is the 2-letter ISO code
- * (so the field round-trips cleanly with the Spree API). Renders the country
- * name + flag in the trigger and `<CountryRow>` in the dropdown.
+ * (so the field round-trips cleanly with the Spree API).
+ *
+ * The field itself is a button showing the selected flag + name, with the
+ * search box inside the dropdown — see `<ComboboxButtonTrigger>` for why a
+ * text input is the wrong trigger for an address-adjacent picker.
  */
 export function CountryCombobox({
+  id,
   value,
   onValueChange,
+  onBlur,
   placeholder,
+  searchPlaceholder,
+  invalid,
   disabled = false,
 }: {
+  /** Forwarded to the trigger so a `<FieldLabel htmlFor>` can target it. */
+  id?: string
   value: string | null | undefined
   onValueChange: (iso: string) => void
+  /** Forwarded to the trigger so RHF's `<Controller>` can track touched state. */
+  onBlur?: () => void
+  /** Trigger text while nothing is selected. */
   placeholder?: string
+  /** Text in the dropdown's search box. */
+  searchPlaceholder?: string
+  invalid?: boolean
   disabled?: boolean
 }) {
   const { t } = useTranslation()
-  const { countries } = useCountries()
+  const items = useCountryOptions()
   const countryName = useCountryDisplayName()
   const filter = useCountryFilter()
 
-  const items: CountryOption[] = useMemo(
-    () => countries.map((c) => ({ iso: c.iso, iso3: c.iso3, name: c.name })),
-    [countries],
-  )
-
   // The Combobox holds the selected object internally; we adapt to a flat ISO
   // string at the boundary so callers don't have to thread the option shape.
   const selected = useMemo(() => items.find((c) => c.iso === value) ?? null, [items, value])
@@ -121,21 +149,29 @@ export function CountryCombobox({
       // "Allemagne", "Germany", "DE", or "DEU" all find the country.
       filter={filter}
     >
-      <ComboboxInput
-        placeholder={placeholder ?? t('admin.components.country_combobox.search_placeholder')}
+      <ComboboxButtonTrigger
+        id={id}
+        onBlur={onBlur}
         disabled={disabled}
+        aria-invalid={invalid || undefined}
       >
-        {/* When a country is picked the InputGroup gets a leading flag —
-            mirrors the dropdown items so the trigger shows the same shape.
-            Hidden while empty so the input doesn't lurch when typing a new
-            search query. */}
-        {selected?.iso && (
-          <InputGroupAddon align="inline-start">
+        {selected ? (
+          <>
             <CountryFlag iso={selected.iso} />
-          </InputGroupAddon>
+            <span className="truncate">{countryName(selected)}</span>
+          </>
+        ) : (
+          <ComboboxTriggerPlaceholder>
+            {placeholder ?? t('admin.components.country_combobox.placeholder')}
+          </ComboboxTriggerPlaceholder>
         )}
-      </ComboboxInput>
+      </ComboboxButtonTrigger>
       <ComboboxContent>
+        <ComboboxSearch
+          placeholder={
+            searchPlaceholder ?? t('admin.components.country_combobox.search_placeholder')
+          }
+        />
         <ComboboxEmpty>{t('admin.components.country_combobox.empty')}</ComboboxEmpty>
         <ComboboxList>
           {(country: CountryOption) => (
@@ -152,9 +188,13 @@ export function CountryCombobox({
 /**
  * Searchable multi-select country picker. Value is an array of 2-letter ISO
  * codes. Renders a flag + name per chip and `<CountryRow>` per dropdown row;
- * filters the cached `useCountries()` list client-side via `countryFilter`
- * (name + both ISO codes). Reused anywhere the admin picks multiple
+ * filters the cached `useCountries()` list client-side (localized name, raw
+ * name, and both ISO codes). Reused anywhere the admin picks multiple
  * countries (promotion Country rule, market/zone editors, …).
+ *
+ * Keeps the chips-with-inline-input shape rather than a button trigger: the
+ * chips are the selection display, and typing beside them is how a
+ * multi-select is expected to work.
  */
 export function CountryMultiCombobox({
   value,
@@ -172,17 +212,12 @@ export function CountryMultiCombobox({
   disabled?: boolean
 }) {
   const { t } = useTranslation()
-  const { countries } = useCountries()
+  const items = useCountryOptions()
   const countryName = useCountryDisplayName()
   const filter = useCountryFilter()
   const anchorRef = useComboboxAnchor()
   const [inputValue, setInputValue] = useState('')
 
-  const items: CountryOption[] = useMemo(
-    () => countries.map((c) => ({ iso: c.iso, iso3: c.iso3, name: c.name })),
-    [countries],
-  )
-
   // The Combobox holds full option objects; selection round-trips as ISO
   // strings. Selected ISOs not yet present in `items` (list still loading)
   // fall back to a stub so chips don't vanish on first render.
@@ -218,13 +253,13 @@ export function CountryMultiCombobox({
           }
         </ComboboxValue>
         <ComboboxChipsInput
-          placeholder={placeholder ?? t('admin.promotions.rules.country.search_placeholder')}
+          placeholder={placeholder ?? t('admin.components.country_combobox.search_placeholder')}
           value={inputValue}
           onChange={(e) => setInputValue((e.target as HTMLInputElement).value)}
         />
       </ComboboxChips>
       <ComboboxContent anchor={anchorRef}>
-        <ComboboxEmpty>{emptyText ?? t('admin.promotions.rules.country.empty')}</ComboboxEmpty>
+        <ComboboxEmpty>{emptyText ?? t('admin.components.country_combobox.empty')}</ComboboxEmpty>
         <ComboboxList>
           {(country: CountryOption) => (
             <ComboboxItem key={country.iso} value={country}>

package/src/components/country-state-fields.tsx

@@ -1,11 +1,13 @@
 import type { State } from '@spree/admin-sdk'
 import {
   Combobox,
+  ComboboxButtonTrigger,
   ComboboxContent,
   ComboboxEmpty,
-  ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  ComboboxSearch,
+  ComboboxTriggerPlaceholder,
 } from '@spree/dashboard-ui'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -18,11 +20,11 @@ type StateOption = { abbr: string; name: string }
  * when the country doesn't enumerate them (free-text region); `statesRequired`
  * tells callers whether to fall back to a plain text input.
  */
-export function useCountryStates(countryIso: string | null | undefined) {
+export function useCountryStates(countryCode: string | null | undefined) {
   const { countries } = useCountries()
   const country = useMemo(
-    () => countries.find((c) => c.iso === countryIso) ?? null,
-    [countries, countryIso],
+    () => countries.find((c) => c.iso === countryCode) ?? null,
+    [countries, countryCode],
   )
   return {
     states: ((country?.states ?? []) as StateOption[]).filter((s) => Boolean(s.abbr)),
@@ -35,23 +37,39 @@ export function useCountryStates(countryIso: string | null | undefined) {
  * abbreviation (e.g. "CA"). Callers should hide this and render a free-text
  * Input when `useCountryStates(...).states` is empty.
  *
- * Keyed on `countryIso` so the internal state is reset when the country
+ * Shares the country picker's button-trigger shape — the two sit side by side
+ * in every address form, so they have to look alike, and the state field is
+ * exactly as prone to being buried by the browser's saved-address panel.
+ *
+ * Keyed on `countryCode` so the internal state is reset when the country
  * changes — prevents a stale highlight from a previous country.
  */
 export function StateCombobox({
-  countryIso,
+  id,
+  countryCode,
   states,
   value,
   onValueChange,
+  onBlur,
   placeholder,
+  searchPlaceholder,
+  invalid,
   disabled = false,
 }: {
-  countryIso: string | null | undefined
+  /** Forwarded to the trigger so a `<FieldLabel htmlFor>` can target it. */
+  id?: string
+  countryCode: string | null | undefined
   /** State list for the active country (typically from `useCountryStates`). */
   states: Pick<State, 'abbr' | 'name'>[]
   value: string | null | undefined
   onValueChange: (abbr: string) => void
+  /** Forwarded to the trigger so RHF's `<Controller>` can track touched state. */
+  onBlur?: () => void
+  /** Trigger text while nothing is selected. */
   placeholder?: string
+  /** Text in the dropdown's search box. */
+  searchPlaceholder?: string
+  invalid?: boolean
   disabled?: boolean
 }) {
   const { t } = useTranslation()
@@ -60,18 +78,32 @@ export function StateCombobox({
 
   return (
     <Combobox
-      key={countryIso ?? 'no-country'}
+      key={countryCode ?? 'no-country'}
       items={items}
       value={selected}
       onValueChange={(s: StateOption | null) => onValueChange(s?.abbr ?? '')}
       itemToStringLabel={(s: StateOption | null) => s?.name ?? ''}
       itemToStringValue={(s: StateOption | null) => s?.abbr ?? ''}
+      disabled={disabled}
     >
-      <ComboboxInput
-        placeholder={placeholder ?? t('admin.components.state_combobox.search_placeholder')}
+      <ComboboxButtonTrigger
+        id={id}
+        onBlur={onBlur}
         disabled={disabled}
-      />
+        aria-invalid={invalid || undefined}
+      >
+        {selected ? (
+          <span className="truncate">{selected.name}</span>
+        ) : (
+          <ComboboxTriggerPlaceholder>
+            {placeholder ?? t('admin.components.state_combobox.placeholder')}
+          </ComboboxTriggerPlaceholder>
+        )}
+      </ComboboxButtonTrigger>
       <ComboboxContent>
+        <ComboboxSearch
+          placeholder={searchPlaceholder ?? t('admin.components.state_combobox.search_placeholder')}
+        />
         <ComboboxEmpty>{t('admin.components.state_combobox.empty')}</ComboboxEmpty>
         <ComboboxList>
           {(state: StateOption) => (

package/src/components/currency-select.tsx

@@ -1,20 +1,17 @@
 import {
   Combobox,
+  ComboboxButtonTrigger,
   ComboboxContent,
   ComboboxEmpty,
-  ComboboxInput,
   ComboboxItem,
   ComboboxList,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  ComboboxSearch,
+  ComboboxTriggerPlaceholder,
 } from '@spree/dashboard-ui'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDisplayName } from '../hooks/use-display-name'
-import { useStore } from '../providers/store-provider'
+import { useOptionalStore } from '../providers/store-provider'
 
 /**
  * Every ISO 4217 currency code the runtime knows about — the active-currency
@@ -33,6 +30,10 @@ export const ALL_CURRENCY_CODES: string[] = (() => {
 })()
 
 interface CurrencySelectProps {
+  /** Classes for the trigger — used to match a neighbouring control's height. */
+  triggerClassName?: string
+  /** `sm` matches the toolbar controls beside it — see `SelectTrigger`. */
+  triggerSize?: 'sm' | 'default'
   /** ID for the trigger — paired with the parent `<FieldLabel htmlFor>`. */
   id?: string
   /** Submit name — a hidden input mirrors the value so plain `FormData` works. */
@@ -47,18 +48,24 @@ interface CurrencySelectProps {
    * Currency codes to pick from. Defaults to the current store's
    * `supported_currencies`. Pass `ALL_CURRENCY_CODES` (or any custom list) for
    * contexts where the merchant chooses a currency the store doesn't yet
-   * support — e.g. a market's currency. Large lists switch to a searchable
-   * combobox automatically.
+   * support — e.g. a market's currency.
    */
   options?: string[]
-  /** Marks the field required for screen readers + native form submission. */
+  /**
+   * Announces the field as required to assistive technology (`aria-required`).
+   * It does not enforce anything: the trigger is a button, so there is no
+   * native constraint validation behind it. The consuming form owns
+   * enforcement.
+   */
   required?: boolean
   disabled?: boolean
+  /** Text in the dropdown's search box. */
+  searchPlaceholder?: string
+  invalid?: boolean
+  /** Forwarded to the trigger so RHF's `<Controller>` can track touched state. */
+  onBlur?: () => void
 }
 
-/** Above this many options a plain `<Select>` is unwieldy — switch to search. */
-const SEARCHABLE_THRESHOLD = 12
-
 /**
  * Picker for a currency code. Defaults to the current store's
  * `supported_currencies` (and the store's `default_currency`), so callers
@@ -66,7 +73,11 @@ const SEARCHABLE_THRESHOLD = 12
  * Pass `options` (e.g. `ALL_CURRENCY_CODES`) when the merchant may pick any
  * currency, such as a market's currency. Each option reads `CODE — Full Name`
  * (e.g. `USD — US Dollar`), with the name localized to the admin UI language.
- * Long option lists render a searchable combobox.
+ *
+ * Always searchable, whatever the list length. The picker used to fall back to
+ * a plain `<Select>` under a dozen options, which meant the same field behaved
+ * differently from one store to the next — typing to filter worked on a store
+ * with many currencies and did nothing on a store with three.
  */
 export function CurrencySelect({
   id,
@@ -77,9 +88,22 @@ export function CurrencySelect({
   options,
   required,
   disabled,
+  searchPlaceholder,
+  invalid,
+  onBlur,
+  triggerClassName,
+  triggerSize,
 }: CurrencySelectProps) {
   const { t } = useTranslation()
-  const { currencies, defaultCurrency } = useStore()
+  // Optional: the operator's dashboard always has a store, the seller panel
+  // has none — its tenant is a seller and the store is derived server-side.
+  // Without one the picker renders from the `options` its caller passes,
+  // rather than refusing to render at all. It deliberately does NOT fall back
+  // to every ISO code: a currency the store does not trade in saves fine and
+  // then quotes nothing.
+  const store = useOptionalStore()
+  const currencies = store?.currencies ?? []
+  const defaultCurrency = store?.defaultCurrency ?? ''
   const [internalValue, setInternalValue] = useState(defaultValue ?? defaultCurrency)
   const isControlled = controlledValue !== undefined
   // Controlled callers that pass an empty value still see the store default
@@ -120,62 +144,53 @@ export function CurrencySelect({
 
   const hiddenInput = name ? <input type="hidden" name={name} value={value} /> : null
 
-  if (items.length > SEARCHABLE_THRESHOLD) {
-    return (
-      <>
-        {hiddenInput}
-        <Combobox
-          items={items}
-          value={value}
-          onValueChange={(next: string | null) => handleChange(next ?? '')}
-          itemToStringLabel={(code: string | null) => (code ? renderOption(code) : '')}
-          itemToStringValue={(code: string | null) => code ?? ''}
-          filter={filter}
-          disabled={disabled}
-        >
-          <ComboboxInput
-            id={id}
-            aria-required={required}
-            placeholder={t('admin.components.currency_select.placeholder')}
-            disabled={disabled}
-          />
-          <ComboboxContent>
-            <ComboboxEmpty>{t('admin.components.currency_select.empty')}</ComboboxEmpty>
-            <ComboboxList>
-              {(code: string) => (
-                <ComboboxItem key={code} value={code}>
-                  {renderOption(code)}
-                </ComboboxItem>
-              )}
-            </ComboboxList>
-          </ComboboxContent>
-        </Combobox>
-      </>
-    )
-  }
-
   return (
     <>
       {/* Hidden input keeps the parent `<form>` submit / FormData path working
           without each caller having to thread the value through state. */}
       {hiddenInput}
-      <Select value={value} onValueChange={handleChange} disabled={disabled}>
-        <SelectTrigger id={id} aria-required={required}>
-          {/* Base UI's `<SelectValue>` defaults to rendering the raw `value`
-              (the bare ISO code). Use the children render-prop so the
-              trigger shows the same `CODE — Full Name` as the items. */}
-          <SelectValue placeholder={t('admin.components.currency_select.placeholder')}>
-            {(v) => (v ? renderOption(v as string) : (v as string))}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {items.map((currency) => (
-            <SelectItem key={currency} value={currency}>
-              {renderOption(currency)}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <Combobox
+        items={items}
+        value={value}
+        onValueChange={(next: string | null) => handleChange(next ?? '')}
+        itemToStringLabel={(code: string | null) => (code ? renderOption(code) : '')}
+        itemToStringValue={(code: string | null) => code ?? ''}
+        filter={filter}
+        disabled={disabled}
+      >
+        <ComboboxButtonTrigger
+          id={id}
+          size={triggerSize}
+          className={triggerClassName}
+          onBlur={onBlur}
+          disabled={disabled}
+          aria-required={required}
+          aria-invalid={invalid || undefined}
+        >
+          {value ? (
+            <span className="truncate">{renderOption(value)}</span>
+          ) : (
+            <ComboboxTriggerPlaceholder>
+              {t('admin.components.currency_select.placeholder')}
+            </ComboboxTriggerPlaceholder>
+          )}
+        </ComboboxButtonTrigger>
+        <ComboboxContent>
+          <ComboboxSearch
+            placeholder={
+              searchPlaceholder ?? t('admin.components.currency_select.search_placeholder')
+            }
+          />
+          <ComboboxEmpty>{t('admin.components.currency_select.empty')}</ComboboxEmpty>
+          <ComboboxList>
+            {(code: string) => (
+              <ComboboxItem key={code} value={code}>
+                {renderOption(code)}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
     </>
   )
 }

package/src/components/export-button.tsx

@@ -1,4 +1,3 @@
-import type { ExportType } from '@spree/admin-sdk'
 import {
   Button,
   Dialog,
@@ -16,8 +15,8 @@ import {
   RadioGroup,
   RadioGroupItem,
 } from '@spree/dashboard-ui'
+import { DownloadIcon, FilterIcon, GlobeIcon } from '@spree/dashboard-ui/icons'
 import type { TFunction } from 'i18next'
-import { DownloadIcon, FilterIcon, GlobeIcon } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useExport } from '../hooks/use-export'
@@ -25,14 +24,61 @@ import { filtersToRansack } from '../lib/filters-to-ransack'
 import type { ResourceActionsContext } from './resource-table'
 
 interface ExportButtonProps extends ResourceActionsContext {
-  /** Which dataset to export. Server validates against `Spree::Export.available_types`. */
-  type: ExportType
+  /**
+   * Which dataset to export. A plain string rather than either SDK's union:
+   * the operator's registry and a seller's allowlist are different sets, and
+   * the server is what validates the value in both panels.
+   */
+  type: string
   /** Label shown on the button. Defaults to the translated "Export" action. */
   label?: string
 }
 
 type Selection = 'filtered' | 'all'
 
+interface ExportRecordButtonProps {
+  /** Which dataset to export; see `ExportButton`. */
+  type: string
+  /** Ransack filter naming the records, as `search_params` on the export. */
+  searchParams: Record<string, unknown>
+  /** Label shown on the button. Defaults to the translated "Export" action. */
+  label?: string
+  /** Optional size for the button. Defaults to "sm". */
+  size?: 'sm' | 'default' | 'lg'
+}
+
+/**
+ * Export from a record's own page — one price list's prices, one promotion's
+ * coupon codes. The page has already decided what the file holds, so one
+ * click queues it; the filtered-or-all dialog is the table's concern.
+ */
+export function ExportRecordButton({ type, searchParams, label, size }: ExportRecordButtonProps) {
+  const { t } = useTranslation()
+  const exportMutation = useExport()
+
+  return (
+    <Button
+      type="button"
+      size={size ?? 'sm'}
+      variant="outline"
+      onClick={() =>
+        exportMutation.mutate({
+          type,
+          record_selection: 'filtered',
+          search_params: searchParams,
+          results_url: window.location.href,
+        })
+      }
+      disabled={exportMutation.isPending}
+    >
+      <DownloadIcon className="size-4" />
+      {exportMutation.isPending
+        ? t('admin.actions.exporting')
+        : (label ?? t('admin.actions.export'))}
+    </Button>
+  )
+}
+
 export function ExportButton({
   type,
   label,
@@ -59,16 +105,27 @@ export function ExportButton({
       type,
       record_selection: selection,
       search_params: selection === 'filtered' ? search_params : undefined,
+      // Where the done email sends the user back to, for an export too slow to
+      // wait on. Read off the live location rather than built from a
+      // configured host: a panel may be mounted under a path (`/sellers`,
+      // `/dashboard`) as easily as on a host of its own, and only the page
+      // itself knows which. The store's allowed origins decide whether the
+      // server trusts it.
+      results_url: window.location.href,
     })
     setOpen(false)
   }
 
   return (
     <>
+      {/* Desktop only: picking a dataset, waiting on the job and opening
+          the file is desk work, and the button is one of the things that
+          pushed the toolbar onto a third row on a phone. */}
       <Button
+        type="button"
         size="sm"
         variant="outline"
-        className="h-[2.125rem]"
+        className="hidden h-[2.125rem] lg:inline-flex"
         onClick={() => setOpen(true)}
         disabled={exportMutation.isPending}
       >