@tamagui/select 1.0.1-beta.118 → 1.0.1-beta.121

package/dist/jsx/SelectScrollButton.js

@@ -2,7 +2,7 @@ import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom-interact
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
-import { SCROLL_ARROW_THRESHOLD, SCROLL_ARROW_VELOCITY } from "./constants";
+import { flushSync } from "react-dom";
 import { useSelectContext } from "./context";
 const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
 const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
@@ -17,58 +17,72 @@ SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 const SelectScrollButtonImpl = React.memo(React.forwardRef((props, forwardedRef) => {
   var _a, _b;
   const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props;
-  const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(componentName, __scopeSelect);
-  const intervalRef = React.useRef();
-  const loopingRef = React.useRef(false);
+  const { floatingRef, forceUpdate, open, fallback, setScrollTop, setInnerOffset, ...context } = useSelectContext(componentName, __scopeSelect);
+  const [element, setElement] = React.useState(null);
+  const statusRef = React.useRef("idle");
   const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
+  const frameRef = React.useRef();
   const { x, y, reference, floating, strategy, update, refs } = useFloating({
     strategy: "fixed",
     placement: dir === "up" ? "top" : "bottom",
-    middleware: [offset(({ rects }) => -rects.floating.height)]
+    middleware: [offset(({ rects }) => -rects.floating.height)],
+    whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true })
   });
-  const composedRefs = useComposedRefs(forwardedRef, floating);
-  React.useLayoutEffect(() => {
-    if (!floatingRef)
-      return;
-    reference(floatingRef.current);
-  }, [reference, floatingRef == null ? void 0 : floatingRef.current]);
-  React.useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current || !isVisible) {
-      return;
+  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);
     }
-    const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-      animationFrame: true
-    });
+  }
+  React.useLayoutEffect(() => {
     return () => {
-      clearInterval(intervalRef.current);
-      loopingRef.current = false;
-      cleanup();
+      cancelAnimationFrame(frameRef.current);
     };
-  }, [isVisible, update, refs.floating, refs.reference]);
-  if (!isVisible) {
+  }, []);
+  if (!isVisible || !floatingRef) {
     return null;
   }
