@proteos/ui 0.31.0

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

@@ -0,0 +1,527 @@
+import { Fragment, type RefObject, useEffect, useMemo, useRef, useState } from 'react'
+import { cn } from '../../lib/cn'
+import { PopoverContent } from '../popover/popover'
+import { AttributePicker } from './attribute-picker'
+import { ChipValue, type ChipValueItemRenderer } from './chip-value'
+import { rebaseRowOnFieldChange, rebaseRowOnOperatorChange } from './filter-row'
+import {
+  FilterValueInput,
+  type FilterValueInputRenderer,
+  RenderValueInputProvider,
+} from './filter-value-input'
+import { countLeaves } from './group-mutations'
+import { OperatorPicker } from './operator-picker'
+import { operatorById, operatorsForType } from './operators'
+import { useShowDetails } from './show-details-store'
+import { AttributeTypeIcon } from '../attribute-type-icon'
+import type { ComparisonOperator, FilterField, FilterGroup, FilterValue } from './types'
+
+/* =========================================================================
+   RecordFilterChips — chip row above the table. Renders one chip per
+   active filter, with AND/OR joiner pills between them and an inline
+   "+ Add filter" affordance at the end. A "« Collapse" text-button sits
+   above the chips to fold the row back to the icon-only `RecordFilterButton`.
+
+   "+ Add filter" appends a pending element with `field: ''` directly into
+   the FilterGroup state and renders an inline auto-focused AttributePicker
+   in its place. Once the user picks a field, the picker becomes a real
+   chip. Same pattern is used inside `ChipMiniEditor` for editing the
+   field of an existing chip.
+
+   When collapsed (`!showDetails`), returns null — the `RecordFilterButton`
+   takes over.
+   ========================================================================= */
+
+export type RecordFilterChipsProps = {
+  fields: ReadonlyArray<FilterField>
+  filter: FilterGroup
+  onChange: (next: FilterGroup) => void
+  showFieldIcons?: boolean
+  showJoinerToggle?: boolean
+  /** localStorage key used to share the collapsed/expanded state with the
+   *  RecordFilterButton. Pass the same value to both components. */
+  storageKey?: string
+  /** Optional override for the value editor inside the chip's mini-editor. */
+  renderValueInput?: FilterValueInputRenderer
+  /** Optional override for per-value-item rendering inside chip pills.
+   *  Called once per value (or once per item for arity 'n'); returning
+   *  `undefined` falls through to the lib default. LUM-34 wires this to
+   *  the page-layout control registry's Display. */
+  renderChipItem?: ChipValueItemRenderer
+}
+
+export function RecordFilterChips({
+  fields,
+  filter,
+  onChange,
+  showFieldIcons = true,
+  showJoinerToggle = true,
+  storageKey,
+  renderValueInput,
+  renderChipItem,
+}: RecordFilterChipsProps) {
+  const fieldsByPath = useMemo(() => Object.fromEntries(fields.map((f) => [f.path, f])), [fields])
+  const elements = filter.elements ?? []
+  const subgroups = filter.groups ?? []
+  const [showDetails, toggleDetails] = useShowDetails(storageKey)
+  // Index of the chip whose AttributePicker should auto-focus this render.
+  const [autoFocusIndex, setAutoFocusIndex] = useState<number | null>(null)
+  // Index of the chip whose mini-editor should auto-open on mount — set when
+  // a pending row's AttributePicker resolves, so the user lands directly on
+  // the value editor (operator is already pre-selected by
+  // rebaseRowOnFieldChange).
+  const [autoOpenIndex, setAutoOpenIndex] = useState<number | null>(null)
+
+  if (!showDetails) return null
+
+  const addPending = () => {
+    const nextIndex = elements.length
+    onChange({
+      ...filter,
+      elements: [...elements, { field: '', operator: 'eq', value: '' }],
+    })
+    setAutoFocusIndex(nextIndex)
+  }
+
+  return (
+    <RenderValueInputProvider renderer={renderValueInput}>
+    <div className="flex flex-col items-start gap-1.5">
+      <CollapseToggle onClick={toggleDetails} />
+      <div className="flex items-center gap-2 flex-wrap">
+        {elements.map((el, i) => {
+          const field = fieldsByPath[el.field]
+          return (
+            <Fragment
+              // biome-ignore lint/suspicious/noArrayIndexKey: filter elements have no stable id; index disambiguates duplicate-field rows
+              key={`${el.field}-${i}`}
+            >
+              {i > 0 ? (
+                showJoinerToggle ? (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      onChange({
+                        ...filter,
+                        logicalOperator: filter.logicalOperator === 'and' ? 'or' : 'and',
+                      })
+                    }
+                    title="Toggle joiner"
+                    className={cn(
+                      'inline-flex items-center px-1.5 py-0.5 rounded-sm border border-dashed border-rule',
+                      'font-mono text-[10.5px] tracking-[0.08em] text-ink-3',
+                      'hover:text-ink hover:border-ink-4 cursor-pointer outline-none',
+                    )}
+                  >
+                    {filter.logicalOperator.toUpperCase()}
+                  </button>
+                ) : (
+                  <span className="font-mono text-[10.5px] tracking-[0.08em] text-ink-4 px-1">
+                    {filter.logicalOperator.toUpperCase()}
+                  </span>
+                )
+              ) : null}
+
+              {field ? (
+                <Chip
+                  index={i}
+                  field={field}
+                  element={el}
+                  fields={fields}
+                  showFieldIcons={showFieldIcons}
+                  autoOpen={autoOpenIndex === i}
+                  onAutoOpenConsumed={() => setAutoOpenIndex(null)}
+                  {...(renderChipItem !== undefined ? { renderChipItem } : {})}
+                  onChangeField={(picked) =>
+                    onChange({
+                      ...filter,
+                      elements: elements.map((e, idx) =>
+                        idx === i ? rebaseRowOnFieldChange(e, picked) : e,
+                      ),
+                    })
+                  }
+                  onChangeOperator={(opId) =>
+                    onChange({
+                      ...filter,
+                      elements: elements.map((e, idx) =>
+                        idx === i ? rebaseRowOnOperatorChange(e, field, opId) : e,
+                      ),
+                    })
+                  }
+                  onChangeValue={(v) =>
+                    onChange({
+                      ...filter,
+                      elements: elements.map((e, idx) => (idx === i ? { ...e, value: v } : e)),
+                    })
+                  }
+                  onRemove={() =>
+                    onChange({
+                      ...filter,
+                      elements: elements.filter((_, idx) => idx !== i),
+                    })
+                  }
+                />
+              ) : (
+                // Pending chip — inline AttributePicker.
+                <div className="inline-flex items-center gap-1">
+                  <AttributePicker
+                    fields={fields}
+                    value=""
+                    autoFocus={autoFocusIndex === i}
+                    onChange={(picked) => {
+                      if (autoFocusIndex === i) setAutoFocusIndex(null)
+                      // Hand off to the resolved Chip: open its mini-editor
+                      // immediately so the user can fill the value.
+                      setAutoOpenIndex(i)
+                      onChange({
+                        ...filter,
+                        elements: elements.map((e, idx) =>
+                          idx === i ? rebaseRowOnFieldChange(e, picked) : e,
+                        ),
+                      })
+                    }}
+                  />
+                  <button
+                    type="button"
+                    aria-label="Cancel"
+                    onClick={() => {
+                      if (autoFocusIndex === i) setAutoFocusIndex(null)
+                      onChange({
+                        ...filter,
+                        elements: elements.filter((_, idx) => idx !== i),
+                      })
+                    }}
+                    className={cn(
+                      'size-5 inline-flex items-center justify-center rounded-[3px]',
+                      'text-ink-4 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none',
+                    )}
+                  >
+                    <svg
+                      aria-hidden
+                      viewBox="0 0 10 10"
+                      className="size-2"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.4"
+                      strokeLinecap="round"
+                    >
+                      <path d="M2 2l6 6M8 2l-6 6" />
+                    </svg>
+                  </button>
+                </div>
+              )}
+            </Fragment>
+          )
+        })}
+
+        {subgroups.map((sub, i) => {
+          const showLeadingJoiner = elements.length > 0 || i > 0
+          return (
+            // biome-ignore lint/suspicious/noArrayIndexKey: sub-groups have no stable id
+            <Fragment key={`group-${i}`}>
+              {showLeadingJoiner ? (
+                <span className="font-mono text-[10.5px] tracking-[0.08em] text-ink-4 px-1">
+                  {filter.logicalOperator.toUpperCase()}
+                </span>
+              ) : null}
+              <GroupPill group={sub} />
+            </Fragment>
+          )
+        })}
+
+        <InlineAddFilter onClick={addPending} />
+      </div>
+    </div>
+    </RenderValueInputProvider>
+  )
+}
+
+/* ---------- GroupPill -----------------------------------------------------
+   Read-only pill that surfaces a sub-group's existence in the chip row.
+   By design, group editing only happens inside the builder popover — so
+   this pill points users there with a `title` hint and no click handler.
+   ------------------------------------------------------------------------- */
+function GroupPill({ group }: { group: FilterGroup }) {
+  const count = countLeaves(group)
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm border border-dashed border-rule',
+        'bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+      )}
+      title="Nested group — open the filter popover to edit"
+    >
+      <svg
+        aria-hidden
+        viewBox="0 0 14 14"
+        className="size-3 text-ink-3"
+        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>
+      <span className="font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-3">
+        {group.logicalOperator} group
+      </span>
+      <span className="font-mono text-[11px] text-ink-4">· {count}</span>
+    </span>
+  )
+}
+
+/* ---------- Collapse toggle ----------------------------------------------- */
+function CollapseToggle({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center gap-1',
+        'font-mono text-[11px] uppercase tracking-[0.08em]',
+        'text-ink-3 hover:text-ink cursor-pointer outline-none',
+      )}
+    >
+      <svg
+        aria-hidden
+        viewBox="0 0 14 14"
+        className="size-3"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="m8 3-3 4 3 4M11 3l-3 4 3 4" />
+      </svg>
+      Collapse
+    </button>
+  )
+}
+
+/* ---------- Chip ---------------------------------------------------------- */
+function Chip({
+  index,
+  field,
+  element,
+  fields,
+  showFieldIcons,
+  autoOpen = false,
+  onAutoOpenConsumed,
+  onChangeField,
+  onChangeOperator,
+  onChangeValue,
+  onRemove,
+  renderChipItem,
+}: {
+  index: number
+  field: FilterField
+  element: { field: string; operator: ComparisonOperator; value: FilterValue }
+  fields: ReadonlyArray<FilterField>
+  showFieldIcons: boolean
+  /** When true, the mini-editor opens immediately on mount. Used to chain
+   *  "+ Add filter → pick attribute → land on value editor" without an
+   *  intermediate click. */
+  autoOpen?: boolean
+  onAutoOpenConsumed?: () => void
+  onChangeField: (next: FilterField) => void
+  onChangeOperator: (next: ComparisonOperator) => void
+  onChangeValue: (next: FilterValue) => void
+  onRemove: () => void
+  renderChipItem?: ChipValueItemRenderer
+}) {
+  const ref = useRef<HTMLSpanElement>(null)
+  const [editing, setEditing] = useState(autoOpen)
+  // Tell the parent to clear its `autoOpenIndex` so a subsequent chip
+  // mounting at the same index doesn't inherit the open flag.
+  useEffect(() => {
+    if (autoOpen) onAutoOpenConsumed?.()
+    // We deliberately only run this on mount — autoOpen is a hand-off signal,
+    // not a sustained prop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  const op = operatorById(element.operator) ?? operatorsForType(field.type)[0]
+
+  return (
+    <>
+      {/* biome-ignore lint/a11y/useSemanticElements: chip contains a nested remove <button>; HTML disallows nested <button>, so we use an aria-button span */}
+      <span
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        aria-label={`Edit filter ${index + 1}: ${field.label}`}
+        onClick={() => setEditing((v) => !v)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            setEditing((v) => !v)
+          }
+        }}
+        className={cn(
+          'group inline-flex items-center gap-1.5 pl-2 pr-1 py-1 rounded-sm border cursor-pointer',
+          editing
+            ? 'border-accent shadow-[var(--shadow-focus)] bg-surface'
+            : 'border-rule bg-surface hover:border-ink-4',
+        )}
+      >
+        {showFieldIcons ? (
+          <span className="text-ink-3">
+            <AttributeTypeIcon type={field.type} />
+          </span>
+        ) : null}
+        <span className="font-sans text-[12.5px] text-ink-2">
+          {field.parentLabel ? <span className="text-ink-4">{field.parentLabel} / </span> : null}
+          <span className="text-ink">{field.shortLabel}</span>
+        </span>
+        <span className="font-mono text-[11px] text-ink-3">{op?.label}</span>
+        <ChipValue
+          field={field}
+          operator={element.operator}
+          value={element.value}
+          {...(renderChipItem !== undefined ? { renderItem: renderChipItem } : {})}
+        />
+        <button
+          type="button"
+          aria-label="Remove filter"
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+            if (editing) setEditing(false)
+          }}
+          className={cn(
+            'ml-0.5 size-4 inline-flex items-center justify-center rounded-[3px]',
+            'text-ink-4 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none',
+          )}
+        >
+          <svg
+            aria-hidden
+            viewBox="0 0 10 10"
+            className="size-2"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+          >
+            <path d="M2 2l6 6M8 2l-6 6" />
+          </svg>
+        </button>
+      </span>
+
+      <PopoverContent
+        triggerRef={ref as RefObject<Element | null>}
+        isOpen={editing}
+        onOpenChange={setEditing}
+      >
+        <ChipMiniEditor
+          field={field}
+          element={element}
+          fields={fields}
+          onChangeField={onChangeField}
+          onChangeOperator={onChangeOperator}
+          onChangeValue={onChangeValue}
+          onClose={() => setEditing(false)}
+        />
+      </PopoverContent>
+    </>
+  )
+}
+
+/* ---------- ChipMiniEditor -----------------------------------------------
+   Single horizontal row: AttributePicker · OperatorPicker · FilterValueInput
+   · Save. No header — clicking outside or pressing Escape closes the popover
+   too (RAC handles both). Uses the same flex shares as the builder panel's
+   filter row so the cells stay coherent across surfaces.
+
+   Enter to save: the row is wrapped in a `<form>`. A plain text Input
+   bubbles Enter up as a native form submit — closing the popover. RAC's
+   Combobox/Select/TagInput/DatePicker all `preventDefault` on Enter for
+   their own selection/commit semantics, so the form only submits when no
+   child claimed the keypress. The trailing Save button is `type="submit"`
+   and triggers the same path.
+   ----------------------------------------------------------------------- */
+function ChipMiniEditor({
+  field,
+  element,
+  fields,
+  onChangeField,
+  onChangeOperator,
+  onChangeValue,
+  onClose,
+}: {
+  field: FilterField
+  element: { field: string; operator: ComparisonOperator; value: FilterValue }
+  fields: ReadonlyArray<FilterField>
+  onChangeField: (next: FilterField) => void
+  onChangeOperator: (next: ComparisonOperator) => void
+  onChangeValue: (next: FilterValue) => void
+  onClose: () => void
+}) {
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        onClose()
+      }}
+      className="w-[min(560px,92vw)] p-2 flex items-center gap-1.5"
+    >
+      <div className="flex-1 basis-0 min-w-[140px]">
+        <AttributePicker fields={fields} value={element.field} onChange={onChangeField} />
+      </div>
+      <div className="flex-1 basis-0 min-w-[110px]">
+        <OperatorPicker
+          fieldType={field.type}
+          value={element.operator}
+          onChange={onChangeOperator}
+          autoFocus
+        />
+      </div>
+      <div className="flex-[2] basis-0 min-w-0">
+        <FilterValueInput
+          field={field}
+          operator={element.operator}
+          value={element.value}
+          onChange={onChangeValue}
+        />
+      </div>
+      <button
+        type="submit"
+        className={cn(
+          'shrink-0 inline-flex items-center px-2.5 py-1.5 rounded-md',
+          'bg-ink text-surface font-mono text-[12px]',
+          'hover:bg-accent-ink cursor-pointer outline-none',
+          'focus-visible:shadow-[var(--shadow-focus)]',
+        )}
+      >
+        Save
+      </button>
+    </form>
+  )
+}
+
+/* ---------- InlineAddFilter ---------------------------------------------- */
+function InlineAddFilter({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      data-filter-trigger="expanded"
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center gap-1 px-2 py-1 rounded-sm',
+        'text-ink-3 hover:bg-surface-2 hover:text-ink cursor-pointer outline-none',
+      )}
+    >
+      <svg
+        aria-hidden
+        viewBox="0 0 12 12"
+        className="size-3"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      >
+        <path d="M6 2v8M2 6h8" />
+      </svg>
+      <span className="font-sans text-[12.5px]">Add filter</span>
+    </button>
+  )
+}

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

