@tamagui/select 1.0.0-beta.15 → 1.0.1-beta.100

package/dist/cjs/Select.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -51,18 +50,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Select_exports = {};
 __export(Select_exports, {
   Select: () => Select,
-  SelectContent: () => SelectContent,
-  SelectGroup: () => SelectGroup,
+  SelectGroupFrame: () => SelectGroupFrame,
   SelectIcon: () => SelectIcon,
   SelectItem: () => SelectItem,
-  SelectItemIndicator: () => SelectItemIndicator,
-  SelectItemText: () => SelectItemText,
-  SelectLabel: () => SelectLabel,
-  SelectScrollDownButton: () => SelectScrollDownButton,
-  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectItemTextFrame: () => SelectItemTextFrame,
   SelectSeparator: () => SelectSeparator,
   SelectTrigger: () => SelectTrigger,
-  SelectValue: () => SelectValue,
+  SelectViewport: () => SelectViewport,
+  SelectViewportFrame: () => SelectViewportFrame,
   createSelectScope: () => createSelectScope
 });
 module.exports = __toCommonJS(Select_exports);
@@ -72,13 +67,21 @@ var import_compose_refs = require("@tamagui/compose-refs");
 var import_core = require("@tamagui/core");
 var import_core2 = require("@tamagui/core");
 var import_create_context = require("@tamagui/create-context");
+var import_list_item = require("@tamagui/list-item");
 var import_separator = require("@tamagui/separator");
 var import_stacks = require("@tamagui/stacks");
+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 OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
-const SELECTION_KEYS = [" ", "Enter"];
+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 SELECT_NAME = "Select";
 const WINDOW_PADDING = 8;
 const SCROLL_ARROW_VELOCITY = 8;
@@ -87,61 +90,6 @@ const MIN_HEIGHT = 80;
 const FALLBACK_THRESHOLD = 16;
 const [createSelectContext, createSelectScope] = (0, import_create_context.createContextScope)(SELECT_NAME);
 const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
-const Select = /* @__PURE__ */ __name((props) => {
-  const {
-    __scopeSelect,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    dir: dir2,
-    name,
-    autoComplete
-  } = props;
-  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: onOpenChange
-  });
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  const selectedIndexRef = React.useRef(null);
-  const activeIndexRef = React.useRef(null);
-  const prevActiveIndex = (0, import_react_use_previous.usePrevious)(activeIndex);
-  const [showArrows, setShowArrows] = React.useState(false);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const [selectedIndex, setSelectedIndex] = React.useState(Math.max(0, listContentRef.current.indexOf(value)));
-  (0, import_core.useIsomorphicLayoutEffect)(() => {
-    selectedIndexRef.current = selectedIndex;
-    activeIndexRef.current = activeIndex;
-  });
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
-  return /* @__PURE__ */ React.createElement(SelectProvider, {
-    scope: __scopeSelect,
-    open
-  }, children);
-}, "Select");
-Select.displayName = SELECT_NAME;
 const TRIGGER_NAME = "SelectTrigger";
 const SelectTrigger = React.forwardRef((props, forwardedRef) => {
   const _a = props, {
@@ -154,298 +102,777 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     "aria-labelledby"
   ]);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onTriggerChange);
