@proteos/ui 0.31.0

package/src/components/record-filter/chip-value.tsx

@@ -0,0 +1,171 @@
+import { createContext, type ReactNode, useContext } from 'react'
+import { cn } from '../../lib/cn'
+import { Badge } from '../badge/badge'
+import { arityOf } from './operators'
+import type { ComparisonOperator, FilterField, FilterValue } from './types'
+
+/* =========================================================================
+   ChipValue — renders the value cell shown inside an active filter chip.
+
+   Arity orchestration lives here (single value vs list with "+N" overflow
+   vs nothing). Per-item rendering can be overridden via `renderItem` —
+   LUM-34 wires this to the page-layout control registry's Display so
+   chip rendering matches what's on the record-detail page (proper
+   relation titles, formatted dates, etc.). Lib default keeps the legacy
+   enum-Badge + truncate-text behaviour for callers without the registry.
+   ========================================================================= */
+
+/**
+ * Per-value-item renderer. Called once per value (twice for arity 'n'
+ * with two items, etc.) AFTER arity orchestration. Return `undefined`
+ * to fall through to the lib default for that item.
+ */
+export type ChipValueItemRenderer = (props: {
+  field: FilterField
+  operator: ComparisonOperator
+  value: string
+}) => ReactNode | undefined
+
+/* =========================================================================
+   Context — same pattern as RenderValueInputProvider. A top-level
+   provider lets every <ChipValue> in the tree inherit one renderer
+   without per-mount wiring. The provider skips wrapping when
+   `renderer === undefined` so intermediate components don't shadow an
+   outer provider with `undefined`.
+   ========================================================================= */
+
+const RenderChipItemContext = createContext<ChipValueItemRenderer | undefined>(undefined)
+
+export function RenderChipItemProvider({
+  renderer,
+  children,
+}: {
+  renderer: ChipValueItemRenderer | undefined
+  children: ReactNode
+}) {
+  if (renderer === undefined) return <>{children}</>
+  return (
+    <RenderChipItemContext.Provider value={renderer}>{children}</RenderChipItemContext.Provider>
+  )
+}
+
+export function useRenderChipItem(): ChipValueItemRenderer | undefined {
+  return useContext(RenderChipItemContext)
+}
+
+export type ChipValueProps = {
+  field: FilterField
+  operator: ComparisonOperator
+  value: FilterValue
+  /** Override per-value-item rendering (LUM-34: registry dispatch). */
+  renderItem?: ChipValueItemRenderer
+}
+
+export function ChipValue({ field, operator, value, renderItem }: ChipValueProps) {
+  const arity = arityOf(operator)
+  if (arity === 0) return null
+
+  if (arity === 'n') {
+    const arr = Array.isArray(value)
+      ? value
+      : typeof value === 'string' && value.length > 0
+        ? value.split(',').filter(Boolean)
+        : []
+    if (arr.length === 0) return <Em>—</Em>
+    const shown = arr.slice(0, 2)
+    return (
+      <span className="inline-flex items-center gap-1">
+        {shown.map((v) => (
+          <ChipItem
+            key={v}
+            field={field}
+            operator={operator}
+            value={v}
+            {...(renderItem !== undefined ? { renderItem } : {})}
+          />
+        ))}
+        {arr.length > 2 ? (
+          <span className="font-mono text-[11px] text-ink-3">+{arr.length - 2}</span>
+        ) : null}
+      </span>
+    )
+  }
+
+  // arity 1
+  if (value === '' || value == null) return <Em>—</Em>
+  return (
+    <ChipItem
+      field={field}
+      operator={operator}
+      value={String(value)}
+      {...(renderItem !== undefined ? { renderItem } : {})}
+    />
+  )
+}
+
+function ChipItem({
+  field,
+  operator,
+  value,
+  renderItem,
+}: {
+  field: FilterField
+  operator: ComparisonOperator
+  value: string
+  renderItem?: ChipValueItemRenderer
+}) {
+  // Explicit prop wins; otherwise fall back to context (set by a
+  // top-level RenderChipItemProvider); finally the lib default below.
+  const contextRenderer = useRenderChipItem()
+  const effectiveRenderer = renderItem ?? contextRenderer
+  if (effectiveRenderer) {
+    const custom = effectiveRenderer({ field, operator, value })
+    if (custom !== undefined) return <>{custom}</>
+  }
+  // Lib default: enum → Badge with variant lookup; other → truncated mono text.
+  if (field.type === 'enum') {
+    const variant = field.options?.find((o) => o.value === value)?.variant
+    const label = field.options?.find((o) => o.value === value)?.label ?? value
+    return <Badge variant={variant}>{label}</Badge>
+  }
+  return (
+    <span className={cn('font-mono text-[12px] text-ink max-w-[10rem] truncate')}>
+      {formatValue(field, operator, value)}
+    </span>
+  )
+}
+
+function Em({ children }: { children: string }) {
+  return <span className="font-mono text-[12px] text-ink-4">{children}</span>
+}
+
+export function formatValue(
+  field: FilterField,
+  operator: ComparisonOperator,
+  value: FilterValue,
+): string {
+  const arity = arityOf(operator)
+  if (arity === 0) return ''
+  if (arity === 'n') {
+    const arr = Array.isArray(value)
+      ? value
+      : typeof value === 'string' && value.length > 0
+        ? value.split(',')
+        : []
+    if (arr.length === 0) return '—'
+    if (field.type === 'enum') {
+      const labels = arr.map((v) => field.options?.find((x) => x.value === v)?.label ?? v)
+      return labels.length <= 2
+        ? labels.join(', ')
+        : `${labels[0]}, ${labels[1]} +${labels.length - 2}`
+    }
+    return arr.length <= 2 ? arr.join(', ') : `${arr[0]}, ${arr[1]} +${arr.length - 2}`
+  }
+  if (field.type === 'boolean') return value === true || value === 'true' ? 'true' : 'false'
+  if (value === '' || value == null) return '—'
+  if (field.type === 'number' || field.type === 'integer') {
+    const n = Number(value)
+    return Number.isFinite(n) ? n.toLocaleString() : String(value)
+  }
+  return String(value)
+}

