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

package/dist/cjs/Select.js

@@ -29,18 +29,16 @@ __export(Select_exports, {
   SelectSeparator: () => SelectSeparator,
   SelectSheetContents: () => SelectSheetContents,
   SelectTrigger: () => SelectTrigger,
-  SelectViewport: () => SelectViewport,
-  SelectViewportFrame: () => SelectViewportFrame,
-  createSelectScope: () => createSelectScope
+  getVisualOffsetTop: () => getVisualOffsetTop,
+  isFirefox: () => isFirefox,
+  useSelectBreakpointActive: () => useSelectBreakpointActive,
+  useShowSelectSheet: () => useShowSelectSheet
 });
 module.exports = __toCommonJS(Select_exports);
-var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
-var import_react_use_previous = require("@radix-ui/react-use-previous");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_core = require("@tamagui/core");
 var import_core2 = require("@tamagui/core");
 var import_core3 = require("@tamagui/core");
-var import_create_context = require("@tamagui/create-context");
 var import_list_item = require("@tamagui/list-item");
 var import_portal = require("@tamagui/portal");
 var import_separator = require("@tamagui/separator");
@@ -50,23 +48,28 @@ var import_text = require("@tamagui/text");
 var import_use_controllable_state = require("@tamagui/use-controllable-state");
 var React = __toESM(require("react"));
 var ReactDOM = __toESM(require("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;
+var import_constants = require("./constants");
+var import_context = require("./context");
+var import_SelectContent = require("./SelectContent");
+var import_SelectImpl = require("./SelectImpl");
+var import_SelectScrollButton = require("./SelectScrollButton");
+var import_SelectViewport = require("./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] = (0, import_create_context.createContextScope)(SELECT_NAME);
-const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
 const TRIGGER_NAME = "SelectTrigger";
+const SelectTriggerFrame = (0, import_core2.styled)(import_list_item.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,
@@ -74,17 +77,9 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     "aria-labelledby": ariaLabelledby,
     ...triggerProps
   } = props;
-  const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+  const context = (0, import_context.useSelectContext)(TRIGGER_NAME, __scopeSelect);
   const labelledBy = ariaLabelledby;
-  return /* @__PURE__ */ React.createElement(import_list_item.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",
@@ -107,14 +102,15 @@ const SelectValueFrame = (0, import_core2.styled)(import_text.Paragraph, {
   name: VALUE_NAME,
   selectable: false
 });
-const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children, placeholder }, forwardedRef) => {
-  const context = useSelectContext(VALUE_NAME, __scopeSelect);
+const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
+  const context = (0, import_context.useSelectContext)(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
-  const hasChildren = children !== void 0;
+  const hasChildren = childrenProp !== void 0;
   const composedRefs = (0, import_compose_refs.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,
@@ -127,80 +123,8 @@ const SelectIcon = (0, import_core2.styled)(import_stacks.XStack, {
   "aria-hidden": true,
   children: /* @__PURE__ */ React.createElement(import_text.Paragraph, null, "\u25BC")
 });
-const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
-  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
-  const themeName = (0, import_core2.useThemeName)();
-  const showSheet = useShowSelectSheet(context);
-  const contents = /* @__PURE__ */ React.createElement(import_core2.Theme, {
-    name: themeName
-  }, children);
-  if (showSheet && context.open) {
-    return contents;
-  }
-  return /* @__PURE__ */ React.createElement(import_react_dom_interactions.FloatingPortal, null, context.open ? /* @__PURE__ */ React.createElement(import_react_dom_interactions.FloatingOverlay, {
-    lockScroll: true
-  }, contents) : /* @__PURE__ */ React.createElement("div", {
-    style: { display: "none" }
-  }, contents));
-};
-const VIEWPORT_NAME = "SelectViewport";
-const SelectViewportFrame = (0, import_core2.styled)(import_stacks.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 || !import_core.isWeb) {
-    return /* @__PURE__ */ React.createElement(import_portal.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(import_react_dom_interactions.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 [SelectItemContextProvider, useSelectItemContext] = (0, import_context.createSelectContext)(ITEM_NAME);
 const SelectItem = React.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
@@ -210,7 +134,7 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     index,
     ...itemProps
   } = props;
-  const context = useSelectContext(ITEM_NAME, __scopeSelect);
+  const context = (0, import_context.useSelectContext)(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
   const [textValue, setTextValue] = React.useState(textValueProp ?? "");
   const [isFocused, setIsFocused] = React.useState(false);
@@ -228,6 +152,8 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     dataRef
   } = context;
   const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => {
+    if (!import_core.isWeb)
+      return;
     if (node instanceof HTMLElement) {
       if (listRef) {
         listRef.current[index] = node;
@@ -304,17 +230,26 @@ const SelectItemTextFrame = (0, import_core2.styled)(import_text.Paragraph, {
 });
 const SelectItemText = React.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, ...itemTextProps } = props;
-  const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
+  const context = (0, import_context.useSelectContext)(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const ref = React.useRef(null);
   const composedRefs = (0, import_compose_refs.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 (!import_core.isWeb) {
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents);
+      }
+    }, [isSelected]);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, contents, import_core.isWeb && isSelected ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
@@ -332,7 +267,7 @@ const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
-const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
+const [SelectGroupContextProvider, useSelectGroupContext] = (0, import_context.createSelectContext)(GROUP_NAME);
 const SelectGroupFrame = (0, import_core2.styled)(import_stacks.YStack, {
   name: GROUP_NAME,
   width: "100%"
@@ -354,7 +289,7 @@ SelectGroup.displayName = GROUP_NAME;
 const LABEL_NAME = "SelectLabel";
 const SelectLabel = React.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
-  const context = useSelectContext(LABEL_NAME, __scopeSelect);
+  const context = (0, import_context.useSelectContext)(LABEL_NAME, __scopeSelect);
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ React.createElement(import_list_item.ListItem, {
     componentName: LABEL_NAME,
@@ -366,95 +301,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 } = (0, import_react_dom_interactions.useFloating)({
-    strategy: "fixed",
-    placement: dir === "up" ? "top" : "bottom",
-    middleware: [(0, import_react_dom_interactions.offset)(({ rects }) => -rects.floating.height)]
-  });
-  const composedRefs = (0, import_compose_refs.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 = (0, import_react_dom_interactions.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(import_stacks.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 = (0, import_core2.styled)(import_separator.Separator, {
   name: "SelectSeparator"
 });
@@ -467,7 +313,7 @@ const useShowSelectSheet = (context) => {
   return context.open === false ? false : breakpointActive;
 };
 const SelectSheetController = (props) => {
-  const context = useSelectContext("SelectSheetController", props.__scopeSelect);
+  const context = (0, import_context.useSelectContext)("SelectSheetController", props.__scopeSelect);
   const showSheet = useShowSelectSheet(context);
   const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
   const getShowSheet = (0, import_core2.useGet)(showSheet);
@@ -483,368 +329,12 @@ const SelectSheetController = (props) => {
 };
 const SHEET_CONTENTS_NAME = "SelectSheetContents";
 const SelectSheetContents = ({ __scopeSelect }) => {
-  const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect);
+  const context = (0, import_context.useSelectContext)(SHEET_CONTENTS_NAME, __scopeSelect);
   return /* @__PURE__ */ React.createElement(import_portal.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 = (0, import_react_use_previous.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 } = (0, import_react_dom_interactions.useFloating)({
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    middleware: middlewareType === "align" ? [
-      (0, import_react_dom_interactions.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 (0, import_react_dom_interactions.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
-            }
-          };
-        }
-      }
-    ] : [
-      (0, import_react_dom_interactions.offset)(5),
-      (0, import_react_dom_interactions.flip)(),
-      (0, import_react_dom_interactions.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 = (0, import_react_dom_interactions.useInteractions)([
-    (0, import_react_dom_interactions.useClick)(context, { pointerDown: true }),
-    (0, import_react_dom_interactions.useRole)(context, { role: "listbox" }),
-    (0, import_react_dom_interactions.useDismiss)(context),
-    (0, import_react_dom_interactions.useListNavigation)(context, {
-      listRef: listItemsRef,
-      activeIndex,
-      selectedIndex,
-      onNavigate: setActiveIndex
-    }),
-    (0, import_react_dom_interactions.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);
 };
@@ -858,13 +348,14 @@ const Select = (0, import_core2.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 SelectImpl = isSheet ? SelectSheetImpl : import_SelectImpl.SelectInlineImpl;
   const forceUpdate = React.useReducer(() => ({}), {})[1];
+  const [selectedItem, setSelectedItem] = React.useState(null);
   const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
     prop: openProp,
     defaultProp: defaultOpen || false,
@@ -886,9 +377,11 @@ const Select = (0, import_core2.withStaticProperties)((props) => {
     selectedIndexRef.current = selectedIndex;
     activeIndexRef.current = activeIndex;
   });
-  return /* @__PURE__ */ React.createElement(SelectProvider, {
+  return /* @__PURE__ */ React.createElement(import_context.SelectProvider, {
     dir,
     size: sizeProp,
+    selectedItem,
+    setSelectedItem,
     forceUpdate,
     valueNode,
     onValueNodeChange: setValueNode,
@@ -920,22 +413,22 @@ const Select = (0, import_core2.withStaticProperties)((props) => {
     value
   }, children)));
 }, {
-  Content: SelectContent,
+  Content: import_SelectContent.SelectContent,
   Group: SelectGroup,
   Icon: SelectIcon,
   Item: SelectItem,
   ItemIndicator: SelectItemIndicator,
   ItemText: SelectItemText,
   Label: SelectLabel,
-  ScrollDownButton: SelectScrollDownButton,
-  ScrollUpButton: SelectScrollUpButton,
+  ScrollDownButton: import_SelectScrollButton.SelectScrollDownButton,
+  ScrollUpButton: import_SelectScrollButton.SelectScrollUpButton,
   Trigger: SelectTrigger,
   Value: SelectValue,
-  Viewport: SelectViewport,
+  Viewport: import_SelectViewport.SelectViewport,
   SheetContents: SelectSheetContents,
   Sheet: import_sheet.Sheet
 });
-Select.displayName = SELECT_NAME;
+Select.displayName = import_constants.SELECT_NAME;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Select,
@@ -946,8 +439,9 @@ Select.displayName = SELECT_NAME;
   SelectSeparator,
   SelectSheetContents,
   SelectTrigger,
-  SelectViewport,
-  SelectViewportFrame,
-  createSelectScope
+  getVisualOffsetTop,
+  isFirefox,
+  useSelectBreakpointActive,
+  useShowSelectSheet
 });
 //# sourceMappingURL=Select.js.map