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

package/dist/jsx/Select.js

@@ -1,59 +1,28 @@
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  autoUpdate,
-  detectOverflow,
-  flip,
-  offset,
-  size,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useListNavigation,
-  useRole,
-  useTypeahead
-} from "@floating-ui/react-dom-interactions";
-import { usePrevious } from "@radix-ui/react-use-previous";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useMedia } from "@tamagui/core";
-import {
-  Theme,
-  styled,
-  useGet,
-  useIsomorphicLayoutEffect,
-  useThemeName,
-  withStaticProperties
-} from "@tamagui/core";
+import { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from "@tamagui/core";
 import { useId } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
 import { ListItem } from "@tamagui/list-item";
-import { PortalHost, PortalItem } from "@tamagui/portal";
+import { PortalHost } from "@tamagui/portal";
 import { Separator } from "@tamagui/separator";
 import { Sheet, SheetController } from "@tamagui/sheet";
-import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
+import { XStack, YStack } from "@tamagui/stacks";
 import { Paragraph } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-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;
+import { SELECT_NAME } from "./constants";
+import { SelectProvider, createSelectContext, useSelectContext } from "./context";
+import { SelectContent } from "./SelectContent";
+import { SelectInlineImpl } from "./SelectImpl";
+import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
+import { SelectViewport } from "./SelectViewport";
 const userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
 const isFirefox = userAgent.toLowerCase().includes("firefox");
-if (isFirefox) {
-  document.body.classList.add("firefox");
-}
 function getVisualOffsetTop() {
   var _a;
   return !/^((?!chrome|android).)*safari/i.test(userAgent) ? (_a = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _a : 0 : 0;
 }
-const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
-const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
 const TRIGGER_NAME = "SelectTrigger";
 const SelectTrigger = React.forwardRef((props, forwardedRef) => {
   const {
@@ -76,14 +45,15 @@ const SelectValueFrame = styled(Paragraph, {
   name: VALUE_NAME,
   selectable: false
 });
-const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children, placeholder }, forwardedRef) => {
+const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
-  const hasChildren = children !== void 0;
+  const hasChildren = childrenProp !== void 0;
   const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
   React.useLayoutEffect(() => {
     onValueNodeHasChildrenChange(hasChildren);
   }, [onValueNodeHasChildrenChange, hasChildren]);
+  const children = childrenProp != null ? childrenProp : context.selectedItem;
   return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{context.value === void 0 && placeholder !== void 0 ? placeholder : children}</SelectValueFrame>;
 }));
 SelectValue.displayName = VALUE_NAME;
@@ -92,61 +62,6 @@ const SelectIcon = styled(XStack, {
   "aria-hidden": true,
   children: <Paragraph>{"\u25BC"}</Paragraph>
 });
-const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
-  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
-  const themeName = useThemeName();
-  const showSheet = useShowSelectSheet(context);
-  const contents = <Theme name={themeName}>{children}</Theme>;
-  if (showSheet && context.open) {
-    return contents;
-  }
-  return <FloatingPortal>{context.open ? <FloatingOverlay lockScroll>{contents}</FloatingOverlay> : <div style={{ display: "none" }}>{contents}</div>}</FloatingPortal>;
-};
-const VIEWPORT_NAME = "SelectViewport";
-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;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
 const SelectItem = React.forwardRef((props, forwardedRef) => {
@@ -176,6 +91,8 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     dataRef
   } = context;
   const composedRefs = useComposedRefs(forwardedRef, (node) => {
+    if (!isWeb)
+      return;
     if (node instanceof HTMLElement) {
       if (listRef) {
         listRef.current[index] = node;
@@ -238,9 +155,18 @@ const SelectItemText = React.forwardRef((props, forwardedRef) => {
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const ref = React.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange);
+  const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
+  const contents = <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />;
+  if (!isWeb) {
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents);
+      }
+    }, [isSelected]);
+  }
   return <>
-    <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />
-    {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
+    {contents}
+    {isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
   </>;
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
@@ -274,73 +200,6 @@ const SelectLabel = React.forwardRef((props, forwardedRef) => {
   return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} size={context.size} {...labelProps} ref={forwardedRef} />;
 });
 SelectLabel.displayName = LABEL_NAME;
-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);
-  }} />;
-}));
 const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
 });
