@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/backend/crud/CollapsibleGroup.tsx

@@ -75,11 +75,21 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
       <div
         id={`collapsible-group-wrapper-${groupId}`}
         className={cn(
-          'rounded-lg border bg-card',
+          // Aligned with Figma Accordion `210:4022`: rounded-10, three visual
+          // states (closed = white card + soft border + x-small shadow,
+          // hover-while-closed = bg-muted + no border + no shadow,
+          // open = bg-muted + no border + no shadow). Destructive border
+          // wins over the Figma states when the group has validation errors.
+          'rounded-[10px] border bg-card transition-colors',
           !isHydrated && 'invisible',
-          errorCount > 0 && 'border-destructive',
+          errorCount > 0
+            ? 'border-destructive'
+            : expanded
+              ? 'border-transparent bg-muted shadow-none'
+              : 'border-border shadow-xs hover:border-transparent hover:bg-muted hover:shadow-none',
         )}
         data-collapsible-group-id={groupId}
+        data-state={expanded ? 'open' : 'closed'}
         data-persistence-hydrated={isHydrated ? 'true' : 'false'}
         aria-hidden={isHydrated ? undefined : true}
       >
@@ -96,7 +106,11 @@ export const CollapsibleGroup = React.forwardRef<CollapsibleGroupHandle, Collaps
               variant="muted"
               onClick={toggle}
               className={cn(
-                'flex-1 px-2 py-1 text-sm font-medium hover:bg-accent/50 rounded-md',
+                // Defer hover styling to the surrounding wrapper so the whole
+                // row toggles to `bg-muted` together (Figma Accordion behaviour)
+                // instead of stacking a second hover layer over the trigger
+                // button.
+                'flex-1 rounded-md px-2 py-1 text-sm font-medium hover:bg-transparent dark:hover:bg-transparent',
                 chevronPosition === 'left' ? 'justify-start gap-2' : 'justify-between',
               )}
               aria-expanded={expanded}

package/src/backend/detail/InlineEditors.tsx

@@ -14,8 +14,10 @@ import {
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
+import { format } from 'date-fns'
 import { LoadingMessage } from './LoadingMessage'
 import { mapCrudServerErrorToFormErrors } from '../utils/serverErrors'
 import { MarkdownPreview } from '../markdown'
@@ -317,33 +319,82 @@ export function InlineTextEditor({
                 }
               }}
             >
-              {resolvedType === 'tel' ? (
-                <PhoneNumberField
-                  value={draft.length ? draft : undefined}
-                  onValueChange={(next) => {
-                    if (error) setError(null)
-                    setDraft(next ?? '')
-                  }}
-                  placeholder={placeholder}
-                  autoFocus
-                  disabled={saving}
-                  minDigits={7}
-                />
-              ) : (
-              <input
-                className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                value={draft}
-                onChange={(event) => {
-                  if (error) setError(null)
-                  setDraft(event.target.value)
-                }}
-                placeholder={placeholder}
-                type={inputType ?? resolvedType}
-                autoFocus
-              />
-              )}
+              {(() => {
+                const lowerType = (inputType ?? resolvedType ?? '').toLowerCase()
+                const isDate = lowerType === 'date'
+                const isDateTime = lowerType === 'datetime-local' || lowerType === 'datetime'
+                if (resolvedType === 'tel') {
+                  return (
+                    <PhoneNumberField
+                      value={draft.length ? draft : undefined}
+                      onValueChange={(next) => {
+                        if (error) setError(null)
+                        setDraft(next ?? '')
+                      }}
+                      placeholder={placeholder}
+                      autoFocus
+                      disabled={saving}
+                      minDigits={7}
+                    />
+                  )
+                }
+                if (isDate || isDateTime) {
+                  let parsed: Date | null = null
+                  if (draft && draft.length) {
+                    const candidate = new Date(draft)
+                    if (!Number.isNaN(candidate.getTime())) parsed = candidate
+                  }
+                  return (
+                    <DatePicker
+                      value={parsed}
+                      onChange={(date) => {
+                        if (error) setError(null)
+                        const formatted = !date
+                          ? ''
+                          : isDateTime
+                            ? format(date, "yyyy-MM-dd'T'HH:mm")
+                            : format(date, 'yyyy-MM-dd')
+                        setDraft(formatted)
+                        setSaving(true)
+                        ;(async () => {
+                          try {
+                            await onSave(formatted.length ? formatted : null)
+                            setEditingSafe(false)
+                          } catch (err) {
+                            setError(resolveInlineErrorMessage(err, fallbackError))
+                          } finally {
+                            setSaving(false)
+                          }
+                        })()
+                      }}
+                      withTime={isDateTime}
+                      footer="apply-cancel"
+                      placeholder={placeholder}
+                      disabled={saving}
+                    />
+                  )
+                }
+                return (
+                  <input
+                    className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                    value={draft}
+                    onChange={(event) => {
+                      if (error) setError(null)
+                      setDraft(event.target.value)
+                    }}
+                    placeholder={placeholder}
+                    type={inputType ?? resolvedType}
+                    autoFocus
+                  />
+                )
+              })()}
               {error ? <p className="text-xs text-destructive">{error}</p> : null}
               {renderBelowInput ? renderBelowInput({ draft, resolvedType, error, saving }) : null}