-  const getItems = useCollection(__scopeSelect);
-  const handleOpen = /* @__PURE__ */ __name(() => {
-    if (!disabled) {
-      context.onOpenChange(true);
-      resetTypeahead();
-    }
-  }, "handleOpen");
-  return /* @__PURE__ */ React.createElement(Primitive.button, __spreadProps(__spreadValues({
-    type: "button",
-    role: "combobox",
-    "aria-controls": context.contentId,
+  return /* @__PURE__ */ React.createElement(import_list_item.ListItem, __spreadValues(__spreadProps(__spreadValues({
+    backgrounded: true,
+    radiused: true,
+    hoverTheme: true,
+    pressTheme: true,
+    focusTheme: true,
+    focusable: false,
+    borderWidth: 1,
+    componentName: TRIGGER_NAME,
+    size: context.size,
     "aria-expanded": context.open,
     "aria-autocomplete": "none",
-    dir: context.dir,
     disabled,
     "data-disabled": disabled ? "" : void 0
   }, triggerProps), {
-    ref: composedRefs,
-    onPointerDown: (0, import_core.composeEventHandlers)(triggerProps.onPointerDown, (event) => {
-      ;
-      event.target.releasePointerCapture(event.pointerId);
-      if (event.button === 0 && event.ctrlKey === false) {
-        handleOpen();
-        context.triggerPointerDownPosRef.current = {
-          x: Math.round(event.pageX),
-          y: Math.round(event.pageY)
-        };
-        event.preventDefault();
-      }
-    }),
-    onKeyDown: (0, import_core.composeEventHandlers)(triggerProps.onKeyDown, (event) => {
-      const isTypingAhead = searchRef.current !== "";
-      const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-      if (!isModifierKey && event.key.length === 1)
-        handleTypeaheadSearch(event.key);
-      if (isTypingAhead && event.key === " ")
-        return;
-      if (OPEN_KEYS.includes(event.key)) {
-        handleOpen();
-        event.preventDefault();
-      }
-    })
-  }));
+    ref: forwardedRef
+  }), context.interactions.getReferenceProps()));
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
-const SelectValue = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, className, style } = _a, valueProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
-  return /* @__PURE__ */ React.createElement(import_stacks.XStack, __spreadProps(__spreadValues({}, valueProps), {
-    pointerEvents: "none"
-  }));
+const SelectValueFrame = (0, import_core.styled)(import_text.Paragraph, {
+  name: VALUE_NAME,
+  selectable: false
 });
-const ICON_NAME = "SelectIcon";
-const SelectIcon = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, children } = _a, iconProps = __objRest(_a, ["__scopeSelect", "children"]);
-  return /* @__PURE__ */ React.createElement(import_stacks.XStack, __spreadProps(__spreadValues({
-    "aria-hidden": true
-  }, iconProps), {
-    ref: forwardedRef
-  }), children || "\u25BC");
+const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children, placeholder }, forwardedRef) => {
+  const context = useSelectContext(VALUE_NAME, __scopeSelect);
+  const { onValueNodeHasChildrenChange } = context;
+  const hasChildren = children !== void 0;
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onValueNodeChange);
+  React.useLayoutEffect(() => {
+    onValueNodeHasChildrenChange(hasChildren);
+  }, [onValueNodeHasChildrenChange, hasChildren]);
+  return /* @__PURE__ */ React.createElement(SelectValueFrame, {
+    size: context.size,
+    ref: composedRefs,
+    pointerEvents: "none"
+  }, context.value === void 0 && placeholder !== void 0 ? placeholder : children);
+}));
+SelectValue.displayName = VALUE_NAME;
+const SelectIcon = (0, import_core.styled)(import_stacks.XStack, {
+  name: "SelectIcon",
+  "aria-hidden": true,
+  children: /* @__PURE__ */ React.createElement(import_text.Paragraph, null, "\u25BC")
 });
-SelectIcon.displayName = ICON_NAME;
 const CONTENT_NAME = "SelectContent";
-const SelectContent = React.forwardRef((props, forwardedRef) => {
-  const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);
-  return props.children;
-});
-const GROUP_NAME = "SelectGroup";
-const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect } = _a, groupProps = __objRest(_a, ["__scopeSelect"]);
-  const groupId = (0, import_core2.useId)();
-  return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
-    scope: __scopeSelect,
-    id: groupId
-  }, /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    role: "group",
-    "aria-labelledby": groupId
-  }, groupProps), {
-    ref: forwardedRef
-  })));
+const SelectContent = ({ children, __scopeSelect }) => {
+  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
+  const themeName = (0, import_core.useThemeName)();
+  const contents = /* @__PURE__ */ React.createElement(import_core.Theme, {
+    name: themeName
+  }, children);
+  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_core.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"
+  }
 });
