@tamagui/select 1.0.1-beta.99 → 1.0.1-rc.0

package/src/Select.tsx

@@ -1,111 +1,25 @@
-import {
-  ContextData,
-  FloatingContext,
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  ReferenceType,
-  autoUpdate,
-  detectOverflow,
-  flip,
-  offset,
-  size,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useListNavigation,
-  useRole,
-  useTypeahead,
-} from '@floating-ui/react-dom-interactions'
-import { usePrevious } from '@radix-ui/react-use-previous'
+import { Adapt, useAdaptParent } from '@tamagui/adapt'
 import { useComposedRefs } from '@tamagui/compose-refs'
-import {
-  GetProps,
-  SizeTokens,
-  Theme,
-  styled,
-  useIsomorphicLayoutEffect,
-  useThemeName,
-  withStaticProperties,
-} from '@tamagui/core'
+import { GetProps, TamaguiElement, isClient, isWeb } from '@tamagui/core'
+import { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from '@tamagui/core'
 import { useId } from '@tamagui/core'
-import { createContextScope } from '@tamagui/create-context'
-import type { Scope } from '@tamagui/create-context'
 import { ListItem, ListItemProps } from '@tamagui/list-item'
+import { PortalHost } from '@tamagui/portal'
 import { Separator } from '@tamagui/separator'
-import { ThemeableStack, XStack, YStack, YStackProps } from '@tamagui/stacks'
-import { Paragraph } from '@tamagui/text'
+import { ControlledSheet, SheetController } from '@tamagui/sheet'
+import { XStack, YStack, YStackProps } from '@tamagui/stacks'
+import { Paragraph, SizableText } from '@tamagui/text'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { View } from 'react-native'
 
-type TamaguiElement = HTMLElement | View
-
-// Cross browser fixes for pinch-zooming/backdrop-filter 🙄
-const userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''
-const isFirefox = userAgent.toLowerCase().includes('firefox')
-if (isFirefox) {
-  document.body.classList.add('firefox')
-}
-function getVisualOffsetTop() {
-  return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport?.offsetTop ?? 0 : 0
-}
-
-/* -------------------------------------------------------------------------------------------------
- * SelectContext
- * -----------------------------------------------------------------------------------------------*/
-
-const SELECT_NAME = 'Select'
-const WINDOW_PADDING = 8
-const SCROLL_ARROW_VELOCITY = 8
-const SCROLL_ARROW_THRESHOLD = 8
-const MIN_HEIGHT = 80
-const FALLBACK_THRESHOLD = 16
-
-interface SelectContextValue {
-  size?: SizeTokens
-  value: any
-  selectedIndex: number
-  setSelectedIndex: (index: number) => void
-  activeIndex: number | null
-  setActiveIndex: (index: number | null) => void
-  setValueAtIndex: (index: number, value: string) => void
-  listRef: React.MutableRefObject<Array<HTMLElement | null>>
-  floatingRef: React.MutableRefObject<HTMLElement | null>
-  open: boolean
-  setOpen: (open: boolean) => void
-  onChange: (value: string) => void
-  dataRef: React.MutableRefObject<ContextData>
-  controlledScrolling: boolean
-  valueNode: Element | null
-  onValueNodeChange(node: HTMLElement): void
-  valueNodeHasChildren: boolean
-  onValueNodeHasChildrenChange(hasChildren: boolean): void
-  canScrollUp: boolean
-  canScrollDown: boolean
-  floatingContext: FloatingContext<ReferenceType>
-  increaseHeight: (floating: HTMLElement, amount?: any) => number | undefined
-  forceUpdate: React.DispatchWithoutAction
-  interactions: {
-    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => any
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => any
-    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => any
-  }
-}
-
-type ScopedProps<P> = P & { __scopeSelect?: Scope }
-
-const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)
-const [SelectProvider, useSelectContext] = createSelectContext<SelectContextValue>(SELECT_NAME)
-
-// const [SelectContentContextProvider, useSelectContentContext] =
-//   createSelectContext<SelectContentContextValue>(CONTENT_NAME);
-
-type GenericElement = HTMLElement | View
-
-type Direction = 'ltr' | 'rtl'
+import { SELECT_NAME } from './constants'
+import { SelectProvider, createSelectContext, useSelectContext } from './context'
+import { SelectContent } from './SelectContent'
+import { SelectImplProps, SelectInlineImpl } from './SelectImpl'
+import { SelectScrollDownButton, SelectScrollUpButton } from './SelectScrollButton'
+import { SelectViewport } from './SelectViewport'
+import { ScopedProps, SelectProps } from './types'
+import { useSelectBreakpointActive, useShowSelectSheet } from './useSelectBreakpointActive'
 
 /* -------------------------------------------------------------------------------------------------
  * SelectTrigger
@@ -115,7 +29,7 @@ const TRIGGER_NAME = 'SelectTrigger'
 
 export type SelectTriggerProps = ListItemProps
 
-export const SelectTrigger = React.forwardRef<GenericElement, SelectTriggerProps>(
+export const SelectTrigger = React.forwardRef<TamaguiElement, SelectTriggerProps>(
   (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {
     const {
       __scopeSelect,
@@ -128,29 +42,35 @@ export const SelectTrigger = React.forwardRef<GenericElement, SelectTriggerProps
     // const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)
     // const getItems = useCollection(__scopeSelect)
     // const labelId = useLabelContext(context.trigger)
-    // const labelledBy = ariaLabelledby || labelId
+    const labelledBy = ariaLabelledby // || labelId
 
     return (
       <ListItem
+        componentName={TRIGGER_NAME}
         backgrounded
         radiused
         hoverTheme
         pressTheme
         focusTheme
-        focusable={false}
+        focusable
         borderWidth={1}
-        componentName={TRIGGER_NAME}
         size={context.size}
         // aria-controls={context.contentId}
         aria-expanded={context.open}
         aria-autocomplete="none"
-        // aria-labelledby={labelledBy}
-        // dir={context.dir}
+        aria-labelledby={labelledBy}
+        dir={context.dir}
         disabled={disabled}
         data-disabled={disabled ? '' : undefined}
         {...triggerProps}
         ref={forwardedRef}
-        {...context.interactions.getReferenceProps()}
+        {...(process.env.TAMAGUI_TARGET === 'web' && context.interactions
+          ? context.interactions.getReferenceProps()
+          : {
+              onPress() {
+                context.setOpen(!context.open)
+              },
+            })}
       />
     )
   }
@@ -175,14 +95,21 @@ type SelectValueProps = GetProps<typeof SelectValueFrame> & {
 
 const SelectValue = SelectValueFrame.extractable(
   React.forwardRef<TamaguiElement, SelectValueProps>(
-    ({ __scopeSelect, children, placeholder }: ScopedProps<SelectValueProps>, forwardedRef) => {
+    (
+      { __scopeSelect, children: childrenProp, placeholder }: ScopedProps<SelectValueProps>,
+      forwardedRef
+    ) => {
       // We ignore `className` and `style` as this part shouldn't be styled.
       const context = useSelectContext(VALUE_NAME, __scopeSelect)
       const { onValueNodeHasChildrenChange } = context
-      const hasChildren = children !== undefined
       const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)
 
-      React.useLayoutEffect(() => {
+      const children = childrenProp ?? context.selectedItem
+      const hasChildren = !!children
+      const selectValueChildren =
+        context.value === undefined && placeholder !== undefined ? placeholder : children
+
+      useIsomorphicLayoutEffect(() => {
         onValueNodeHasChildrenChange(hasChildren)
       }, [onValueNodeHasChildrenChange, hasChildren])
 
@@ -194,7 +121,7 @@ const SelectValue = SelectValueFrame.extractable(
           // through the item they came from
           pointerEvents="none"
         >
-          {context.value === undefined && placeholder !== undefined ? placeholder : children}
+          {selectValueChildren}
         </SelectValueFrame>
       )
     }
@@ -214,98 +141,6 @@ export const SelectIcon = styled(XStack, {
   children: <Paragraph>▼</Paragraph>,
 })
 
-/* -------------------------------------------------------------------------------------------------
- * SelectContent
- * -----------------------------------------------------------------------------------------------*/
-
-const CONTENT_NAME = 'SelectContent'
-
-export type SelectContentProps = { children?: React.ReactNode }
-
-const SelectContent = ({ children, __scopeSelect }: ScopedProps<SelectContentProps>) => {
-  const context = useSelectContext(CONTENT_NAME, __scopeSelect)
-  const themeName = useThemeName()
-
-  const contents = <Theme name={themeName}>{children}</Theme>
-
-  return (
-    <FloatingPortal>
-      {context.open ? (
-        <FloatingOverlay lockScroll>{contents}</FloatingOverlay>
-      ) : (
-        <div style={{ display: 'none' }}>{contents}</div>
-      )}
-    </FloatingPortal>
-  )
-}
-
-/* -------------------------------------------------------------------------------------------------
- * SelectViewport
- * -----------------------------------------------------------------------------------------------*/
-
-const VIEWPORT_NAME = 'SelectViewport'
-
-export const SelectViewportFrame = styled(ThemeableStack, {
-  name: VIEWPORT_NAME,
-  backgroundColor: '$background',
-  elevate: true,
-  bordered: true,
-  overflow: 'scroll',
-  userSelect: 'none',
-
-  variants: {
-    size: {
-      '...size': (val, { tokens }) => {
-        return {
-          borderRadius: tokens.radius[val] ?? val,
-        }
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: '$2',
-  },
-})
-
-export type SelectViewportProps = GetProps<typeof SelectViewportFrame>
-
-export const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(
-  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {
-    const { __scopeSelect, children, ...viewportProps } = props
-    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)
-    const { style, ...floatingProps } = context.interactions.getFloatingProps()
-    delete style['scrollbarWidth']
-    delete style['listStyleType']
-    return (
-      <>
-        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`,
-          }}
-        />
-        <FloatingFocusManager context={context.floatingContext} preventTabbing>
-          <SelectViewportFrame
-            size={context.size}
-            data-tamagui-select-viewport=""
-            // @ts-ignore
-            role="presentation"
-            {...viewportProps}
-            ref={forwardedRef}
-            {...floatingProps}
-            {...style}
-          >
-            {children}
-          </SelectViewportFrame>
-        </FloatingFocusManager>
-      </>
-    )
-  }
-)
-
-SelectViewport.displayName = VIEWPORT_NAME
-
 /* -------------------------------------------------------------------------------------------------
  * SelectItem
  * -----------------------------------------------------------------------------------------------*/
@@ -316,7 +151,6 @@ type SelectItemContextValue = {
   value: string
   textId: string
   isSelected: boolean
-  onItemTextChange(node: TamaguiElement | null): void
 }
 
 const [SelectItemContextProvider, useSelectItemContext] =
@@ -329,8 +163,6 @@ export interface SelectItemProps extends YStackProps {
   textValue?: string
 }
 
-// TODO styled(ListItem, { name: 'SelectItem' })
-
 export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
   (props: ScopedProps<SelectItemProps>, forwardedRef) => {
     const {
@@ -343,8 +175,6 @@ export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
     } = props
     const context = useSelectContext(ITEM_NAME, __scopeSelect)
     const isSelected = context.value === value
-    const [textValue, setTextValue] = React.useState(textValueProp ?? '')
-    const [isFocused, setIsFocused] = React.useState(false)
     const textId = useId()
 
     const {
@@ -354,28 +184,26 @@ export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
       open,
       setOpen,
       onChange,
-      activeIndex,
       setActiveIndex,
+      allowMouseUpRef,
+      allowSelectRef,
       setValueAtIndex,
+      selectTimeoutRef,
       dataRef,
     } = context
 
-    const composedRefs = useComposedRefs(
-      forwardedRef,
-      (node) => {
-        if (node instanceof HTMLElement) {
+    const composedRefs = useComposedRefs(forwardedRef, (node) => {
+      if (!isWeb) return
+      if (node instanceof HTMLElement) {
+        if (listRef) {
           listRef.current[index] = node
         }
       }
-      // isSelected ? context.onSelectedItemChange : undefined
-    )
+    })
 
     React.useEffect(() => {
       setValueAtIndex(index, value)
-    }, [index])
-
-    const timeoutRef = React.useRef<any>()
-    const [allowMouseUp, setAllowMouseUp] = React.useState(false)
+    }, [index, setValueAtIndex, value])
 
     function handleSelect() {
       setSelectedIndex(index)
@@ -383,33 +211,46 @@ export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
       setOpen(false)
     }
 
-    React.useLayoutEffect(() => {
-      clearTimeout(timeoutRef.current)
-      if (open) {
-        if (selectedIndex !== index) {
-          setAllowMouseUp(true)
-        } else {
-          timeoutRef.current = setTimeout(() => {
-            setAllowMouseUp(true)
-          }, 300)
-        }
-      } else {
-        setAllowMouseUp(false)
-      }
-    }, [open, index, setActiveIndex, selectedIndex])
+    const selectItemProps = context.interactions
+      ? context.interactions.getItemProps({
+          onTouchStart() {
+            allowSelectRef!.current = true
+            allowMouseUpRef!.current = false
+          },
+          onKeyDown(event) {
+            if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {
+              event.preventDefault()
+              handleSelect()
+            } else {
+              allowSelectRef!.current = true
+            }
+          },
+          onClick() {
+            if (allowSelectRef!.current) {
+              setSelectedIndex(index)
+              setOpen(false)
+            }
+          },
+          onMouseUp() {
+            if (!allowMouseUpRef!.current) {
+              return
+            }
 
-    function handleKeyDown(event: React.KeyboardEvent) {
-      if (event.key === 'Enter' || (event.key === ' ' && !dataRef.current.typing)) {
-        event.preventDefault()
-        handleSelect()
-      }
-    }
+            if (allowSelectRef!.current) {
+              handleSelect()
+            }
 
-    const selectItemProps = context.interactions.getItemProps({
-      onClick: allowMouseUp ? handleSelect : undefined,
-      onMouseUp: allowMouseUp ? handleSelect : undefined,
-      onKeyDown: handleKeyDown,
-    })
+            // On touch devices, prevent the element from
+            // immediately closing `onClick` by deferring it
+            clearTimeout(selectTimeoutRef!.current)
+            selectTimeoutRef!.current = setTimeout(() => {
+              allowSelectRef!.current = true
+            })
+          },
+        })
+      : {
+          onPress: handleSelect,
+        }
 
     return (
       <SelectItemContextProvider
@@ -417,20 +258,16 @@ export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
         value={value}
         textId={textId || ''}
         isSelected={isSelected}
-        onItemTextChange={React.useCallback((node) => {
-          // @ts-ignore
-          setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim())
-        }, [])}
       >
         <ListItem
           backgrounded
           pressTheme
+          cursor=""
           focusTheme
           componentName={ITEM_NAME}
           ref={composedRefs}
           aria-labelledby={textId}
-          // `isFocused` caveat fixes stuttering in VoiceOver
-          aria-selected={isSelected && isFocused}
+          aria-selected={isSelected}
           data-state={isSelected ? 'active' : 'inactive'}
           aria-disabled={disabled || undefined}
           data-disabled={disabled ? '' : undefined}
@@ -452,7 +289,7 @@ SelectItem.displayName = ITEM_NAME
 
 const ITEM_TEXT_NAME = 'SelectItemText'
 
-export const SelectItemTextFrame = styled(Paragraph, {
+export const SelectItemTextFrame = styled(SizableText, {
   name: ITEM_TEXT_NAME,
   selectable: false,
 })
@@ -461,26 +298,44 @@ type SelectItemTextProps = GetProps<typeof SelectItemTextFrame>
 
 const SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(
   (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {
-    // We ignore `className` and `style` as this part shouldn't be styled.
-    const { __scopeSelect, className, style, ...itemTextProps } = props
+    const { __scopeSelect, className, ...itemTextProps } = props
     const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)
     const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)
     const ref = React.useRef<TamaguiElement | null>(null)
-    const composedRefs = useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange)
+    const composedRefs = useComposedRefs(forwardedRef, ref)
+    const isSelected = Boolean(itemContext.isSelected && context.valueNode)
 
-    return (
-      <>
+    const contents = React.useMemo(
+      () => (
         <SelectItemTextFrame
+          className={className}
           size={context.size}
           id={itemContext.textId}
           {...itemTextProps}
           ref={composedRefs}
         />
+      ),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [props, context.size, className, itemContext.textId]
+    )
+
+    // until portals work in sub-trees on RN, use this just for native:
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents)
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSelected, contents])
+
+    return (
+      <>
+        {contents}
 
         {/* Portal the select item text into the trigger value node */}
-        {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren
-          ? ReactDOM.createPortal(itemTextProps.children, context.valueNode)
-          : null}
+        {/* this needs some extra stability between renders */}
+        {/* {isWeb && isSelected
+          ? ReactDOM.createPortal(itemTextProps.children, context.valueNode!)
+          : null} */}
 
         {/* Portal an option in the bubble select */}
         {/* {context.bubbleSelect
@@ -579,7 +434,6 @@ const SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(
         id={groupContext.id}
         size={context.size}
         {...labelProps}
-        // @ts-expect-error
         ref={forwardedRef}
       />
     )
@@ -589,182 +443,63 @@ const SelectLabel = React.forwardRef<TamaguiElement, SelectLabelProps>(
 SelectLabel.displayName = LABEL_NAME
 
 /* -------------------------------------------------------------------------------------------------
- * SelectScrollUpButton
- * -----------------------------------------------------------------------------------------------*/
-
-const SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'
-
-interface SelectScrollButtonProps
-  extends Omit<SelectScrollButtonImplProps, 'dir' | 'componentName'> {}
-
-const SelectScrollUpButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(
-  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {
-    return (
-      <SelectScrollButtonImpl
-        componentName={SCROLL_UP_BUTTON_NAME}
-        {...props}
-        dir="up"
-        ref={forwardedRef}
-      />
-    )
-  }
-)
-
-SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME
-
-/* -------------------------------------------------------------------------------------------------
- * SelectScrollDownButton
+ * SelectSeparator
  * -----------------------------------------------------------------------------------------------*/
 
-const SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'
-
-const SelectScrollDownButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(
-  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {
-    return (
-      <SelectScrollButtonImpl
-        componentName={SCROLL_DOWN_BUTTON_NAME}
-        {...props}
-        dir="down"
-        ref={forwardedRef}
-      />
-    )
-  }
-)
-
-SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME
-
-type SelectScrollButtonImplElement = TamaguiElement
-interface SelectScrollButtonImplProps extends YStackProps {
-  dir: 'up' | 'down'
-  componentName: string
-}
-
-const SelectScrollButtonImpl = React.forwardRef<
-  SelectScrollButtonImplElement,
-  SelectScrollButtonImplProps
->((props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {
-  const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props
-  const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(
-    componentName,
-    __scopeSelect
-  )
-  const intervalRef = React.useRef<any>()
-  const loopingRef = React.useRef(false)
-  const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']
-
-  const { x, y, reference, floating, strategy, update, refs } = useFloating({
-    strategy: 'fixed',
-    placement: dir === 'up' ? 'top' : 'bottom',
-    middleware: [offset(({ rects }) => -rects.floating.height)],
-  })
-
-  const composedRefs = useComposedRefs(forwardedRef, floating)
-
-  React.useLayoutEffect(() => {
-    reference(floatingRef.current)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reference, floatingRef.current])
-
-  React.useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current || !isVisible) {
-      return
-    }
-
-    const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-      animationFrame: true,
-    })
-
-    return () => {
-      clearInterval(intervalRef.current)
-      loopingRef.current = false
-      cleanup()
-    }
-  }, [isVisible, update, refs.floating, refs.reference])
-
-  if (!isVisible) {
-    return null
-  }
+export const SelectSeparator = styled(Separator, {
+  name: 'SelectSeparator',
+})
 
-  const handleScrollArrowChange = () => {
-    const floating = floatingRef.current
-    const isUp = dir === 'up'
-
-    if (floating) {
-      const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY
-      const multi =
-        (isUp && floating.scrollTop <= SCROLL_ARROW_THRESHOLD * 2) ||
-        (!isUp &&
-          floating.scrollTop >=
-            floating.scrollHeight - floating.clientHeight - SCROLL_ARROW_THRESHOLD * 2)
-          ? 2
-          : 1
-
-      floating.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY)
-
-      increaseHeight(floating, multi === 2 ? value * 2 : value)
-      // Ensure derived data (scroll arrows) is fresh
-      forceUpdate()
-    }
+const SelectSheetController = (
+  props: ScopedProps<{}> & {
+    children: React.ReactNode
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
   }
+) => {
+  const context = useSelectContext('SelectSheetController', props.__scopeSelect)
+  const showSheet = useShowSelectSheet(context)
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)
+  const getShowSheet = useGet(showSheet)
 
   return (
-    <YStack
-      ref={composedRefs}
-      componentName={componentName}
-      aria-hidden
-      {...scrollIndicatorProps}
-      zIndex={1000}
-      // @ts-expect-error
-      position={strategy}
-      left={x || 0}
-      top={y || 0}
-      width={`calc(${(floatingRef.current?.offsetWidth ?? 0) - 2}px)`}
-      onPointerMove={() => {
-        if (!loopingRef.current) {
-          intervalRef.current = setInterval(handleScrollArrowChange, 1000 / 60)
-          loopingRef.current = true
+    <SheetController
+      onOpenChange={(val) => {
+        if (getShowSheet()) {
+          props.onOpenChange(val)
         }
       }}
-      onPointerLeave={() => {
-        loopingRef.current = false
-        clearInterval(intervalRef.current)
-      }}
-    />
+      open={context.open}
+      hidden={breakpointActive === false}
+    >
+      {props.children}
+    </SheetController>
   )
-})
+}
 
 /* -------------------------------------------------------------------------------------------------
- * SelectSeparator
+ * SelectSheetContents
  * -----------------------------------------------------------------------------------------------*/
 
-export const SelectSeparator = styled(Separator, {
-  name: 'SelectSeparator',
-})
+const SHEET_CONTENTS_NAME = 'SelectSheetContents'
+
+export const SelectSheetContents = ({ __scopeSelect }: ScopedProps<{}>) => {
+  const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect)
+  return <PortalHost name={`${context.scopeKey}SheetContents`} />
+}
+
+SelectSheetContents.displayName = SHEET_CONTENTS_NAME
+
+const SelectSheetImpl = (props: SelectImplProps) => {
+  return <>{props.children}</>
+}
 
 /* -------------------------------------------------------------------------------------------------
  * Select
  * -----------------------------------------------------------------------------------------------*/
 
-export interface SelectProps {
-  id?: string
-  children?: React.ReactNode
-  value?: string
-  defaultValue?: string
-  onValueChange?(value: string): void
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?(open: boolean): void
-  dir?: Direction
-  name?: string
-  autoComplete?: string
-  size?: SizeTokens
-}
-
 export const Select = withStaticProperties(
   (props: ScopedProps<SelectProps>) => {
     const {
-      // TODO use id for focusing from label
-      id,
       __scopeSelect,
       children,
       open: openProp,
@@ -773,532 +508,101 @@ export const Select = withStaticProperties(
       value: valueProp,
       defaultValue,
       onValueChange,
-      size: sizeProp,
+      size: sizeProp = '$4',
       dir,
-      name,
-      autoComplete,
     } = props
 
-    // const [trigger, setTrigger] = React.useState<SelectTriggerElement | null>(null)
+    const { when, AdaptProvider } = useAdaptParent({
+      Contents: SelectSheetContents,
+    })
+    const sheetBreakpoint = when || false
+    const isSheet = useSelectBreakpointActive(sheetBreakpoint)
+    const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl
+    const forceUpdate = React.useReducer(() => ({}), {})[1]
+    const [selectedItem, setSelectedItem] = React.useState<React.ReactNode>(null)
 
     const [open, setOpen] = useControllableState({
       prop: openProp,
       defaultProp: defaultOpen || false,
       onChange: onOpenChange,
+      strategy: 'most-recent-wins',
     })
 
     const [value, setValue] = useControllableState({
       prop: valueProp,
       defaultProp: defaultValue || '',
       onChange: onValueChange,
+      strategy: 'most-recent-wins',
     })
 
     const [activeIndex, setActiveIndex] = React.useState<number | null>(null)
     const selectedIndexRef = React.useRef<number | null>(null)
     const activeIndexRef = React.useRef<number | null>(null)
-    const prevActiveIndex = usePrevious<number | null>(activeIndex)
 
-    const [showArrows, setShowArrows] = React.useState(false)
-    const [scrollTop, setScrollTop] = React.useState(0)
-    const listItemsRef = React.useRef<Array<HTMLElement | null>>([])
     const listContentRef = React.useRef<string[]>([])
 
     const [selectedIndex, setSelectedIndex] = React.useState(
       Math.max(0, listContentRef.current.indexOf(value))
     )
 
-    const [controlledScrolling, setControlledScrolling] = React.useState(false)
-    const [middlewareType, setMiddlewareType] = React.useState<'align' | 'fallback'>('align')
+    const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)
+    const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)
 
     useIsomorphicLayoutEffect(() => {
       selectedIndexRef.current = selectedIndex
       activeIndexRef.current = activeIndex
     })
 
-    // Wait for scroll position to settle before showing arrows to prevent
-    // interference with pointer events.
-    React.useEffect(() => {
-      const frame = requestAnimationFrame(() => {
-        setShowArrows(open)
-
-        if (!open) {
-          setScrollTop(0)
-          setMiddlewareType('align')
-          setActiveIndex(null)
-          setControlledScrolling(false)
-        }
-      })
-      return () => {
-        cancelAnimationFrame(frame)
-      }
-    }, [open])
-
-    function getFloatingPadding(floating: HTMLElement | null) {
-      if (!floating) {
-        return 0
-      }
-      return Number(getComputedStyle(floating).paddingLeft?.replace('px', ''))
-    }
-
-    const { x, y, reference, floating, strategy, context, refs, middlewareData, update } =
-      useFloating({
-        open,
-        onOpenChange: setOpen,
-        placement: 'bottom',
-        middleware:
-          middlewareType === 'align'
-            ? [
-                offset(({ rects }) => {
-                  const index = activeIndexRef.current ?? selectedIndexRef.current
-
-                  if (index == null) {
-                    return 0
-                  }
-
-                  const item = listItemsRef.current[index]
-
-                  if (item == null) {
-                    return 0
-                  }
-
-                  const offsetTop = item.offsetTop
-                  const itemHeight = item.offsetHeight
-                  const height = rects.reference.height
-
-                  return -offsetTop - height - (itemHeight - height) / 2
-                }),
-                // Custom `size` that can handle the opposite direction of the placement
-                {
-                  name: 'size',
-                  async fn(args) {
-                    const {
-                      elements: { floating },
-                      rects: { reference },
-                      middlewareData,
-                    } = args
-
-                    const overflow = await detectOverflow(args, {
-                      padding: WINDOW_PADDING,
-                    })
-
-                    const top = Math.max(0, overflow.top)
-                    const bottom = Math.max(0, overflow.bottom)
-                    const nextY = args.y + top
-
-                    if (middlewareData.size?.skip) {
-                      return {
-                        y: nextY,
-                        data: {
-                          y: middlewareData.size.y,
-                        },
-                      }
-                    }
-
-                    Object.assign(floating.style, {
-                      maxHeight: `${floating.scrollHeight - Math.abs(top + bottom)}px`,
-                      minWidth: `${reference.width + getFloatingPadding(floating) * 2}px`,
-                    })
-
-                    return {
-                      y: nextY,
-                      data: {
-                        y: top,
-                        skip: true,
-                      },
-                      reset: {
-                        rects: true,
-                      },
-                    }
-                  },
-                },
-              ]
-            : [
-                offset(5),
-                flip(),
-                size({
-                  apply({ rects, availableHeight, elements }) {
-                    Object.assign(elements.floating.style, {
-                      width: `${rects.reference.width}px`,
-                      maxHeight: `${availableHeight}px`,
-                    })
-                  },
-                  padding: WINDOW_PADDING,
-                }),
-              ],
-      })
-
-    const floatingRef = refs.floating
-    const forceUpdate = React.useReducer(() => ({}), {})[1]
-
-    const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD
-    const showDownArrow =
-      showArrows &&
-      floatingRef.current &&
-      scrollTop <
-        floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD
-
-    const interactions = useInteractions([
-      useClick(context, { pointerDown: true }),
-      useRole(context, { role: 'listbox' }),
-      useDismiss(context),
-      useListNavigation(context, {
-        listRef: listItemsRef,
-        activeIndex,
-        selectedIndex,
-        onNavigate: setActiveIndex,
-      }),
-      useTypeahead(context, {
-        listRef: listContentRef,
-        onMatch: open ? setActiveIndex : setSelectedIndex,
-        selectedIndex,
-        activeIndex,
-      }),
-    ])
-
-    const increaseHeight = React.useCallback(
-      (floating: HTMLElement, amount = 0) => {
-        if (middlewareType === 'fallback') {
-          return
-        }
-
-        const currentMaxHeight = Number(floating.style.maxHeight.replace('px', ''))
-        const currentTop = Number(floating.style.top.replace('px', ''))
-        const rect = floating.getBoundingClientRect()
-        const rectTop = rect.top
-        const rectBottom = rect.bottom
-        const viewportHeight = visualViewport?.height ?? 0
-        const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2
-
-        if (
-          amount < 0 &&
-          selectedIndexRef.current != null &&
-          Math.round(rectBottom) <
-            Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)
-        ) {
-          floating.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`
-        }
-
-        if (
-          amount > 0 &&
-          Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) &&
-          floating.scrollHeight > floating.offsetHeight
-        ) {
-          const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount)
-
-          const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount)
-
-          Object.assign(floating.style, {
-            maxHeight: `${nextMaxHeight}px`,
-            top: `${nextTop}px`,
-          })
-
-          if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
-            floating.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating)
-          }
-
-          return currentTop - nextTop
-        }
-      },
-      [middlewareType]
-    )
-
-    const touchPageYRef = React.useRef<number | null>(null)
-
-    const handleWheel = React.useCallback(
-      (event: WheelEvent | TouchEvent) => {
-        const pinching = event.ctrlKey
-
-        const currentTarget = event.currentTarget as HTMLElement
-
-        function isWheelEvent(event: any): event is WheelEvent {
-          return typeof event.deltaY === 'number'
-        }
-
-        function isTouchEvent(event: any): event is TouchEvent {
-          return event.touches != null
-        }
-
-        if (
-          Math.abs(
-            (currentTarget?.offsetHeight ?? 0) -
-              ((visualViewport?.height ?? 0) - WINDOW_PADDING * 2)
-          ) > 1 &&
-          !pinching
-        ) {
-          event.preventDefault()
-        } else if (isWheelEvent(event) && isFirefox) {
-          // Firefox needs this to propagate scrolling
-          // during momentum scrolling phase if the
-          // height reached its maximum (at boundaries)
-          currentTarget.scrollTop += event.deltaY
-        }
-
-        if (!pinching) {
-          let delta = 5
-
-          if (isTouchEvent(event)) {
-            const currentPageY = touchPageYRef.current
-            const pageY = event.touches[0]?.pageY
-
-            if (pageY != null) {
-              touchPageYRef.current = pageY
-
-              if (currentPageY != null) {
-                delta = currentPageY - pageY
-              }
-            }
-          }
-
-          increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta)
-          setScrollTop(currentTarget.scrollTop)
-          // Ensure derived data (scroll arrows) is fresh
-          forceUpdate()
-        }
-      },
-      [increaseHeight, forceUpdate]
-    )
-
-    // Handle `onWheel` event in an effect to remove the `passive` option so we
-    // can .preventDefault() it
-    React.useEffect(() => {
-      function onTouchEnd() {
-        touchPageYRef.current = null
-      }
-
-      const floating = floatingRef.current
-      if (open && floating && middlewareType === 'align') {
-        floating.addEventListener('wheel', handleWheel)
-        floating.addEventListener('touchmove', handleWheel)
-        floating.addEventListener('touchend', onTouchEnd, { passive: true })
-        return () => {
-          floating.removeEventListener('wheel', handleWheel)
-          floating.removeEventListener('touchmove', handleWheel)
-          floating.removeEventListener('touchend', onTouchEnd)
-        }
-      }
-    }, [open, floatingRef, handleWheel, middlewareType])
-
-    // Ensure the menu remains attached to the reference element when resizing.
-    React.useEffect(() => {
-      window.addEventListener('resize', update)
-      return () => {
-        window.removeEventListener('resize', update)
-      }
-    }, [update])
-
-    // Scroll the active or selected item into view when in `controlledScrolling`
-    // mode (i.e. arrow key nav).
-    React.useLayoutEffect(() => {
-      const floating = floatingRef.current
-
-      if (open && controlledScrolling && floating) {
-        const item =
-          activeIndex != null
-            ? listItemsRef.current[activeIndex]
-            : selectedIndex != null
-            ? listItemsRef.current[selectedIndex]
-            : null
-
-        if (item && prevActiveIndex != null) {
-          const itemHeight = listItemsRef.current[prevActiveIndex]?.offsetHeight ?? 0
-
-          const floatingHeight = floating.offsetHeight
-          const top = item.offsetTop
-          const bottom = top + itemHeight
-
-          if (top < floating.scrollTop + 20) {
-            const diff = floating.scrollTop - top + 20
-            floating.scrollTop -= diff
-
-            if (activeIndex != selectedIndex && activeIndex != null) {
-              increaseHeight(floating, -diff)
-            }
-          } else if (bottom > floatingHeight + floating.scrollTop - 20) {
-            const diff = bottom - floatingHeight - floating.scrollTop + 20
-
-            floating.scrollTop += diff
-
-            if (activeIndex != selectedIndex && activeIndex != null) {
-              floating.scrollTop -= increaseHeight(floating, diff) ?? 0
-            }
-          }
-        }
-      }
-    }, [
-      open,
-      controlledScrolling,
-      prevActiveIndex,
-      activeIndex,
-      selectedIndex,
-      floatingRef,
-      increaseHeight,
-    ])
-
-    // Sync the height and the scrollTop values and device whether to use fallback
-    // positioning.
-    React.useLayoutEffect(() => {
-      const floating = refs.floating.current
-      const reference = refs.reference.current
-
-      if (open && floating && reference && floating.offsetHeight < floating.scrollHeight) {
-        const referenceRect = reference.getBoundingClientRect()
-
-        if (middlewareType === 'fallback') {
-          const item = listItemsRef.current[selectedIndex]
-          if (item) {
-            floating.scrollTop = item.offsetTop - floating.clientHeight + referenceRect.height
-          }
-          return
-        }
-
-        floating.scrollTop = middlewareData.size?.y
-
-        const closeToBottom =
-          (visualViewport?.height ?? 0) + getVisualOffsetTop() - referenceRect.bottom <
-          FALLBACK_THRESHOLD
-        const closeToTop = referenceRect.top < FALLBACK_THRESHOLD
-
-        if (floating.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
-          setMiddlewareType('fallback')
-        }
-      }
-    }, [
-      open,
-      increaseHeight,
-      selectedIndex,
-      middlewareType,
-      refs.floating,
-      refs.reference,
-      // Always re-run this effect when the position has been computed so the
-      // .scrollTop change works with fresh sizing.
-      middlewareData,
-    ])
-
-    React.useLayoutEffect(() => {
-      if (open && selectedIndex != null) {
-        requestAnimationFrame(() => {
-          listItemsRef.current[selectedIndex]?.focus({ preventScroll: true })
-        })
-      }
-    }, [listItemsRef, selectedIndex, open])
-
-    // Wait for scroll position to settle before showing arrows to prevent
-    // interference with pointer events.
-    React.useEffect(() => {
-      const frame = requestAnimationFrame(() => {
-        setShowArrows(open)
-
-        if (!open) {
-          setScrollTop(0)
-          setMiddlewareType('align')
-          setActiveIndex(null)
-          setControlledScrolling(false)
-        }
-      })
-      return () => cancelAnimationFrame(frame)
-    }, [open])
-
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true
-    // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)
-    // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)
-
-    const [valueNode, setValueNode] = React.useState<HTMLElement | null>(null)
-    const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)
+    const id = useId()
+    const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id
 
     return (
-      <SelectProvider
-        size={sizeProp}
-        scope={__scopeSelect}
-        increaseHeight={increaseHeight}
-        forceUpdate={forceUpdate}
-        floatingRef={floatingRef}
-        valueNode={valueNode}
-        onValueNodeChange={setValueNode}
-        valueNodeHasChildren={valueNodeHasChildren}
-        onValueNodeHasChildrenChange={setValueNodeHasChildren}
-        setValueAtIndex={(index, value) => {
-          listContentRef.current[index] = value
-        }}
-        interactions={{
-          ...interactions,
-          getReferenceProps() {
-            return interactions.getReferenceProps({
-              ref: reference,
-              className: 'SelectTrigger',
-              onKeyDown(event) {
-                if (
-                  event.key === 'Enter' ||
-                  (event.key === ' ' && !context.dataRef.current.typing)
-                ) {
-                  event.preventDefault()
-                  setOpen(true)
-                }
-              },
-            })
-          },
-          getFloatingProps(props) {
-            return interactions.getFloatingProps({
-              ref: floating,
-              className: 'Select',
-              ...props,
-              style: {
-                position: strategy,
-                top: y ?? '',
-                left: x ?? '',
-                outline: 0,
-                listStyleType: 'none',
-                scrollbarWidth: 'none',
-                userSelect: 'none',
-                ...props?.style,
-              },
-              onPointerEnter() {
-                setControlledScrolling(false)
-              },
-              onPointerMove() {
-                setControlledScrolling(false)
-              },
-              onKeyDown() {
-                setControlledScrolling(true)
-              },
-              onScroll(event) {
-                setScrollTop(event.currentTarget.scrollTop)
-              },
-            })
-          },
-        }}
-        floatingContext={context}
-        activeIndex={activeIndex}
-        canScrollDown={!!showDownArrow}
-        canScrollUp={!!showUpArrow}
-        controlledScrolling
-        dataRef={context.dataRef}
-        listRef={listItemsRef}
-        onChange={setValue}
-        selectedIndex={selectedIndex}
-        setActiveIndex={setActiveIndex}
-        setOpen={setOpen}
-        setSelectedIndex={setSelectedIndex}
-        value={value}
-        open={open}
-      >
-        {children}
-        {/* {isFormControl ? (
-        <BubbleSelect
-          ref={setBubbleSelect}
-          aria-hidden
-          tabIndex={-1}
-          name={name}
-          autoComplete={autoComplete}
+      <AdaptProvider>
+        <SelectProvider
+          dir={dir}
+          blockSelection={false}
+          size={sizeProp}
+          fallback={false}
+          selectedItem={selectedItem}
+          setSelectedItem={setSelectedItem}
+          forceUpdate={forceUpdate}
+          valueNode={valueNode}
+          onValueNodeChange={setValueNode}
+          onValueNodeHasChildrenChange={setValueNodeHasChildren}
+          valueNodeHasChildren={valueNodeHasChildren}
+          scopeKey={scopeKey}
+          sheetBreakpoint={sheetBreakpoint}
+          scope={__scopeSelect}
+          setValueAtIndex={(index, value) => {
+            listContentRef.current[index] = value
+          }}
+          activeIndex={activeIndex}
+          onChange={setValue}
+          selectedIndex={selectedIndex}
+          setActiveIndex={setActiveIndex}
+          setOpen={setOpen}
+          setSelectedIndex={setSelectedIndex}
           value={value}
-          // enable form autofill
-          onChange={(event) => setValue(event.target.value)}
-        />
-      ) : null} */}
-      </SelectProvider>
+          open={open}
+        >
+          <SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}>
+            <SelectImpl
+              activeIndexRef={activeIndexRef}
+              listContentRef={listContentRef}
+              selectedIndexRef={selectedIndexRef}
+              {...props}
+              open={open}
+              value={value}
+            >
+              {children}
+            </SelectImpl>
+          </SelectSheetController>
+        </SelectProvider>
+      </AdaptProvider>
     )
   },
   {
+    Adapt,
     Content: SelectContent,
     Group: SelectGroup,
     Icon: SelectIcon,
@@ -1311,10 +615,10 @@ export const Select = withStaticProperties(
     Trigger: SelectTrigger,
     Value: SelectValue,
     Viewport: SelectViewport,
+    SheetContents: SelectSheetContents,
+    Sheet: ControlledSheet,
   }
 )
 
 // @ts-ignore
 Select.displayName = SELECT_NAME
-
-export { createSelectScope }