51: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"] 52: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"] 53:T1833,'use client'; import { useRef, useState } from 'react'; import { cx } from '@/lib/creance/cx'; import { CheckIcon, CrossIcon, PlusIcon } from '@/lib/creance/icons'; import { Highlight, useItems, type ComboboxBaseProps, type Item } from '@/components/creance/combobox/Combobox'; import { useListbox } from '@/components/creance/combobox/useListbox'; import '@/components/creance/input/Input.css'; import '@/components/creance/combobox/Combobox.css'; export interface MultiSelectProps extends ComboboxBaseProps { value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; /** Accessible name prefix of each chip's remove button. Default "Remove". */ removeLabel?: string; } /** * Pick several from a list. Picks become chips; Enter toggles the highlighted option and the * list stays open; Backspace in an empty field removes the last chip. */ export function MultiSelect(props: MultiSelectProps) { const { value, defaultValue = [], onValueChange, placeholder, emptyMessage = 'No matches', onCreate, createLabel, disabled, id, className, removeLabel = 'Remove' } = props; const [own, setOwn] = useState(defaultValue); const selected = value ?? own; const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); const input = useRef(null); const byValue = new Map(props.options.map((o) => [o.value, o])); const set = (next: string[]) => { if (value === undefined) setOwn(next); onValueChange?.(next); }; const items = useItems(props, query, true); const pick = (item: Item) => { if (item.create !== undefined) { onCreate?.(item.create); } else { const v = item.option!.value; set(selected.includes(v) ? selected.filter((s) => s !== v) : [...selected, v]); } setQuery(''); }; const list = useListbox(items, open, pick); return (

{ if (!e.currentTarget.contains(e.relatedTarget)) { setOpen(false); setQuery(''); } }} > {/* A mouse convenience: clicking between chips focuses the input, which is already in the tab order. */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}

input.current?.focus()} > {selected.map((v) => { const label = byValue.get(v)?.label ?? v; return ( {label} ); })} { setQuery(e.currentTarget.value); setOpen(true); }} onFocus={() => setOpen(true)} onKeyDown={(e) => { if (list.onKeyDown(e, () => setOpen(true))) return; if (e.key === 'Backspace' && !query && selected.length) set(selected.slice(0, -1)); if (e.key === 'Escape' && open) { e.preventDefault(); setOpen(false); } }} />

); } 50:["$","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,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/combobox.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/input.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"multi-select/MultiSelect.tsx","content":"$53","type":"registry:ui","target":"@components/creance/multi-select/MultiSelect.tsx"}],"className":"h-[70svh] min-h-80"}]]}]