@@ -369,350 +228,6 @@ const SelectSheetContents = ({ __scopeSelect }) => {
   return <PortalHost name={`${context.scopeKey}SheetContents`} />;
 };
 SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
-const SelectInlineImpl = (props) => {
-  const {
-    __scopeSelect,
-    children,
-    open = false,
-    activeIndexRef,
-    selectedIndexRef,
-    listContentRef
-  } = props;
-  const selectContext = useSelectContext("SelectSheetImpl", __scopeSelect);
-  const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } = selectContext;
-  const [showArrows, setShowArrows] = React.useState(false);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const prevActiveIndex = usePrevious(activeIndex);
-  const listItemsRef = React.useRef([]);
-  const [controlledScrolling, setControlledScrolling] = React.useState(false);
-  const [middlewareType, setMiddlewareType] = React.useState("align");
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
-    });
-    return () => {
-      cancelAnimationFrame(frame);
-    };
-  }, [open, setActiveIndex]);
-  function getFloatingPadding(floating2) {
-    var _a;
-    if (!floating2) {
-      return 0;
-    }
-    return Number((_a = getComputedStyle(floating2).paddingLeft) == null ? void 0 : _a.replace("px", ""));
-  }
-  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } = useFloating({
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    middleware: middlewareType === "align" ? [
-      offset(({ rects }) => {
-        var _a;
-        const index = (_a = activeIndexRef.current) != null ? _a : selectedIndexRef.current;
-        if (index == null) {
-          return 0;
-        }
-        const item = listItemsRef.current[index];
-        if (item == null) {
-          return 0;
-        }
-        const offsetTop = item.offsetTop;
-        const itemHeight = item.offsetHeight;
-        const height = rects.reference.height;
-        return -offsetTop - height - (itemHeight - height) / 2;
-      }),
-      {
-        name: "size",
-        async fn(args) {
-          var _a;
-          const {
-            elements: { floating: floating2 },
-            rects: { reference: reference2 },
-            middlewareData: middlewareData2
-          } = args;
-          const overflow = await detectOverflow(args, {
-            padding: WINDOW_PADDING
-          });
-          const top = Math.max(0, overflow.top);
-          const bottom = Math.max(0, overflow.bottom);
-          const nextY = args.y + top;
-          if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
-            return {
-              y: nextY,
-              data: {
-                y: middlewareData2.size.y
-              }
-            };
-          }
-          Object.assign(floating2.style, {
-            maxHeight: `${floating2.scrollHeight - Math.abs(top + bottom)}px`,
-            minWidth: `${reference2.width + getFloatingPadding(floating2) * 2}px`
-          });
-          return {
-            y: nextY,
-            data: {
-              y: top,
-              skip: true
-            },
-            reset: {
-              rects: true
-            }
-          };
-        }
-      }
-    ] : [
-      offset(5),
-      flip(),
-      size({
-        apply({ rects, availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        },
-        padding: WINDOW_PADDING
-      })
-    ]
-  });
-  const floatingRef = refs.floating;
-  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
-  const interactions = useInteractions([
-    useClick(context, { pointerDown: true }),
-    useRole(context, { role: "listbox" }),
-    useDismiss(context),
-    useListNavigation(context, {
-      listRef: listItemsRef,
-      activeIndex,
-      selectedIndex,
-      onNavigate: setActiveIndex
-    }),
-    useTypeahead(context, {
-      listRef: listContentRef,
-      onMatch: open ? setActiveIndex : setSelectedIndex,
-      selectedIndex,
-      activeIndex
-    })
-  ]);
-  const increaseHeight = React.useCallback((floating2, amount = 0) => {
-    var _a;
-    if (middlewareType === "fallback") {
-      return;
-    }
-    const currentMaxHeight = Number(floating2.style.maxHeight.replace("px", ""));
-    const currentTop = Number(floating2.style.top.replace("px", ""));
-    const rect = floating2.getBoundingClientRect();
-    const rectTop = rect.top;
-    const rectBottom = rect.bottom;
-    const viewportHeight = (_a = visualViewport == null ? void 0 : visualViewport.height) != null ? _a : 0;
-    const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2;
-    if (amount < 0 && selectedIndexRef.current != null && Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)) {
-      floating2.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`;
-    }
-    if (amount > 0 && Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) && floating2.scrollHeight > floating2.offsetHeight) {
-      const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount);
-      const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount);
-      Object.assign(floating2.style, {
-        maxHeight: `${nextMaxHeight}px`,
-        top: `${nextTop}px`
-      });
-      if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
-        floating2.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating2);
-      }
-      return currentTop - nextTop;
-    }
-  }, [middlewareType, selectedIndexRef]);
-  const touchPageYRef = React.useRef(null);
-  const handleWheel = React.useCallback((event) => {
-    var _a, _b, _c;
-    const pinching = event.ctrlKey;
-    const currentTarget = event.currentTarget;
-    function isWheelEvent(event2) {
-      return typeof event2.deltaY === "number";
-    }
-    function isTouchEvent(event2) {
-      return event2.touches != null;
-    }
-    if (Math.abs(((_a = currentTarget == null ? void 0 : currentTarget.offsetHeight) != null ? _a : 0) - (((_b = visualViewport == null ? void 0 : visualViewport.height) != null ? _b : 0) - WINDOW_PADDING * 2)) > 1 && !pinching) {
-      event.preventDefault();
-    } else if (isWheelEvent(event) && isFirefox) {
-      currentTarget.scrollTop += event.deltaY;
-    }
-    if (!pinching) {
-      let delta = 5;
-      if (isTouchEvent(event)) {
-        const currentPageY = touchPageYRef.current;
-        const pageY = (_c = event.touches[0]) == null ? void 0 : _c.pageY;
-        if (pageY != null) {
-          touchPageYRef.current = pageY;
-          if (currentPageY != null) {
-            delta = currentPageY - pageY;
-          }
-        }
-      }
-      increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta);
-      setScrollTop(currentTarget.scrollTop);
-      forceUpdate();
-    }
-  }, [forceUpdate, increaseHeight]);
-  React.useEffect(() => {
-    function onTouchEnd() {
-      touchPageYRef.current = null;
-    }
-    const floating2 = floatingRef.current;
-    if (open && floating2 && middlewareType === "align") {
-      floating2.addEventListener("wheel", handleWheel);
-      floating2.addEventListener("touchmove", handleWheel);
-      floating2.addEventListener("touchend", onTouchEnd, { passive: true });
-      return () => {
-        floating2.removeEventListener("wheel", handleWheel);
-        floating2.removeEventListener("touchmove", handleWheel);
-        floating2.removeEventListener("touchend", onTouchEnd);
-      };
-    }
-  }, [open, floatingRef, handleWheel, middlewareType]);
-  React.useEffect(() => {
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-    };
-  }, [update]);
-  React.useLayoutEffect(() => {
-    var _a, _b, _c;
-    const floating2 = floatingRef.current;
-    if (open && controlledScrolling && floating2) {
-      const item = activeIndex != null ? listItemsRef.current[activeIndex] : selectedIndex != null ? listItemsRef.current[selectedIndex] : null;
-      if (item && prevActiveIndex != null) {
-        const itemHeight = (_b = (_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
-        const floatingHeight = floating2.offsetHeight;
-        const top = item.offsetTop;
-        const bottom = top + itemHeight;
-        if (top < floating2.scrollTop + 20) {
-          const diff = floating2.scrollTop - top + 20;
-          floating2.scrollTop -= diff;
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            increaseHeight(floating2, -diff);
-          }
-        } else if (bottom > floatingHeight + floating2.scrollTop - 20) {
-          const diff = bottom - floatingHeight - floating2.scrollTop + 20;
-          floating2.scrollTop += diff;
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            floating2.scrollTop -= (_c = increaseHeight(floating2, diff)) != null ? _c : 0;
-          }
-        }
-      }
-    }
-  }, [
-    open,
-    controlledScrolling,
-    prevActiveIndex,
-    activeIndex,
-    selectedIndex,
-    floatingRef,
-    increaseHeight
-  ]);
-  React.useLayoutEffect(() => {
-    var _a, _b;
-    const floating2 = refs.floating.current;
-    const reference2 = refs.reference.current;
-    if (open && floating2 && reference2 && floating2.offsetHeight < floating2.scrollHeight) {
-      const referenceRect = reference2.getBoundingClientRect();
-      if (middlewareType === "fallback") {
-        const item = listItemsRef.current[selectedIndex];
-        if (item) {
-          floating2.scrollTop = item.offsetTop - floating2.clientHeight + referenceRect.height;
-        }
-        return;
-      }
-      floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
-      const closeToBottom = ((_b = visualViewport == null ? void 0 : visualViewport.height) != null ? _b : 0) + getVisualOffsetTop() - referenceRect.bottom < FALLBACK_THRESHOLD;
-      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD;
-      if (floating2.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
-        setMiddlewareType("fallback");
-      }
-    }
-  }, [
-    open,
-    increaseHeight,
-    selectedIndex,
-    middlewareType,
-    refs.floating,
-    refs.reference,
-    middlewareData
-  ]);
-  React.useLayoutEffect(() => {
-    if (open && selectedIndex != null) {
-      requestAnimationFrame(() => {
-        var _a;
-        (_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.focus({ preventScroll: true });
-      });
-    }
-  }, [listItemsRef, selectedIndex, open]);
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  return <SelectProvider scope={__scopeSelect} {...selectContext} increaseHeight={increaseHeight} floatingRef={floatingRef} setValueAtIndex={(index, value) => {
-    listContentRef.current[index] = value;
-  }} interactions={{
-    ...interactions,
-    getReferenceProps() {
-      return interactions.getReferenceProps({
-        ref: reference,
-        className: "SelectTrigger",
-        onKeyDown(event) {
-          if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
-            event.preventDefault();
-            setOpen(true);
-          }
-        }
-      });
-    },
-    getFloatingProps(props2) {
-      return interactions.getFloatingProps({
-        ref: floating,
-        className: "Select",
-        ...props2,
-        style: {
-          position: strategy,
-          top: y != null ? y : "",
-          left: x != null ? x : "",
-          outline: 0,
-          listStyleType: "none",
-          scrollbarWidth: "none",
-          userSelect: "none",
-          ...props2 == null ? void 0 : props2.style
-        },
-        onPointerEnter() {
-          setControlledScrolling(false);
-        },
-        onPointerMove() {
-          setControlledScrolling(false);
-        },
-        onKeyDown() {
-          setControlledScrolling(true);
-        },
-        onScroll(event) {
-          setScrollTop(event.currentTarget.scrollTop);
-        }
-      });
-    }
-  }} floatingContext={context} activeIndex={activeIndex} canScrollDown={!!showDownArrow} canScrollUp={!!showUpArrow} controlledScrolling dataRef={context.dataRef} listRef={listItemsRef}>{children}</SelectProvider>;
-};
 const SelectSheetImpl = (props) => {
   return <>{props.children}</>;
 };
@@ -726,13 +241,14 @@ const Select = withStaticProperties((props) => {
     value: valueProp,
     defaultValue,
     onValueChange,
-    size: sizeProp,
+    size: sizeProp = "$4",
     sheetBreakpoint = false,
     dir
   } = props;
   const isSheet = useSelectBreakpointActive(sheetBreakpoint);
   const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl;
   const forceUpdate = React.useReducer(() => ({}), {})[1];
+  const [selectedItem, setSelectedItem] = React.useState(null);
   const [open, setOpen] = useControllableState({
     prop: openProp,
     defaultProp: defaultOpen || false,
@@ -754,7 +270,7 @@ const Select = withStaticProperties((props) => {
     selectedIndexRef.current = selectedIndex;
     activeIndexRef.current = activeIndex;
   });
-  return <SelectProvider dir={dir} size={sizeProp} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ""} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
+  return <SelectProvider dir={dir} size={sizeProp} selectedItem={selectedItem} setSelectedItem={setSelectedItem} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ""} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
     listContentRef.current[index] = value2;
   }} activeIndex={activeIndex} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}><SelectSheetController onChangeOpen={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider>;
 }, {
@@ -783,8 +299,9 @@ export {
   SelectSeparator,
   SelectSheetContents,
   SelectTrigger,
-  SelectViewport,
-  SelectViewportFrame,
-  createSelectScope
+  getVisualOffsetTop,
+  isFirefox,
+  useSelectBreakpointActive,
+  useShowSelectSheet
 };
 //# sourceMappingURL=Select.js.map