4c: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"] 4d: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"] 4e:T21ae,import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; import { comboboxStyleKeys, filterComboboxItems, getSelectState, moveComboboxIndex } from '../lib/core'; import type { ComboboxBaseProps, ComboboxItem } from '../lib/core'; import { usePortalContainer, type PortalContainer } from '../portal'; import styles from './combobox.module.scss'; function ComboboxCheckIcon() { return ( ); } function ComboboxChevronIcon() { return ( ); } export interface ComboboxProps extends React.HTMLAttributes, ComboboxBaseProps { container?: PortalContainer; } const Combobox = React.forwardRef( ( { className = '', items, value, defaultValue, onValueChange, placeholder = 'Select...', searchPlaceholder = 'Search...', emptyText = 'No items.', notFoundText = 'No results found.', maxItems, disabled = false, filter, container, ...props }, ref, ) => { const portalContainer = usePortalContainer(container); const [open, setOpen] = useState(false); const [query, setQuery] = useState(''); const [activeValue, setActiveValue] = useState(null); const [internalValue, setInternalValue] = useState(defaultValue); const triggerRef = useRef(null); const contentRef = useRef(null); const contentId = useId(); const currentValue = value !== undefined ? value : internalValue; const filteredItems = useMemo(() => filterComboboxItems(items, query, maxItems, filter), [items, query, maxItems, filter]); const selectedItem = useMemo(() => items.find((item) => item.value === currentValue), [items, currentValue]); function setOpenState(next: boolean) { setOpen(next); if (!next) { setQuery(''); setActiveValue(null); } } const handleTriggerClick = useCallback(() => { if (disabled) { return; } setOpenState(!open); }, [disabled, open]); const handleSelect = useCallback( (item: ComboboxItem) => { if (item.disabled) { return; } if (value === undefined) { setInternalValue(item.value); } onValueChange?.(item.value); setOpenState(false); }, [value, onValueChange], ); function handleTriggerKeyDown(event: React.KeyboardEvent) { if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); if (disabled) { return; } setOpenState(true); } } function handleContentKeyDown(event: React.KeyboardEvent) { const enabledItems = filteredItems.filter((item) => !item.disabled); if (enabledItems.length === 0) { if (event.key === 'Escape') { event.preventDefault(); setOpenState(false); } return; } const currentIndex = enabledItems.findIndex((item) => item.value === activeValue); switch (event.key) { case 'ArrowDown': event.preventDefault(); setActiveValue(enabledItems[moveComboboxIndex(currentIndex, 1, enabledItems.length)].value); break; case 'ArrowUp': event.preventDefault(); setActiveValue(enabledItems[moveComboboxIndex(currentIndex, -1, enabledItems.length)].value); break; case 'Home': event.preventDefault(); setActiveValue(enabledItems[0].value); break; case 'End': event.preventDefault(); setActiveValue(enabledItems[enabledItems.length - 1].value); break; case 'Enter': case ' ': event.preventDefault(); handleSelect(enabledItems[currentIndex >= 0 ? currentIndex : 0]); break; case 'Escape': event.preventDefault(); setOpenState(false); triggerRef.current?.focus(); break; } } useLayoutEffect(() => { if (!open) { return; } function updatePosition() { const trigger = triggerRef.current; const content = contentRef.current; if (!trigger || !content) { return; } const triggerRect = trigger.getBoundingClientRect(); const contentSize = { width: content.offsetWidth, height: content.offsetHeight }; const viewport = { width: window.innerWidth, height: window.innerHeight }; const margin = 8; const left = Math.min(Math.max(triggerRect.left, margin), Math.max(margin, viewport.width - contentSize.width - margin)); const top = Math.min(Math.max(triggerRect.bottom + 4, margin), Math.max(margin, viewport.height - contentSize.height - margin)); content.style.top = `${top}px`; content.style.left = `${left}px`; } updatePosition(); window.addEventListener('resize', updatePosition); document.addEventListener('scroll', updatePosition, true); return () => { window.removeEventListener('resize', updatePosition); document.removeEventListener('scroll', updatePosition, true); }; }, [open]); useEffect(() => { if (!open) { return; } function handlePointerDown(event: PointerEvent) { const target = event.target as Node | null; if (!target) { return; } const content = contentRef.current; const trigger = triggerRef.current; if (content && content.contains(target)) { return; } if (trigger && trigger.contains(target)) { return; } setOpenState(false); } document.addEventListener('pointerdown', handlePointerDown); return () => document.removeEventListener('pointerdown', handlePointerDown); }, [open]); const state = getSelectState(open); const showEmpty = filteredItems.length === 0; const emptyMessage = query ? notFoundText : emptyText; const content = open ? ( ) : null; return (

{open && portalContainer ? createPortal(content, portalContainer) : null}

); }, ); Combobox.displayName = 'Combobox'; export { Combobox }; export default Combobox; 4f:Td98,@use '../../../styles/variables/colors' as *; // 根容器 .root { position: relative; display: inline-flex; width: 100%; } // 触发器按钮 .trigger { display: inline-flex; width: 100%; align-items: center; justify-content: space-between; gap: $spacing-2; border-radius: $radius; border: 1px solid $input; background-color: transparent; padding: $spacing-2 $spacing-3; font-size: $text-sm; white-space: nowrap; color: $foreground; box-shadow: $shadow-sm; transition: color $transition-fast, box-shadow $transition-fast; outline: none; cursor: pointer; &:focus-visible { border-color: $ring; box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent); } &[data-disabled='true'] { cursor: not-allowed; opacity: 0.5; } } // 触发器展示文本 .triggerValue { display: flex; flex: 1; align-items: center; gap: $spacing-2; overflow: hidden; text-align: left; &[data-placeholder='true'] { color: $muted-foreground; } } // 触发器箭头 .triggerIcon { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; color: $muted-foreground; } // 弹出内容面板 .content { position: fixed; z-index: $z-dropdown; width: max-content; min-width: 8rem; max-height: 24rem; overflow: hidden; border-radius: $radius; border: 1px solid $border; background-color: $popover; color: $popover-foreground; box-shadow: $shadow-md; outline: none; transition: opacity $transition-fast, visibility $transition-fast, transform $transition-fast; &[data-state='closed'] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-0.25rem) scale(0.95); } &[data-state='open'] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0) scale(1); } } // 搜索框容器 .search { display: flex; align-items: center; gap: $spacing-2; border-bottom: 1px solid $border; padding: $spacing-2; } // 搜索输入框 .searchInput { width: 100%; border: none; background: transparent; padding: 0; font-size: $text-sm; color: $foreground; outline: none; &::placeholder { color: $muted-foreground; } } // 候选项列表 .list { max-height: 15rem; overflow-x: hidden; overflow-y: auto; padding: $spacing-1; } // 候选项 .item { position: relative; display: flex; width: 100%; align-items: center; gap: $spacing-2; border-radius: $radius-sm; padding: $spacing-1_5 $spacing-2 $spacing-1_5 $spacing-8; font-size: $text-sm; line-height: $leading-normal; color: $popover-foreground; outline: none; cursor: default; user-select: none; &[data-highlighted='true'] { background-color: $accent; color: $accent-foreground; } &[data-disabled='true'] { pointer-events: none; opacity: 0.5; } } // 选中指示器 .itemIndicator { position: absolute; left: $spacing-2; display: inline-flex; width: 0.875rem; height: 0.875rem; align-items: center; justify-content: center; & > svg { width: 1rem; height: 1rem; } } // 空状态提示 .empty { display: flex; width: 100%; align-items: center; justify-content: center; padding: $spacing-6; text-align: center; font-size: $text-sm; color: $muted-foreground; } // 分组容器 .group { display: block; } // 分组标题 .label { padding: $spacing-1_5 $spacing-2; font-size: $text-xs; font-weight: $font-medium; color: $muted-foreground; } // 分隔线 .separator { margin: $spacing-1 (-$spacing-1); height: 1px; background-color: $border; } 4b:["$","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","react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","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":"react-dom"}]]}]}]]}],["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/portal","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/combobox/combobox.tsx","content":"$4e","type":"registry:ui","target":"components/ui/combobox/combobox.tsx"},{"path":"packages/styles/scss/components/combobox.module.scss","content":"$4f","type":"registry:file","target":"components/ui/combobox/combobox.module.scss"},{"path":"packages/react/src/components/combobox/index.ts","content":"export { Combobox, type ComboboxProps } from './combobox';\n","type":"registry:ui","target":"components/ui/combobox/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]