+              {(() => {
+                const lowerType = (inputType ?? resolvedType ?? '').toLowerCase()
+                const isDateLike = lowerType === 'date' || lowerType === 'datetime-local' || lowerType === 'datetime'
+                if (isDateLike) return null
+                return (
               <div className="flex items-center gap-2">
                 <Button type="submit" size="sm" disabled={saving}>
                   {saving ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
@@ -353,6 +404,8 @@ export function InlineTextEditor({
                   {t('ui.detail.inline.cancel', 'Cancel')}
                 </Button>
               </div>
+                )
+              })()}
             </form>
           ) : (
             <div className={variant === 'plain' ? '' : 'mt-1'}>{displayContent}</div>

package/src/backend/detail/__tests__/InlineEditors.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import * as React from 'react'
-import { screen } from '@testing-library/react'
+import { act, fireEvent, screen } from '@testing-library/react'
 import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
 import { InlineTextEditor, resolveSafeInlineUrlHref } from '../InlineEditors'
 
@@ -42,6 +42,86 @@ describe('InlineTextEditor URL display', () => {
   })
 })
 
+describe('InlineTextEditor date types — DS unification (no native date input)', () => {
+  function activateEditor() {
+    // Pencil/edit toggle is the trailing icon-only button on the InlineTextEditor.
+    // It has no accessible text label, so we grab the last data-slot="button".
+    const buttons = document.querySelectorAll('[data-slot="button"]')
+    expect(buttons.length).toBeGreaterThan(0)
+    const editToggle = buttons[buttons.length - 1] as HTMLButtonElement
+    act(() => {
+      fireEvent.click(editToggle)
+    })
+  }
+
+  it('inputType="date" renders the DatePicker primitive trigger when editing', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="Date"
+        value="2026-05-09"
+        emptyLabel="No date"
+        type="date"
+        inputType="date"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    expect(document.querySelector('[data-slot="date-picker-trigger"]')).toBeInTheDocument()
+    expect(document.querySelector('input[type="date"]')).toBeNull()
+  })
+
+  it('inputType="datetime-local" renders the DatePicker primitive (with withTime) when editing', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="When"
+        value="2026-05-09T10:30"
+        emptyLabel="No value"
+        type="text"
+        inputType="datetime-local"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    expect(document.querySelector('[data-slot="date-picker-trigger"]')).toBeInTheDocument()
+    expect(document.querySelector('input[type="datetime-local"]')).toBeNull()
+  })
+
+  it('non-date inputType still renders a raw input (regression: text editing path unchanged)', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="Title"
+        value="Hello"
+        emptyLabel="No title"
+        type="text"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    expect(document.querySelector('input[type="text"]')).toBeInTheDocument()
+    expect(document.querySelector('[data-slot="date-picker-trigger"]')).toBeNull()
+  })
+
+  it('date type hides the form Save/Cancel buttons (DatePicker provides Apply/Cancel in popover)', () => {
+    renderWithProviders(
+      <InlineTextEditor
+        label="Date"
+        value="2026-05-09"
+        emptyLabel="No date"
+        type="date"
+        inputType="date"
+        onSave={jest.fn()}
+      />,
+      { dict: {} },
+    )
+    activateEditor()
+    // Form Save (submit) button should not be rendered for date types
+    expect(screen.queryByRole('button', { name: /Save|Zapisz|⌘/ })).not.toBeInTheDocument()
+  })
+})
+
 describe('resolveSafeInlineUrlHref', () => {
   it.each(['http://example.com', 'https://example.com', 'mailto:user@example.com', 'tel:+48123456789'])(
     'allows %s',

package/src/backend/inputs/ComboboxInput.tsx

@@ -14,8 +14,15 @@ export type ComboboxInputProps = {
   onChange: (next: string) => void
   placeholder?: string
   suggestions?: Array<string | ComboboxOption>
+  // Options to hydrate the option map up front (typically the linked entity's
+  // display fields, already present in a record-detail payload). Merged with
+  // `suggestions` so a pre-selected value renders its label without interaction.
+  seedOptions?: ComboboxOption[]
   loadSuggestions?: (query?: string) => Promise<Array<string | ComboboxOption>>
-  resolveLabel?: (value: string) => string
+  // Eagerly resolve a pre-selected `value` to a human label when it is not
+  // covered by `suggestions`/`seedOptions`/`loadSuggestions` results. Runs once
+  // per value, before any user interaction. May be sync or async.
+  resolveLabel?: (value: string) => string | Promise<string>
   resolveDescription?: (value: string) => string | null | undefined
   autoFocus?: boolean
   disabled?: boolean
@@ -47,6 +54,7 @@ export function ComboboxInput({
   onChange,
   placeholder,
   suggestions,
+  seedOptions,
   loadSuggestions,
   resolveLabel,
   resolveDescription,
@@ -56,6 +64,7 @@ export function ComboboxInput({
 }: ComboboxInputProps) {
   const [input, setInput] = React.useState('')
   const [asyncOptions, setAsyncOptions] = React.useState<ComboboxOption[]>([])
+  const [resolvedOptions, setResolvedOptions] = React.useState<ComboboxOption[]>([])
   const [loading, setLoading] = React.useState(false)
   const [touched, setTouched] = React.useState(false)
   const [showSuggestions, setShowSuggestions] = React.useState(false)
@@ -63,29 +72,46 @@ export function ComboboxInput({
   const inputRef = React.useRef<HTMLInputElement>(null)
   const suppressOpenOnFocusRef = React.useRef(Boolean(autoFocus && !disabled))
 
-  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions])
+  const staticOptions = React.useMemo(
+    () => normalizeOptions([...(seedOptions ?? []), ...(suggestions ?? [])]),
+    [seedOptions, suggestions]
+  )
+
+  // Options whose label is genuinely known (not a self-mapping `value === label`
+  // placeholder). Used to decide whether eager resolution still needs to run.
+  const knownLabelValues = React.useMemo(() => {
+    const set = new Set<string>()
+    for (const option of [...staticOptions, ...asyncOptions, ...resolvedOptions]) {
+      if (option.label && option.label !== option.value) set.add(option.value)
+    }
+    return set
+  }, [staticOptions, asyncOptions, resolvedOptions])
 
   const optionMap = React.useMemo(() => {
     const map = new Map<string, ComboboxOption>()
     const register = (option: ComboboxOption) => {
-      if (!map.has(option.value)) {
+      const existing = map.get(option.value)
+      // Prefer an entry that carries a real label over a self-mapping placeholder.
+      if (!existing || (existing.label === existing.value && option.label !== option.value)) {
         map.set(option.value, option)
       }
     }
     staticOptions.forEach(register)
     asyncOptions.forEach(register)
+    resolvedOptions.forEach(register)
     if (value) {
       const existing = map.get(value)
       if (!existing) {
+        const sync = typeof resolveLabel === 'function' ? resolveLabel(value) : undefined
         map.set(value, {
           value,
-          label: resolveLabel?.(value) ?? value,
+          label: typeof sync === 'string' && sync ? sync : value,
           description: resolveDescription?.(value) ?? null,
         })
       }
     }
     return map
-  }, [asyncOptions, resolveDescription, resolveLabel, staticOptions, value])
+  }, [asyncOptions, resolvedOptions, resolveDescription, resolveLabel, staticOptions, value])
 
   const availableOptions = React.useMemo(() => {
     return Array.from(optionMap.values())
@@ -122,7 +148,47 @@ export function ComboboxInput({
     }
   }, [disabled, input, loadSuggestions, touched])
 
-  // Sync input with value when value changes externally and input is not focused
+  // Eagerly resolve a pre-selected value to its label without requiring the user
+  // to focus the field. Runs once per value when it is not already covered.
+  const eagerResolveLabel = typeof resolveLabel === 'function' ? resolveLabel : undefined
+  React.useEffect(() => {
+    if (!value || disabled) return
+    if (knownLabelValues.has(value)) return
+    let cancelled = false
+    const apply = (label?: string | null, description?: string | null) => {
+      const clean = typeof label === 'string' ? label.trim() : ''
+      if (cancelled || !clean || clean === value) return
+      setResolvedOptions((prev) => {
+        if (prev.some((option) => option.value === value && option.label === clean)) return prev
+        return [...prev.filter((option) => option.value !== value), { value, label: clean, description: description ?? null }]
+      })
+    }
+    if (eagerResolveLabel) {
+      Promise.resolve()
+        .then(() => eagerResolveLabel(value))
+        .then((label) => apply(label, resolveDescription?.(value)))
+        .catch(() => {})
+      return () => { cancelled = true }
+    }
+    // Fallback: pull the first page of async suggestions so a remount that lost
+    // its option cache can still recover the label without user interaction.
+    if (loadSuggestions) {
+      setLoading(true)
+      Promise.resolve()
+        .then(() => loadSuggestions())
+        .then((items) => {
+          if (cancelled) return
+          const normalized = normalizeOptions(items)
+          setAsyncOptions(normalized)
+        })
+        .catch(() => {})
+        .finally(() => { if (!cancelled) setLoading(false) })
+    }
+    return () => { cancelled = true }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, disabled, knownLabelValues, eagerResolveLabel, loadSuggestions])
+
+  // Sync input with value when value changes externally and input is not focused.
   React.useEffect(() => {
     if (document.activeElement !== inputRef.current) {
       const option = optionMap.get(value)
@@ -165,10 +231,16 @@ export function ComboboxInput({
         return
       }
       if (!allowCustomValues) {
-        // Revert to current value if custom values not allowed
-        const currentOption = optionMap.get(value)
-        setInput(currentOption?.label ?? value ?? '')
+        // Revert to the current value's label — but only if we actually know it.
+        // Baking the raw value back in while eager resolution is still pending
+        // would freeze a placeholder (e.g. a UUID) into the visible input.
         setShowSuggestions(false)
+        const currentOption = optionMap.get(value)
+        if (currentOption && currentOption.label !== currentOption.value) {
+          setInput(currentOption.label)
+        } else if (!value) {
+          setInput('')
+        }
         return
       }
       selectValue(raw)

package/src/backend/inputs/DatePicker.tsx

@@ -1,162 +1,35 @@
+/**
+ * @deprecated Import from `@open-mercato/ui/primitives/date-picker` instead.
+ *
+ * This shim preserves the legacy import path
+ * `@open-mercato/ui/backend/inputs/DatePicker` for existing consumers
+ * (CrudForm, example pages) while the DatePicker is promoted to a
+ * primitive in DS Foundation v3.
+ *
+ * Default footer is the Figma-aligned `'apply-cancel'` mode (per user
+ * directive 2026-05-09 — "zmień globalnie"). Consumers that explicitly
+ * need the legacy `Today` / `Clear` footer can pass `footer="today-clear"`.
+ *
+ * Migration: replace
+ *   import { DatePicker } from '@open-mercato/ui/backend/inputs/DatePicker'
+ * with
+ *   import { DatePicker } from '@open-mercato/ui/primitives/date-picker'
+ */
+
 "use client"
 
 import * as React from 'react'
-import { format } from 'date-fns'
-import type { Locale } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { cn } from '@open-mercato/shared/lib/utils'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover'
-import { Calendar } from '../../primitives/calendar'
-
-export type DatePickerProps = {
-  value?: Date | null
-  onChange: (date: Date | null) => void
-  placeholder?: string
-  disabled?: boolean
-  readOnly?: boolean
-  className?: string
-  locale?: Locale
-  displayFormat?: string
-  showTodayButton?: boolean
-  showClearButton?: boolean
-  closeOnSelect?: boolean
-  minDate?: Date
-  maxDate?: Date
-}
+import {
+  DatePicker as DatePickerPrimitive,
+  type DatePickerProps as DatePickerPrimitivePropsBase,
+  type DatePickerFooter,
+} from '../../primitives/date-picker'
 
-const DAY_FIRST_LOCALE_CODES = new Set([
-  'pl', 'de', 'fr', 'es', 'it', 'pt', 'nl', 'ru', 'cs', 'sk', 'hu', 'ro',
-])
+export type DatePickerProps = DatePickerPrimitivePropsBase
 
-function deriveDisplayFormat(locale?: Locale): string {
-  if (!locale) return 'MMM d, yyyy'
-  const code = locale.code?.split('-')[0]?.toLowerCase() ?? ''
-  return DAY_FIRST_LOCALE_CODES.has(code) ? 'd MMM yyyy' : 'MMM d, yyyy'
+/** @deprecated Use `DatePicker` from `@open-mercato/ui/primitives/date-picker`. */
+export function DatePicker(props: DatePickerProps) {
+  return <DatePickerPrimitive {...props} />
 }
 
-export function DatePicker({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  readOnly = false,
-  className,
-  locale,
-  displayFormat,
-  showTodayButton = true,
-  showClearButton = true,
-  closeOnSelect = true,
-  minDate,
-  maxDate,
-}: DatePickerProps) {
-  const t = useT()
-  const [open, setOpen] = React.useState(false)
-
-  const resolvedFormat = displayFormat ?? deriveDisplayFormat(locale)
-  const placeholderText = placeholder ?? t('ui.datePicker.placeholder', 'Pick a date')
-  const todayText = t('ui.datePicker.todayButton', 'Today')
-  const clearText = t('ui.datePicker.clearButton', 'Clear')
-
-  const formattedValue = React.useMemo(() => {
-    if (!value) return null
-    try {
-      return format(value, resolvedFormat, locale ? { locale } : undefined)
-    } catch {
-      return null
-    }
-  }, [value, resolvedFormat, locale])
-
-  const handleDaySelect = React.useCallback(
-    (day: Date | undefined) => {
-      if (!day) return
-      const next = new Date(day)
-      next.setHours(0, 0, 0, 0)
-      onChange(next)
-      if (closeOnSelect) setOpen(false)
-    },
-    [onChange, closeOnSelect]
-  )
-
-  const handleToday = React.useCallback(() => {
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-    onChange(today)
-    setOpen(false)
-  }, [onChange])
-
-  const handleClear = React.useCallback(() => {
-    onChange(null)
-    setOpen(false)
-  }, [onChange])
-
-  const isInteractive = !disabled && !readOnly
-
-  const disabledMatcher = React.useMemo(() => {
-    if (!minDate && !maxDate) return undefined
-    const matchers: import('react-day-picker').Matcher[] = []
-    if (minDate) matchers.push({ before: minDate })
-    if (maxDate) matchers.push({ after: maxDate })
-    return matchers
-  }, [minDate, maxDate])
-
-  return (
-    <Popover open={open} onOpenChange={isInteractive ? setOpen : undefined}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          data-crud-focus-target=""
-          disabled={disabled}
-          aria-haspopup="dialog"
-          className={cn(
-            'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
-            'bg-background transition-colors',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
-            'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
-            readOnly && 'cursor-default opacity-70',
-            !formattedValue && 'text-muted-foreground',
-            className
-          )}
-          onClick={isInteractive ? undefined : (e) => e.preventDefault()}
-        >
-          <CalendarIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span className="flex-1 truncate">
-            {formattedValue ?? placeholderText}
-          </span>
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="p-0 w-auto">
-        <Calendar
-          mode="single"
-          selected={value ?? undefined}
-          onSelect={handleDaySelect}
-          locale={locale}
-          disabled={disabledMatcher}
-          initialFocus
-        />
-        {(showTodayButton || showClearButton) && (
-          <div className="flex items-center justify-between gap-2 border-t px-3 py-2">
-            {showTodayButton && (
-              <button
-                type="button"
-                onClick={handleToday}
-                className="text-sm text-primary hover:underline focus-visible:outline-none"
-              >
-                {todayText}
-              </button>
-            )}
-            {showClearButton && (
-              <button
-                type="button"
-                onClick={handleClear}
-                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
-              >
-                {clearText}
-              </button>
-            )}
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-}
+export type { DatePickerFooter }