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

package/src/SelectContent.native.tsx

@@ -0,0 +1,5 @@
+import { SelectContentProps } from './types'
+
+export const SelectContent = ({ children }: SelectContentProps) => {
+  return children
+}

package/src/SelectContent.tsx

@@ -0,0 +1,45 @@
+import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'
+import { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'
+import { Dismissable } from '@tamagui/dismissable'
+import { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'
+
+import { useSelectContext } from './context'
+import { SelectContentProps } from './types'
+import { useShowSelectSheet } from './useSelectBreakpointActive'
+
+/* -------------------------------------------------------------------------------------------------
+ * SelectContent
+ * -----------------------------------------------------------------------------------------------*/
+
+const CONTENT_NAME = 'SelectContent'
+
+export const SelectContent = ({
+  children,
+  __scopeSelect,
+  zIndex = 1000,
+  ...focusScopeProps
+}: SelectContentProps & FocusScopeProps) => {
+  const context = useSelectContext(CONTENT_NAME, __scopeSelect)
+  const themeName = useThemeName()
+  const showSheet = useShowSelectSheet(context)
+  const contents = <Theme name={themeName}>{children}</Theme>
+  const touch = useIsTouchDevice()
+
+  if (showSheet && context.open) {
+    return contents
+  }
+
+  return (
+    <FloatingPortal>
+      {context.open ? (
+        <FloatingOverlay style={{ zIndex }} lockScroll={!touch}>
+          <FocusScope loop trapped {...focusScopeProps}>
+            <Dismissable disableOutsidePointerEvents>{contents}</Dismissable>
+          </FocusScope>
+        </FloatingOverlay>
+      ) : (
+        <div style={{ display: 'none' }}>{contents}</div>
+      )}
+    </FloatingPortal>
+  )
+}

package/src/SelectImpl.tsx

@@ -0,0 +1,344 @@
+import {
+  SideObject,
+  autoUpdate,
+  flip,
+  inner,
+  offset,
+  shift,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInnerOffset,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+} from '@floating-ui/react-dom-interactions'
+import { isWeb, useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'
+import * as React from 'react'
+import { flushSync } from 'react-dom'
+
+import { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'
+import { SelectProvider, useSelectContext } from './context'
+import { ScopedProps, SelectProps } from './types'
+
+export type SelectImplProps = ScopedProps<SelectProps> & {
+  activeIndexRef: any
+  selectedIndexRef: any
+  listContentRef: any
+}
+
+// TODO use id for focusing from label
+export const SelectInlineImpl = (props: SelectImplProps) => {
+  const { __scopeSelect, children, open = false, selectedIndexRef, listContentRef } = props
+
+  const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)
+  const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } =
+    selectContext
+  const [scrollTop, setScrollTop] = React.useState(0)
+  const touch = useIsTouchDevice()
+
+  const listItemsRef = React.useRef<Array<HTMLElement | null>>([])
+  const overflowRef = React.useRef<null | SideObject>(null)
+  const upArrowRef = React.useRef<HTMLDivElement | null>(null)
+  const downArrowRef = React.useRef<HTMLDivElement | null>(null)
+  const allowSelectRef = React.useRef(false)
+  const allowMouseUpRef = React.useRef(true)
+  const selectTimeoutRef = React.useRef<any>()
+  const state = React.useRef({
+    isMouseOutside: false,
+  })
+
+  const [controlledScrolling, setControlledScrolling] = React.useState(false)
+  const [fallback, setFallback] = React.useState(false)
+  const [innerOffset, setInnerOffset] = React.useState(0)
+  const [blockSelection, setBlockSelection] = React.useState(false)
+  const floatingStyle = React.useRef({})
+
+  // Wait for scroll position to settle before showing arrows to prevent
+  // interference with pointer events.
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (!open) {
+        setScrollTop(0)
+        setFallback(false)
+        setActiveIndex(null)
+        setControlledScrolling(false)
+      }
+    })
+    return () => {
+      cancelAnimationFrame(frame)
+    }
+  }, [open, setActiveIndex])
+
+  // close when mouseup outside select
+  if (isWeb) {
+    React.useEffect(() => {
+      if (!open) return
+      const mouseUp = (e: MouseEvent) => {
+        if (state.current.isMouseOutside) {
+          setOpen(false)
+        }
+      }
+      document.addEventListener('mouseup', mouseUp)
+      return () => {
+        document.removeEventListener('mouseup', mouseUp)
+      }
+    }, [open])
+  }
+
+  const updateFloatingSize = size({
+    apply({
+      availableHeight,
+      rects: {
+        reference: { width },
+      },
+    }) {
+      floatingStyle.current = {
+        width: width,
+        maxHeight: availableHeight,
+      }
+    },
+    padding: WINDOW_PADDING,
+  })
+
+  const { x, y, reference, floating, strategy, context, refs } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    placement: 'bottom-start',
+    middleware: fallback
+      ? [
+          offset(5),
+          ...[
+            touch
+              ? shift({ crossAxis: true, padding: WINDOW_PADDING })
+              : flip({ padding: WINDOW_PADDING }),
+          ],
+          updateFloatingSize,
+        ]
+      : [
+          inner({
+            listRef: listItemsRef,
+            overflowRef,
+            index: selectedIndex,
+            offset: innerOffset,
+            onFallbackChange: setFallback,
+            padding: 10,
+            minItemsVisible: touch ? 10 : 4,
+            referenceOverflowThreshold: 20,
+          }),
+          updateFloatingSize,
+        ],
+  })
+
+  const floatingRef = refs.floating
+
+  const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD
+  const showDownArrow =
+    open &&
+    floatingRef.current &&
+    scrollTop <
+      floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD
+
+  const interactions = useInteractions([
+    useClick(context, { event: 'mousedown' }),
+    useDismiss(context, { outsidePress: false }),
+    useRole(context, { role: 'listbox' }),
+    useInnerOffset(context, {
+      enabled: !fallback,
+      onChange: setInnerOffset,
+      overflowRef,
+    }),
+    useListNavigation(context, {
+      listRef: listItemsRef,
+      activeIndex,
+      selectedIndex,
+      onNavigate: setActiveIndex,
+    }),
+    useTypeahead(context, {
+      listRef: listContentRef,
+      onMatch: open ? setActiveIndex : setSelectedIndex,
+      selectedIndex,
+      activeIndex,
+    }),
+  ])
+
+  const interactionsContext = {
+    ...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',
+          ...floatingStyle.current,
+          ...props?.style,
+        },
+        onPointerEnter() {
+          setControlledScrolling(false)
+          state.current.isMouseOutside = false
+        },
+        onPointerLeave() {
+          state.current.isMouseOutside = true
+        },
+        onPointerMove() {
+          state.current.isMouseOutside = false
+          setControlledScrolling(false)
+        },
+        onKeyDown() {
+          setControlledScrolling(true)
+        },
+        onContextMenu(e) {
+          e.preventDefault()
+        },
+        onScroll(event) {
+          // In React 18, the ScrollArrows need to synchronously know this value to prevent
+          // painting at the wrong time.
+          flushSync(() => setScrollTop(event.currentTarget.scrollTop))
+        },
+      })
+    },
+  }
+
+  // effects
+
+  useIsomorphicLayoutEffect(() => {
+    if (open) {
+      selectTimeoutRef.current = setTimeout(() => {
+        allowSelectRef.current = true
+      }, 300)
+
+      return () => {
+        clearTimeout(selectTimeoutRef.current)
+      }
+    } else {
+      allowSelectRef.current = false
+      allowMouseUpRef.current = true
+      setInnerOffset(0)
+      setFallback(false)
+      setBlockSelection(false)
+    }
+  }, [open])
+
+  // Replacement for `useDismiss` as the arrows are outside of the floating
+  // element DOM tree.
+  useIsomorphicLayoutEffect(() => {
+    function onPointerDown(e: PointerEvent) {
+      const target = e.target as Node
+      if (
+        !refs.floating.current?.contains(target) &&
+        !upArrowRef.current?.contains(target) &&
+        !downArrowRef.current?.contains(target)
+      ) {
+        setOpen(false)
+        setControlledScrolling(false)
+      }
+    }
+
+    if (open) {
+      document.addEventListener('pointerdown', onPointerDown)
+      return () => {
+        document.removeEventListener('pointerdown', onPointerDown)
+      }
+    }
+  }, [open, refs, setOpen])
+
+  // Scroll the `activeIndex` item into view only in "controlledScrolling"
+  // (keyboard nav) mode.
+  useIsomorphicLayoutEffect(() => {
+    if (open && controlledScrolling) {
+      if (activeIndex != null) {
+        listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })
+      }
+    }
+
+    setScrollTop(refs.floating.current?.scrollTop ?? 0)
+  }, [open, refs, controlledScrolling, activeIndex])
+
+  // Scroll the `selectedIndex` into view upon opening the floating element.
+  useIsomorphicLayoutEffect(() => {
+    if (open && fallback) {
+      if (selectedIndex != null) {
+        listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })
+      }
+    }
+  }, [open, fallback, selectedIndex])
+
+  // Unset the height limiting for fallback mode. This gets executed prior to
+  // the positioning call.
+  useIsomorphicLayoutEffect(() => {
+    if (refs.floating.current && fallback) {
+      refs.floating.current.style.maxHeight = ''
+    }
+  }, [refs, fallback])
+
+  // 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)
+
+  return (
+    <SelectProvider
+      scope={__scopeSelect}
+      {...(selectContext as Required<typeof selectContext>)}
+      setScrollTop={setScrollTop}
+      setInnerOffset={setInnerOffset}
+      floatingRef={floatingRef}
+      setValueAtIndex={(index, value) => {
+        listContentRef.current[index] = value
+      }}
+      fallback={fallback}
+      interactions={interactionsContext}
+      floatingContext={context}
+      activeIndex={activeIndex}
+      canScrollDown={!!showDownArrow}
+      canScrollUp={!!showUpArrow}
+      controlledScrolling
+      dataRef={context.dataRef}
+      listRef={listItemsRef}
+      blockSelection={blockSelection}
+      allowMouseUpRef={allowMouseUpRef}
+      upArrowRef={upArrowRef}
+      downArrowRef={downArrowRef}
+      selectTimeoutRef={selectTimeoutRef}
+      allowSelectRef={allowSelectRef}
+    >
+      {children}
+      {/* {isFormControl ? (
+            <BubbleSelect
+              ref={setBubbleSelect}
+              aria-hidden
+              tabIndex={-1}
+              name={name}
+              autoComplete={autoComplete}
+              value={value}
+              // enable form autofill
+              onChange={(event) => setValue(event.target.value)}
+            />
+          ) : null} */}
+    </SelectProvider>
+  )
+}
+
+// Cross browser fixes for pinch-zooming/backdrop-filter 🙄
+const userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''