-SelectGroup.displayName = GROUP_NAME;
-const LABEL_NAME = "SelectLabel";
-const SelectLabel = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect } = _a, labelProps = __objRest(_a, ["__scopeSelect"]);
-  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    id: groupContext.id
-  }, labelProps), {
+const SelectViewport = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { __scopeSelect, children } = _a, viewportProps = __objRest(_a, ["__scopeSelect", "children"]);
+  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
+  const _b = context.interactions.getFloatingProps(), { style } = _b, floatingProps = __objRest(_b, ["style"]);
+  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, __spreadValues(__spreadValues(__spreadProps(__spreadValues({
+    size: context.size,
+    "data-tamagui-select-viewport": "",
+    role: "presentation"
+  }, viewportProps), {
     ref: forwardedRef
-  }));
+  }), floatingProps), style), children)));
 });
-SelectLabel.displayName = LABEL_NAME;
+SelectViewport.displayName = VIEWPORT_NAME;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
 const SelectItem = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, value, disabled = false, textValue: textValueProp } = _a, itemProps = __objRest(_a, ["__scopeSelect", "value", "disabled", "textValue"]);
+  const _a = props, {
+    __scopeSelect,
+    value,
+    disabled = false,
+    textValue: textValueProp,
+    index
+  } = _a, itemProps = __objRest(_a, [
+    "__scopeSelect",
+    "value",
+    "disabled",
+    "textValue",
+    "index"
+  ]);
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
-  const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
   const [textValue, setTextValue] = React.useState(textValueProp ?? "");
   const [isFocused, setIsFocused] = React.useState(false);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, isSelected ? contentContext.onSelectedItemChange : void 0);
   const textId = (0, import_core2.useId)();
-  const handleSelect = /* @__PURE__ */ __name(() => {
-    if (!disabled) {
-      context.onValueChange(value);
-      context.onOpenChange(false);
+  const {
+    selectedIndex,
+    setSelectedIndex,
+    listRef,
+    open,
+    setOpen,
+    onChange,
+    activeIndex,
+    setActiveIndex,
+    setValueAtIndex,
+    dataRef
+  } = context;
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => {
+    if (node instanceof HTMLElement) {
+      listRef.current[index] = node;
+    }
+  });
+  React.useEffect(() => {
+    setValueAtIndex(index, value);
+  }, [index]);
+  const timeoutRef = React.useRef();
+  const [allowMouseUp, setAllowMouseUp] = React.useState(false);
+  function handleSelect() {
+    setSelectedIndex(index);
+    onChange(value);
+    setOpen(false);
+  }
+  React.useLayoutEffect(() => {
+    clearTimeout(timeoutRef.current);
+    if (open) {
+      if (selectedIndex !== index) {
+        setAllowMouseUp(true);
+      } else {
+        timeoutRef.current = setTimeout(() => {
+          setAllowMouseUp(true);
+        }, 300);
+      }
+    } else {
+      setAllowMouseUp(false);
+    }
+  }, [open, index, setActiveIndex, selectedIndex]);
+  function handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " " && !dataRef.current.typing) {
+      event.preventDefault();
+      handleSelect();
     }
-  }, "handleSelect");
+  }
+  const selectItemProps = context.interactions.getItemProps({
+    onClick: allowMouseUp ? handleSelect : void 0,
+    onMouseUp: allowMouseUp ? handleSelect : void 0,
+    onKeyDown: handleKeyDown
+  });
   return /* @__PURE__ */ React.createElement(SelectItemContextProvider, {
     scope: __scopeSelect,
     value,
-    textId,
+    textId: textId || "",
     isSelected,
     onItemTextChange: React.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim());
     }, [])
