Faceted select

<SelectFaceted placement="top-end" offset={8} facets={FACETS} />

const FACETS = [
  { key: 'assignee', label: 'Assignee', kind: 'multiple', filter: true, options: people },
  { key: 'owner',    label: 'Owner',    kind: 'single',   filter: true, options: people },
  { key: 'status',   label: 'Status',   kind: 'single',   options: [{ value: 'open', label: 'Open' }, /* … */] },
  {
    key: 'metadata',
    label: 'Metadata',
    kind: 'multiple',
    icon: 'tag',
    filter: true,
    options: [
      { value: 'env:production', label: 'env: production', dataKey: 'env', dataValue: 'production' },
      { value: 'env:staging', label: 'env: staging', dataKey: 'env', dataValue: 'staging' },
      { value: 'region:us-east', label: 'region: us-east', dataKey: 'region', dataValue: 'us-east' },
      { value: 'team:platform', label: 'team: platform', dataKey: 'team', dataValue: 'platform' },
    ],
    renderOption: (option) => (
      <Tag label={String(option.dataKey)} value={String(option.dataValue)} />
    ),
  },
  { key: 'title',    label: 'Title contains', kind: 'text' },
  { key: 'duration', label: 'Min duration', kind: 'custom', summary: (v) => `≥ ${v.min}s`, render: /* … */ },
]

const isSet = (v) => !(v == null || v === '' || (Array.isArray(v) && v.length === 0))

function Demo() {
  const [value, setValue] = useState({ assignee: ['Alice Nguyen'], status: 'open', title: 'crash' })
  const setFacet = (key, v) =>
    setValue((p) => (isSet(v) ? { ...p, [key]: v } : (({ [key]: _, ...rest }) => rest)(p)))

  // Keep a text/custom chip mounted while it's focused, even when emptied — so
  // backspacing to empty doesn't yank the field (only Clear or blur-when-empty does).
  const [focusedKey, setFocusedKey] = useState(null)
  const active = FACETS.filter((f) => isSet(value[f.key]) || f.key === focusedKey)

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: 12,
      alignItems: 'center',
      width: '100%',
    }}>
      <SelectFaceted facets={FACETS} value={value} onValueChange={setValue} searchable />

      {active.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
          {/* Show one editable control for each active facet. Its label becomes
              the control's `leading` prefix. */}
          {active.map((facet) => {
            // Options facets → an editable Select (single shows the trailing check;
            // both are filterable + have a clearable footer).
            if (facet.kind === 'single' || facet.kind === 'multiple')
              return (
                <Select
                  key={facet.key}
                  selection={facet.kind}
                  indicator={facet.kind === 'single' ? 'check' : undefined}
                  options={facet.options}
                  renderOption={facet.renderOption}
                  value={value[facet.key]}
                  onValueChange={(v) => setFacet(facet.key, v)}
                  leading={`${facet.label}:`}
                  filter={facet.filter}
                  clearable
                  // Chip sizes to its value and caps at a max-width (ellipsizing past it).
                  style={{ width: 'fit-content', maxWidth: '240px' }}
                />
              )

            // Free-form text / custom → an editable Input.
            const val = facet.kind === 'text' ? value[facet.key] : value[facet.key]?.min
            const write = (raw) =>
              setFacet(facet.key, facet.kind === 'text' ? raw || undefined : raw ? { min: raw } : undefined)
            return (
              <Input
                key={facet.key}
                value={val ?? ''}
                leading={`${facet.label}:`}
                clearable
                dimActions
                onFocus={() => setFocusedKey(facet.key)}
                onBlur={() => setFocusedKey(null)}
                onInput={(e) => write(e.currentTarget.value)}
                onClearInput={() => { setFocusedKey(null); setFacet(facet.key, undefined) }}
                // Size the chip to its value, capped at a max-width.
                style={{ width: 'fit-content', maxWidth: '240px' }}
              />
            )
          })}
          {/* Once more than one result is showing, a single control resets them
              all — pushed to the right of the last chip. */}
          {active.length > 1 && (
            <Button
              priority="tertiary"
              icon="filter-x"
              label="Clear all"
              style={{ marginLeft: 'auto' }}
              onClick={() => { setFocusedKey(null); setValue({}) }}
            />
          )}
        </div>
      )}
    </div>
  )
}

renderOption: (option) => (
  <Tag label={String(option.dataKey)} value={String(option.dataValue)} />
)

<SelectFaceted
  facets={FACETS}
  onValueChange={(value, attrs) => {
    if ('all' in attrs) return clearFilters()      // the Clear all row
    // `value` is the full record; `attrs.facet` / `attrs.value` is the one that changed
    applyFilter(attrs.facet, attrs.value)
  }}
/>

import type { SelectFacetCustom } from '@antadesign/anta'

const duration: SelectFacetCustom<string> = {
  key: 'duration',
  label: 'Min duration',
  kind: 'custom',
  render: (ctx) => (
    <Input
      // Controlled numeric field: type="text" + inputMode, not type="number"
      // (which sanitizes "1." / "1.0" to empty). Keep the raw string; parse it below.
      type="text"
      inputMode="decimal"
      size="small"
      placeholder="seconds"
      value={ctx.value ?? ''}
      onInput={(e) => ctx.onChange(e.currentTarget.value || undefined)}
    />
  ),
  summary: (v) => `≥ ${v}s`,
}