package/src/components/record-filter/filter-row.tsx

@@ -0,0 +1,262 @@
+import { useEffect } from 'react'
+import { cn } from '../../lib/cn'
+import { AttributePicker } from './attribute-picker'
+import { FilterValueInput } from './filter-value-input'
+import { OperatorPicker } from './operator-picker'
+import { defaultValueFor, operatorById, operatorsForType } from './operators'
+import type {
+  ComparisonOperator,
+  FilterElement,
+  FilterField,
+  FilterValue,
+  LogicalOperator,
+} from './types'
+
+/* =========================================================================
+   FilterRow — one element in the builder body. Layout:
+
+     [ joiner gutter ] [ AttributePicker ] [ operator ] [ value-input ] … [ × ]
+
+   The first cell is always an inline `AttributePicker` (Combobox). When
+   the row's field is unset (empty path), only the picker renders — the
+   operator/value/× cells appear as soon as a field is chosen. This is
+   how "+ Add filter" produces a fresh row that auto-focuses the picker
+   with its dropdown open.
+   ========================================================================= */
+
+export type FilterRowProps = {
+  index: number
+  joiner: LogicalOperator
+  /** Resolved field metadata. `undefined` means the row's field is unset. */
+  field?: FilterField
+  element: FilterElement
+  fields: ReadonlyArray<FilterField>
+  /** Auto-focus the AttributePicker on mount (e.g. for newly added rows). */
+  autoFocus?: boolean
+  /** Auto-focus the OperatorPicker on mount. Used right after a pending
+   *  row's field is picked: the row remounts (its `key` changes), and we
+   *  want focus to advance from the AttributePicker to the operator. */
+  autoFocusOperator?: boolean
+  /** Fires once after a mount that consumed `autoFocusOperator`, so the
+   *  parent can clear its tracking index. */
+  onAutoFocusOperatorConsumed?: () => void
+  /** Auto-focus the value cell on mount. Forwarded into FilterValueInput,
+   *  whose key-based remount on operator change makes this re-fire reliably
+   *  across leaf types. */
+  autoFocusValue?: boolean
+  /** Fires once after a mount that consumed `autoFocusValue`. */
+  onAutoFocusValueConsumed?: () => void
+  /** Fires when the user submits the row from a plain text/number value
+   *  Input (Enter). Used by the builder panel to chain "commit + add new
+   *  pending row". The chip mini-editor passes its own form-submit handler
+   *  here if it wants the same behaviour. */
+  onSubmit?: () => void
+  onChangeField: (next: FilterField) => void
+  onChangeOperator: (next: ComparisonOperator) => void
+  onChangeValue: (next: FilterValue) => void
+  onRemove: () => void
+  /** Optional "wrap in group" affordance — when present, a hover-only icon
+   *  appears next to the remove button. Used by the recursive popover panel
+   *  when `isComplexEnabled` is on. */
+  onWrap?: () => void
+}
+
+export function FilterRow({
+  index,
+  joiner,
+  field,
+  element,
+  fields,
+  autoFocus = false,
+  autoFocusOperator = false,
+  onAutoFocusOperatorConsumed,
+  autoFocusValue = false,
+  onAutoFocusValueConsumed,
+  onSubmit,
+  onChangeField,
+  onChangeOperator,
+  onChangeValue,
+  onRemove,
+  onWrap,
+}: FilterRowProps) {
+  // One-shot: tell the parent to clear its tracking index so a future remount
+  // at the same index doesn't re-trigger.
+  useEffect(() => {
+    if (autoFocusOperator) onAutoFocusOperatorConsumed?.()
+    if (autoFocusValue) onAutoFocusValueConsumed?.()
+    // Mount-only — these are hand-off signals, not sustained props.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  return (
+    <div
+      className={cn(
+        'group flex items-center gap-2 px-1.5 py-1 rounded-sm',
+        'hover:bg-[color-mix(in_oklab,var(--color-surface-2)_50%,var(--color-surface))]',
+      )}
+    >
+      {/* Joiner gutter — narrow fixed column to keep all rows aligned. The
+          three editor cells below flex to fill the remaining width. */}
+      <span className="w-12 shrink-0 inline-flex justify-end pr-1">
+        <span
+          className={cn(
+            'font-mono text-[10.5px] tracking-[0.08em]',
+            index === 0 ? 'text-ink-4' : 'text-accent-ink',
+          )}
+        >
+          {index === 0 ? 'WHERE' : joiner.toUpperCase()}
+        </span>
+      </span>
+
+      {/* Field picker — flex column. min-w guarantees the typeahead stays
+          legible at typical popover widths; basis-0 lets flex distribute
+          excess space proportionally. */}
+      <div className="flex-1 basis-0 min-w-[140px]">
+        <AttributePicker
+          fields={fields}
+          value={element.field}
+          onChange={onChangeField}
+          autoFocus={autoFocus}
+          className="w-full"
+        />
+      </div>
+
+      {/* Operator + value — only render once a field is picked. */}
+      {field ? (
+        <>
+          <div className="flex-1 basis-0 min-w-[110px]">
+            <OperatorPicker
+              fieldType={field.type}
+              value={element.operator}
+              onChange={onChangeOperator}
+              autoFocus={autoFocusOperator}
+              className="w-full"
+              {...(field.filterOperators !== undefined
+                ? { operators: field.filterOperators }
+                : {})}
+            />
+          </div>
+          {/* Value gets ~2× the share of field/operator since values like
+              chip lists or date pickers are widest. */}
+          <div
+            className="flex-[2] basis-0 min-w-0"
+            onKeyDown={(e) => {
+              // Enter inside a plain text/number <input> commits the row
+              // (state already lives in `filter`) and lets the parent add a
+              // fresh pending row. RAC controls (Combobox, Select, TagInput,
+              // BadgeMultiSelect) all `preventDefault` on Enter for their
+              // own selection/commit semantics, so `defaultPrevented` filters
+              // them out. DateSegment renders as a <div role="spinbutton">,
+              // not INPUT — so the tagName check excludes it too.
+              if (e.key !== 'Enter' || e.defaultPrevented) return
+              const t = e.target as HTMLElement
+              if (t.tagName !== 'INPUT') return
+              const inputType = (t as HTMLInputElement).type
+              if (inputType !== 'text' && inputType !== 'number') return
+              if (!onSubmit) return
+              e.preventDefault()
+              onSubmit()
+            }}
+          >
+            <FilterValueInput
+              field={field}
+              operator={element.operator}
+              value={element.value}
+              onChange={onChangeValue}
+              autoFocus={autoFocusValue}
+            />
+          </div>
+        </>
+      ) : (
+        // Spacer reserves the operator + value flex share so the field
+        // picker doesn't balloon across the whole row before a field is
+        // chosen.
+        <div className="flex-[3] basis-0 min-w-0" />
+      )}
+
+      {onWrap && field ? (
+        <button
+          type="button"
+          onClick={onWrap}
+          aria-label="Wrap in group"
+          title="Wrap in a group with the opposite operator"
+          className={cn(
+            'shrink-0 size-6 inline-flex items-center justify-center rounded-sm',
+            'text-ink-4 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none',
+            'opacity-0 group-hover:opacity-100 focus-visible:opacity-100',
+          )}
+        >
+          <svg
+            aria-hidden
+            viewBox="0 0 14 14"
+            className="size-3.5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M5 3a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3M9 3a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3" />
+          </svg>
+        </button>
+      ) : null}
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label={field ? 'Remove filter' : 'Cancel'}
+        className={cn(
+          'shrink-0 size-6 inline-flex items-center justify-center rounded-sm',
+          'text-ink-4 hover:text-danger hover:bg-surface-2 cursor-pointer outline-none',
+          field ? 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100' : 'opacity-100',
+        )}
+      >
+        <svg
+          aria-hidden
+          viewBox="0 0 14 14"
+          className="size-3.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M3 4h8M5 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1M4.5 4l.5 7a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1l.5-7" />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+/* =========================================================================
+   When the user changes the field on a row, decide whether the existing
+   operator is still valid. If yes, keep the value. If no, swap to the
+   first operator for the new type and reset the value to its default.
+   Exported so the builder + chip mini-editor can share the rule.
+   ========================================================================= */
+export function rebaseRowOnFieldChange(element: FilterElement, next: FilterField): FilterElement {
+  const newOps = operatorsForType(next.type)
+  const stillValid = newOps.find((o) => o.id === element.operator)
+  const nextOp = stillValid ?? newOps[0]
+  if (!nextOp) {
+    return { ...element, field: next.path }
+  }
+  return {
+    field: next.path,
+    operator: nextOp.id,
+    value: stillValid ? element.value : defaultValueFor(next.type, nextOp.arity),
+  }
+}
+
+export function rebaseRowOnOperatorChange(
+  element: FilterElement,
+  field: FilterField,
+  nextOperator: ComparisonOperator,
+): FilterElement {
+  const next = operatorById(nextOperator)
+  const prev = operatorById(element.operator)
+  const arityChanged = next?.arity !== prev?.arity
+  return {
+    ...element,
+    operator: nextOperator,
+    value: arityChanged ? defaultValueFor(field.type, next?.arity ?? 1) : element.value,
+  }
+}