Function SelectCell

packages/app-core/src/components/DatabaseTableView.tsx:811–935

({ field, value, editing, onStartEdit, onEndEdit, onCommit }: CellProps)

const SELECT_PANEL_WIDTH = 224

function SelectCell({ field, value, editing, onStartEdit, onEndEdit, onCommit }: CellProps): JSX.Element {
  const multi = field.type === 'multiSelect'
  const selected = multi ? splitMultiSelect(value) : value ? [value] : []
  const triggerRef = useRef<HTMLButtonElement | null>(null)
  const panelRef = useRef<HTMLDivElement | null>(null)
  const [rect, setRect] = useState<DOMRect | null>(null)
  const [draft, setDraft] = useState('')

  useEffect(() => {
    setRect(editing && triggerRef.current ? triggerRef.current.getBoundingClientRect() : null)
  }, [editing])

  useEffect(() => {
    if (!editing) return
    const onDown = (e: MouseEvent): void => {
      const t = e.target as Node
      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return
      onEndEdit()
    }
    window.addEventListener('mousedown', onDown, true)
    return () => window.removeEventListener('mousedown', onDown, true)
  }, [editing, onEndEdit])

  const toggle = (optValue: string): void => {
    if (multi) {
      const next = selected.includes(optValue)
        ? selected.filter((v) => v !== optValue)
        : [...selected, optValue]
      onCommit(next.join(', '))
    } else {
      onCommit(selected[0] === optValue ? '' : optValue)
      onEndEdit()
    }
  }

  const chips = (
    <div className="flex flex-wrap gap-1">
      {selected.length === 0 ? (
        <span className="text-ink-400">—</span>
      ) : (
        selected.map((v) => (
          <span
            key={v}
            className="rounded-full bg-accent/15 px-2 py-0.5 text-2xs font-medium text-accent ring-1 ring-accent/30"
          >
            {optionLabel(field, v)}
          </span>
        ))
      )}
    </div>
  )

  // Portal the option list to the body so the table's overflow doesn't clip it;
  // flip above the cell when there isn't room below.
  const placeAbove = !!rect && rect.bottom > window.innerHeight - 280
  const panelStyle: CSSProperties = rect
    ? {
        position: 'fixed',