<SelectFaceted facets={[duration]} value={value} onValueChange={setValue} />

// user types 1.5  →  value.duration === "1.5"   (the raw string, returned unchanged)
// parse it where you apply the filter, so partial input ("1.", "1.0") types cleanly:
rows.filter((r) => value.duration == null || r.seconds >= Number(value.duration))

import type { SelectFacetCustom } from '@antadesign/anta'

const toISO = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` // Date → "2026-01-01"
const fromISO = (s: string | null) => (s ? new Date(`${s}T00:00:00`) : undefined)            // ISO  → Date | undefined

const since: SelectFacetCustom<Date> = {
  key: 'since',
  label: 'Created after',
  kind: 'custom',
  icon: 'calendar',
  render: (ctx) => (
    <Calendar
      size="small"
      value={ctx.value ? toISO(ctx.value) : ''}
      // Controlled: apply the pick in onStateChange (onValueChange fires only after
      // value changes, so it can't drive a controlled Calendar).
      onStateChange={(_e, { next }) => ctx.onChange(fromISO(next))}
    />
  ),
  summary: (d) => d.toLocaleDateString(),
}

<SelectFaceted facets={[since]} value={value} onValueChange={setValue} />

// user picks a day  →  value.since is a Date, returned unchanged
// you apply it:
rows.filter((r) => value.since == null || r.createdAt >= value.since)

type Recency = { preset: 'today' | 'yesterday' | 'last14' | 'last30' } | { from: string; to: string }

// Whichever shape the facet holds, resolve it to a concrete range to filter with.
const resolveRange = (r: Recency): { from: string; to: string } => {
  if ('from' in r) return r
  const today = isoDay(daysAgo(0))
  switch (r.preset) {
    case 'today':     return { from: today, to: today }
    case 'yesterday': { const y = isoDay(daysAgo(1)); return { from: y, to: y } }
    case 'last14':    return { from: isoDay(daysAgo(13)), to: today }
    case 'last30':    return { from: isoDay(daysAgo(29)), to: today }
  }
}

import type { SelectFacetCustom } from '@antadesign/anta'

const recency: SelectFacetCustom<Recency> = {
  key: 'recency',
  label: 'Recency',
  kind: 'custom',
  icon: 'calendar',
  summary: (v) => ('preset' in v ? PRESET_LABELS[v.preset] : `${v.from} → ${v.to}`),
  render: ({ value, onChange }) => {
    const mode = value == null ? '' : 'preset' in value ? value.preset : 'custom'
    const range = value && 'from' in value ? value : { from: '', to: '' }
    return (
      <div style={{ display: 'grid', gap: 8 }}>
        <RadioGroup
          size="small"
          options={PRESETS}                       // Today / Yesterday / Last 14 / Last 30 / Custom range
          value={mode}
          // Controlled group: apply the pick in onStateChange (onValueChange fires
          // only after `value` changes, so it can't drive a controlled RadioGroup).
          onStateChange={(_e, { next }) => onChange(next === 'custom' ? range : { preset: next })}
        />
        {mode === 'custom' && (
          <>
            <InputDate size="small" label="From" value={range.from}
              onValueChange={(from) => onChange({ from, to: range.to })} />
            <InputDate size="small" label="To" value={range.to} min={range.from || undefined}
              onValueChange={(to) => onChange({ from: range.from, to })} />
          </>
        )}
      </div>
    )
  },
}

<SelectFaceted facets={[recency]} value={value} onValueChange={setValue} />
// value.recency is { preset: 'last14' } or { from, to } — apply resolveRange(value.recency) to your rows

type Recency = { preset: 'today' | 'yesterday' | 'last14' | 'last30' } | { day: string }

const recency: SelectFacetCustom<Recency> = {
  key: 'recency',
  label: 'Recency',
  kind: 'custom',
  icon: 'calendar',
  summary: (v) => ('preset' in v ? PRESET_LABELS[v.preset] : v.day || 'Custom day'),
  render: ({ value, onChange }) => {
    const mode = value == null ? '' : 'preset' in value ? value.preset : 'custom'
    const day = value && 'day' in value ? value.day : ''
    return (
      <>
        {DAY_PRESETS.map((p) => (        // Today / Yesterday / Last 14 / Last 30 / Custom day
          <MenuItem
            key={p.value}
            label={p.label}
            selectionIndicator="check"
            selected={mode === p.value}
            data-menu-open
            onSelect={() => onChange(p.value === 'custom' ? { day } : { preset: p.value })}
          />
        ))}
        {mode === 'custom' && (
          <div data-menu-open style={{ padding: 8 }}>
            {/* opens the calendar to the right of the field */}
            <InputDate size="small" label="Day" placement="right-start" value={day}
              onValueChange={(d) => onChange({ day: d })} />
          </div>
        )}
      </>
    )
  },
}

<SelectFaceted facets={[recency]} value={value} onValueChange={setValue} />
// value.recency is { preset: 'last14' } or { day: '2026-07-20' } — resolve a preset to a
// concrete date (or take the day as-is) and filter your rows with it