4f: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"] 50: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"] 51:T6701,"use client" import * as React from "react" import { Combobox as ComboboxPrimitive, Select as SelectPrimitive, } from "@base-ui/react" import { cva, type VariantProps } from "class-variance-authority" import { ChevronDown as ChevronDownIcon } from "honestui/icons" import { Checkbox } from "@/components/ui/checkbox" import { cn } from "@/lib/utils" type ItemType = { leadingIcon?: React.ReactNode children: React.ReactNode value: string } type ValueType = Omit & { children: React.ReactNode } type CommonProps = { autocomplete?: boolean autocompleteMode?: "auto" | "manual" searchValue?: string onSearch?: (value: string) => void defaultSearchValue?: string } type PrimitiveRootProps = Omit< SelectPrimitive.Root.Props, | "children" | "defaultValue" | "items" | "multiple" | "onValueChange" | "value" > type BaseSelectProps = PrimitiveRootProps & CommonProps & { children?: React.ReactNode items?: unknown } type SingleSelectProps = BaseSelectProps & { multiple?: false value?: string | null onValueChange?: (value: string | null) => void defaultValue?: string | null } type MultipleSelectProps = BaseSelectProps & { multiple: true value?: string[] onValueChange?: (value: string[]) => void defaultValue?: string[] } type SelectRootProps = SingleSelectProps | MultipleSelectProps type SelectContextValue = CommonProps & { value?: string | string[] | null registerItem: (item: ItemType) => void unregisterItem: (value: string) => void multiple: boolean items: Record hasItems: boolean } type UseSelectContext = SelectContextValue & { shouldFilter: boolean } const SelectContext = React.createContext( undefined ) function useSelectContext(): UseSelectContext { const context = React.useContext(SelectContext) if (!context) { throw new Error("Select components must be used within Select") } return { ...context, shouldFilter: Boolean( context.autocomplete && context.autocompleteMode === "auto" && context.searchValue?.length ), } } function normalizeItems(items: unknown): Record { const normalized: Record = {} function addItems(value: unknown) { if (Array.isArray(value)) { value.forEach(addItems) return } if (typeof value === "string") { normalized[value] = { children: value, value } return } if (!value || typeof value !== "object" || React.isValidElement(value)) { return } const record = value as Record if ("items" in record && Array.isArray(record.items)) { addItems(record.items) return } if ("value" in record) { const itemValue = record.value == null ? "" : String(record.value) normalized[itemValue] = { children: (record.label as React.ReactNode) ?? (record.children as React.ReactNode) ?? itemValue, leadingIcon: record.leadingIcon as React.ReactNode, value: itemValue, } return } Object.entries(record).forEach(([itemValue, label]) => { normalized[itemValue] = { children: label as React.ReactNode, value: itemValue, } }) } addItems(items) return normalized } function SelectRoot(props: SelectRootProps) { const { children, value: providedValue, onValueChange, defaultValue, autocomplete, autocompleteMode = "auto", searchValue: providedSearchValue, onSearch, defaultSearchValue = "", open: providedOpen, defaultOpen = false, onOpenChange, multiple = false, items: itemsProp, ...rootProps } = props const [internalValue, setInternalValue] = React.useState< string | string[] | null | undefined >(defaultValue) const [internalSearchValue, setInternalSearchValue] = React.useState(defaultSearchValue) const [registeredItems, setRegisteredItems] = React.useState< Record >({}) const computedValue = providedValue === undefined ? internalValue : providedValue const searchValue = providedSearchValue === undefined ? internalSearchValue : providedSearchValue const handleValueChange = React.useCallback( (nextValue: string | string[] | null) => { if (providedValue === undefined) { setInternalValue(nextValue) } if (multiple) { ;(onValueChange as MultipleSelectProps["onValueChange"])?.( nextValue as string[] ) } else { ;(onValueChange as SingleSelectProps["onValueChange"])?.( nextValue as string | null ) } }, [multiple, onValueChange, providedValue] ) const handleSearchValueChange = React.useCallback( (nextValue: string) => { if (providedSearchValue === undefined) { setInternalSearchValue(nextValue) } onSearch?.(nextValue) }, [onSearch, providedSearchValue] ) const registerItem = React.useCallback((item: ItemType) => { setRegisteredItems((currentItems) => ({ ...currentItems, [item.value]: item, })) }, []) const unregisterItem = React.useCallback((value: string) => { setRegisteredItems((currentItems) => { const nextItems = { ...currentItems } delete nextItems[value] return nextItems }) }, []) const normalizedItems = React.useMemo( () => normalizeItems(itemsProp), [itemsProp] ) const items = React.useMemo( () => ({ ...normalizedItems, ...registeredItems }), [normalizedItems, registeredItems] ) const contextValue = React.useMemo( () => ({ value: computedValue, registerItem, unregisterItem, autocomplete, autocompleteMode, searchValue, onSearch, defaultSearchValue, multiple, items, hasItems: itemsProp !== undefined, }), [ autocomplete, autocompleteMode, computedValue, defaultSearchValue, items, itemsProp, multiple, onSearch, registerItem, searchValue, unregisterItem, ] ) if (autocomplete) { const comboboxProps = { ...rootProps, value: providedValue, defaultValue, onValueChange: handleValueChange, inputValue: providedSearchValue, defaultInputValue: defaultSearchValue, onInputValueChange: handleSearchValueChange, open: providedOpen, defaultOpen, onOpenChange, multiple, modal: true, filter: itemsProp === undefined ? null : undefined, items: itemsProp, loopFocus: false, autoHighlight: true, } as ComboboxPrimitive.Root.Props return ( {...comboboxProps}> {children} ) } const selectProps = { ...rootProps, value: providedValue, defaultValue, onValueChange: handleValueChange, open: providedOpen, defaultOpen, onOpenChange, multiple, modal: true, } as SelectPrimitive.Root.Props return ( {...selectProps}> {children} ) } SelectRoot.displayName = "Select" const selectTriggerVariants = cva( "flex items-center justify-between rounded-[var(--hui-radius-2)] bg-[var(--hui-color-background-base-primary)] text-[var(--hui-color-foreground-base-primary)] outline-none select-none [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] motion-safe:[transition:var(--hui-transition-interactive)] not-data-disabled:hover:cursor-pointer not-data-disabled:hover:bg-[var(--hui-color-background-base-primary-hover)] not-data-disabled:active:bg-[var(--hui-color-background-neutral-secondary)] focus:not-focus-visible:outline-none focus-visible:[outline:var(--hui-focus-ring)] data-disabled:pointer-events-none data-disabled:opacity-50 disabled:pointer-events-none disabled:opacity-50 data-[multiselectable=true]:py-[var(--hui-space-2)]", { variants: { size: { small: "min-h-[var(--hui-space-7)] overflow-hidden p-[var(--hui-space-2)]", medium: "min-h-[var(--hui-space-9)] overflow-hidden p-[var(--hui-space-3)]", }, variant: { outline: "border-[0.5px] border-[var(--hui-color-border-base-tertiary)]", text: "border-0", }, }, defaultVariants: { size: "medium", variant: "outline", }, } ) type SelectTriggerProps = Omit< React.ComponentProps<"button">, "size" > & Omit, "size"> & { size?: "sm" | "default" | "lg" | "small" | "medium" nativeButton?: boolean } function SelectTrigger({ ref, size = "medium", variant, className, children, "aria-label": ariaLabel, ...props }: SelectTriggerProps) { const { multiple, autocomplete } = useSelectContext() const resolvedSize = size === "sm" || size === "small" ? "small" : "medium" const TriggerPrimitive = autocomplete ? ComboboxPrimitive.Trigger : SelectPrimitive.Trigger return ( {children} ) } SelectTrigger.displayName = "Select.Trigger" type SelectValueProps = Omit, "children"> & { placeholder?: string children?: | ((value?: ValueType | ValueType[]) => React.ReactNode) | React.ReactNode } function SelectValue({ children, placeholder, className, ...props }: SelectValueProps) { const { value, items, multiple } = useSelectContext() const placeholderContent = placeholder ?? items[""]?.children const hasValue = multiple ? Array.isArray(value) && value.length > 0 : value !== undefined && value !== null && value !== "" const item = React.useMemo(() => { if (!hasValue) return undefined if (multiple && Array.isArray(value)) { return value.map( (itemValue) => items[itemValue] ?? { children: itemValue, value: itemValue, } ) } const itemValue = String(value) return ( items[itemValue] ?? { children: itemValue, value: itemValue, } ) }, [hasValue, items, multiple, value]) if (!hasValue) { return ( {placeholderContent} ) } if (typeof children === "function") { return ( {children(item)} ) } if (children) { return ( {children} ) } if (Array.isArray(item)) { return } return ( {typeof item?.children === "string" && item.leadingIcon && ( {item.leadingIcon} )} {item?.children ?? String(value)} ) } SelectValue.displayName = "Select.Value" function calculateTextWidth(text: string, fontSize = 11) { return text.length * fontSize * 0.6 } function SelectMultipleValue({ data = [] }: { data: ItemType[] }) { const containerRef = React.useRef(null) const [visibleCount, setVisibleCount] = React.useState(data.length) const [containerWidth, setContainerWidth] = React.useState(0) React.useLayoutEffect(() => { const container = containerRef.current if (!container || typeof ResizeObserver === "undefined") return const resizeObserver = new ResizeObserver((entries) => { entries.forEach((entry) => { setContainerWidth(Math.max(0, entry.contentRect.width - 70)) }) }) resizeObserver.observe(container) return () => resizeObserver.disconnect() }, []) React.useLayoutEffect(() => { if (!containerRef.current || data.length === 0 || containerWidth === 0) { return } const chipWidths = data.map((item) => { const text = typeof item.children === "string" ? item.children : item.value const iconWidth = item.leadingIcon ? 16 : 0 return calculateTextWidth(text) + 8 + iconWidth }) let totalWidth = chipWidths[0] ?? 0 let count = data.length > 0 ? 1 : 0 for (let index = 1; index < data.length; index += 1) { const newWidth = totalWidth + (chipWidths[index] ?? 0) if (newWidth > containerWidth) break count += 1 totalWidth = newWidth } setVisibleCount(count) }, [containerWidth, data]) return ( {data.slice(0, visibleCount).map((item) => ( {item.leadingIcon && ( {item.leadingIcon} )} {typeof item.children === "string" ? item.children : item.value} ))} {data.length > visibleCount && ( +{data.length - visibleCount} )} ) } type SelectContentProps = SelectPrimitive.Popup.Props & { searchPlaceholder?: string sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"] side?: SelectPrimitive.Positioner.Props["side"] align?: SelectPrimitive.Positioner.Props["align"] alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"] } function SelectContent({ className, children, searchPlaceholder = "Search...", sideOffset = 4, side = "bottom", align = "start", alignItemWithTrigger = false, ...props }: SelectContentProps) { const { autocomplete, multiple } = useSelectContext() const contentClassName = cn( "relative box-border max-h-[320px] min-w-(--anchor-width) origin-(--transform-origin) overflow-auto rounded-[var(--hui-radius-2)] border-[0.5px] border-[var(--hui-color-border-base-primary)] bg-[var(--hui-color-background-base-primary)] shadow-[var(--hui-shadow-soft)] [--apsara-select-padding:var(--hui-space-2)] [font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)] [transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:[transition:opacity_var(--hui-duration-fast)_var(--hui-ease-out),transform_var(--hui-duration-fast)_var(--hui-ease-out)] motion-safe:data-ending-style:scale-[0.97] motion-safe:data-starting-style:scale-[0.97] has-[[data-slot=select-list]:empty]:[&_[data-slot=select-search]]:border-b-0 has-[[data-slot=select-list]:not(:has([data-slot=select-item]:not([data-hidden=true])))]:[&_[data-slot=select-search]]:border-b-0", className ) if (autocomplete) { return ( {children} ) } return ( {children} ) } SelectContent.displayName = "Select.Content" function getTextContent(node: React.ReactNode): string { return React.Children.toArray(node) .map((child) => { if (typeof child === "string" || typeof child === "number") { return String(child) } if (React.isValidElement<{ children?: React.ReactNode }>(child)) { return getTextContent(child.props.children) } return "" }) .join(" ") } type SelectItemProps = SelectPrimitive.Item.Props & { leadingIcon?: React.ReactNode } function SelectItem({ className, children, value: providedValue, leadingIcon, disabled, ...props }: SelectItemProps) { const value = providedValue == null ? "" : String(providedValue) const primitiveValue = providedValue == null ? null : value const { registerItem, unregisterItem, autocomplete, searchValue, value: selectValue, shouldFilter, hasItems, multiple, } = useSelectContext() const isSelected = multiple ? Array.isArray(selectValue) && selectValue.includes(value) : value === selectValue const searchableText = `${value} ${getTextContent(children)}`.toLowerCase() const isMatched = searchableText.includes((searchValue ?? "").toLowerCase()) const isHidden = shouldFilter && !hasItems && isSelected && !isMatched React.useLayoutEffect(() => { registerItem({ leadingIcon, children, value }) return () => unregisterItem(value) }, [children, leadingIcon, registerItem, unregisterItem, value]) if (shouldFilter && !hasItems && !isMatched && !isSelected) { return null } const element = typeof children === "string" ? ( <> {leadingIcon && ( {leadingIcon} )} {children} ) : ( children ) const itemClassName = cn( "relative flex items-center gap-[var(--hui-space-3)] rounded-[var(--hui-radius-2)] p-[var(--hui-space-3)] text-[var(--hui-color-foreground-base-primary)] whitespace-normal outline-none [word-break:break-word] data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:cursor-pointer data-highlighted:bg-[var(--hui-color-background-base-primary-hover)] data-[hidden=true]:hidden", className ) const renderItem = ( renderProps: React.HTMLAttributes, state: { selected: boolean } ) => (

{multiple && (

) if (autocomplete) { return ( ) } return ( ) } SelectItem.displayName = "Select.Item" type SelectGroupProps = SelectPrimitive.Group.Props function SelectGroup({ className, children, ...props }: SelectGroupProps) { const { shouldFilter, autocomplete } = useSelectContext() if (shouldFilter) return <>{children} const GroupPrimitive = autocomplete ? ComboboxPrimitive.Group : SelectPrimitive.Group return ( {children} ) } SelectGroup.displayName = "Select.Group" type SelectLabelProps = SelectPrimitive.GroupLabel.Props function SelectLabel({ className, ...props }: SelectLabelProps) { const { shouldFilter, autocomplete } = useSelectContext() if (shouldFilter) return null const LabelPrimitive = autocomplete ? ComboboxPrimitive.GroupLabel : SelectPrimitive.GroupLabel return ( ) } SelectLabel.displayName = "Select.Label" type SelectSeparatorProps = SelectPrimitive.Separator.Props function SelectSeparator({ className, ...props }: SelectSeparatorProps) { const { shouldFilter, autocomplete } = useSelectContext() if (shouldFilter) return null const SeparatorPrimitive = autocomplete ? ComboboxPrimitive.Separator : SelectPrimitive.Separator return ( ) } SelectSeparator.displayName = "Select.Separator" const Select = Object.assign(SelectRoot, { Group: SelectGroup, Value: SelectValue, ScrollUpArrow: SelectPrimitive.ScrollUpArrow, ScrollDownArrow: SelectPrimitive.ScrollDownArrow, List: SelectPrimitive.List, Trigger: SelectTrigger, Content: SelectContent, Item: SelectItem, Separator: SelectSeparator, Label: SelectLabel, }) const SelectPopup = SelectContent const SelectGroupLabel = SelectLabel export { Select, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectPopup, SelectItem, SelectGroup, SelectLabel, SelectGroupLabel, SelectSeparator, type ItemType, type SelectContentProps, type SelectItemProps, type SelectRootProps, type SelectTriggerProps, type SelectValueProps, } 4e:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","honestui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/honestui","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":"honestui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@honestui","registryDependencies":["https://www.honestui.com/r/checkbox.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"select.tsx","content":"$51","type":"registry:ui","target":"components/ui/select.tsx"}],"className":"h-[70svh] min-h-80"}]]}]