package/src/SelectScrollButton.native.tsx

@@ -0,0 +1,7 @@
+import { ScopedProps, SelectScrollButtonProps } from './types'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const SelectScrollUpButton = (_: ScopedProps<SelectScrollButtonProps>) => null
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const SelectScrollDownButton = (_: ScopedProps<SelectScrollButtonProps>) => null

package/src/SelectScrollButton.tsx

@@ -0,0 +1,168 @@
+import { autoUpdate, offset, useFloating } from '@floating-ui/react-dom-interactions'
+import { useComposedRefs } from '@tamagui/compose-refs'
+import { TamaguiElement, useIsomorphicLayoutEffect } from '@tamagui/core'
+import { YStack } from '@tamagui/stacks'
+import * as React from 'react'
+import { flushSync } from 'react-dom'
+
+import { useSelectContext } from './context'
+import { ScopedProps, SelectScrollButtonImplProps, SelectScrollButtonProps } from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * SelectScrollUpButton
+ * -----------------------------------------------------------------------------------------------*/
+
+const SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'
+
+export 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
+ * -----------------------------------------------------------------------------------------------*/
+
+const SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'
+
+export 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
+
+const SelectScrollButtonImpl = React.memo(
+  React.forwardRef<SelectScrollButtonImplElement, SelectScrollButtonImplProps>(
+    (props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {
+      const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props
+      const { floatingRef, forceUpdate, open, fallback, setScrollTop, setInnerOffset, ...context } =
+        useSelectContext(componentName, __scopeSelect)
+
+      const [element, setElement] = React.useState<HTMLElement | null>(null)
+      const statusRef = React.useRef<'idle' | 'active'>('idle')
+      const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']
+      const frameRef = React.useRef<any>()
+
+      const { x, y, reference, floating, strategy, update, refs } = useFloating({
+        strategy: 'fixed',
+        placement: dir === 'up' ? 'top' : 'bottom',
+        middleware: [offset(({ rects }) => -rects.floating.height)],
+        whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true }),
+      })
+
+      const composedRef = useComposedRefs(forwardedRef, floating)
+
+      if (floatingRef) {
+        if (open) {
+          if (element !== floatingRef.current) {
+            setElement(floatingRef.current)
+            reference(floatingRef.current)
+            requestAnimationFrame(update)
+          }
+        } else {
+          cancelAnimationFrame(frameRef.current)
+        }
+      }
+
+      useIsomorphicLayoutEffect(() => {
+        return () => {
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          cancelAnimationFrame(frameRef.current)
+        }
+      }, [])
+
+      if (!isVisible || !floatingRef) {
+        return null
+      }
+
+      const onScroll = (amount: number) => {
+        if (fallback) {
+          if (refs.floating.current) {
+            refs.floating.current.scrollTop -= amount
+            flushSync(() => setScrollTop!(refs.floating.current?.scrollTop ?? 0))
+          }
+        } else {
+          flushSync(() => setInnerOffset!((value) => value - amount))
+        }
+      }
+
+      return (
+        <YStack
+          ref={composedRef}
+          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)`}
+          onPointerEnter={() => {
+            statusRef.current = 'active'
+            let prevNow = Date.now()
+
+            function frame() {
+              if (element) {
+                const currentNow = Date.now()
+                const msElapsed = currentNow - prevNow
+                prevNow = currentNow
+
+                const pixelsToScroll = msElapsed / 2
+
+                const remainingPixels =
+                  dir === 'up'
+                    ? element.scrollTop
+                    : element.scrollHeight - element.clientHeight - element.scrollTop
+
+                const scrollRemaining =
+                  dir === 'up'
+                    ? element.scrollTop - pixelsToScroll > 0
+                    : element.scrollTop + pixelsToScroll <
+                      element.scrollHeight - element.clientHeight
+
+                onScroll(
+                  dir === 'up'
+                    ? Math.min(pixelsToScroll, remainingPixels)
+                    : Math.max(-pixelsToScroll, -remainingPixels)
+                )
+
+                if (scrollRemaining) {
+                  frameRef.current = requestAnimationFrame(frame)
+                }
+              }
+            }
+
+            cancelAnimationFrame(frameRef.current)
+            frameRef.current = requestAnimationFrame(frame)
+          }}
+          onPointerLeave={() => {
+            statusRef.current = 'idle'
+            cancelAnimationFrame(frameRef.current)
+          }}
+        />
+      )
+    }
+  )
+)

package/src/SelectViewport.native.tsx

@@ -0,0 +1,14 @@
+import { PortalItem } from '@tamagui/portal'
+import * as React from 'react'
+
+import { VIEWPORT_NAME } from './constants'
+import { useSelectContext } from './context'
+import { ScopedProps, SelectViewportProps } from './types'
+
+export const SelectViewport = (props: ScopedProps<SelectViewportProps>) => {
+  const { __scopeSelect, children } = props
+  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)
+  return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>
+}
+
+SelectViewport.displayName = VIEWPORT_NAME

package/src/SelectViewport.tsx

@@ -0,0 +1,104 @@
+import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'
+import { TamaguiElement, isWeb } from '@tamagui/core'
+import { styled } from '@tamagui/core'
+import { PortalItem } from '@tamagui/portal'
+import { ThemeableStack } from '@tamagui/stacks'
+import * as React from 'react'
+
+import { VIEWPORT_NAME } from './constants'
+import { ForwardSelectContext, useSelectContext } from './context'
+import { ScopedProps, SelectViewportProps } from './types'
+import { useSelectBreakpointActive } from './useSelectBreakpointActive'
+
+/* -------------------------------------------------------------------------------------------------
+ * 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,
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: '$2',
+  },
+})
+
+export const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(
+  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {
+    const { __scopeSelect, children, ...viewportProps } = props
+    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)
+    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)
+
+    if (breakpointActive || !isWeb) {
+      return (
+        <PortalItem hostName={`${context.scopeKey}SheetContents`}>
+          <ForwardSelectContext context={context}>{children}</ForwardSelectContext>
+        </PortalItem>
+      )
+    }
+
+    if (!context.floatingContext) {
+      return null
+    }
+
+    if (!context.open) {
+      return children
+    }
+
+    const {
+      style: { scrollbarWidth, listStyleType, ...restStyle },
+      ...floatingProps
+    } = context.interactions!.getFloatingProps()
+
+    return (
+      <>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: selectViewportCSS,
+          }}
+        />
+        <FloatingFocusManager context={context.floatingContext}>
+          <SelectViewportFrame
+            size={context.size}
+            // @ts-ignore
+            role="presentation"
+            {...viewportProps}
+            ref={forwardedRef}
+            {...floatingProps}
+            {...restStyle}
+          >
+            {children}
+          </SelectViewportFrame>
+        </FloatingFocusManager>
+      </>
+    )
+  }
+)
+
+SelectViewport.displayName = VIEWPORT_NAME
+
+const selectViewportCSS = `
+.is_SelectViewport {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.is_SelectViewport::-webkit-scrollbar{
+  display:none
+}
+`

package/src/constants.tsx

@@ -0,0 +1,7 @@
+export const SELECT_NAME = 'Select'
+export const WINDOW_PADDING = 8
+export const SCROLL_ARROW_VELOCITY = 8
+export const SCROLL_ARROW_THRESHOLD = 8
+export const MIN_HEIGHT = 80
+export const FALLBACK_THRESHOLD = 16
+export const VIEWPORT_NAME = 'SelectViewport'