-  }, /* @__PURE__ */ React.createElement(Collection.ItemSlot, {
-    scope: __scopeSelect,
-    value,
-    disabled,
-    textValue
-  }, /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
-    role: "option",
+  }, /* @__PURE__ */ React.createElement(import_list_item.ListItem, __spreadValues(__spreadValues({
+    backgrounded: true,
+    pressTheme: true,
+    focusTheme: true,
+    componentName: ITEM_NAME,
+    ref: composedRefs,
     "aria-labelledby": textId,
     "aria-selected": isSelected && isFocused,
     "data-state": isSelected ? "active" : "inactive",
     "aria-disabled": disabled || void 0,
     "data-disabled": disabled ? "" : void 0,
-    tabIndex: disabled ? void 0 : -1
-  }, itemProps), {
-    ref: composedRefs,
-    onFocus: (0, import_core.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
-    onBlur: (0, import_core.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
-    onPointerUp: (0, import_core.composeEventHandlers)(itemProps.onPointerUp, handleSelect),
-    onPointerMove: (0, import_core.composeEventHandlers)(itemProps.onPointerMove, (event) => {
-      if (disabled) {
-        contentContext.onItemLeave();
-      } else {
-        event.currentTarget.focus({ preventScroll: true });
-      }
-    }),
-    onPointerLeave: (0, import_core.composeEventHandlers)(itemProps.onPointerLeave, (event) => {
-      if (event.currentTarget === document.activeElement) {
-        contentContext.onItemLeave();
-      }
-    }),
-    onKeyDown: (0, import_core.composeEventHandlers)(itemProps.onKeyDown, (event) => {
-      const isTypingAhead = contentContext.searchRef.current !== "";
-      if (isTypingAhead && event.key === " ")
-        return;
-      if (SELECTION_KEYS.includes(event.key))
-        handleSelect();
-      if (event.key === " ")
-        event.preventDefault();
-    })
-  }))));
+    tabIndex: disabled ? void 0 : -1,
+    size: context.size
+  }, itemProps), selectItemProps)));
 });
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
+const SelectItemTextFrame = (0, import_core.styled)(import_text.Paragraph, {
+  name: ITEM_TEXT_NAME,
+  selectable: false
+});
 const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  var _b;
   const _a = props, { __scopeSelect, className, style } = _a, itemTextProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
-  const contentContext = useSelectContentContext(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, itemContext.isSelected ? contentContext.onSelectedItemTextChange : void 0);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Primitive.span, __spreadProps(__spreadValues({
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, itemContext.onItemTextChange);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectItemTextFrame, __spreadProps(__spreadValues({
+    size: context.size,
     id: itemContext.textId
   }, itemTextProps), {
     ref: composedRefs
-  })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null, context.bubbleSelect ? ReactDOM.createPortal(/* @__PURE__ */ React.createElement("option", {
-    value: itemContext.value
-  }, (_b = ref.current) == null ? void 0 : _b.textContent), context.bubbleSelect) : null);
+  })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
+const SelectItemIndicatorFrame = (0, import_core.styled)(import_stacks.XStack, {
+  name: ITEM_TEXT_NAME
+});
 const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
   const _a = props, { __scopeSelect } = _a, itemIndicatorProps = __objRest(_a, ["__scopeSelect"]);
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ React.createElement(Primitive.span, __spreadProps(__spreadValues({
+  return itemContext.isSelected ? /* @__PURE__ */ React.createElement(SelectItemIndicatorFrame, __spreadProps(__spreadValues({
     "aria-hidden": true
   }, itemIndicatorProps), {
     ref: forwardedRef
   })) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
+const GROUP_NAME = "SelectGroup";
+const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
+const SelectGroupFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: GROUP_NAME,
+  width: "100%"
+});
+const SelectGroup = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { __scopeSelect } = _a, groupProps = __objRest(_a, ["__scopeSelect"]);
+  const groupId = (0, import_core2.useId)();
+  return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
+    scope: __scopeSelect,
+    id: groupId || ""
+  }, /* @__PURE__ */ React.createElement(SelectGroupFrame, __spreadProps(__spreadValues({
+    role: "group",
+    "aria-labelledby": groupId
+  }, groupProps), {
+    ref: forwardedRef
+  })));
+});
+SelectGroup.displayName = GROUP_NAME;
+const LABEL_NAME = "SelectLabel";
+const SelectLabel = React.forwardRef((props, forwardedRef) => {
+  const _a = props, { __scopeSelect } = _a, labelProps = __objRest(_a, ["__scopeSelect"]);
+  const context = useSelectContext(LABEL_NAME, __scopeSelect);
+  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+  return /* @__PURE__ */ React.createElement(import_list_item.ListItem, __spreadProps(__spreadValues({
+    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) => {
-  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React.useState(false);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentContext.onScrollButtonChange);
-  return canScrollUp ? /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({}, props), {
-    ref: composedRefs,
-    onAutoScroll: () => {
-      const { viewport, selectedItem } = contentContext;
-      if (viewport && selectedItem) {
-        viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
-      }
-    }
-  })) : null;
+  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({
+    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) => {
-  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React.useState(false);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentContext.onScrollButtonChange);
-  return canScrollDown ? /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({}, props), {
-    ref: composedRefs,
-    onAutoScroll: () => {
-      const { viewport, selectedItem } = contentContext;
-      if (viewport && selectedItem) {
-        viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
-      }
-    }
-  })) : null;
+  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({
+    componentName: SCROLL_DOWN_BUTTON_NAME
+  }, props), {
+    dir: "down",
+    ref: forwardedRef
+  }));
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, onAutoScroll } = _a, scrollIndicatorProps = __objRest(_a, ["__scopeSelect", "onAutoScroll"]);
-  const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React.useRef(null);
+  var _c;
+  const _a = props, { __scopeSelect, dir, componentName } = _a, scrollIndicatorProps = __objRest(_a, ["__scopeSelect", "dir", "componentName"]);
+  const _b = useSelectContext(componentName, __scopeSelect), { floatingRef, increaseHeight, forceUpdate } = _b, context = __objRest(_b, ["floatingRef", "increaseHeight", "forceUpdate"]);
   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)(({ floating: floating2 }) => -floating2.height)]
