{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "multi-select", "type": "registry:ui", "title": "MultiSelect", "description": "انتخاب چندتایی", "dependencies": [ "@kashi-ui/persian@^1.8.0" ], "registryDependencies": [ "https://kashi.sepantapouya.com/r/badge.json", "https://kashi.sepantapouya.com/r/combobox.json", "https://kashi.sepantapouya.com/r/cx.json", "https://kashi.sepantapouya.com/r/field.json", "https://kashi.sepantapouya.com/r/kashi-provider.json" ], "files": [ { "path": "registry/kashi/MultiSelect.tsx", "type": "registry:ui", "target": "components/kashi/MultiSelect.tsx", "content": "\"use client\";\n\nimport { useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { toFaDigits } from \"@kashi-ui/persian\";\nimport { Badge } from \"./Badge\";\nimport { defaultFilter, highlight, type ComboboxOption } from \"./Combobox\";\nimport { Field, describedBy } from \"./Field\";\nimport { cx } from \"./cx\";\nimport { useKashi } from \"./KashiProvider\";\n\nexport interface MultiSelectProps {\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n options: ComboboxOption[];\n value?: string[];\n defaultValue?: string[];\n onChange?: (value: string[]) => void;\n placeholder?: string;\n /** بیشترین تعداد انتخاب */\n max?: number;\n filter?: (option: ComboboxOption, query: string) => boolean;\n /** @default \"نتیجه‌ای پیدا نشد.\" */\n emptyMessage?: ReactNode;\n disabled?: boolean;\n /** با name، یک فیلد پنهان برای هر مقدار */\n name?: string;\n id?: string;\n className?: string;\n labels?: { remove?: (label: string) => string; selected?: (n: number) => string; max?: (n: number) => string; clear?: string };\n}\n\nconst Check = () => ;\n\n/**\n * انتخاب چند گزینه با جستجو؛ انتخاب‌ها به‌شکل برچسب داخل فیلد.\n * ↑↓ حرکت، Enter انتخاب یا لغو انتخاب، Backspace در فیلد خالی آخرین برچسب را حذف می‌کند، Esc بستن.\n */\nexport function MultiSelect({\n label, hint, error, options, value, defaultValue = [], onChange, placeholder, max, filter = defaultFilter,\n emptyMessage, disabled, name, id, className, labels = {},\n}: MultiSelectProps) {\n const { messages: M, n: N } = useKashi();\n emptyMessage ??= M.common.noResults;\n const {\n remove = M.common.remove, selected: selectedLabel = (x: number) => M.multiSelect.selected(N(x)),\n max: maxLabel = (x: number) => M.common.max(N(x)), clear = M.common.clearAll,\n } = labels;\n const autoId = useId();\n const inputId = id ?? autoId;\n const listId = `${inputId}-list`;\n const [inner, setInner] = useState(defaultValue);\n const chosen = value ?? inner;\n const [query, setQuery] = useState(\"\");\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(-1);\n const [announce, setAnnounce] = useState(\"\");\n const input = useRef(null);\n const wrap = useRef(null);\n const filtered = useMemo(() => options.filter((o) => filter(o, query)), [options, query, filter]);\n const full = max !== undefined && chosen.length >= max;\n\n const set = (next: string[]) => {\n if (value === undefined) setInner(next);\n onChange?.(next);\n };\n const toggle = (o: ComboboxOption) => {\n if (o.disabled) return;\n const on = chosen.includes(o.value);\n if (!on && full) return setAnnounce(maxLabel(max!));\n set(on ? chosen.filter((v) => v !== o.value) : [...chosen, o.value]);\n setAnnounce(on ? M.common.removed(o.label) : M.common.selected(o.label));\n setQuery(\"\");\n };\n const move = (d: number) => {\n const en = filtered.map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0);\n if (!en.length) return;\n const p = en.indexOf(active);\n setActive(en[(p + d + en.length) % en.length]);\n };\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"ArrowDown\") { e.preventDefault(); open ? move(1) : (setOpen(true), setActive(0)); }\n else if (e.key === \"ArrowUp\") { e.preventDefault(); open ? move(-1) : setOpen(true); }\n else if (e.key === \"Enter\" && open && filtered[active]) { e.preventDefault(); toggle(filtered[active]); }\n else if (e.key === \"Escape\" && open) { e.preventDefault(); setOpen(false); }\n else if (e.key === \"Backspace\" && !query && chosen.length) {\n const last = options.find((o) => o.value === chosen[chosen.length - 1]);\n set(chosen.slice(0, -1));\n if (last) setAnnounce(M.common.removed(last.label));\n }\n };\n const labelOf = (v: string) => options.find((o) => o.value === v)?.label ?? v;\n\n return (\n \n !wrap.current?.contains(e.relatedTarget as Node) && setOpen(false)}\n >\n
input.current?.focus()}>\n {chosen.map((v) => (\n set(chosen.filter((x) => x !== v))} removeLabel={remove(labelOf(v))}>{labelOf(v)}\n ))}\n = 0 ? `${listId}-${active}` : undefined}\n aria-describedby={describedBy(inputId, hint, error, `${inputId}-count`)}\n aria-invalid={error ? true : undefined}\n autoComplete=\"off\"\n placeholder={chosen.length ? undefined : placeholder}\n disabled={disabled}\n value={query}\n onChange={(e) => {\n setQuery(e.target.value);\n setOpen(true);\n setActive(0);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={onKey}\n />\n {chosen.length > 1 && !disabled && (\n \n )}\n
\n \n {selectedLabel(chosen.length)}\n {announce}\n {name && chosen.map((v) => )}\n \n \n );\n}\n" } ] }