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

package/dist/jsx/SelectImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectImpl.tsx"],
+  "sourcesContent": ["import {\n  detectOverflow,\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport * as React from 'react'\n\nimport { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { getVisualOffsetTop, isFirefox } from './Select'\nimport { ScopedProps, SelectProps } from './types'\n\nexport type SelectImplProps = ScopedProps<SelectProps> & {\n  activeIndexRef: any\n  selectedIndexRef: any\n  listContentRef: any\n}\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n  const {\n    __scopeSelect,\n    children,\n    open = false,\n    activeIndexRef,\n    selectedIndexRef,\n    listContentRef,\n  } = props\n\n  const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n  const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } =\n    selectContext\n  const [showArrows, setShowArrows] = React.useState(false)\n  const [scrollTop, setScrollTop] = React.useState(0)\n  const prevActiveIndex = usePrevious<number | null>(activeIndex)\n\n  const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n\n  const [controlledScrolling, setControlledScrolling] = React.useState(false)\n  const [middlewareType, setMiddlewareType] = React.useState<'align' | 'fallback'>('align')\n\n  // Wait for scroll position to settle before showing arrows to prevent\n  // interference with pointer events.\n  React.useEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      setShowArrows(open)\n\n      if (!open) {\n        setScrollTop(0)\n        setMiddlewareType('align')\n        setActiveIndex(null)\n        setControlledScrolling(false)\n      }\n    })\n    return () => {\n      cancelAnimationFrame(frame)\n    }\n  }, [open, setActiveIndex])\n\n  function getFloatingPadding(floating: HTMLElement | null) {\n    if (!floating) {\n      return 0\n    }\n    return Number(getComputedStyle(floating).paddingLeft?.replace('px', ''))\n  }\n\n  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } =\n    useFloating({\n      open,\n      onOpenChange: setOpen,\n      placement: 'bottom',\n      middleware:\n        middlewareType === 'align'\n          ? [\n              offset(({ rects }) => {\n                const index = activeIndexRef.current ?? selectedIndexRef.current\n\n                if (index == null) {\n                  return 0\n                }\n\n                const item = listItemsRef.current[index]\n\n                if (item == null) {\n                  return 0\n                }\n\n                const offsetTop = item.offsetTop\n                const itemHeight = item.offsetHeight\n                const height = rects.reference.height\n\n                return -offsetTop - height - (itemHeight - height) / 2\n              }),\n              // Custom `size` that can handle the opposite direction of the placement\n              {\n                name: 'size',\n                async fn(args) {\n                  const {\n                    elements: { floating },\n                    rects: { reference },\n                    middlewareData,\n                  } = args\n\n                  const overflow = await detectOverflow(args, {\n                    padding: WINDOW_PADDING,\n                  })\n\n                  const top = Math.max(0, overflow.top)\n                  const bottom = Math.max(0, overflow.bottom)\n                  const nextY = args.y + top\n\n                  if (middlewareData.size?.skip) {\n                    return {\n                      y: nextY,\n                      data: {\n                        y: middlewareData.size.y,\n                      },\n                    }\n                  }\n\n                  Object.assign(floating.style, {\n                    maxHeight: `${floating.scrollHeight - Math.abs(top + bottom)}px`,\n                    minWidth: `${reference.width + getFloatingPadding(floating) * 2}px`,\n                  })\n\n                  return {\n                    y: nextY,\n                    data: {\n                      y: top,\n                      skip: true,\n                    },\n                    reset: {\n                      rects: true,\n                    },\n                  }\n                },\n              },\n            ]\n          : [\n              offset(5),\n              flip(),\n              size({\n                apply({ rects, availableHeight, elements }) {\n                  Object.assign(elements.floating.style, {\n                    width: `${rects.reference.width}px`,\n                    maxHeight: `${availableHeight}px`,\n                  })\n                },\n                padding: WINDOW_PADDING,\n              }),\n            ],\n    })\n\n  const floatingRef = refs.floating\n\n  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD\n  const showDownArrow =\n    showArrows &&\n    floatingRef.current &&\n    scrollTop <\n      floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n  const interactions = useInteractions([\n    useClick(context, { pointerDown: true }),\n    useRole(context, { role: 'listbox' }),\n    useDismiss(context),\n    useListNavigation(context, {\n      listRef: listItemsRef,\n      activeIndex,\n      selectedIndex,\n      onNavigate: setActiveIndex,\n    }),\n    useTypeahead(context, {\n      listRef: listContentRef,\n      onMatch: open ? setActiveIndex : setSelectedIndex,\n      selectedIndex,\n      activeIndex,\n    }),\n  ])\n\n  const increaseHeight = React.useCallback(\n    (floating: HTMLElement, amount = 0) => {\n      if (middlewareType === 'fallback') {\n        return\n      }\n\n      const currentMaxHeight = Number(floating.style.maxHeight.replace('px', ''))\n      const currentTop = Number(floating.style.top.replace('px', ''))\n      const rect = floating.getBoundingClientRect()\n      const rectTop = rect.top\n      const rectBottom = rect.bottom\n      const viewportHeight = visualViewport?.height ?? 0\n      const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2\n\n      if (\n        amount < 0 &&\n        selectedIndexRef.current != null &&\n        Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)\n      ) {\n        floating.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`\n      }\n\n      if (\n        amount > 0 &&\n        Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) &&\n        floating.scrollHeight > floating.offsetHeight\n      ) {\n        const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount)\n\n        const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount)\n\n        Object.assign(floating.style, {\n          maxHeight: `${nextMaxHeight}px`,\n          top: `${nextTop}px`,\n        })\n\n        if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {\n          floating.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating)\n        }\n\n        return currentTop - nextTop\n      }\n    },\n    [middlewareType, selectedIndexRef]\n  )\n\n  const touchPageYRef = React.useRef<number | null>(null)\n\n  const handleWheel = React.useCallback(\n    (event: WheelEvent | TouchEvent) => {\n      const pinching = event.ctrlKey\n\n      const currentTarget = event.currentTarget as HTMLElement\n\n      function isWheelEvent(event: any): event is WheelEvent {\n        return typeof event.deltaY === 'number'\n      }\n\n      function isTouchEvent(event: any): event is TouchEvent {\n        return event.touches != null\n      }\n\n      if (\n        Math.abs(\n          (currentTarget?.offsetHeight ?? 0) - ((visualViewport?.height ?? 0) - WINDOW_PADDING * 2)\n        ) > 1 &&\n        !pinching\n      ) {\n        event.preventDefault()\n      } else if (isWheelEvent(event) && isFirefox) {\n        // Firefox needs this to propagate scrolling\n        // during momentum scrolling phase if the\n        // height reached its maximum (at boundaries)\n        currentTarget.scrollTop += event.deltaY\n      }\n\n      if (!pinching) {\n        let delta = 5\n\n        if (isTouchEvent(event)) {\n          const currentPageY = touchPageYRef.current\n          const pageY = event.touches[0]?.pageY\n\n          if (pageY != null) {\n            touchPageYRef.current = pageY\n\n            if (currentPageY != null) {\n              delta = currentPageY - pageY\n            }\n          }\n        }\n\n        increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta)\n        setScrollTop(currentTarget.scrollTop)\n        // Ensure derived data (scroll arrows) is fresh\n        forceUpdate()\n      }\n    },\n    [forceUpdate, increaseHeight]\n  )\n\n  // Handle `onWheel` event in an effect to remove the `passive` option so we\n  // can .preventDefault() it\n  React.useEffect(() => {\n    function onTouchEnd() {\n      touchPageYRef.current = null\n    }\n\n    const floating = floatingRef.current\n    if (open && floating && middlewareType === 'align') {\n      floating.addEventListener('wheel', handleWheel)\n      floating.addEventListener('touchmove', handleWheel)\n      floating.addEventListener('touchend', onTouchEnd, { passive: true })\n      return () => {\n        floating.removeEventListener('wheel', handleWheel)\n        floating.removeEventListener('touchmove', handleWheel)\n        floating.removeEventListener('touchend', onTouchEnd)\n      }\n    }\n  }, [open, floatingRef, handleWheel, middlewareType])\n\n  // Ensure the menu remains attached to the reference element when resizing.\n  React.useEffect(() => {\n    window.addEventListener('resize', update)\n    return () => {\n      window.removeEventListener('resize', update)\n    }\n  }, [update])\n\n  // Scroll the active or selected item into view when in `controlledScrolling`\n  // mode (i.e. arrow key nav).\n  React.useLayoutEffect(() => {\n    const floating = floatingRef.current\n\n    if (open && controlledScrolling && floating) {\n      const item =\n        activeIndex != null\n          ? listItemsRef.current[activeIndex]\n          : selectedIndex != null\n          ? listItemsRef.current[selectedIndex]\n          : null\n\n      if (item && prevActiveIndex != null) {\n        const itemHeight = listItemsRef.current[prevActiveIndex]?.offsetHeight ?? 0\n\n        const floatingHeight = floating.offsetHeight\n        const top = item.offsetTop\n        const bottom = top + itemHeight\n\n        if (top < floating.scrollTop + 20) {\n          const diff = floating.scrollTop - top + 20\n          floating.scrollTop -= diff\n\n          if (activeIndex != selectedIndex && activeIndex != null) {\n            increaseHeight(floating, -diff)\n          }\n        } else if (bottom > floatingHeight + floating.scrollTop - 20) {\n          const diff = bottom - floatingHeight - floating.scrollTop + 20\n\n          floating.scrollTop += diff\n\n          if (activeIndex != selectedIndex && activeIndex != null) {\n            floating.scrollTop -= increaseHeight(floating, diff) ?? 0\n          }\n        }\n      }\n    }\n  }, [\n    open,\n    controlledScrolling,\n    prevActiveIndex,\n    activeIndex,\n    selectedIndex,\n    floatingRef,\n    increaseHeight,\n  ])\n\n  // Sync the height and the scrollTop values and device whether to use fallback\n  // positioning.\n  React.useLayoutEffect(() => {\n    const floating = refs.floating.current\n    const reference = refs.reference.current\n\n    if (open && floating && reference && floating.offsetHeight < floating.scrollHeight) {\n      const referenceRect = reference.getBoundingClientRect()\n\n      if (middlewareType === 'fallback') {\n        const item = listItemsRef.current[selectedIndex]\n        if (item) {\n          floating.scrollTop = item.offsetTop - floating.clientHeight + referenceRect.height\n        }\n        return\n      }\n\n      floating.scrollTop = middlewareData.size?.y\n\n      const closeToBottom =\n        (visualViewport?.height ?? 0) + getVisualOffsetTop() - referenceRect.bottom <\n        FALLBACK_THRESHOLD\n      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD\n\n      if (floating.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {\n        setMiddlewareType('fallback')\n      }\n    }\n  }, [\n    open,\n    increaseHeight,\n    selectedIndex,\n    middlewareType,\n    refs.floating,\n    refs.reference,\n    // Always re-run this effect when the position has been computed so the\n    // .scrollTop change works with fresh sizing.\n    middlewareData,\n  ])\n\n  React.useLayoutEffect(() => {\n    if (open && selectedIndex != null) {\n      requestAnimationFrame(() => {\n        listItemsRef.current[selectedIndex]?.focus({ preventScroll: true })\n      })\n    }\n  }, [listItemsRef, selectedIndex, open])\n\n  // Wait for scroll position to settle before showing arrows to prevent\n  // interference with pointer events.\n  React.useEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      setShowArrows(open)\n\n      if (!open) {\n        setScrollTop(0)\n        setMiddlewareType('align')\n        setActiveIndex(null)\n        setControlledScrolling(false)\n      }\n    })\n    return () => cancelAnimationFrame(frame)\n  }, [open, setActiveIndex])\n\n  // We set this to true by default so that events bubble to forms without JS (SSR)\n  // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n  // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n  // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n  return (\n    <SelectProvider\n      scope={__scopeSelect}\n      {...(selectContext as Required<typeof selectContext>)}\n      increaseHeight={increaseHeight}\n      floatingRef={floatingRef}\n      setValueAtIndex={(index, value) => {\n        listContentRef.current[index] = value\n      }}\n      interactions={{\n        ...interactions,\n        getReferenceProps() {\n          return interactions.getReferenceProps({\n            ref: reference,\n            className: 'SelectTrigger',\n            onKeyDown(event) {\n              if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\n                event.preventDefault()\n                setOpen(true)\n              }\n            },\n          })\n        },\n        getFloatingProps(props) {\n          return interactions.getFloatingProps({\n            ref: floating,\n            className: 'Select',\n            ...props,\n            style: {\n              position: strategy,\n              top: y ?? '',\n              left: x ?? '',\n              outline: 0,\n              listStyleType: 'none',\n              scrollbarWidth: 'none',\n              userSelect: 'none',\n              ...props?.style,\n            },\n            onPointerEnter() {\n              setControlledScrolling(false)\n            },\n            onPointerMove() {\n              setControlledScrolling(false)\n            },\n            onKeyDown() {\n              setControlledScrolling(true)\n            },\n            onScroll(event) {\n              setScrollTop(event.currentTarget.scrollTop)\n            },\n          })\n        },\n      }}\n      floatingContext={context}\n      activeIndex={activeIndex}\n      canScrollDown={!!showDownArrow}\n      canScrollUp={!!showUpArrow}\n      controlledScrolling\n      dataRef={context.dataRef}\n      listRef={listItemsRef}\n    >\n      {children}\n      {/* {isFormControl ? (\n            <BubbleSelect\n              ref={setBubbleSelect}\n              aria-hidden\n              tabIndex={-1}\n              name={name}\n              autoComplete={autoComplete}\n              value={value}\n              // enable form autofill\n              onChange={(event) => setValue(event.target.value)}\n            />\n          ) : null} */}\n    </SelectProvider>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/SelectScrollButton.js

@@ -0,0 +1,78 @@
+import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom-interactions";
+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 { useSelectContext } from "./context";
+const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
+const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
+  return <SelectScrollButtonImpl componentName={SCROLL_UP_BUTTON_NAME} {...props} dir="up" ref={forwardedRef} />;
+});
+SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
+const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
+const SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
+  return <SelectScrollButtonImpl componentName={SCROLL_DOWN_BUTTON_NAME} {...props} dir="down" ref={forwardedRef} />;
+});
+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 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(() => {
+    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 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;
+  }
+  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();
+    }
+  };
+  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;
+    }
+  }} onPointerLeave={() => {
+    loopingRef.current = false;
+    clearInterval(intervalRef.current);
+  }} />;
+}));
+export {
+  SelectScrollDownButton,
+  SelectScrollUpButton
+};
+//# sourceMappingURL=SelectScrollButton.js.map