+    middleware: [(0, import_react_dom_interactions.offset)(({ rects }) => -rects.floating.height)]
   });
-  return /* @__PURE__ */ React.createElement(Primitive.div, __spreadProps(__spreadValues({
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, floating);
+  React.useLayoutEffect(() => {
+    reference(floatingRef.current);
+  }, [reference, 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 = () => {
+    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(floating2, multi === 2 ? value * 2 : value);
+      forceUpdate();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadProps(__spreadValues({
+    ref: composedRefs,
+    componentName,
     "aria-hidden": true
   }, scrollIndicatorProps), {
-    ref: forwardedRef,
-    style: __spreadValues({ flexShrink: 0 }, scrollIndicatorProps.style),
-    onPointerMove: (0, import_core.composeEventHandlers)(scrollIndicatorProps.onPointerMove, () => {
-      contentContext.onItemLeave();
-      if (autoScrollTimerRef.current === null) {
-        autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+    zIndex: 1e3,
+    position: strategy,
+    left: x || 0,
+    top: y || 0,
+    width: `calc(${(((_c = floatingRef.current) == null ? void 0 : _c.offsetWidth) ?? 0) - 2}px)`,
+    onPointerMove: () => {
+      if (!loopingRef.current) {
+        intervalRef.current = setInterval(handleScrollArrowChange, 1e3 / 60);
+        loopingRef.current = true;
       }
-    }),
-    onPointerLeave: (0, import_core.composeEventHandlers)(scrollIndicatorProps.onPointerLeave, () => {
-      clearAutoScrollTimer();
-    })
+    },
+    onPointerLeave: () => {
+      loopingRef.current = false;
+      clearInterval(intervalRef.current);
+    }
   }));
 });
-const SEPARATOR_NAME = "SelectSeparator";
-const SelectSeparator = import_separator.Separator;
-SelectSeparator.displayName = SEPARATOR_NAME;
-const BubbleSelect = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { value } = _a, selectProps = __objRest(_a, ["value"]);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  const prevValue = (0, import_react_use_previous.usePrevious)(value);
+const SelectSeparator = (0, import_core.styled)(import_separator.Separator, {
+  name: "SelectSeparator"
+});
+const Select = (0, import_core.withStaticProperties)((props) => {
+  const {
+    id,
+    __scopeSelect,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    size: sizeProp,
+    dir,
+    name,
+    autoComplete
+  } = props;
+  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange
+  });
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    prop: valueProp,
+    defaultProp: defaultValue || "",
+    onChange: onValueChange
+  });
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const selectedIndexRef = React.useRef(null);
+  const activeIndexRef = React.useRef(null);
+  const prevActiveIndex = (0, import_react_use_previous.usePrevious)(activeIndex);
+  const [showArrows, setShowArrows] = React.useState(false);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const listItemsRef = React.useRef([]);
+  const listContentRef = React.useRef([]);
+  const [selectedIndex, setSelectedIndex] = React.useState(Math.max(0, listContentRef.current.indexOf(value)));
+  const [controlledScrolling, setControlledScrolling] = React.useState(false);
+  const [middlewareType, setMiddlewareType] = React.useState("align");
+  (0, import_core.useIsomorphicLayoutEffect)(() => {
+    selectedIndexRef.current = selectedIndex;
+    activeIndexRef.current = activeIndex;
+  });
   React.useEffect(() => {
-    const select = ref.current;
-    const selectProto = window.HTMLSelectElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
-    const setValue = descriptor.set;
-    if (prevValue !== value && setValue) {
-      const event = new Event("change", { bubbles: true });
-      setValue.call(select, value);
-      select.dispatchEvent(event);
+    const frame = requestAnimationFrame(() => {
+      setShowArrows(open);
+      if (!open) {
+        setScrollTop(0);
+        setMiddlewareType("align");
+        setActiveIndex(null);
+        setControlledScrolling(false);
+      }
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [open]);
+  function getFloatingPadding(floating2) {
+    var _a;
+    if (!floating2) {
+      return 0;
     }
-  }, [prevValue, value]);
-  return null;
-  return /* @__PURE__ */ React.createElement(VisuallyHidden, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement("select", __spreadProps(__spreadValues({}, selectProps), {
-    ref: composedRefs,
-    defaultValue: value
-  })));
+    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 forceUpdate = React.useReducer(() => ({}), {})[1];
+  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]);
+  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();
+    }
+  }, [increaseHeight, forceUpdate]);
+  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]);
+  const [valueNode, setValueNode] = React.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(SelectProvider, {
+    size: sizeProp,
+    scope: __scopeSelect,
+    increaseHeight,
+    forceUpdate,
+    floatingRef,
+    valueNode,
+    onValueNodeChange: setValueNode,
+    valueNodeHasChildren,
+    onValueNodeHasChildrenChange: setValueNodeHasChildren,
+    setValueAtIndex: (index, value2) => {
+      listContentRef.current[index] = value2;
+    },
+    interactions: __spreadProps(__spreadValues({}, 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(__spreadProps(__spreadValues({
+          ref: floating,
+          className: "Select"
+        }, props2), {
+          style: __spreadValues({
+            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,
+    onChange: setValue,
+    selectedIndex,
+    setActiveIndex,
+    setOpen,
+    setSelectedIndex,
+    value,
+    open
+  }, children);
+}, {
+  Content: SelectContent,
+  Group: SelectGroup,
+  Icon: SelectIcon,
+  Item: SelectItem,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: SelectItemText,
+  Label: SelectLabel,
+  ScrollDownButton: SelectScrollDownButton,
+  ScrollUpButton: SelectScrollUpButton,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Viewport: SelectViewport
 });
+Select.displayName = SELECT_NAME;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Select,
-  SelectContent,
-  SelectGroup,
+  SelectGroupFrame,
   SelectIcon,
   SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
+  SelectItemTextFrame,
   SelectSeparator,
   SelectTrigger,
-  SelectValue,
+  SelectViewport,
+  SelectViewportFrame,
   createSelectScope
 });
 //# sourceMappingURL=Select.js.map