-  const handleScrollArrowChange = () => {
-    if (!floatingRef)
-      return;
-    const floating2 = floatingRef.current;
-    const isUp = dir === "up";
-    if (floating2) {
-      const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY;
-      const multi = isUp && floating2.scrollTop <= SCROLL_ARROW_THRESHOLD * 2 || !isUp && floating2.scrollTop >= floating2.scrollHeight - floating2.clientHeight - SCROLL_ARROW_THRESHOLD * 2 ? 2 : 1;
-      floating2.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY);
-      increaseHeight == null ? void 0 : increaseHeight(floating2, multi === 2 ? value * 2 : value);
-      forceUpdate();
+  const onScroll = (amount) => {
+    if (fallback) {
+      if (refs.floating.current) {
+        refs.floating.current.scrollTop -= amount;
+        flushSync(() => {
+          var _a2, _b2;
+          return setScrollTop((_b2 = (_a2 = refs.floating.current) == null ? void 0 : _a2.scrollTop) != null ? _b2 : 0);
+        });
+      }
+    } else {
+      flushSync(() => setInnerOffset((value) => value - amount));
     }
   };
-  return <YStack ref={composedRefs} componentName={componentName} aria-hidden {...scrollIndicatorProps} zIndex={1e3} position={strategy} left={x || 0} top={y || 0} width={`calc(${((_b = (_a = floatingRef == null ? void 0 : floatingRef.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0) - 2}px)`} onPointerMove={() => {
-    if (!loopingRef.current) {
-      intervalRef.current = setInterval(handleScrollArrowChange, 1e3 / 60);
-      loopingRef.current = true;
+  return <YStack ref={composedRef} componentName={componentName} aria-hidden {...scrollIndicatorProps} zIndex={1e3} position={strategy} left={x || 0} top={y || 0} width={`calc(${((_b = (_a = floatingRef == null ? void 0 : floatingRef.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 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={() => {
-    loopingRef.current = false;
-    clearInterval(intervalRef.current);
+    statusRef.current = "idle";
+    cancelAnimationFrame(frameRef.current);
   }} />;
 }));
 export {

package/dist/jsx/SelectScrollButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectScrollButton.tsx"],
-  "sourcesContent": ["import { autoUpdate, offset, useFloating } from '@floating-ui/react-dom-interactions'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { TamaguiElement } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { SCROLL_ARROW_THRESHOLD, SCROLL_ARROW_VELOCITY } from './constants'\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectScrollButtonImplProps, SelectScrollButtonProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'\n\nexport const SelectScrollUpButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n    return (\n      <SelectScrollButtonImpl\n        componentName={SCROLL_UP_BUTTON_NAME}\n        {...props}\n        dir=\"up\"\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'\n\nexport const SelectScrollDownButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n    return (\n      <SelectScrollButtonImpl\n        componentName={SCROLL_DOWN_BUTTON_NAME}\n        {...props}\n        dir=\"down\"\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME\n\ntype SelectScrollButtonImplElement = TamaguiElement\n\nconst SelectScrollButtonImpl = React.memo(\n  React.forwardRef<SelectScrollButtonImplElement, SelectScrollButtonImplProps>(\n    (props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n      const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props\n      const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(\n        componentName,\n        __scopeSelect\n      )\n      const intervalRef = React.useRef<any>()\n      const loopingRef = React.useRef(false)\n      const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']\n\n      const { x, y, reference, floating, strategy, update, refs } = useFloating({\n        strategy: 'fixed',\n        placement: dir === 'up' ? 'top' : 'bottom',\n        middleware: [offset(({ rects }) => -rects.floating.height)],\n      })\n\n      const composedRefs = useComposedRefs(forwardedRef, floating)\n\n      React.useLayoutEffect(() => {\n        if (!floatingRef) return\n        reference(floatingRef.current)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [reference, floatingRef?.current])\n\n      React.useEffect(() => {\n        if (!refs.reference.current || !refs.floating.current || !isVisible) {\n          return\n        }\n\n        const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {\n          animationFrame: true,\n        })\n\n        return () => {\n          clearInterval(intervalRef.current)\n          loopingRef.current = false\n          cleanup()\n        }\n      }, [isVisible, update, refs.floating, refs.reference])\n\n      if (!isVisible) {\n        return null\n      }\n\n      const handleScrollArrowChange = () => {\n        if (!floatingRef) return\n        const floating = floatingRef.current\n        const isUp = dir === 'up'\n\n        if (floating) {\n          const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY\n          const multi =\n            (isUp && floating.scrollTop <= SCROLL_ARROW_THRESHOLD * 2) ||\n            (!isUp &&\n              floating.scrollTop >=\n                floating.scrollHeight - floating.clientHeight - SCROLL_ARROW_THRESHOLD * 2)\n              ? 2\n              : 1\n\n          floating.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY)\n\n          increaseHeight?.(floating, multi === 2 ? value * 2 : value)\n          // Ensure derived data (scroll arrows) is fresh\n          forceUpdate()\n        }\n      }\n\n      return (\n        <YStack\n          ref={composedRefs}\n          componentName={componentName}\n          aria-hidden\n          {...scrollIndicatorProps}\n          zIndex={1000}\n          // @ts-expect-error\n          position={strategy}\n          left={x || 0}\n          top={y || 0}\n          width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`}\n          onPointerMove={() => {\n            if (!loopingRef.current) {\n              intervalRef.current = setInterval(handleScrollArrowChange, 1000 / 60)\n              loopingRef.current = true\n            }\n          }}\n          onPointerLeave={() => {\n            loopingRef.current = false\n            clearInterval(intervalRef.current)\n          }}\n        />\n      )\n    }\n  )\n)\n"],
-  "mappings": "AAAA;AACA;AAEA;AACA;AAEA;AACA;AAOA,MAAM,wBAAwB;AAEvB,MAAM,uBAAuB,MAAM,WACxC,CAAC,OAA6C,iBAAiB;AAC7D,SACE,CAAC,uBACC,eAAe,2BACX,OACJ,IAAI,KACJ,KAAK,cACP;AAEJ,CACF;AAEA,qBAAqB,cAAc;AAMnC,MAAM,0BAA0B;AAEzB,MAAM,yBAAyB,MAAM,WAC1C,CAAC,OAA6C,iBAAiB;AAC7D,SACE,CAAC,uBACC,eAAe,6BACX,OACJ,IAAI,OACJ,KAAK,cACP;AAEJ,CACF;AAEA,uBAAuB,cAAc;AAIrC,MAAM,yBAAyB,MAAM,KACnC,MAAM,WACJ,CAAC,OAAiD,iBAAiB;AAxDvE;AAyDM,QAAM,EAAE,eAAe,KAAK,kBAAkB,yBAAyB;AACvE,QAAM,EAAE,aAAa,gBAAgB,gBAAgB,YAAY,iBAC/D,eACA,aACF;AACA,QAAM,cAAc,MAAM,OAAY;AACtC,QAAM,aAAa,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,QAAQ,QAAQ,SAAS,kBAAkB;AAE7D,QAAM,EAAE,GAAG,GAAG,WAAW,UAAU,UAAU,QAAQ,SAAS,YAAY;AAAA,IACxE,UAAU;AAAA,IACV,WAAW,QAAQ,OAAO,QAAQ;AAAA,IAClC,YAAY,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,SAAS,MAAM,CAAC;AAAA,EAC5D,CAAC;AAED,QAAM,eAAe,gBAAgB,cAAc,QAAQ;AAE3D,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC;AAAa;AAClB,cAAU,YAAY,OAAO;AAAA,EAE/B,GAAG,CAAC,WAAW,2CAAa,OAAO,CAAC;AAEpC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,KAAK,UAAU,WAAW,CAAC,KAAK,SAAS,WAAW,CAAC,WAAW;AACnE;AAAA,IACF;AAEA,UAAM,UAAU,WAAW,KAAK,UAAU,SAAS,KAAK,SAAS,SAAS,QAAQ;AAAA,MAChF,gBAAgB;AAAA,IAClB,CAAC;AAED,WAAO,MAAM;AACX,oBAAc,YAAY,OAAO;AACjC,iBAAW,UAAU;AACrB,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,WAAW,QAAQ,KAAK,UAAU,KAAK,SAAS,CAAC;AAErD,MAAI,CAAC,WAAW;AACd,WAAO;AAAA,EACT;AAEA,QAAM,0BAA0B,MAAM;AACpC,QAAI,CAAC;AAAa;AAClB,UAAM,YAAW,YAAY;AAC7B,UAAM,OAAO,QAAQ;AAErB,QAAI,WAAU;AACZ,YAAM,QAAQ,OAAO,CAAC,wBAAwB;AAC9C,YAAM,QACH,QAAQ,UAAS,aAAa,yBAAyB,KACvD,CAAC,QACA,UAAS,aACP,UAAS,eAAe,UAAS,eAAe,yBAAyB,IACzE,IACA;AAEN,gBAAS,aAAa,QAAS,QAAO,CAAC,wBAAwB;AAE/D,uDAAiB,WAAU,UAAU,IAAI,QAAQ,IAAI;AAErD,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE,CAAC,OACC,KAAK,cACL,eAAe,eACf,gBACI,sBACJ,QAAQ,KAER,UAAU,UACV,MAAM,KAAK,GACX,KAAK,KAAK,GACV,OAAO,QAAS,wDAAa,YAAb,mBAAsB,gBAAtB,YAAqC,KAAK,QAC1D,eAAe,MAAM;AACnB,QAAI,CAAC,WAAW,SAAS;AACvB,kBAAY,UAAU,YAAY,yBAAyB,MAAO,EAAE;AACpE,iBAAW,UAAU;AAAA,IACvB;AAAA,EACF,GACA,gBAAgB,MAAM;AACpB,eAAW,UAAU;AACrB,kBAAc,YAAY,OAAO;AAAA,EACnC,GACF;AAEJ,CACF,CACF;",
+  "sourcesContent": ["import { autoUpdate, offset, useFloating } from '@floating-ui/react-dom-interactions'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { TamaguiElement } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { flushSync } from 'react-dom'\n\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectScrollButtonImplProps, SelectScrollButtonProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'\n\nexport const SelectScrollUpButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n    return (\n      <SelectScrollButtonImpl\n        componentName={SCROLL_UP_BUTTON_NAME}\n        {...props}\n        dir=\"up\"\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'\n\nexport const SelectScrollDownButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n    return (\n      <SelectScrollButtonImpl\n        componentName={SCROLL_DOWN_BUTTON_NAME}\n        {...props}\n        dir=\"down\"\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME\n\ntype SelectScrollButtonImplElement = TamaguiElement\n\nconst SelectScrollButtonImpl = React.memo(\n  React.forwardRef<SelectScrollButtonImplElement, SelectScrollButtonImplProps>(\n    (props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n      const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props\n      const { floatingRef, forceUpdate, open, fallback, setScrollTop, setInnerOffset, ...context } =\n        useSelectContext(componentName, __scopeSelect)\n\n      const [element, setElement] = React.useState<HTMLElement | null>(null)\n      const statusRef = React.useRef<'idle' | 'active'>('idle')\n      const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']\n      const frameRef = React.useRef<any>()\n\n      const { x, y, reference, floating, strategy, update, refs } = useFloating({\n        strategy: 'fixed',\n        placement: dir === 'up' ? 'top' : 'bottom',\n        middleware: [offset(({ rects }) => -rects.floating.height)],\n        whileElementsMounted: (...args) => autoUpdate(...args, { animationFrame: true }),\n      })\n\n      const composedRef = useComposedRefs(forwardedRef, floating)\n\n      if (floatingRef) {\n        if (open) {\n          if (element !== floatingRef.current) {\n            setElement(floatingRef.current)\n            reference(floatingRef.current)\n            requestAnimationFrame(update)\n          }\n        } else {\n          cancelAnimationFrame(frameRef.current)\n        }\n      }\n\n      React.useLayoutEffect(() => {\n        return () => {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          cancelAnimationFrame(frameRef.current)\n        }\n      }, [])\n\n      if (!isVisible || !floatingRef) {\n        return null\n      }\n\n      const onScroll = (amount: number) => {\n        if (fallback) {\n          if (refs.floating.current) {\n            refs.floating.current.scrollTop -= amount\n            flushSync(() => setScrollTop!(refs.floating.current?.scrollTop ?? 0))\n          }\n        } else {\n          flushSync(() => setInnerOffset!((value) => value - amount))\n        }\n      }\n\n      return (\n        <YStack\n          ref={composedRef}\n          componentName={componentName}\n          aria-hidden\n          {...scrollIndicatorProps}\n          zIndex={1000}\n          // @ts-expect-error\n          position={strategy}\n          left={x || 0}\n          top={y || 0}\n          width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`}\n          onPointerEnter={() => {\n            statusRef.current = 'active'\n            let prevNow = Date.now()\n\n            function frame() {\n              if (element) {\n                const currentNow = Date.now()\n                const msElapsed = currentNow - prevNow\n                prevNow = currentNow\n\n                const pixelsToScroll = msElapsed / 2\n\n                const remainingPixels =\n                  dir === 'up'\n                    ? element.scrollTop\n                    : element.scrollHeight - element.clientHeight - element.scrollTop\n\n                const scrollRemaining =\n                  dir === 'up'\n                    ? element.scrollTop - pixelsToScroll > 0\n                    : element.scrollTop + pixelsToScroll <\n                      element.scrollHeight - element.clientHeight\n\n                onScroll(\n                  dir === 'up'\n                    ? Math.min(pixelsToScroll, remainingPixels)\n                    : Math.max(-pixelsToScroll, -remainingPixels)\n                )\n\n                if (scrollRemaining) {\n                  frameRef.current = requestAnimationFrame(frame)\n                }\n              }\n            }\n\n            cancelAnimationFrame(frameRef.current)\n            frameRef.current = requestAnimationFrame(frame)\n          }}\n          onPointerLeave={() => {\n            statusRef.current = 'idle'\n            cancelAnimationFrame(frameRef.current)\n          }}\n        />\n      )\n    }\n  )\n)\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/SelectViewport.js

@@ -29,10 +29,8 @@ const SelectViewportFrame = styled(ThemeableStack, {
   }
 });
 const SelectViewport = React.forwardRef((props, forwardedRef) => {
-  var _a, _b;
   const { __scopeSelect, children, ...viewportProps } = props;
   const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
-  const { style, ...floatingProps } = (_b = (_a = context.interactions) == null ? void 0 : _a.getFloatingProps()) != null ? _b : {};
   const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
   if (breakpointActive || !isWeb) {
     return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>;
@@ -40,16 +38,22 @@ const SelectViewport = React.forwardRef((props, forwardedRef) => {
   if (!context.floatingContext) {
     return null;
   }
-  delete style["scrollbarWidth"];
-  delete style["listStyleType"];
+  if (!context.open) {
+    return children;
+  }
+  const {
+    style: { scrollbarWidth, listStyleType, ...restStyle },
+    ...floatingProps
+  } = context.interactions.getFloatingProps();
   return <>
     <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}`
+      __html: disableScrollbarCSS
     }} />
-    <FloatingFocusManager context={context.floatingContext} preventTabbing><SelectViewportFrame size={context.size} data-tamagui-select-viewport="" role="presentation" {...viewportProps} ref={forwardedRef} {...floatingProps} {...style}>{children}</SelectViewportFrame></FloatingFocusManager>
+    <FloatingFocusManager context={context.floatingContext} preventTabbing><SelectViewportFrame size={context.size} data-tamagui-select-viewport="" role="presentation" {...viewportProps} ref={forwardedRef} {...floatingProps} {...restStyle}>{children}</SelectViewportFrame></FloatingFocusManager>
   </>;
 });
 SelectViewport.displayName = VIEWPORT_NAME;
+const disableScrollbarCSS = `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`;
 export {
   SelectViewport,
   SelectViewportFrame

package/dist/jsx/SelectViewport.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectViewport.tsx"],
-  "sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { useSelectBreakpointActive } from './Select'\nimport { ScopedProps, SelectViewportProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n  name: VIEWPORT_NAME,\n  backgroundColor: '$background',\n  elevate: true,\n  bordered: true,\n  overflow: 'scroll',\n  userSelect: 'none',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$2',\n  },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n    const { __scopeSelect, children, ...viewportProps } = props\n    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n    const { style, ...floatingProps } = context.interactions?.getFloatingProps() ?? {}\n    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n    if (breakpointActive || !isWeb) {\n      return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n    }\n\n    if (!context.floatingContext) {\n      return null\n    }\n\n    // TODO\n    delete style['scrollbarWidth']\n    delete style['listStyleType']\n\n    return (\n      <>\n        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`,\n          }}\n        />\n        <FloatingFocusManager context={context.floatingContext} preventTabbing>\n          <SelectViewportFrame\n            size={context.size}\n            data-tamagui-select-viewport=\"\"\n            // @ts-ignore\n            role=\"presentation\"\n            {...viewportProps}\n            ref={forwardedRef}\n            {...floatingProps}\n            {...style}\n          >\n            {children}\n          </SelectViewportFrame>\n        </FloatingFocusManager>\n      </>\n    )\n  }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAOO,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AA1BtC;AA2BQ,eAAO;AAAA,UACL,cAAc,aAAO,OAAO,SAAd,YAAsB;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AAxC7D;AAyCI,QAAM,EAAE,eAAe,aAAa,kBAAkB;AACtD,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,QAAM,EAAE,UAAU,kBAAkB,oBAAQ,iBAAR,mBAAsB,uBAAtB,YAA4C,CAAC;AACjF,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAE1E,MAAI,oBAAoB,CAAC,OAAO;AAC9B,WAAO,CAAC,WAAW,UAAU,GAAG,QAAQ,0BAA0B,SAAS,EAAnE;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,iBAAiB;AAC5B,WAAO;AAAA,EACT;AAGA,SAAO,MAAM;AACb,SAAO,MAAM;AAEb,SACE;AAAA,IAEE,CAAC,MACC,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV,GACF;AAAA,IACA,CAAC,qBAAqB,SAAS,QAAQ,iBAAiB,eACtD,CAAC,oBACC,MAAM,QAAQ,MACd,6BAA6B,GAE7B,KAAK,mBACD,eACJ,KAAK,kBACD,mBACA,QAEH,SACH,EAXC,oBAYH,EAbC;AAAA,EAcH;AAEJ,CACF;AAEA,eAAe,cAAc;",
+  "sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { useSelectBreakpointActive } from './Select'\nimport { ScopedProps, SelectViewportProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n  name: VIEWPORT_NAME,\n  backgroundColor: '$background',\n  elevate: true,\n  bordered: true,\n  overflow: 'scroll',\n  userSelect: 'none',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$2',\n  },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n    const { __scopeSelect, children, ...viewportProps } = props\n    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n    if (breakpointActive || !isWeb) {\n      return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n    }\n\n    if (!context.floatingContext) {\n      return null\n    }\n\n    if (!context.open) {\n      return children\n    }\n\n    const {\n      style: { scrollbarWidth, listStyleType, ...restStyle },\n      ...floatingProps\n    } = context.interactions!.getFloatingProps()\n\n    return (\n      <>\n        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n        <style\n          dangerouslySetInnerHTML={{\n            __html: disableScrollbarCSS,\n          }}\n        />\n        <FloatingFocusManager context={context.floatingContext} preventTabbing>\n          <SelectViewportFrame\n            size={context.size}\n            data-tamagui-select-viewport=\"\"\n            // @ts-ignore\n            role=\"presentation\"\n            {...viewportProps}\n            ref={forwardedRef}\n            {...floatingProps}\n            {...restStyle}\n          >\n            {children}\n          </SelectViewportFrame>\n        </FloatingFocusManager>\n      </>\n    )\n  }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n\nconst disableScrollbarCSS = `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAOO,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AA1BtC;AA2BQ,eAAO;AAAA,UACL,cAAc,aAAO,OAAO,SAAd,YAAsB;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,eAAe,aAAa,kBAAkB;AACtD,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAE1E,MAAI,oBAAoB,CAAC,OAAO;AAC9B,WAAO,CAAC,WAAW,UAAU,GAAG,QAAQ,0BAA0B,SAAS,EAAnE;AAAA,EACV;AAEA,MAAI,CAAC,QAAQ,iBAAiB;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,QAAQ,MAAM;AACjB,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,kBAAkB;AAAA,OACxC;AAAA,MACD,QAAQ,aAAc,iBAAiB;AAE3C,SACE;AAAA,IAEE,CAAC,MACC,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV,GACF;AAAA,IACA,CAAC,qBAAqB,SAAS,QAAQ,iBAAiB,eACtD,CAAC,oBACC,MAAM,QAAQ,MACd,6BAA6B,GAE7B,KAAK,mBACD,eACJ,KAAK,kBACD,mBACA,YAEH,SACH,EAXC,oBAYH,EAbC;AAAA,EAcH;AAEJ,CACF;AAEA,eAAe,cAAc;AAE7B,MAAM,sBAAsB;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/select",
-  "version": "1.0.1-beta.118",
+  "version": "1.0.1-beta.121",
   "sideEffects": [
     "*.css"
   ],
@@ -21,20 +21,20 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "0.7.0",
-    "@floating-ui/react-dom-interactions": "^0.5.0",
-    "@floating-ui/react-native": "^0.7.0",
+    "@floating-ui/react-dom": "^1.0.0",
+    "@floating-ui/react-dom-interactions": "^0.8.1",
+    "@floating-ui/react-native": "^0.8.0",
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/compose-refs": "^1.0.1-beta.118",
-    "@tamagui/core": "^1.0.1-beta.118",
-    "@tamagui/create-context": "^1.0.1-beta.118",
-    "@tamagui/list-item": "^1.0.1-beta.118",
-    "@tamagui/portal": "^1.0.1-beta.118",
-    "@tamagui/separator": "^1.0.1-beta.118",
-    "@tamagui/stacks": "^1.0.1-beta.118",
-    "@tamagui/text": "^1.0.1-beta.118",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.118",
-    "@tamagui/use-event": "^1.0.1-beta.118"
+    "@tamagui/compose-refs": "^1.0.1-beta.121",
+    "@tamagui/core": "^1.0.1-beta.121",
+    "@tamagui/create-context": "^1.0.1-beta.121",
+    "@tamagui/list-item": "^1.0.1-beta.121",
+    "@tamagui/portal": "^1.0.1-beta.121",
+    "@tamagui/separator": "^1.0.1-beta.121",
+    "@tamagui/stacks": "^1.0.1-beta.121",
+    "@tamagui/text": "^1.0.1-beta.121",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.121",
+    "@tamagui/use-event": "^1.0.1-beta.121"
   },
   "peerDependencies": {
     "react": "*",
@@ -42,7 +42,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.118",
+    "@tamagui/build": "^1.0.1-beta.121",
     "@types/react-native": "^0.69.2",
     "react": "*",
     "react-dom": "*",

package/src/Select.tsx

@@ -148,7 +148,6 @@ type SelectItemContextValue = {
   value: string
   textId: string
   isSelected: boolean
-  onItemTextChange(node: TamaguiElement | null): void
 }
 
 const [SelectItemContextProvider, useSelectItemContext] =
@@ -173,8 +172,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 {
@@ -184,65 +181,69 @@ export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
       open,
       setOpen,
       onChange,
-      activeIndex,
       setActiveIndex,
+      allowMouseUpRef,
+      allowSelectRef,
       setValueAtIndex,
+      selectTimeoutRef,
       dataRef,
     } = context
 
-    const composedRefs = useComposedRefs(
-      forwardedRef,
-      (node) => {
-        if (!isWeb) return
-        if (node instanceof HTMLElement) {
-          if (listRef) {
-            listRef.current[index] = node
-          }
+    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, setValueAtIndex, value])
 
-    const timeoutRef = React.useRef<any>()
-    const [allowMouseUp, setAllowMouseUp] = React.useState(false)
-
     function handleSelect() {
       setSelectedIndex(index)
       onChange(value)
       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])
-
-    function handleKeyDown(event: React.KeyboardEvent) {
-      if (event.key === 'Enter' || (event.key === ' ' && !dataRef?.current.typing)) {
-        event.preventDefault()
-        handleSelect()
-      }
-    }
-
     const selectItemProps = context.interactions
       ? context.interactions.getItemProps({
-          onClick: allowMouseUp ? handleSelect : undefined,
-          onMouseUp: allowMouseUp ? handleSelect : undefined,
-          onKeyDown: handleKeyDown,
+          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
+            }
+
+            if (allowSelectRef!.current) {
+              handleSelect()
+            }
+
+            // On touch devices, prevent the element from
+            // immediately closing `onClick` by deferring it
+            clearTimeout(selectTimeoutRef!.current)
+            selectTimeoutRef!.current = setTimeout(() => {
+              allowSelectRef!.current = true
+            })
+          },
         })
       : {
           onPress: handleSelect,
@@ -254,10 +255,6 @@ 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
@@ -266,8 +263,7 @@ export const SelectItem = React.forwardRef<TamaguiElement, SelectItemProps>(
           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}
@@ -302,7 +298,7 @@ const SelectItemText = React.forwardRef<TamaguiElement, SelectItemTextProps>(
     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 = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren
 
     const contents = (
@@ -560,7 +556,9 @@ export const Select = withStaticProperties(
     return (
       <SelectProvider
         dir={dir}
+        blockSelection={false}
         size={sizeProp}
+        fallback={false}
         selectedItem={selectedItem}
         setSelectedItem={setSelectedItem}
         forceUpdate={forceUpdate}

package/src/SelectContent.tsx

@@ -1,5 +1,5 @@
 import { FloatingOverlay, FloatingPortal } from '@floating-ui/react-dom-interactions'
-import { Theme, useThemeName } from '@tamagui/core'
+import { Theme, useIsTouchDevice, useThemeName } from '@tamagui/core'
 import * as React from 'react'
 
 import { useSelectContext } from './context'
@@ -17,6 +17,7 @@ export const SelectContent = ({ children, __scopeSelect }: SelectContentProps) =
   const themeName = useThemeName()
   const showSheet = useShowSelectSheet(context)
   const contents = <Theme name={themeName}>{children}</Theme>
+  const touch = useIsTouchDevice()
 
   if (showSheet && context.open) {
     return contents
@@ -25,7 +26,8 @@ export const SelectContent = ({ children, __scopeSelect }: SelectContentProps) =
   return (
     <FloatingPortal>
       {context.open ? (
-        <FloatingOverlay lockScroll>{contents}</FloatingOverlay>
+        // TODO inside overlay <FloatingFocusManager context={context} preventTabbing>
+        <FloatingOverlay lockScroll={!touch}>{contents}</FloatingOverlay>
       ) : (
         <div style={{ display: 'none' }}>{contents}</div>
       )}