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

package/dist/esm/Select.js

@@ -1,59 +1,38 @@
-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() {
   return !/^((?!chrome|android).)*safari/i.test(userAgent) ? (visualViewport == null ? void 0 : visualViewport.offsetTop) ?? 0 : 0;
 }
-const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
-const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
 const TRIGGER_NAME = "SelectTrigger";
+const SelectTriggerFrame = styled(ListItem, {
+  componentName: TRIGGER_NAME,
+  backgrounded: true,
+  radiused: true,
+  hoverTheme: true,
+  pressTheme: true,
+  focusTheme: true,
+  focusable: false,
+  borderWidth: 1
+});
 const SelectTrigger = React.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
@@ -63,15 +42,7 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
   } = props;
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
   const labelledBy = ariaLabelledby;
-  return /* @__PURE__ */ React.createElement(ListItem, {
-    backgrounded: true,
-    radiused: true,
-    hoverTheme: true,
-    pressTheme: true,
-    focusTheme: true,
-    focusable: false,
-    borderWidth: 1,
-    componentName: TRIGGER_NAME,
+  return /* @__PURE__ */ React.createElement(SelectTriggerFrame, {
     size: context.size,
     "aria-expanded": context.open,
     "aria-autocomplete": "none",
@@ -94,14 +65,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 ?? context.selectedItem;
   return /* @__PURE__ */ React.createElement(SelectValueFrame, {
     size: context.size,
     ref: composedRefs,
@@ -114,78 +86,6 @@ const SelectIcon = styled(XStack, {
   "aria-hidden": true,
   children: /* @__PURE__ */ React.createElement(Paragraph, null, "\u25BC")
 });
-const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
-  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
-  const themeName = useThemeName();
-  const showSheet = useShowSelectSheet(context);
-  const contents = /* @__PURE__ */ React.createElement(Theme, {
-    name: themeName
-  }, children);
-  if (showSheet && context.open) {
-    return contents;
-  }
-  return /* @__PURE__ */ React.createElement(FloatingPortal, null, context.open ? /* @__PURE__ */ React.createElement(FloatingOverlay, {
-    lockScroll: true
-  }, contents) : /* @__PURE__ */ React.createElement("div", {
-    style: { display: "none" }
-  }, contents));
-};
-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 }) => {
-        return {
-          borderRadius: tokens.radius[val] ?? val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$2"
-  }
-});
-const SelectViewport = React.forwardRef((props, forwardedRef) => {
-  var _a;
-  const { __scopeSelect, children, ...viewportProps } = props;
-  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
-  const { style, ...floatingProps } = ((_a = context.interactions) == null ? void 0 : _a.getFloatingProps()) ?? {};
-  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
-  if (breakpointActive || !isWeb) {
-    return /* @__PURE__ */ React.createElement(PortalItem, {
-      hostName: `${context.scopeKey}SheetContents`
-    }, children);
-  }
-  if (!context.floatingContext) {
-    return null;
-  }
-  delete style["scrollbarWidth"];
-  delete style["listStyleType"];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("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}`
-    }
-  }), /* @__PURE__ */ React.createElement(FloatingFocusManager, {
-    context: context.floatingContext,
-    preventTabbing: true
-  }, /* @__PURE__ */ React.createElement(SelectViewportFrame, {
-    size: context.size,
-    "data-tamagui-select-viewport": "",
-    role: "presentation",
-    ...viewportProps,
-    ref: forwardedRef,
-    ...floatingProps,
-    ...style
-  }, children)));
-});
-SelectViewport.displayName = VIEWPORT_NAME;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
 const SelectItem = React.forwardRef((props, forwardedRef) => {
@@ -215,6 +115,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;
@@ -295,13 +197,22 @@ 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);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectItemTextFrame, {
+  const isSelected = itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren;
+  const contents = /* @__PURE__ */ React.createElement(SelectItemTextFrame, {
     className,
     size: context.size,
     id: itemContext.textId,
     ...itemTextProps,
     ref: composedRefs
-  }), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
+  });
+  if (!isWeb) {
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents);
+      }
+    }, [isSelected]);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, contents, isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
@@ -353,95 +264,6 @@ const SelectLabel = React.forwardRef((props, forwardedRef) => {
   });
 });
 SelectLabel.displayName = LABEL_NAME;
-const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ React.createElement(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;
-  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 /* @__PURE__ */ React.createElement(YStack, {
-    ref: composedRefs,
-    componentName,
-    "aria-hidden": true,
-    ...scrollIndicatorProps,
-    zIndex: 1e3,
-    position: strategy,
-    left: x || 0,
-    top: y || 0,
-    width: `calc(${(((_a = floatingRef == null ? void 0 : floatingRef.current) == null ? void 0 : _a.offsetWidth) ?? 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"
 });
@@ -476,362 +298,6 @@ const SelectSheetContents = ({ __scopeSelect }) => {
   });
 };
 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 }) => {
-        const index = activeIndexRef.current ?? 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) => {
-    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 = (visualViewport == null ? void 0 : visualViewport.height) ?? 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;
-    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(((currentTarget == null ? void 0 : currentTarget.offsetHeight) ?? 0) - (((visualViewport == null ? void 0 : visualViewport.height) ?? 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 = (_a = event.touches[0]) == null ? void 0 : _a.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;
-    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 = ((_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) ?? 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 -= increaseHeight(floating2, diff) ?? 0;
-          }
-        }
-      }
-    }
-  }, [
-    open,
-    controlledScrolling,
-    prevActiveIndex,
-    activeIndex,
-    selectedIndex,
-    floatingRef,
-    increaseHeight
-  ]);
-  React.useLayoutEffect(() => {
-    var _a;
-    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 = ((visualViewport == null ? void 0 : visualViewport.height) ?? 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 /* @__PURE__ */ React.createElement(SelectProvider, {
-    scope: __scopeSelect,
-    ...selectContext,
-    increaseHeight,
-    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 ?? "",
-            left: 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,
-    canScrollDown: !!showDownArrow,
-    canScrollUp: !!showUpArrow,
-    controlledScrolling: true,
-    dataRef: context.dataRef,
-    listRef: listItemsRef
-  }, children);
-};
 const SelectSheetImpl = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
 };
@@ -845,13 +311,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,
@@ -876,6 +343,8 @@ const Select = withStaticProperties((props) => {
   return /* @__PURE__ */ React.createElement(SelectProvider, {
     dir,
     size: sizeProp,
+    selectedItem,
+    setSelectedItem,
     forceUpdate,
     valueNode,
     onValueNodeChange: setValueNode,
@@ -932,8 +401,9 @@ export {
   SelectSeparator,
   SelectSheetContents,
   SelectTrigger,
-  SelectViewport,
-  SelectViewportFrame,
-  createSelectScope
+  getVisualOffsetTop,
+  isFirefox,
+  useSelectBreakpointActive,
+  useShowSelectSheet
 };
 //# sourceMappingURL=Select.js.map