50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tced,/* Shared by Combobox and MultiSelect. */ .cr-combobox { position: relative; width: 100%; font-family: var(--cr-font-family-sans); } .cr-combobox__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-inline-end: 6px; cursor: text; } .cr-combobox__field:focus-within { border-color: var(--cr-color-accent-bg); box-shadow: 0 0 0 4px var(--cr-color-accent-subtle); } .cr-combobox__field[aria-invalid='true'] { border-color: var(--cr-color-danger-text); } .cr-combobox__field[data-disabled] { cursor: not-allowed; opacity: 0.55; } .cr-combobox__input { flex: 1 1 100px; min-width: 100px; min-height: calc(var(--cr-control-height-md) - 2px); padding: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; } .cr-combobox__input::placeholder { color: var(--cr-color-text-muted); } .cr-combobox__chevron { display: flex; padding-inline: var(--cr-space-2); color: var(--cr-color-text-muted); } .cr-combobox__list { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 50; box-sizing: border-box; max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; border-radius: var(--cr-radius-lg); list-style: none; color: var(--cr-color-text-default); font-size: var(--cr-font-size-md); } .cr-combobox__list[hidden] { display: none; } .cr-combobox__option { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 var(--cr-space-3); border-radius: 10px; cursor: pointer; } .cr-combobox__option[data-active] { background: var(--cr-color-bg-subtle); } .cr-combobox__option[aria-disabled] { cursor: not-allowed; opacity: 0.5; } .cr-combobox__option[data-create] { margin-top: 6px; border-top: 1px solid var(--cr-color-border-default); border-radius: 0 0 10px 10px; color: var(--cr-color-text-link); font-weight: var(--cr-font-weight-semibold); } .cr-combobox__label { flex: 1; min-width: 0; } .cr-combobox__label strong { font-weight: var(--cr-font-weight-bold); } .cr-combobox__meta { color: var(--cr-color-text-muted); font-size: var(--cr-font-size-xs); } .cr-combobox__check { width: 16px; flex: none; } .cr-combobox__empty { padding: var(--cr-space-3); color: var(--cr-color-text-muted); } .cr-combobox__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: var(--cr-radius-full); background: var(--cr-color-ink-subtle); font-size: var(--cr-font-size-sm); font-weight: var(--cr-font-weight-semibold); } .cr-combobox__chip-remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--cr-radius-full); background: transparent; color: var(--cr-color-text-muted); font-size: 10px; cursor: pointer; } .cr-combobox__chip-remove:hover { background: var(--cr-color-bg-subtle); color: var(--cr-color-text-default); } .cr-combobox__chip-remove:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: 1px; } .cr-combobox__field[data-multiple] { min-height: 48px; padding: 6px 8px; } .cr-combobox__field[data-multiple] .cr-combobox__input { min-height: 30px; padding-inline-start: 4px; } 53:T1b4f,'use client'; import { useMemo, useRef, useState, type ReactNode } from 'react'; import { cx } from '@/lib/creance/cx'; import { ChevronDownIcon, PlusIcon } from '@/lib/creance/icons'; import { defaultFilter, splitMatch, useListbox } from './useListbox'; import '@/components/creance/input/Input.css'; import './Combobox.css'; export interface ComboboxOption { value: string; /** Plain text: it is what the field shows and what typing matches. */ label: string; /** Shown at the start of the row, such as an Avatar. */ leading?: ReactNode; /** Shown at the end of the row, such as a status. */ meta?: ReactNode; disabled?: boolean; } /** Shared by Combobox and MultiSelect. */ export interface ComboboxBaseProps { options: ComboboxOption[]; placeholder?: string; /** Shown when nothing matches and there is no create option. Default "No matches". */ emptyMessage?: ReactNode; filter?: (option: ComboboxOption, query: string) => boolean; /** Offer to create what was typed when nothing matches it exactly. */ onCreate?: (query: string) => void; createLabel?: (query: string) => ReactNode; disabled?: boolean; id?: string; className?: string; 'aria-label'?: string; 'aria-labelledby'?: string; 'aria-describedby'?: string; 'aria-invalid'?: boolean | 'true' | 'false'; } export interface ComboboxProps extends ComboboxBaseProps { value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; } export interface Item { key: string; option?: ComboboxOption; create?: string; disabled?: boolean; } export function useItems(props: ComboboxBaseProps, query: string, filtering: boolean) { const { options, filter, onCreate } = props; return useMemo(() => { const q = filtering ? query.trim() : ''; const shown = q ? options.filter((o) => (filter ? filter(o, q) : defaultFilter(o.label, q))) : options; const items: Item[] = shown.map((o) => ({ key: o.value, option: o, disabled: o.disabled })); if (onCreate && q && !options.some((o) => o.label.toLowerCase() === q.toLowerCase())) { items.push({ key: `create:${q}`, create: q }); } return items; }, [options, filter, onCreate, query, filtering]); } export function Highlight({ label, query }: { label: string; query: string }) { const [a, b, c] = splitMatch(label, query.trim()); return ( {a} {b && {b}} {c} ); } /** * Type to filter a list and pick one. Focus stays in the field: arrow keys move, Enter picks, * Escape closes. Wrap it in `Field` for a label. */ export function Combobox(props: ComboboxProps) { const { value, defaultValue = null, onValueChange, placeholder, emptyMessage = 'No matches', onCreate, createLabel, disabled, id, className } = props; const [own, setOwn] = useState(defaultValue); const selected = value === undefined ? own : value; const selectedLabel = props.options.find((o) => o.value === selected)?.label ?? ''; const [open, setOpen] = useState(false); const [query, setQuery] = useState(selectedLabel); const [typed, setTyped] = useState(false); const input = useRef(null); const items = useItems(props, query, typed); const close = () => { setOpen(false); setTyped(false); }; const pick = (item: Item) => { if (item.create !== undefined) { onCreate?.(item.create); close(); return; } const next = item.option!.value; if (value === undefined) setOwn(next); onValueChange?.(next); setQuery(item.option!.label); close(); }; const list = useListbox(items, open, pick); return (

{ if (!e.currentTarget.contains(e.relatedTarget)) { close(); setQuery(selectedLabel); } }} >

{ setQuery(e.currentTarget.value); setTyped(true); setOpen(true); }} onClick={() => setOpen(true)} onKeyDown={(e) => { if (list.onKeyDown(e, () => setOpen(true))) return; if (e.key === 'Escape' && open) { e.preventDefault(); close(); setQuery(selectedLabel); } }} />

); } 54:Taa3,'use client'; import { useEffect, useId, useState, type KeyboardEvent } from 'react'; export interface ListItem { key: string; disabled?: boolean; } /** * Keyboard model for an ARIA 1.2 combobox: focus stays in the input while arrow keys move a * highlighted option, exposed through aria-activedescendant. */ export function useListbox(items: T[], open: boolean, onPick: (item: T) => void) { const listId = useId(); // The highlight resets to the first usable item whenever the list opens or what it shows // changes. Keyed on content, not identity, so a fresh options array each render is fine. const key = `${open}\n${items.map((i) => i.key).join('\n')}`; const [chosen, setChosen] = useState({ key: '', index: -1 }); const active = chosen.key === key ? chosen.index : open ? items.findIndex((i) => !i.disabled) : -1; const setActive = (index: number) => setChosen({ key, index }); const optionId = (i: number) => `${listId}-${i}`; useEffect(() => { if (active < 0) return; document.getElementById(optionId(active))?.scrollIntoView?.({ block: 'nearest' }); }); const move = (from: number, step: 1 | -1) => { for (let n = 1; n <= items.length; n++) { const i = (from + step * n + items.length) % items.length; if (!items[i]?.disabled) return i; } return -1; }; /** Returns true when the key was handled. */ const onKeyDown = (e: KeyboardEvent, openList: () => void) => { if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); if (!open) return openList(), true; setActive(move(active < 0 ? (e.key === 'ArrowDown' ? -1 : 0) : active, e.key === 'ArrowDown' ? 1 : -1)); return true; } if (!open) return false; if (e.key === 'Home' || e.key === 'End') { e.preventDefault(); setActive(e.key === 'Home' ? move(-1, 1) : move(0, -1)); return true; } if (e.key === 'Enter' && active >= 0 && items[active]) { e.preventDefault(); onPick(items[active]); return true; } return false; }; return { listId, active, setActive, optionId, onKeyDown, activeDescendant: open && active >= 0 ? optionId(active) : undefined, }; } /** The label with the first case-insensitive match of the query in bold. */ export function splitMatch(label: string, query: string): [string, string, string] { const i = query ? label.toLowerCase().indexOf(query.toLowerCase()) : -1; return i < 0 ? [label, '', ''] : [label.slice(0, i), label.slice(i, i + query.length), label.slice(i + query.length)]; } export const defaultFilter = (label: string, query: string) => label.toLowerCase().includes(query.trim().toLowerCase()); 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/input.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"combobox/Combobox.css","content":"$52","type":"registry:file","target":"@components/creance/combobox/Combobox.css"},{"path":"combobox/Combobox.tsx","content":"$53","type":"registry:ui","target":"@components/creance/combobox/Combobox.tsx"},{"path":"combobox/useListbox.ts","content":"$54","type":"registry:ui","target":"@components/creance/combobox/useListbox.ts"}],"className":"h-[70svh] min-h-80"}]]}]