@@ -0,0 +1,91 @@
+import { useEffect, useMemo, useState } from 'react'
+import { type FilterValueInputRenderer, RenderValueInputProvider } from './filter-value-input'
+import { GroupBody } from './group-body'
+import { addPendingLeaf } from './group-mutations'
+import type { FilterField, FilterGroup } from './types'
+
+/* =========================================================================
+   RecordFilterEditor — the recursive AND/OR filter editor with no popover
+   chrome. Owns the auto-focus state for the field → operator → value chain
+   and seeds an initial pending row when mounted empty so the user can start
+   typing immediately. Used inline (e.g. as the always-open editor in the
+   Query Builder) and as the body of `RecordFilterBuilderPanel`.
+
+   Pure presentation of one `FilterGroup`; persistence and toolbar chrome
+   (joiner toggle, close, footer, save-as-view) are the caller's concern.
+   ========================================================================= */
+
+export type RecordFilterEditorProps = {
+  fields: ReadonlyArray<FilterField>
+  filter: FilterGroup
+  onChange: (next: FilterGroup) => void
+  /** Show "+ Add group", "Wrap in group", and render nested sub-groups. */
+  isComplexEnabled?: boolean
+  showFieldIcons?: boolean
+  showJoinerToggle?: boolean
+  /** Drop in a pending row on mount when the filter is empty so the user
+   *  lands on an auto-focused AttributePicker. Defaults to `true`. */
+  seedPendingRow?: boolean
+  /**
+   * Optional override for the value editor. Lets product code plug in
+   * editors the lib can't know about (e.g. a record picker that hits the
+   * SDK). Return `undefined` from the renderer to fall through to the
+   * built-in branches per `(field.type, operator)` combination.
+   */
+  renderValueInput?: FilterValueInputRenderer
+}
+
+export function RecordFilterEditor({
+  fields,
+  filter,
+  onChange,
+  isComplexEnabled = false,
+  showFieldIcons = true,
+  showJoinerToggle = true,
+  seedPendingRow = true,
+  renderValueInput,
+}: RecordFilterEditorProps) {
+  const fieldsByPath = useMemo(() => Object.fromEntries(fields.map((f) => [f.path, f])), [fields])
+  const elements = filter.elements ?? []
+  const subgroups = filter.groups ?? []
+
+  const [autoFocusIndex, setAutoFocusIndex] = useState<number | null>(null)
+  const [autoFocusOperatorIndex, setAutoFocusOperatorIndex] = useState<number | null>(null)
+  const [autoFocusValueIndex, setAutoFocusValueIndex] = useState<number | null>(null)
+
+  const addPendingRow = () => {
+    const nextIndex = (filter.elements ?? []).length
+    onChange(addPendingLeaf(filter))
+    setAutoFocusIndex(nextIndex)
+  }
+
+  // Mount-only seed. Re-running on `elements` changes would re-add a pending
+  // row whenever the user clears all filters.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only by design
+  useEffect(() => {
+    if (!seedPendingRow) return
+    if (elements.length === 0 && subgroups.length === 0) addPendingRow()
+  }, [])
+
+  return (
+    <RenderValueInputProvider renderer={renderValueInput}>
+      <GroupBody
+        group={filter}
+        fields={fields}
+        fieldsByPath={fieldsByPath}
+        onChange={onChange}
+        isRoot
+        isComplexEnabled={isComplexEnabled}
+        showFieldIcons={showFieldIcons}
+        showJoinerToggle={showJoinerToggle}
+        autoFocusIndex={autoFocusIndex}
+        setAutoFocusIndex={setAutoFocusIndex}
+        autoFocusOperatorIndex={autoFocusOperatorIndex}
+        setAutoFocusOperatorIndex={setAutoFocusOperatorIndex}
+        autoFocusValueIndex={autoFocusValueIndex}
+        setAutoFocusValueIndex={setAutoFocusValueIndex}
+        onSubmitLeaf={addPendingRow}
+      />
+    </RenderValueInputProvider>
+  )
+}