54: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"] 55: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"] 56:Tda0,"use client"; import React from "react"; import MultipleSelector, { Option, } from "@/app/registry/spectrumui/multiple-selector-dependencies"; import { H4 } from "@/app/registry/spectrumui/heading-with-anchor"; const OPTIONS: Option[] = [ { label: "nextjs", value: "nextjs" }, { label: "React", value: "react" }, { label: "Remix", value: "remix" }, { label: "Vite", value: "vite" }, { label: "Nuxt", value: "nuxt" }, { label: "Vue", value: "vue" }, { label: "Svelte", value: "svelte" }, { label: "Angular", value: "angular" }, { label: "Ember", value: "ember" }, { label: "Gatsby", value: "gatsby" }, { label: "Astro", value: "astro" }, ]; const GROUP_OPTIONS: Option[] = [ { label: "nextjs", value: "nextjs", group: "React" }, { label: "React", value: "react", group: "React" }, { label: "Remix", value: "remix", group: "React" }, { label: "shadcn-ui", value: "shadcn-ui", group: "React" }, { label: "mui", value: "mui", group: "React" }, { label: "Vite", value: "vite", group: "Vue" }, { label: "Nuxt", value: "nuxt", group: "Vue" }, { label: "Vue", value: "vue", group: "Vue" }, { label: "Quasar", value: "quasar", group: "Vue" }, { label: "Angular", value: "angular", group: "Angular" }, { label: "Material UI", value: "material-ui", group: "Angular" }, { label: "Ng-zorro", value: "ng-zorro", group: "Angular" }, ]; const mockSearch = (value: string): Option[] => { return OPTIONS.filter((option) => option.value.includes(value)); }; const mockSearchGroup = (value: string): Option[] => { return GROUP_OPTIONS.filter((option) => option.value.includes(value)); }; const MultipleSelectorWithSyncSearch = () => { return (

Sync search

{ const res = mockSearch(value); return res; }} placeholder="trying to search 'a' to get more options..." emptyIndicator={

no results found.

} />

Creatable

{ const res = mockSearch(value); return res; }} placeholder="trying to search 'a' to get more options..." creatable emptyIndicator={

no results found.

} />

GroupBy

{ const res = mockSearchGroup(value); return res; }} placeholder="trying to search 'a' to get more options..." groupBy="group" creatable emptyIndicator={

no results found.

} />

Debounce

{ const res = mockSearch(value); return res; }} placeholder="trying to search 'a' to get more options..." delay={1000} emptyIndicator={

no results found.

} />

); }; export default MultipleSelectorWithSyncSearch; 53:["$","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,["$","$L54",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/multiple-selector-dependencies","@spectrumui/heading-with-anchor"]}]]}],null]}],["$","$L55",null,{"files":[{"path":"app/registry/multiple-selector/usage/multiple-selector-with-sync-search.tsx","content":"$56","type":"registry:component","target":"components/spectrumui/multiple-selector-with-sync-search.tsx"}],"className":"h-[70svh] min-h-80"}]]}]