@tamagui/select 1.0.1-beta.113 → 1.0.1-beta.116

package/src/SelectViewport.native.tsx

@@ -0,0 +1,17 @@
+import { TamaguiElement } from '@tamagui/core'
+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 = React.forwardRef<TamaguiElement, SelectViewportProps>(
+  (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,86 @@
+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 { useSelectContext } from './context'
+import { useSelectBreakpointActive } from './Select'
+import { ScopedProps, SelectViewportProps } from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * 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 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() ?? {}
+    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)
+
+    if (breakpointActive || !isWeb) {
+      return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>
+    }
+
+    if (!context.floatingContext) {
+      return null
+    }
+
+    // TODO
+    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

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'

package/src/context.tsx

@@ -0,0 +1,9 @@
+import { createContextScope } from '@tamagui/create-context'
+
+import { SELECT_NAME } from './constants'
+import { SelectContextValue } from './types'
+
+export const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)
+
+export const [SelectProvider, useSelectContext] =
+  createSelectContext<SelectContextValue>(SELECT_NAME)

package/src/index.tsx

@@ -1 +1,8 @@
 export * from './Select'
+export type {
+  SelectContentProps,
+  SelectProps,
+  SelectScrollButtonProps,
+  SelectViewportProps,
+} from './types'
+export * from './context'

package/src/types.tsx

@@ -0,0 +1,83 @@
+import type {
+  ContextData,
+  FloatingContext,
+  ReferenceType,
+} from '@floating-ui/react-dom-interactions'
+import type { MediaPropKeys, SizeTokens } from '@tamagui/core'
+import type { Scope } from '@tamagui/create-context'
+import type { ThemeableStackProps, YStackProps } from '@tamagui/stacks'
+import type { DispatchWithoutAction, HTMLProps, MutableRefObject, ReactNode } from 'react'
+
+export type Direction = 'ltr' | 'rtl'
+
+export type ScopedProps<P> = P & { __scopeSelect?: Scope }
+
+export interface SelectProps {
+  id?: string
+  children?: 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
+  sheetBreakpoint?: MediaPropKeys | false
+}
+
+type NonNull<A> = Exclude<A, void | null>
+
+export interface SelectContextValue {
+  dir?: Direction
+  scopeKey: string
+  sheetBreakpoint: NonNull<SelectProps['sheetBreakpoint']>
+  size?: SizeTokens
+  value: any
+  selectedItem: ReactNode
+  setSelectedItem: (item: ReactNode) => void
+  selectedIndex: number
+  setSelectedIndex: (index: number) => void
+  activeIndex: number | null
+  setActiveIndex: (index: number | null) => void
+  setValueAtIndex: (index: number, value: string) => void
+  open: boolean
+  setOpen: (open: boolean) => void
+  onChange: (value: string) => void
+  valueNode: Element | null
+  onValueNodeChange(node: HTMLElement): void
+  valueNodeHasChildren: boolean
+  onValueNodeHasChildrenChange(hasChildren: boolean): void
+  forceUpdate: DispatchWithoutAction
+
+  // InlineImpl only:
+  dataRef?: MutableRefObject<ContextData>
+  controlledScrolling?: boolean
+  listRef?: MutableRefObject<Array<HTMLElement | null>>
+  floatingRef?: MutableRefObject<HTMLElement | null>
+  canScrollUp?: boolean
+  canScrollDown?: boolean
+  floatingContext?: FloatingContext<ReferenceType>
+  increaseHeight?: (floating: HTMLElement, amount?: any) => number | undefined
+  interactions?: {
+    getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => any
+    getFloatingProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any
+    getItemProps: (userProps?: HTMLProps<HTMLElement> | undefined) => any
+  }
+}
+
+export type SelectViewportProps = ThemeableStackProps & {
+  size?: SizeTokens
+}
+
+export type SelectContentProps = ScopedProps<{ children?: React.ReactNode }>
+
+export interface SelectScrollButtonImplProps extends YStackProps {
+  dir: 'up' | 'down'
+  componentName: string
+}
+
+export interface SelectScrollButtonProps
+  extends Omit<SelectScrollButtonImplProps, 'dir' | 'componentName'> {}