4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:Tdcf,'use client' import { IconPackage } from '@tabler/icons-react' import { useCallback, useEffect, useMemo, useState } from 'react' import { createFilter, Filters, type Filter, type FilterFieldConfig, type FilterOption, type FilterOptionListRenderProps, } from '@/components/spaceui/filters' import { defaultRangeExtractor, useVirtualizer, type Range } from '@tanstack/react-virtual' const ROW_HEIGHT = 32 // Consumer-owned virtualization wired through the primitive's `renderOptionList` // slot. The Filters primitive ships no windowing dependency - you bring your own // (here @tanstack/react-virtual) and stay bound to its selection/keyboard logic // via `renderOption` and `highlightedIndex`. function VirtualizedOptions({ options, highlightedIndex, renderOption }: FilterOptionListRenderProps) { const [scrollEl, setScrollEl] = useState(null) // Keep the highlighted row mounted even when scrolled away, so the combobox's // aria-activedescendant never points at an unmounted node. const rangeExtractor = useCallback( (range: Range) => { const indices = new Set(defaultRangeExtractor(range)) if (highlightedIndex >= 0 && highlightedIndex < options.length) { indices.add(highlightedIndex) } return Array.from(indices).sort((a, b) => a - b) }, [highlightedIndex, options.length], ) const virtualizer = useVirtualizer({ count: options.length, getScrollElement: () => scrollEl, estimateSize: () => ROW_HEIGHT, overscan: 10, getItemKey: (index) => String(options[index].value), rangeExtractor, }) useEffect(() => { if (highlightedIndex >= 0 && highlightedIndex < options.length) { virtualizer.scrollToIndex(highlightedIndex, { align: 'auto' }) } }, [highlightedIndex, options.length, virtualizer]) return (

{virtualizer.getVirtualItems().map((row) => (

{renderOption(options[row.index], row.index)}

))}

) } export default function Demo() { const products = useMemo( () => Array.from({ length: 5000 }, (_, index) => { const id = index + 1 return { value: `sku-${id}`, label: `Product ${String(id).padStart(4, '0')}`, } }), [], ) const fields: FilterFieldConfig[] = useMemo( () => [ { key: 'product', label: 'Product', icon: , type: 'multiselect', options: products, // Bring your own windowing for large lists. renderOptionList: (props) => , }, ], [products], ) const [filters, setFilters] = useState([createFilter('product', 'is_any_of', ['sku-42', 'sku-1024'])]) const handleFiltersChange = useCallback((next: Filter[]) => { setFilters(next) }, []) return (

) } 4c:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","@tanstack/react-virtual",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-virtual"}]]}]}]]}],["$","$L4d",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-filters.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/registry/demo/components/spaceui/filters/c-filters-10/index.tsx","content":"$4f","type":"registry:component","target":"components/spaceui/filters.tsx"}],"className":"h-[70svh] min-h-80"}]]}]