package/dist/jsx/SelectScrollButton.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/dist/jsx/SelectScrollButton.native.js

@@ -0,0 +1,7 @@
+const SelectScrollUpButton = (_) => null;
+const SelectScrollDownButton = (_) => null;
+export {
+  SelectScrollDownButton,
+  SelectScrollUpButton
+};
+//# sourceMappingURL=SelectScrollButton.native.js.map

package/dist/jsx/SelectScrollButton.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectScrollButton.native.tsx"],
+  "sourcesContent": ["import { ScopedProps, SelectScrollButtonProps } from './types'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const SelectScrollUpButton = (_: ScopedProps<SelectScrollButtonProps>) => null\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const SelectScrollDownButton = (_: ScopedProps<SelectScrollButtonProps>) => null\n"],
+  "mappings": "AAGO,MAAM,uBAAuB,CAAC,MAA4C;AAG1E,MAAM,yBAAyB,CAAC,MAA4C;",
+  "names": []
+}

package/dist/jsx/SelectViewport.js

@@ -0,0 +1,57 @@
+import { FloatingFocusManager } from "@floating-ui/react-dom-interactions";
+import { 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";
+const SelectViewportFrame = styled(ThemeableStack, {
+  name: VIEWPORT_NAME,
+  backgroundColor: "$background",
+  elevate: true,
+  bordered: true,
+  overflow: "scroll",
+  userSelect: "none",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        var _a;
+        return {
+          borderRadius: (_a = tokens.radius[val]) != null ? _a : val
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$2"
+  }
+});
+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>;
+  }
+  if (!context.floatingContext) {
+    return null;
+  }
+  delete style["scrollbarWidth"];
+  delete style["listStyleType"];
+  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}`
+    }} />
+    <FloatingFocusManager context={context.floatingContext} preventTabbing><SelectViewportFrame size={context.size} data-tamagui-select-viewport="" role="presentation" {...viewportProps} ref={forwardedRef} {...floatingProps} {...style}>{children}</SelectViewportFrame></FloatingFocusManager>
+  </>;
+});
+SelectViewport.displayName = VIEWPORT_NAME;
+export {
+  SelectViewport,
+  SelectViewportFrame
+};
+//# sourceMappingURL=SelectViewport.js.map

package/dist/jsx/SelectViewport.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/dist/jsx/SelectViewport.native.js

@@ -0,0 +1,14 @@
+import { PortalItem } from "@tamagui/portal";
+import * as React from "react";
+import { VIEWPORT_NAME } from "./constants";
+import { useSelectContext } from "./context";
+const SelectViewport = React.forwardRef((props) => {
+  const { __scopeSelect, children } = props;
+  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
+  return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>;
+});
+SelectViewport.displayName = VIEWPORT_NAME;
+export {
+  SelectViewport
+};
+//# sourceMappingURL=SelectViewport.native.js.map

package/dist/jsx/SelectViewport.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectViewport.native.tsx"],
+  "sourcesContent": ["import { TamaguiElement } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectViewportProps } from './types'\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n  (props: ScopedProps<SelectViewportProps>) => {\n    const { __scopeSelect, children } = props\n    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n    return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n  }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n"],
+  "mappings": "AACA;AACA;AAEA;AACA;AAGO,MAAM,iBAAiB,MAAM,WAClC,CAAC,UAA4C;AAC3C,QAAM,EAAE,eAAe,aAAa;AACpC,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,SAAO,CAAC,WAAW,UAAU,GAAG,QAAQ,0BAA0B,SAAS,EAAnE;AACV,CACF;AAEA,eAAe,cAAc;",
+  "names": []
+}

package/dist/jsx/constants.js

@@ -0,0 +1,17 @@
+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;
+const VIEWPORT_NAME = "SelectViewport";
+export {
+  FALLBACK_THRESHOLD,
+  MIN_HEIGHT,
+  SCROLL_ARROW_THRESHOLD,
+  SCROLL_ARROW_VELOCITY,
+  SELECT_NAME,
+  VIEWPORT_NAME,
+  WINDOW_PADDING
+};
+//# sourceMappingURL=constants.js.map

package/dist/jsx/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants.tsx"],
+  "sourcesContent": ["export const SELECT_NAME = 'Select'\nexport const WINDOW_PADDING = 8\nexport const SCROLL_ARROW_VELOCITY = 8\nexport const SCROLL_ARROW_THRESHOLD = 8\nexport const MIN_HEIGHT = 80\nexport const FALLBACK_THRESHOLD = 16\nexport const VIEWPORT_NAME = 'SelectViewport'\n"],
+  "mappings": "AAAO,MAAM,cAAc;AACpB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,aAAa;AACnB,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;",
+  "names": []
+}

package/dist/jsx/context.js

@@ -0,0 +1,11 @@
+import { createContextScope } from "@tamagui/create-context";
+import { SELECT_NAME } from "./constants";
+const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
+const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
+export {
+  SelectProvider,
+  createSelectContext,
+  createSelectScope,
+  useSelectContext
+};
+//# sourceMappingURL=context.js.map

package/dist/jsx/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/context.tsx"],
+  "sourcesContent": ["import { createContextScope } from '@tamagui/create-context'\n\nimport { SELECT_NAME } from './constants'\nimport { SelectContextValue } from './types'\n\nexport const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)\n\nexport const [SelectProvider, useSelectContext] =\n  createSelectContext<SelectContextValue>(SELECT_NAME)\n"],
+  "mappings": "AAAA;AAEA;AAGO,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAE/E,MAAM,CAAC,gBAAgB,oBAC5B,oBAAwC,WAAW;",
+  "names": []
+}

package/dist/jsx/index.js

@@ -1,2 +1,3 @@
 export * from "./Select";
+export * from "./context";
 //# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx"],
-  "sourcesContent": ["export * from './Select'\n"],
-  "mappings": "AAAA;",
+  "sourcesContent": ["export * from './Select'\nexport type {\n  SelectContentProps,\n  SelectProps,\n  SelectScrollButtonProps,\n  SelectViewportProps,\n} from './types'\nexport * from './context'\n"],
+  "mappings": "AAAA;AAOA;",
   "names": []
 }

package/dist/jsx/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/jsx/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

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