@spree/dashboard-ui 1.0.0-rc.2 → 1.0.0-rc.4

package/src/spree/fulfillment-item-list.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '../ui/item'
 import { Thumbnail } from '../ui/thumbnail'
 import { PackageIcon } from './icons'
 
@@ -30,17 +31,17 @@ export type FulfillmentItemRowData = {
  */
 function ItemRow({ row }: { row: FulfillmentItemRowData }) {
   return (
-    <div className="flex items-center gap-3 p-3">
+    <Item className="flex-nowrap gap-3 rounded-none border-0 p-3">
       <Thumbnail src={row.thumbnailUrl} fallback={<PackageIcon />} />
 
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium">{row.name}</div>
+      <ItemContent className="min-w-0 gap-0">
+        <ItemTitle className="block truncate">{row.name}</ItemTitle>
         {row.optionsText && (
-          <div className="truncate text-xs text-muted-foreground">{row.optionsText}</div>
+          <ItemDescription className="line-clamp-1 text-xs">{row.optionsText}</ItemDescription>
         )}
-      </div>
+      </ItemContent>
 
-      <div className="min-w-0 shrink text-right text-muted-foreground text-sm">
+      <ItemActions className="min-w-0 shrink flex-col items-end gap-0 text-right text-muted-foreground text-sm">
         {row.displayPrice ? (
           <span className="whitespace-nowrap">
             {row.displayPrice} × {row.quantity}
@@ -48,9 +49,9 @@ function ItemRow({ row }: { row: FulfillmentItemRowData }) {
         ) : (
           <span className="whitespace-nowrap">× {row.quantity}</span>
         )}
-        {row.priceSource && <div className="truncate text-xs">{row.priceSource}</div>}
-      </div>
-    </div>
+        {row.priceSource && <div className="max-w-full truncate text-xs">{row.priceSource}</div>}
+      </ItemActions>
+    </Item>
   )
 }
 

package/src/spree/icons.ts

@@ -18,11 +18,14 @@ export {
   BanIcon,
   BanknoteIcon,
   BarChart3Icon as AnalyticsIcon,
+  BellIcon,
   BoldIcon,
   BookOpenIcon,
+  BotIcon,
   BoxesIcon,
   BracesIcon,
   Building2Icon,
+  CalculatorIcon,
   CalendarIcon,
   CalendarOffIcon,
   ChartColumnIcon,
@@ -35,6 +38,7 @@ export {
   ChevronsLeftIcon,
   ChevronsRightIcon,
   ChevronsUpDownIcon,
+  CircleAlertIcon,
   CircleCheckIcon,
   CircleDotIcon,
   CircleIcon,

package/src/spree/label-upload-dialog.tsx

@@ -127,7 +127,7 @@ export function LabelUploadDialog({
                   <InputGroupInput
                     id="label-cost"
                     type="number"
-                    step="0.01"
+                    step="any"
                     min="0"
                     {...form.register('cost')}
                   />

package/src/spree/post-sale-create-dialogs.tsx

@@ -100,18 +100,11 @@ export function CreateReturnDialog({
 
 /** A line the claim can name, with what the customer paid for it. */
 export type ClaimableLine = PostSaleUnit & {
-  /** The whole line after discounts, used to default the refund to what was actually paid. */
-  discountedAmount?: string | null
-  /** Tax charged on top of the line's price, which a claim refunds with it. */
-  additionalTaxTotal?: string | null
-}
-
-/** What the customer paid for `quantity` units of the line, or blank when that is unknown. */
-function paidForUnits(line: ClaimableLine, quantity: number): string {
-  const paid = Number(line.discountedAmount) + Number(line.additionalTaxTotal ?? 0)
-  if (quantity <= 0 || line.discountedAmount == null || !Number.isFinite(paid)) return ''
-
-  return ((paid * quantity) / line.quantity).toFixed(2)
+  /**
+   * What the customer paid, tax included, for that many units of the line, as
+   * a decimal string — the default refund. Blank when it is unknown.
+   */
+  paidFor?: (quantity: number) => string
 }
 
 /**
@@ -189,7 +182,7 @@ export function CreateClaimDialog({
                         if (!typedAmounts[line.id]) {
                           setAmounts((current) => ({
                             ...current,
-                            [line.id]: paidForUnits(line, quantity),
+                            [line.id]: quantity > 0 ? (line.paidFor?.(quantity) ?? '') : '',
                           }))
                         }
                       }}
@@ -207,7 +200,7 @@ export function CreateClaimDialog({
                         <InputGroupInput
                           id={`claim-amount-${line.id}`}
                           type="number"
-                          step="0.01"
+                          step="any"
                           min="0"
                           value={amounts[line.id] ?? ''}
                           onChange={(event) => {

package/src/spree/post-sale-fields.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Field, FieldLabel } from '../ui/field'
 import { Input } from '../ui/input'
+import { Item, ItemActions, ItemContent, ItemTitle } from '../ui/item'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
 
 /** A unit on the order that a return, exchange or claim can name. */
@@ -31,26 +32,27 @@ export function QuantityPicker({
   return (
     <div className="flex flex-col gap-2">
       {units.map((unit) => (
-        <div
-          key={unit.id}
-          className="flex items-center justify-between gap-4 rounded-lg border border-border-subtle p-3"
-        >
-          <span className="min-w-0 truncate text-sm">{unit.label}</span>
-          <Input
-            type="number"
-            min={0}
-            max={unit.quantity}
-            className="w-20"
-            value={selection[unit.id] ?? 0}
-            aria-label={unit.label}
-            onChange={(event) =>
-              onChange({
-                ...selection,
-                [unit.id]: Math.max(0, Math.min(Number(event.target.value), unit.quantity)),
-              })
-            }
-          />
-        </div>
+        <Item key={unit.id} variant="outline" className="flex-nowrap border-border-subtle">
+          <ItemContent className="min-w-0">
+            <ItemTitle className="block truncate font-normal">{unit.label}</ItemTitle>
+          </ItemContent>
+          <ItemActions>
+            <Input
+              type="number"
+              min={0}
+              max={unit.quantity}
+              className="w-20"
+              value={selection[unit.id] ?? 0}
+              aria-label={unit.label}
+              onChange={(event) =>
+                onChange({
+                  ...selection,
+                  [unit.id]: Math.max(0, Math.min(Number(event.target.value), unit.quantity)),
+                })
+              }
+            />
+          </ItemActions>
+        </Item>
       ))}
     </div>
   )

package/src/spree/quantity-tier-editor.tsx

@@ -106,7 +106,7 @@ export function QuantityTierEditor({
                 )}
                 <InputGroupInput
                   type="number"
-                  step="0.01"
+                  step="any"
                   value={row.value}
                   disabled={disabled}
                   aria-label={labels.value}

package/src/spree/resource-combobox.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { type ReactNode, useState } from 'react'
 import {
   Combobox,
   ComboboxContent,
@@ -84,14 +84,30 @@ export function ResourceCombobox<T extends ComboboxOption>({
   disabled,
   id,
 }: ResourceComboboxProps<T>) {
-  const selected = items.find((r) => r.id === value) ?? null
+  // The picked record is remembered so it stays selected while `items` is
+  // between fetches. Without it, the selection drops out of the list for a
+  // moment, Base UI reads that as the value being cleared, empties the input,
+  // and the field flickers between labels until the queries settle.
+  const [picked, setPicked] = useState<T | null>(null)
+  const selected =
+    items.find((r) => r.id === value) ?? (picked && picked.id === value ? picked : null)
 
   return (
     <Combobox
       items={items}
       value={selected}
-      onValueChange={(record: T | null) => onChange(record?.id, record)}
-      onInputValueChange={onInputChange}
+      // Compared by id: a refetch hands back equal records as new objects.
+      isItemEqualToValue={(item: T, current: T) => item.id === current.id}
+      onValueChange={(record: T | null) => {
+        setPicked(record)
+        onChange(record?.id, record)
+      }}
+      // Picking an option writes its label into the input. That is not a
+      // search, so the query goes back to the empty list instead of searching
+      // for the full label of what was just chosen.
+      onInputValueChange={(next, details) =>
+        onInputChange?.(details.reason === 'item-press' ? '' : next)
+      }
       itemToStringLabel={(record: T | null) => (record ? getOptionLabel(record) : '')}
       itemToStringValue={(record: T | null) => record?.id ?? ''}
       // Filtering is server-side: the caller's `onInputChange` already narrows

package/src/spree/return-dialogs.tsx

@@ -139,49 +139,6 @@ export function ReturnReceiveDialog({
   )
 }
 
-/** True when a received return is owed nothing, so completing it moves no money. */
-export function returnOwesNothing(refundableTotal: string): boolean {
-  return Number(refundableTotal) === 0
-}
-
-export type ReturnRefundFigures = {
-  status: string
-  refund_total: string
-  display_refund_total: string
-  refunded_total: string
-  display_refunded_total: string
-}
-
-/**
- * What a return's card reports: what it is owed until money goes back, then
- * what actually went back — which a merchant keeping a restocking fee makes
- * less than it was owed, so that case also names the full amount. Money that
- * went back counts even before the return is marked refunded: a refund that
- * succeeded on one payment and was declined on the next leaves it received.
- */
-export function returnRefundSummary(
-  returnRecord: ReturnRefundFigures,
-):
-  | { kind: 'owed'; amount: string }
-  | { kind: 'refunded'; amount: string }
-  | { kind: 'refunded_short'; amount: string; total: string } {
-  const refunded = Number(returnRecord.refunded_total)
-
-  if (returnRecord.status !== 'refunded' && refunded === 0) {
-    return { kind: 'owed', amount: returnRecord.display_refund_total }
-  }
-
-  if (refunded < Number(returnRecord.refund_total)) {
-    return {
-      kind: 'refunded_short',
-      amount: returnRecord.display_refunded_total,
-      total: returnRecord.display_refund_total,
-    }
-  }
-
-  return { kind: 'refunded', amount: returnRecord.display_refunded_total }
-}
-
 /**
  * Gives the money back: how much, and by what means. A return owed nothing
  * (a free gift sent back) is completed instead, with nothing to choose.
@@ -193,6 +150,7 @@ export function returnRefundSummary(
  */
 export function ReturnRefundDialog({
   refundableTotal,
+  owesNothing,
   refundTaxTotal,
   currencySymbol,
   onClose,
@@ -200,6 +158,8 @@ export function ReturnRefundDialog({
   pending = false,
 }: {
   refundableTotal: string
+  /** True when the return is owed nothing, so it is completed rather than refunded. */
+  owesNothing: boolean
   refundTaxTotal?: string
   currencySymbol: string
   onClose: () => void
@@ -209,7 +169,6 @@ export function ReturnRefundDialog({
   const { t } = useTranslation()
   const [refundMethod, setRefundMethod] = useState<RefundMethod>('original_payment')
   const [amount, setAmount] = useState(refundableTotal)
-  const owesNothing = returnOwesNothing(refundableTotal)
 
   const methodOptions = [
     {
@@ -250,7 +209,7 @@ export function ReturnRefundDialog({
                   <InputGroupInput
                     id="refund-amount"
                     type="number"
-                    step="0.01"
+                    step="any"
                     min="0"
                     value={amount}
                     onChange={(event) => setAmount(event.target.value)}

package/src/spree/secret-input.tsx

@@ -2,7 +2,8 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '../ui/button'
 import { Field, FieldLabel } from '../ui/field'
-import { Input } from '../ui/input'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../ui/input-group'
+import { EyeIcon, EyeOffIcon } from './icons'
 
 // Server masks stored secrets as `••••…` on read so admins can see "yes,
 // something is stored" without exposing the actual value. Detecting that
@@ -35,7 +36,9 @@ interface SecretInputProps {
  * mask (`••••3K9z`) and renders as a read-only badge with a "Replace"
  * button — never as an input, and never with a reveal toggle, because the
  * server does not send the secret and there is nothing to unhide. Replace
- * switches to an empty password input so the admin opts in to rotation;
+ * switches to an empty password input so the admin opts in to rotation; that
+ * input does carry a reveal toggle, since what it hides is what the admin is
+ * typing right now;
  * Cancel reverts to the badge so the next save preserves the existing
  * secret via the backend's masked round-trip guard.
  *
@@ -57,6 +60,7 @@ export function SecretInput({
   // after `onChange('')` has cleared the parent value.
   const [pendingMask, setPendingMask] = useState<string | null>(null)
   const replacing = pendingMask !== null
+  const [revealed, setRevealed] = useState(false)
 
   // A stored secret always renders as the badge: the server sent a mask,
   // not the value, so there is nothing a reveal toggle could show.
@@ -93,17 +97,29 @@ export function SecretInput({
     <Field>
       <FieldLabel htmlFor={id}>{label}</FieldLabel>
       <div className="flex items-center gap-2">
-        <Input
-          id={id}
-          type="password"
-          autoComplete="new-password"
-          placeholder={
-            replacing ? t('admin.components.secret_input.new_value_placeholder') : placeholder
-          }
-          value={(value as string) ?? ''}
-          onChange={(e) => onChange(e.target.value)}
-          className="flex-1"
-        />
+        <InputGroup className="flex-1">
+          <InputGroupInput
+            id={id}
+            type={revealed ? 'text' : 'password'}
+            autoComplete="new-password"
+            spellCheck={false}
+            placeholder={
+              replacing ? t('admin.components.secret_input.new_value_placeholder') : placeholder
+            }
+            value={(value as string) ?? ''}
+            onChange={(e) => onChange(e.target.value)}
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              size="icon-xs"
+              aria-label={revealed ? t('admin.actions.hide') : t('admin.actions.show')}
+              aria-pressed={revealed}
+              onClick={() => setRevealed((visible) => !visible)}
+            >
+              {revealed ? <EyeOffIcon /> : <EyeIcon />}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
         {replacing && (
           <Button
             type="button"

package/src/spree/tax-identifiers-card.tsx

@@ -15,17 +15,20 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
   Field,
   FieldDescription,
   FieldError,
   FieldGroup,
   FieldLabel,
   Input,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemTitle,
   RelativeTime,
+  RowActions,
   Sheet,
   SheetContent,
   SheetDescription,
@@ -35,7 +38,7 @@ import {
   StatusBadge,
   useConfirm,
 } from '../index'
-import { BadgeCheckIcon, EllipsisVerticalIcon, PencilIcon, PlusIcon, TrashIcon } from './icons'
+import { BadgeCheckIcon, PlusIcon } from './icons'
 
 /** One selectable registration kind. */
 interface KindOption {
@@ -153,81 +156,71 @@ export function TaxIdentifiersCard({
           <p className="text-muted-foreground text-sm">{t('admin.tax_identifiers.empty')}</p>
         </CardContent>
       ) : (
-        <CardContent className="flex flex-col gap-3">
-          {identifiers.map((identifier) => (
-            <div
-              key={identifier.id}
-              className="flex items-start justify-between gap-3 rounded-md border p-3"
-            >
-              <div className="flex min-w-0 flex-col gap-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <span className="font-medium text-sm">{identifier.value}</span>
-                  <Badge variant="outline">
-                    {t(`admin.tax_identifiers.kinds.${identifier.kind}`, {
-                      defaultValue: identifier.kind,
-                    })}
-                  </Badge>
-                  {identifier.validation_status ? (
-                    <StatusBadge
-                      status={identifier.validation_status}
-                      label={t(
-                        `admin.tax_identifiers.validation_status.${identifier.validation_status}`,
-                        { defaultValue: identifier.validation_status },
-                      )}
-                    />
-                  ) : (
-                    <Badge variant="secondary">
-                      {t('admin.tax_identifiers.validation_status.not_checked')}
+        <CardContent>
+          <ItemGroup className="gap-3">
+            {identifiers.map((identifier) => (
+              <Item key={identifier.id} role="listitem" variant="outline" className="items-start">
+                <ItemContent className="min-w-0">
+                  <ItemTitle className="flex-wrap">
+                    {identifier.value}
+                    <Badge variant="outline">
+                      {t(`admin.tax_identifiers.kinds.${identifier.kind}`, {
+                        defaultValue: identifier.kind,
+                      })}
                     </Badge>
+                    {identifier.validation_status ? (
+                      <StatusBadge
+                        status={identifier.validation_status}
+                        label={t(
+                          `admin.tax_identifiers.validation_status.${identifier.validation_status}`,
+                          { defaultValue: identifier.validation_status },
+                        )}
+                      />
+                    ) : (
+                      <Badge variant="secondary">
+                        {t('admin.tax_identifiers.validation_status.not_checked')}
+                      </Badge>
+                    )}
+                  </ItemTitle>
+                  {identifier.validated_at && (
+                    <ItemDescription className="text-xs">
+                      <RelativeTime
+                        iso={identifier.validated_at}
+                        prefix={t('admin.tax_identifiers.checked_prefix')}
+                      />
+                    </ItemDescription>
+                  )}
+                  {!identifier.validatable && (
+                    <ItemDescription className="text-xs">
+                      {t('admin.tax_identifiers.not_validatable')}
+                    </ItemDescription>
                   )}
-                </div>
-                {identifier.validated_at && (
-                  <span className="text-muted-foreground text-xs">
-                    <RelativeTime
-                      iso={identifier.validated_at}
-                      prefix={t('admin.tax_identifiers.checked_prefix')}
+                </ItemContent>
+
+                {canEdit && (
+                  <ItemActions>
+                    <RowActions
+                      actions={[
+                        {
+                          key: 'validate',
+                          label: t('admin.tax_identifiers.validate_action'),
+                          icon: <BadgeCheckIcon className="size-4" />,
+                          disabled: !identifier.validatable || mutations.isValidating,
+                          onSelect: () => mutations.validate(identifier.id).catch(() => undefined),
+                        },
+                        { key: 'edit', onSelect: () => setEditing(identifier) },
+                        {
+                          key: 'delete',
+                          destructive: true,
+                          onSelect: () => handleDelete(identifier),
+                        },
+                      ]}
                     />
-                  </span>
-                )}
-                {!identifier.validatable && (
-                  <span className="text-muted-foreground text-xs">
-                    {t('admin.tax_identifiers.not_validatable')}
-                  </span>
+                  </ItemActions>
                 )}
-              </div>
-
-              {canEdit && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon-xs">
-                      <EllipsisVerticalIcon className="size-4" />
-                      <span className="sr-only">{t('admin.actions.actions_menu')}</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      disabled={!identifier.validatable || mutations.isValidating}
-                      onClick={() => mutations.validate(identifier.id).catch(() => undefined)}
-                    >
-                      <BadgeCheckIcon className="size-4" />
-                      {t('admin.tax_identifiers.validate_action')}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setEditing(identifier)}>
-                      <PencilIcon className="size-4" />
-                      {t('admin.actions.edit')}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-destructive focus:text-destructive"
-                      onClick={() => handleDelete(identifier)}
-                    >
-                      <TrashIcon className="size-4" />
-                      {t('admin.actions.delete')}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </div>
-          ))}
+              </Item>
+            ))}
+          </ItemGroup>
         </CardContent>
       )}
 

package/src/spree/wizard.tsx

@@ -188,13 +188,7 @@ export function Wizard({
       }}
       modal
     >
-      <DialogContent
-        // Edge-to-edge minus a gutter, like the import wizard and the bulk
-        // price editor — every inset/translate/max is overridden.
-        className="!inset-3 !w-auto !max-w-none !translate-x-0 !translate-y-0 flex flex-col p-0"
-        style={{ maxHeight: 'none' }}
-        showCloseButton={false}
-      >
+      <DialogContent fullScreen showCloseButton={false}>
         <DialogHeader className="h-14 shrink-0 flex-row items-center gap-3 space-y-0 border-b border-border-subtle bg-background px-4 py-0">
           <div className="flex min-w-0 items-center gap-3">
             <DialogTitle className="truncate text-base">{title}</DialogTitle>

package/src/ui/dialog.tsx

@@ -95,20 +95,29 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  fullScreen = false,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Popup> & {
   showCloseButton?: boolean
+  /**
+   * Fills the window minus a small gutter, over an opaque overlay — for
+   * wizards and editors that replace the page rather than sit on top of it.
+   * A see-through overlay would let the page's own panel edges show around
+   * the dialog as a second border.
+   */
+  fullScreen?: boolean
 }) {
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay className={cn(fullScreen && 'bg-background dark:bg-background')} />
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
           'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card text-foreground text-sm shadow-lg duration-100 outline-none sm:max-w-[min(500px,calc(100%-2rem))] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale]',
+          fullScreen && 'inset-3 w-auto max-w-none translate-x-0 translate-y-0 sm:max-w-none',
           className,
         )}
-        style={{ maxHeight: '90vh' }}
+        style={fullScreen ? undefined : { maxHeight: '90vh' }}
         {...props}
       >
         {children}