{ "version": 3, "sources": ["../src/Select.tsx"], "sourcesContent": ["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport { hideOthers } from 'aria-hidden';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];\nconst SELECTION_KEYS = [' ', 'Enter'];\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nconst SELECT_NAME = 'Select';\n\ntype ItemData = { value: string; disabled: boolean; textValue: string };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n SelectItemElement,\n ItemData\n>(SELECT_NAME);\n\ntype ScopedProps

= P & { __scopeSelect?: Scope };\nconst [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [\n createCollectionScope,\n createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\ntype SelectContextValue = {\n trigger: SelectTriggerElement | null;\n onTriggerChange(node: SelectTriggerElement | null): void;\n valueNode: SelectValueElement | null;\n onValueNodeChange(node: SelectValueElement): void;\n valueNodeHasChildren: boolean;\n onValueNodeHasChildrenChange(hasChildren: boolean): void;\n contentId: string;\n value?: string;\n onValueChange(value: string): void;\n open: boolean;\n required?: boolean;\n onOpenChange(open: boolean): void;\n dir: SelectProps['dir'];\n triggerPointerDownPosRef: React.MutableRefObject<{ x: number; y: number } | null>;\n disabled?: boolean;\n};\n\nconst [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);\n\ntype NativeOption = React.ReactElement>;\n\ntype SelectNativeOptionsContextValue = {\n onNativeOptionAdd(option: NativeOption): void;\n onNativeOptionRemove(option: NativeOption): void;\n};\nconst [SelectNativeOptionsProvider, useSelectNativeOptionsContext] =\n createSelectContext(SELECT_NAME);\n\ninterface SelectProps {\n children?: React.ReactNode;\n value?: string;\n defaultValue?: string;\n onValueChange?(value: string): void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n dir?: Direction;\n name?: string;\n autoComplete?: string;\n disabled?: boolean;\n required?: boolean;\n form?: string;\n}\n\nconst Select: React.FC = (props: ScopedProps) => {\n const {\n __scopeSelect,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n value: valueProp,\n defaultValue,\n onValueChange,\n dir,\n name,\n autoComplete,\n disabled,\n required,\n form,\n } = props;\n const popperScope = usePopperScope(__scopeSelect);\n const [trigger, setTrigger] = React.useState(null);\n const [valueNode, setValueNode] = React.useState(null);\n const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);\n const direction = useDirection(dir);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null);\n\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = trigger ? form || !!trigger.closest('form') : true;\n const [nativeOptionsSet, setNativeOptionsSet] = React.useState(new Set());\n\n // The native `select` only associates the correct default value if the corresponding\n // `option` is rendered as a child **at the same time** as itself.\n // Because it might take a few renders for our items to gather the information to build\n // the native `option`(s), we generate a key on the `select` to make sure React re-builds it\n // each time the options change.\n const nativeSelectKey = Array.from(nativeOptionsSet)\n .map((option) => option.props.value)\n .join(';');\n\n return (\n \n \n \n {\n setNativeOptionsSet((prev) => new Set(prev).add(option));\n }, [])}\n onNativeOptionRemove={React.useCallback((option) => {\n setNativeOptionsSet((prev) => {\n const optionsSet = new Set(prev);\n optionsSet.delete(option);\n return optionsSet;\n });\n }, [])}\n >\n {children}\n \n \n\n {isFormControl ? (\n setValue(event.target.value)}\n disabled={disabled}\n form={form}\n >\n {value === undefined ? \n );\n};\n\nSelect.displayName = SELECT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger';\n\ntype SelectTriggerElement = React.ElementRef;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef;\ninterface SelectTriggerProps extends PrimitiveButtonProps {}\n\nconst SelectTrigger = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, disabled = false, ...triggerProps } = props;\n const popperScope = usePopperScope(__scopeSelect);\n const context = useSelectContext(TRIGGER_NAME, __scopeSelect);\n const isDisabled = context.disabled || disabled;\n const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);\n const getItems = useCollection(__scopeSelect);\n const pointerTypeRef = React.useRef('touch');\n\n const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {\n const enabledItems = getItems().filter((item) => !item.disabled);\n const currentItem = enabledItems.find((item) => item.value === context.value);\n const nextItem = findNextItem(enabledItems, search, currentItem);\n if (nextItem !== undefined) {\n context.onValueChange(nextItem.value);\n }\n });\n\n const handleOpen = (pointerEvent?: React.MouseEvent | React.PointerEvent) => {\n if (!isDisabled) {\n context.onOpenChange(true);\n // reset typeahead when we open\n resetTypeahead();\n }\n\n if (pointerEvent) {\n context.triggerPointerDownPosRef.current = {\n x: Math.round(pointerEvent.pageX),\n y: Math.round(pointerEvent.pageY),\n };\n }\n };\n\n return (\n \n {\n // Whilst browsers generally have no issue focusing the trigger when clicking\n // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n // We force `focus` in this case. Note: this doesn't create any other side-effect\n // because we are preventing default in `onPointerDown` so effectively\n // this only runs for a label \"click\"\n event.currentTarget.focus();\n\n // Open on click when using a touch or pen device\n if (pointerTypeRef.current !== 'mouse') {\n handleOpen(event);\n }\n })}\n onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {\n pointerTypeRef.current = event.pointerType;\n\n // prevent implicit pointer capture\n // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n const target = event.target as HTMLElement;\n if (target.hasPointerCapture(event.pointerId)) {\n target.releasePointerCapture(event.pointerId);\n }\n\n // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n // but not when the control key is pressed (avoiding MacOS right click); also not for touch\n // devices because that would open the menu on scroll. (pen devices behave as touch on iOS).\n if (event.button === 0 && event.ctrlKey === false && event.pointerType === 'mouse') {\n handleOpen(event);\n // prevent trigger from stealing focus from the active item after opening.\n event.preventDefault();\n }\n })}\n onKeyDown={composeEventHandlers(triggerProps.onKeyDown, (event) => {\n const isTypingAhead = searchRef.current !== '';\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);\n if (isTypingAhead && event.key === ' ') return;\n if (OPEN_KEYS.includes(event.key)) {\n handleOpen();\n event.preventDefault();\n }\n })}\n />\n \n );\n }\n);\n\nSelectTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue';\n\ntype SelectValueElement = React.ElementRef;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef;\ninterface SelectValueProps extends Omit {\n placeholder?: React.ReactNode;\n}\n\nconst SelectValue = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const { __scopeSelect, className, style, children, placeholder = '', ...valueProps } = props;\n const context = useSelectContext(VALUE_NAME, __scopeSelect);\n const { onValueNodeHasChildrenChange } = context;\n const hasChildren = children !== undefined;\n const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);\n\n useLayoutEffect(() => {\n onValueNodeHasChildrenChange(hasChildren);\n }, [onValueNodeHasChildrenChange, hasChildren]);\n\n return (\n \n {shouldShowPlaceholder(context.value) ? <>{placeholder} : children}\n \n );\n }\n);\n\nSelectValue.displayName = VALUE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst ICON_NAME = 'SelectIcon';\n\ntype SelectIconElement = React.ElementRef;\ninterface SelectIconProps extends PrimitiveSpanProps {}\n\nconst SelectIcon = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, children, ...iconProps } = props;\n return (\n \n {children || '\u25BC'}\n \n );\n }\n);\n\nSelectIcon.displayName = ICON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'SelectPortal';\n\ntype PortalProps = React.ComponentPropsWithoutRef;\ninterface SelectPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n}\n\nconst SelectPortal: React.FC = (props: ScopedProps) => {\n return ;\n};\n\nSelectPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent';\n\ntype SelectContentElement = SelectContentImplElement;\ninterface SelectContentProps extends SelectContentImplProps {}\n\nconst SelectContent = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);\n const [fragment, setFragment] = React.useState();\n\n // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server\n useLayoutEffect(() => {\n setFragment(new DocumentFragment());\n }, []);\n\n if (!context.open) {\n const frag = fragment as Element | undefined;\n return frag\n ? ReactDOM.createPortal(\n \n \n

{props.children}
\n \n ,\n frag\n )\n : null;\n }\n\n return ;\n }\n);\n\nSelectContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContentImpl\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_MARGIN = 10;\n\ntype SelectContentContextValue = {\n content?: SelectContentElement | null;\n viewport?: SelectViewportElement | null;\n onViewportChange?: (node: SelectViewportElement | null) => void;\n itemRefCallback?: (node: SelectItemElement | null, value: string, disabled: boolean) => void;\n selectedItem?: SelectItemElement | null;\n onItemLeave?: () => void;\n itemTextRefCallback?: (\n node: SelectItemTextElement | null,\n value: string,\n disabled: boolean\n ) => void;\n focusSelectedItem?: () => void;\n selectedItemText?: SelectItemTextElement | null;\n position?: SelectContentProps['position'];\n isPositioned?: boolean;\n searchRef?: React.RefObject;\n};\n\nconst [SelectContentProvider, useSelectContentContext] =\n createSelectContext(CONTENT_NAME);\n\nconst CONTENT_IMPL_NAME = 'SelectContentImpl';\n\ntype SelectContentImplElement = SelectPopperPositionElement | SelectItemAlignedPositionElement;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef;\ntype FocusScopeProps = React.ComponentPropsWithoutRef;\n\ntype SelectPopperPrivateProps = { onPlaced?: PopperContentProps['onPlaced'] };\n\ninterface SelectContentImplProps\n extends Omit,\n Omit {\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n\n position?: 'item-aligned' | 'popper';\n}\n\nconst SelectContentImpl = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeSelect,\n position = 'item-aligned',\n onCloseAutoFocus,\n onEscapeKeyDown,\n onPointerDownOutside,\n //\n // PopperContent props\n side,\n sideOffset,\n align,\n alignOffset,\n arrowPadding,\n collisionBoundary,\n collisionPadding,\n sticky,\n hideWhenDetached,\n avoidCollisions,\n //\n ...contentProps\n } = props;\n const context = useSelectContext(CONTENT_NAME, __scopeSelect);\n const [content, setContent] = React.useState(null);\n const [viewport, setViewport] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n const [selectedItem, setSelectedItem] = React.useState(null);\n const [selectedItemText, setSelectedItemText] = React.useState(\n null\n );\n const getItems = useCollection(__scopeSelect);\n const [isPositioned, setIsPositioned] = React.useState(false);\n const firstValidItemFoundRef = React.useRef(false);\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (content) return hideOthers(content);\n }, [content]);\n\n // Make sure the whole tree has focus guards as our `Select` may be\n // the last element in the DOM (because of the `Portal`)\n useFocusGuards();\n\n const focusFirst = React.useCallback(\n (candidates: Array) => {\n const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);\n const [lastItem] = restItems.slice(-1);\n\n const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n for (const candidate of candidates) {\n // if focus is already where we want to go, we don't want to keep going through the candidates\n if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n candidate?.scrollIntoView({ block: 'nearest' });\n // viewport might have padding so scroll to its edges when focusing first/last items.\n if (candidate === firstItem && viewport) viewport.scrollTop = 0;\n if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;\n candidate?.focus();\n if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n }\n },\n [getItems, viewport]\n );\n\n const focusSelectedItem = React.useCallback(\n () => focusFirst([selectedItem, content]),\n [focusFirst, selectedItem, content]\n );\n\n // Since this is not dependent on layout, we want to ensure this runs at the same time as\n // other effects across components. Hence why we don't call `focusSelectedItem` inside `position`.\n React.useEffect(() => {\n if (isPositioned) {\n focusSelectedItem();\n }\n }, [isPositioned, focusSelectedItem]);\n\n // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n // and close on `pointerup` outside.\n const { onOpenChange, triggerPointerDownPosRef } = context;\n React.useEffect(() => {\n if (content) {\n let pointerMoveDelta = { x: 0, y: 0 };\n\n const handlePointerMove = (event: PointerEvent) => {\n pointerMoveDelta = {\n x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),\n y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0)),\n };\n };\n const handlePointerUp = (event: PointerEvent) => {\n // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n event.preventDefault();\n } else {\n // otherwise, if the event was outside the content, close.\n if (!content.contains(event.target as HTMLElement)) {\n onOpenChange(false);\n }\n }\n document.removeEventListener('pointermove', handlePointerMove);\n triggerPointerDownPosRef.current = null;\n };\n\n if (triggerPointerDownPosRef.current !== null) {\n document.addEventListener('pointermove', handlePointerMove);\n document.addEventListener('pointerup', handlePointerUp, { capture: true, once: true });\n }\n\n return () => {\n document.removeEventListener('pointermove', handlePointerMove);\n document.removeEventListener('pointerup', handlePointerUp, { capture: true });\n };\n }\n }, [content, onOpenChange, triggerPointerDownPosRef]);\n\n React.useEffect(() => {\n const close = () => onOpenChange(false);\n window.addEventListener('blur', close);\n window.addEventListener('resize', close);\n return () => {\n window.removeEventListener('blur', close);\n window.removeEventListener('resize', close);\n };\n }, [onOpenChange]);\n\n const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {\n const enabledItems = getItems().filter((item) => !item.disabled);\n const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);\n const nextItem = findNextItem(enabledItems, search, currentItem);\n if (nextItem) {\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => (nextItem.ref.current as HTMLElement).focus());\n }\n });\n\n const itemRefCallback = React.useCallback(\n (node: SelectItemElement | null, value: string, disabled: boolean) => {\n const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;\n const isSelectedItem = context.value !== undefined && context.value === value;\n if (isSelectedItem || isFirstValidItem) {\n setSelectedItem(node);\n if (isFirstValidItem) firstValidItemFoundRef.current = true;\n }\n },\n [context.value]\n );\n const handleItemLeave = React.useCallback(() => content?.focus(), [content]);\n const itemTextRefCallback = React.useCallback(\n (node: SelectItemTextElement | null, value: string, disabled: boolean) => {\n const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;\n const isSelectedItem = context.value !== undefined && context.value === value;\n if (isSelectedItem || isFirstValidItem) {\n setSelectedItemText(node);\n }\n },\n [context.value]\n );\n\n const SelectPosition = position === 'popper' ? SelectPopperPosition : SelectItemAlignedPosition;\n\n // Silently ignore props that are not supported by `SelectItemAlignedPosition`\n const popperContentProps =\n SelectPosition === SelectPopperPosition\n ? {\n side,\n sideOffset,\n align,\n alignOffset,\n arrowPadding,\n collisionBoundary,\n collisionPadding,\n sticky,\n hideWhenDetached,\n avoidCollisions,\n }\n : {};\n\n return (\n \n \n {\n // we prevent open autofocus because we manually focus the selected item\n event.preventDefault();\n }}\n onUnmountAutoFocus={composeEventHandlers(onCloseAutoFocus, (event) => {\n context.trigger?.focus({ preventScroll: true });\n event.preventDefault();\n })}\n >\n event.preventDefault()}\n onDismiss={() => context.onOpenChange(false)}\n >\n event.preventDefault()}\n {...contentProps}\n {...popperContentProps}\n onPlaced={() => setIsPositioned(true)}\n ref={composedRefs}\n style={{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n ...contentProps.style,\n }}\n onKeyDown={composeEventHandlers(contentProps.onKeyDown, (event) => {\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n\n // select should not be navigated using tab key so we prevent it\n if (event.key === 'Tab') event.preventDefault();\n\n if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);\n\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const items = getItems().filter((item) => !item.disabled);\n let candidateNodes = items.map((item) => item.ref.current!);\n\n if (['ArrowUp', 'End'].includes(event.key)) {\n candidateNodes = candidateNodes.slice().reverse();\n }\n if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n const currentElement = event.target as SelectItemElement;\n const currentIndex = candidateNodes.indexOf(currentElement);\n candidateNodes = candidateNodes.slice(currentIndex + 1);\n }\n\n /**\n * Imperative focus during keydown is risky so we prevent React's batching updates\n * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n */\n setTimeout(() => focusFirst(candidateNodes));\n\n event.preventDefault();\n }\n })}\n />\n \n \n \n \n );\n }\n);\n\nSelectContentImpl.displayName = CONTENT_IMPL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemAlignedPosition\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_ALIGNED_POSITION_NAME = 'SelectItemAlignedPosition';\n\ntype SelectItemAlignedPositionElement = React.ElementRef;\ninterface SelectItemAlignedPositionProps extends PrimitiveDivProps, SelectPopperPrivateProps {}\n\nconst SelectItemAlignedPosition = React.forwardRef<\n SelectItemAlignedPositionElement,\n SelectItemAlignedPositionProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, onPlaced, ...popperProps } = props;\n const context = useSelectContext(CONTENT_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(CONTENT_NAME, __scopeSelect);\n const [contentWrapper, setContentWrapper] = React.useState(null);\n const [content, setContent] = React.useState(null);\n const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n const getItems = useCollection(__scopeSelect);\n const shouldExpandOnScrollRef = React.useRef(false);\n const shouldRepositionRef = React.useRef(true);\n\n const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;\n const position = React.useCallback(() => {\n if (\n context.trigger &&\n context.valueNode &&\n contentWrapper &&\n content &&\n viewport &&\n selectedItem &&\n selectedItemText\n ) {\n const triggerRect = context.trigger.getBoundingClientRect();\n\n // -----------------------------------------------------------------------------------------\n // Horizontal positioning\n // -----------------------------------------------------------------------------------------\n const contentRect = content.getBoundingClientRect();\n const valueNodeRect = context.valueNode.getBoundingClientRect();\n const itemTextRect = selectedItemText.getBoundingClientRect();\n\n if (context.dir !== 'rtl') {\n const itemTextOffset = itemTextRect.left - contentRect.left;\n const left = valueNodeRect.left - itemTextOffset;\n const leftDelta = triggerRect.left - left;\n const minContentWidth = triggerRect.width + leftDelta;\n const contentWidth = Math.max(minContentWidth, contentRect.width);\n const rightEdge = window.innerWidth - CONTENT_MARGIN;\n const clampedLeft = clamp(left, [\n CONTENT_MARGIN,\n // Prevents the content from going off the starting edge of the\n // viewport. It may still go off the ending edge, but this can be\n // controlled by the user since they may want to manage overflow in a\n // specific way.\n // https://github.com/radix-ui/primitives/issues/2049\n Math.max(CONTENT_MARGIN, rightEdge - contentWidth),\n ]);\n\n contentWrapper.style.minWidth = minContentWidth + 'px';\n contentWrapper.style.left = clampedLeft + 'px';\n } else {\n const itemTextOffset = contentRect.right - itemTextRect.right;\n const right = window.innerWidth - valueNodeRect.right - itemTextOffset;\n const rightDelta = window.innerWidth - triggerRect.right - right;\n const minContentWidth = triggerRect.width + rightDelta;\n const contentWidth = Math.max(minContentWidth, contentRect.width);\n const leftEdge = window.innerWidth - CONTENT_MARGIN;\n const clampedRight = clamp(right, [\n CONTENT_MARGIN,\n Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n ]);\n\n contentWrapper.style.minWidth = minContentWidth + 'px';\n contentWrapper.style.right = clampedRight + 'px';\n }\n\n // -----------------------------------------------------------------------------------------\n // Vertical positioning\n // -----------------------------------------------------------------------------------------\n const items = getItems();\n const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;\n const itemsHeight = viewport.scrollHeight;\n\n const contentStyles = window.getComputedStyle(content);\n const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);\n const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);\n const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);\n const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);\n const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore\n const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);\n\n const viewportStyles = window.getComputedStyle(viewport);\n const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);\n const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);\n\n const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;\n const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;\n\n const selectedItemHalfHeight = selectedItem.offsetHeight / 2;\n const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;\n const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;\n const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;\n\n const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;\n\n if (willAlignWithoutTopOverflow) {\n const isLastItem = items.length > 0 && selectedItem === items[items.length - 1].ref.current;\n contentWrapper.style.bottom = 0 + 'px';\n const viewportOffsetBottom =\n content.clientHeight - viewport.offsetTop - viewport.offsetHeight;\n const clampedTriggerMiddleToBottomEdge = Math.max(\n triggerMiddleToBottomEdge,\n selectedItemHalfHeight +\n // viewport might have padding bottom, include it to avoid a scrollable viewport\n (isLastItem ? viewportPaddingBottom : 0) +\n viewportOffsetBottom +\n contentBorderBottomWidth\n );\n const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;\n contentWrapper.style.height = height + 'px';\n } else {\n const isFirstItem = items.length > 0 && selectedItem === items[0].ref.current;\n contentWrapper.style.top = 0 + 'px';\n const clampedTopEdgeToTriggerMiddle = Math.max(\n topEdgeToTriggerMiddle,\n contentBorderTopWidth +\n viewport.offsetTop +\n // viewport might have padding top, include it to avoid a scrollable viewport\n (isFirstItem ? viewportPaddingTop : 0) +\n selectedItemHalfHeight\n );\n const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;\n contentWrapper.style.height = height + 'px';\n viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;\n }\n\n contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;\n contentWrapper.style.minHeight = minContentHeight + 'px';\n contentWrapper.style.maxHeight = availableHeight + 'px';\n // -----------------------------------------------------------------------------------------\n\n onPlaced?.();\n\n // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n // so we explicitly turn it on only after they've registered.\n requestAnimationFrame(() => (shouldExpandOnScrollRef.current = true));\n }\n }, [\n getItems,\n context.trigger,\n context.valueNode,\n contentWrapper,\n content,\n viewport,\n selectedItem,\n selectedItemText,\n context.dir,\n onPlaced,\n ]);\n\n useLayoutEffect(() => position(), [position]);\n\n // copy z-index from content to wrapper\n const [contentZIndex, setContentZIndex] = React.useState();\n useLayoutEffect(() => {\n if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n }, [content]);\n\n // When the viewport becomes scrollable at the top, the scroll up button will mount.\n // Because it is part of the normal flow, it will push down the viewport, thus throwing our\n // trigger => selectedItem alignment off by the amount the viewport was pushed down.\n // We wait for this to happen and then re-run the positining logic one more time to account for it.\n const handleScrollButtonChange = React.useCallback(\n (node: SelectScrollButtonImplElement | null) => {\n if (node && shouldRepositionRef.current === true) {\n position();\n focusSelectedItem?.();\n shouldRepositionRef.current = false;\n }\n },\n [position, focusSelectedItem]\n );\n\n return (\n \n \n \n \n \n );\n});\n\nSelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectPopperPosition\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_POSITION_NAME = 'SelectPopperPosition';\n\ntype SelectPopperPositionElement = React.ElementRef;\ntype PopperContentProps = React.ComponentPropsWithoutRef;\ninterface SelectPopperPositionProps extends PopperContentProps, SelectPopperPrivateProps {}\n\nconst SelectPopperPosition = React.forwardRef<\n SelectPopperPositionElement,\n SelectPopperPositionProps\n>((props: ScopedProps, forwardedRef) => {\n const {\n __scopeSelect,\n align = 'start',\n collisionPadding = CONTENT_MARGIN,\n ...popperProps\n } = props;\n const popperScope = usePopperScope(__scopeSelect);\n\n return (\n \n );\n});\n\nSelectPopperPosition.displayName = POPPER_POSITION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\ntype SelectViewportContextValue = {\n contentWrapper?: HTMLDivElement | null;\n shouldExpandOnScrollRef?: React.RefObject;\n onScrollButtonChange?: (node: SelectScrollButtonImplElement | null) => void;\n};\n\nconst [SelectViewportProvider, useSelectViewportContext] =\n createSelectContext(CONTENT_NAME, {});\n\nconst VIEWPORT_NAME = 'SelectViewport';\n\ntype SelectViewportElement = React.ElementRef;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef;\ninterface SelectViewportProps extends PrimitiveDivProps {\n nonce?: string;\n}\n\nconst SelectViewport = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, nonce, ...viewportProps } = props;\n const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);\n const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);\n const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);\n const prevScrollTopRef = React.useRef(0);\n return (\n <>\n {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n \n \n {\n const viewport = event.currentTarget;\n const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;\n if (shouldExpandOnScrollRef?.current && contentWrapper) {\n const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);\n if (scrolledBy > 0) {\n const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;\n const cssMinHeight = parseFloat(contentWrapper.style.minHeight);\n const cssHeight = parseFloat(contentWrapper.style.height);\n const prevHeight = Math.max(cssMinHeight, cssHeight);\n\n if (prevHeight < availableHeight) {\n const nextHeight = prevHeight + scrolledBy;\n const clampedNextHeight = Math.min(availableHeight, nextHeight);\n const heightDiff = nextHeight - clampedNextHeight;\n\n contentWrapper.style.height = clampedNextHeight + 'px';\n if (contentWrapper.style.bottom === '0px') {\n viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;\n // ensure the content stays pinned to the bottom\n contentWrapper.style.justifyContent = 'flex-end';\n }\n }\n }\n }\n prevScrollTopRef.current = viewport.scrollTop;\n })}\n />\n \n \n );\n }\n);\n\nSelectViewport.displayName = VIEWPORT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup';\n\ntype SelectGroupContextValue = { id: string };\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n createSelectContext(GROUP_NAME);\n\ntype SelectGroupElement = React.ElementRef;\ninterface SelectGroupProps extends PrimitiveDivProps {}\n\nconst SelectGroup = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...groupProps } = props;\n const groupId = useId();\n return (\n \n \n \n );\n }\n);\n\nSelectGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel';\n\ntype SelectLabelElement = React.ElementRef;\ninterface SelectLabelProps extends PrimitiveDivProps {}\n\nconst SelectLabel = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...labelProps } = props;\n const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);\n return ;\n }\n);\n\nSelectLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem';\n\ntype SelectItemContextValue = {\n value: string;\n disabled: boolean;\n textId: string;\n isSelected: boolean;\n onItemTextChange(node: SelectItemTextElement | null): void;\n};\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n createSelectContext(ITEM_NAME);\n\ntype SelectItemElement = React.ElementRef;\ninterface SelectItemProps extends PrimitiveDivProps {\n value: string;\n disabled?: boolean;\n textValue?: string;\n}\n\nconst SelectItem = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const {\n __scopeSelect,\n value,\n disabled = false,\n textValue: textValueProp,\n ...itemProps\n } = props;\n const context = useSelectContext(ITEM_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);\n const isSelected = context.value === value;\n const [textValue, setTextValue] = React.useState(textValueProp ?? '');\n const [isFocused, setIsFocused] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, (node) =>\n contentContext.itemRefCallback?.(node, value, disabled)\n );\n const textId = useId();\n const pointerTypeRef = React.useRef('touch');\n\n const handleSelect = () => {\n if (!disabled) {\n context.onValueChange(value);\n context.onOpenChange(false);\n }\n };\n\n if (value === '') {\n throw new Error(\n 'A must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.'\n );\n }\n\n return (\n {\n setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim());\n }, [])}\n >\n \n setIsFocused(true))}\n onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))}\n onClick={composeEventHandlers(itemProps.onClick, () => {\n // Open on click when using a touch or pen device\n if (pointerTypeRef.current !== 'mouse') handleSelect();\n })}\n onPointerUp={composeEventHandlers(itemProps.onPointerUp, () => {\n // Using a mouse you should be able to do pointer down, move through\n // the list, and release the pointer over the item to select it.\n if (pointerTypeRef.current === 'mouse') handleSelect();\n })}\n onPointerDown={composeEventHandlers(itemProps.onPointerDown, (event) => {\n pointerTypeRef.current = event.pointerType;\n })}\n onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {\n // Remember pointer type when sliding over to this item from another one\n pointerTypeRef.current = event.pointerType;\n if (disabled) {\n contentContext.onItemLeave?.();\n } else if (pointerTypeRef.current === 'mouse') {\n // even though safari doesn't support this option, it's acceptable\n // as it only means it might scroll a few pixels when using the pointer.\n event.currentTarget.focus({ preventScroll: true });\n }\n })}\n onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {\n if (event.currentTarget === document.activeElement) {\n contentContext.onItemLeave?.();\n }\n })}\n onKeyDown={composeEventHandlers(itemProps.onKeyDown, (event) => {\n const isTypingAhead = contentContext.searchRef?.current !== '';\n if (isTypingAhead && event.key === ' ') return;\n if (SELECTION_KEYS.includes(event.key)) handleSelect();\n // prevent page scroll if using the space key to select an item\n if (event.key === ' ') event.preventDefault();\n })}\n />\n \n \n );\n }\n);\n\nSelectItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText';\n\ntype SelectItemTextElement = React.ElementRef;\ninterface SelectItemTextProps extends PrimitiveSpanProps {}\n\nconst SelectItemText = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n // We ignore `className` and `style` as this part shouldn't be styled.\n const { __scopeSelect, className, style, ...itemTextProps } = props;\n const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);\n const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);\n const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);\n const [itemTextNode, setItemTextNode] = React.useState(null);\n const composedRefs = useComposedRefs(\n forwardedRef,\n (node) => setItemTextNode(node),\n itemContext.onItemTextChange,\n (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)\n );\n\n const textContent = itemTextNode?.textContent;\n const nativeOption = React.useMemo(\n () => (\n \n ),\n [itemContext.disabled, itemContext.value, textContent]\n );\n\n const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;\n useLayoutEffect(() => {\n onNativeOptionAdd(nativeOption);\n return () => onNativeOptionRemove(nativeOption);\n }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);\n\n return (\n <>\n \n\n {/* Portal the select item text into the trigger value node */}\n {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n ? ReactDOM.createPortal(itemTextProps.children, context.valueNode)\n : null}\n \n );\n }\n);\n\nSelectItemText.displayName = ITEM_TEXT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator';\n\ntype SelectItemIndicatorElement = React.ElementRef;\ninterface SelectItemIndicatorProps extends PrimitiveSpanProps {}\n\nconst SelectItemIndicator = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...itemIndicatorProps } = props;\n const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);\n return itemContext.isSelected ? (\n \n ) : null;\n }\n);\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';\n\ntype SelectScrollUpButtonElement = SelectScrollButtonImplElement;\ninterface SelectScrollUpButtonProps extends Omit {}\n\nconst SelectScrollUpButton = React.forwardRef<\n SelectScrollUpButtonElement,\n SelectScrollUpButtonProps\n>((props: ScopedProps, forwardedRef) => {\n const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);\n const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);\n const [canScrollUp, setCanScrollUp] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);\n\n useLayoutEffect(() => {\n if (contentContext.viewport && contentContext.isPositioned) {\n const viewport = contentContext.viewport;\n function handleScroll() {\n const canScrollUp = viewport.scrollTop > 0;\n setCanScrollUp(canScrollUp);\n }\n handleScroll();\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n }, [contentContext.viewport, contentContext.isPositioned]);\n\n return canScrollUp ? (\n {\n const { viewport, selectedItem } = contentContext;\n if (viewport && selectedItem) {\n viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;\n }\n }}\n />\n ) : null;\n});\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';\n\ntype SelectScrollDownButtonElement = SelectScrollButtonImplElement;\ninterface SelectScrollDownButtonProps extends Omit {}\n\nconst SelectScrollDownButton = React.forwardRef<\n SelectScrollDownButtonElement,\n SelectScrollDownButtonProps\n>((props: ScopedProps, forwardedRef) => {\n const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);\n const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);\n const [canScrollDown, setCanScrollDown] = React.useState(false);\n const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);\n\n useLayoutEffect(() => {\n if (contentContext.viewport && contentContext.isPositioned) {\n const viewport = contentContext.viewport;\n function handleScroll() {\n const maxScroll = viewport.scrollHeight - viewport.clientHeight;\n // we use Math.ceil here because if the UI is zoomed-in\n // `scrollTop` is not always reported as an integer\n const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;\n setCanScrollDown(canScrollDown);\n }\n handleScroll();\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n }, [contentContext.viewport, contentContext.isPositioned]);\n\n return canScrollDown ? (\n {\n const { viewport, selectedItem } = contentContext;\n if (viewport && selectedItem) {\n viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;\n }\n }}\n />\n ) : null;\n});\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;\n\ntype SelectScrollButtonImplElement = React.ElementRef;\ninterface SelectScrollButtonImplProps extends PrimitiveDivProps {\n onAutoScroll(): void;\n}\n\nconst SelectScrollButtonImpl = React.forwardRef<\n SelectScrollButtonImplElement,\n SelectScrollButtonImplProps\n>((props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;\n const contentContext = useSelectContentContext('SelectScrollButton', __scopeSelect);\n const autoScrollTimerRef = React.useRef(null);\n const getItems = useCollection(__scopeSelect);\n\n const clearAutoScrollTimer = React.useCallback(() => {\n if (autoScrollTimerRef.current !== null) {\n window.clearInterval(autoScrollTimerRef.current);\n autoScrollTimerRef.current = null;\n }\n }, []);\n\n React.useEffect(() => {\n return () => clearAutoScrollTimer();\n }, [clearAutoScrollTimer]);\n\n // When the viewport becomes scrollable on either side, the relevant scroll button will mount.\n // Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)\n // the viewport, potentially causing the active item to now be partially out of view.\n // We re-run the `scrollIntoView` logic to make sure it stays within the viewport.\n useLayoutEffect(() => {\n const activeItem = getItems().find((item) => item.ref.current === document.activeElement);\n activeItem?.ref.current?.scrollIntoView({ block: 'nearest' });\n }, [getItems]);\n\n return (\n {\n if (autoScrollTimerRef.current === null) {\n autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);\n }\n })}\n onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {\n contentContext.onItemLeave?.();\n if (autoScrollTimerRef.current === null) {\n autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);\n }\n })}\n onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {\n clearAutoScrollTimer();\n })}\n />\n );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'SelectSeparator';\n\ntype SelectSeparatorElement = React.ElementRef;\ninterface SelectSeparatorProps extends PrimitiveDivProps {}\n\nconst SelectSeparator = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...separatorProps } = props;\n return ;\n }\n);\n\nSelectSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'SelectArrow';\n\ntype SelectArrowElement = React.ElementRef;\ntype PopperArrowProps = React.ComponentPropsWithoutRef;\ninterface SelectArrowProps extends PopperArrowProps {}\n\nconst SelectArrow = React.forwardRef(\n (props: ScopedProps, forwardedRef) => {\n const { __scopeSelect, ...arrowProps } = props;\n const popperScope = usePopperScope(__scopeSelect);\n const context = useSelectContext(ARROW_NAME, __scopeSelect);\n const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);\n return context.open && contentContext.position === 'popper' ? (\n \n ) : null;\n }\n);\n\nSelectArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction shouldShowPlaceholder(value?: string) {\n return value === '' || value === undefined;\n}\n\nconst BubbleSelect = React.forwardRef>(\n (props, forwardedRef) => {\n const { value, ...selectProps } = props;\n const ref = React.useRef(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n const prevValue = usePrevious(value);\n\n // Bubble value change to parents (e.g form change event)\n React.useEffect(() => {\n const select = ref.current!;\n const selectProto = window.HTMLSelectElement.prototype;\n const descriptor = Object.getOwnPropertyDescriptor(\n selectProto,\n 'value'\n ) as PropertyDescriptor;\n const setValue = descriptor.set;\n if (prevValue !== value && setValue) {\n const event = new Event('change', { bubbles: true });\n setValue.call(select, value);\n select.dispatchEvent(event);\n }\n }, [prevValue, value]);\n\n /**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n * Adding the `value` will cause React to consider the programmatic\n * dispatch a duplicate and it will get swallowed.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n return (\n \n