@tamagui/select 1.0.1-beta.128 → 1.0.1-beta.131

package/src/SelectImpl.tsx

@@ -15,7 +15,7 @@ import {
   useRole,
   useTypeahead,
 } from '@floating-ui/react-dom-interactions'
-import { useIsTouchDevice } from '@tamagui/core'
+import { useIsTouchDevice, useIsomorphicLayoutEffect } from '@tamagui/core'
 import * as React from 'react'
 import { flushSync } from 'react-dom'
 
@@ -200,6 +200,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
           state.current.isMouseOutside = true
         },
         onPointerMove() {
+          state.current.isMouseOutside = false
           setControlledScrolling(false)
         },
         onKeyDown() {
@@ -219,7 +220,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
 
   // effects
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (open) {
       selectTimeoutRef.current = setTimeout(() => {
         allowSelectRef.current = true
@@ -239,7 +240,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
 
   // Replacement for `useDismiss` as the arrows are outside of the floating
   // element DOM tree.
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     function onPointerDown(e: PointerEvent) {
       const target = e.target as Node
       if (
@@ -248,6 +249,7 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
         !downArrowRef.current?.contains(target)
       ) {
         setOpen(false)
+        setControlledScrolling(false)
       }
     }
 
@@ -261,32 +263,28 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
 
   // Scroll the `activeIndex` item into view only in "controlledScrolling"
   // (keyboard nav) mode.
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (open && controlledScrolling) {
-      requestAnimationFrame(() => {
-        if (activeIndex != null) {
-          listItemsRef.current[activeIndex]?.scrollIntoView({ block: 'nearest' })
-        }
-      })
+      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.
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (open && fallback) {
-      requestAnimationFrame(() => {
-        if (selectedIndex != null) {
-          listItemsRef.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })
-        }
-      })
+      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.
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (refs.floating.current && fallback) {
       refs.floating.current.style.maxHeight = ''
     }
@@ -342,8 +340,3 @@ export const SelectInlineImpl = (props: SelectImplProps) => {
 
 // Cross browser fixes for pinch-zooming/backdrop-filter 🙄
 const userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''
-const isFirefox = userAgent.toLowerCase().includes('firefox')
-
-function getVisualOffsetTop() {
-  return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport?.offsetTop ?? 0 : 0
-}

package/src/SelectScrollButton.tsx

@@ -1,6 +1,6 @@
 import { autoUpdate, offset, useFloating } from '@floating-ui/react-dom-interactions'
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { TamaguiElement } from '@tamagui/core'
+import { TamaguiElement, useIsomorphicLayoutEffect } from '@tamagui/core'
 import { YStack } from '@tamagui/stacks'
 import * as React from 'react'
 import { flushSync } from 'react-dom'
@@ -85,7 +85,7 @@ const SelectScrollButtonImpl = React.memo(
         }
       }
 
-      React.useLayoutEffect(() => {
+      useIsomorphicLayoutEffect(() => {
         return () => {
           // eslint-disable-next-line react-hooks/exhaustive-deps
           cancelAnimationFrame(frameRef.current)

package/src/SelectViewport.tsx

@@ -62,16 +62,14 @@ export const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportPro
 
     return (
       <>
-        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}
         <style
           dangerouslySetInnerHTML={{
-            __html: disableScrollbarCSS,
+            __html: selectViewportCSS,
           }}
         />
         <FloatingFocusManager context={context.floatingContext} preventTabbing>
           <SelectViewportFrame
             size={context.size}
-            data-tamagui-select-viewport=""
             // @ts-ignore
             role="presentation"
             {...viewportProps}
@@ -89,8 +87,14 @@ export const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportPro
 
 SelectViewport.displayName = VIEWPORT_NAME
 
-const disableScrollbarCSS = `[data-tamagui-select-viewport]{
-  scrollbar-width:none;-webkit-overflow-scrolling:touch;
+const selectViewportCSS = `
+.is_SelectViewport {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
-[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`
+
+.is_SelectViewport::-webkit-scrollbar{
+  display:none
+}
+`