@tamagui/select 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/jsx/Select.js

@@ -1,301 +1,313 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import {
-  offset,
-  useFloating
-} from "@floating-ui/react-dom-interactions";
-import { usePrevious } from "@radix-ui/react-use-previous";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import { composeEventHandlers, useIsomorphicLayoutEffect } from "@tamagui/core";
+import { isWeb } 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 } from "@tamagui/portal";
 import { Separator } from "@tamagui/separator";
-import { XStack } from "@tamagui/stacks";
+import { ControlledSheet, SheetController } from "@tamagui/sheet";
+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 OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
-const SELECTION_KEYS = [" ", "Enter"];
-const SELECT_NAME = "Select";
-const WINDOW_PADDING = 8;
-const SCROLL_ARROW_VELOCITY = 8;
-const SCROLL_ARROW_THRESHOLD = 8;
-const MIN_HEIGHT = 80;
-const FALLBACK_THRESHOLD = 16;
-const [createSelectContext, createSelectScope] = 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] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: onOpenChange
-  });
-  const [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  const selectedIndexRef = React.useRef(null);
-  const activeIndexRef = React.useRef(null);
-  const prevActiveIndex = 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)));
-  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 <SelectProvider scope={__scopeSelect} open={open}>{children}</SelectProvider>;
-}, "Select");
-Select.displayName = SELECT_NAME;
+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";
+import { useSelectBreakpointActive, useShowSelectSheet } from "./useSelectBreakpointActive";
 const TRIGGER_NAME = "SelectTrigger";
-const SelectTrigger = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeSelect,
-    disabled = false,
-    "aria-labelledby": ariaLabelledby,
-    ...triggerProps
-  } = props;
-  const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
-  const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
-  const getItems = useCollection(__scopeSelect);
-  const handleOpen = /* @__PURE__ */ __name(() => {
-    if (!disabled) {
-      context.onOpenChange(true);
-      resetTypeahead();
-    }
-  }, "handleOpen");
-  return <Primitive.button type="button" role="combobox" aria-controls={context.contentId} aria-expanded={context.open} aria-autocomplete="none" dir={context.dir} disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={composedRefs} onPointerDown={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={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();
-    }
-  })} />;
-});
+const SelectTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      disabled = false,
+      "aria-labelledby": ariaLabelledby,
+      ...triggerProps
+    } = props;
+    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+    const labelledBy = ariaLabelledby;
+    return <ListItem componentName={TRIGGER_NAME} backgrounded radiused hoverTheme pressTheme focusTheme focusable borderWidth={1} size={context.size} aria-expanded={context.open} aria-autocomplete="none" aria-labelledby={labelledBy} dir={context.dir} disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={forwardedRef} {...process.env.TAMAGUI_TARGET === "web" && context.interactions ? context.interactions.getReferenceProps() : {
+      onPress() {
+        context.setOpen(!context.open);
+      }
+    }} />;
+  }
+);
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
-const SelectValue = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, className, style, ...valueProps } = props;
-  return <XStack {...valueProps} pointerEvents="none" />;
-});
-const ICON_NAME = "SelectIcon";
-const SelectIcon = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, children, ...iconProps } = props;
-  return <XStack aria-hidden {...iconProps} ref={forwardedRef}>{children || "\u25BC"}</XStack>;
-});
-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 SelectValueFrame = styled(Paragraph, {
+  name: VALUE_NAME,
+  selectable: false
 });
-const GROUP_NAME = "SelectGroup";
-const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...groupProps } = props;
-  const groupId = useId();
-  return <SelectGroupContextProvider scope={__scopeSelect} id={groupId}><Primitive.div role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
-});
-SelectGroup.displayName = GROUP_NAME;
-const LABEL_NAME = "SelectLabel";
-const SelectLabel = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...labelProps } = props;
-  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return <Primitive.div id={groupContext.id} {...labelProps} ref={forwardedRef} />;
+const SelectValue = SelectValueFrame.extractable(
+  React.forwardRef(
+    ({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
+      const context = useSelectContext(VALUE_NAME, __scopeSelect);
+      const { onValueNodeHasChildrenChange } = context;
+      const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
+      const children = childrenProp ?? context.selectedItem;
+      const hasChildren = !!children;
+      const selectValueChildren = context.value === void 0 && placeholder !== void 0 ? placeholder : children;
+      useIsomorphicLayoutEffect(() => {
+        onValueNodeHasChildrenChange(hasChildren);
+      }, [onValueNodeHasChildrenChange, hasChildren]);
+      return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{selectValueChildren}</SelectValueFrame>;
+    }
+  )
+);
+SelectValue.displayName = VALUE_NAME;
+const SelectIcon = styled(XStack, {
+  name: "SelectIcon",
+  "aria-hidden": true,
+  children: <Paragraph>{"\u25BC"}</Paragraph>
 });
-SelectLabel.displayName = LABEL_NAME;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-const SelectItem = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, value, disabled = false, textValue: textValueProp, ...itemProps } = props;
-  const context = useSelectContext(ITEM_NAME, __scopeSelect);
-  const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
-  const isSelected = context.value === value;
-  const [textValue, setTextValue] = React.useState(textValueProp != null ? textValueProp : "");
-  const [isFocused, setIsFocused] = React.useState(false);
-  const composedRefs = useComposedRefs(forwardedRef, isSelected ? contentContext.onSelectedItemChange : void 0);
-  const textId = useId();
-  const handleSelect = /* @__PURE__ */ __name(() => {
-    if (!disabled) {
-      context.onValueChange(value);
-      context.onOpenChange(false);
-    }
-  }, "handleSelect");
-  return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId} isSelected={isSelected} onItemTextChange={React.useCallback((node) => {
-    setTextValue((prevTextValue) => {
-      var _a;
-      return prevTextValue || ((_a = node == null ? void 0 : node.textContent) != null ? _a : "").trim();
+const SelectItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      value,
+      disabled = false,
+      textValue: textValueProp,
+      index,
+      ...itemProps
+    } = props;
+    const context = useSelectContext(ITEM_NAME, __scopeSelect);
+    const isSelected = context.value === value;
+    const textId = useId();
+    const {
+      selectedIndex,
+      setSelectedIndex,
+      listRef,
+      open,
+      setOpen,
+      onChange,
+      setActiveIndex,
+      allowMouseUpRef,
+      allowSelectRef,
+      setValueAtIndex,
+      selectTimeoutRef,
+      dataRef
+    } = context;
+    const composedRefs = useComposedRefs(forwardedRef, (node) => {
+      if (!isWeb)
+        return;
+      if (node instanceof HTMLElement) {
+        if (listRef) {
+          listRef.current[index] = node;
+        }
+      }
     });
-  }, [])}><Collection.ItemSlot scope={__scopeSelect} value={value} disabled={disabled} textValue={textValue}><Primitive.div role="option" 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={composeEventHandlers(itemProps.onFocus, () => setIsFocused(true))} onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))} onPointerUp={composeEventHandlers(itemProps.onPointerUp, handleSelect)} onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {
-    if (disabled) {
-      contentContext.onItemLeave();
-    } else {
-      event.currentTarget.focus({ preventScroll: true });
-    }
-  })} onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {
-    if (event.currentTarget === document.activeElement) {
-      contentContext.onItemLeave();
+    React.useEffect(() => {
+      setValueAtIndex(index, value);
+    }, [index, setValueAtIndex, value]);
+    function handleSelect() {
+      setSelectedIndex(index);
+      onChange(value);
+      setOpen(false);
     }
-  })} onKeyDown={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();
-  })} /></Collection.ItemSlot></SelectItemContextProvider>;
-});
+    const selectItemProps = context.interactions ? context.interactions.getItemProps({
+      onTouchStart() {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = false;
+      },
+      onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " " && !dataRef?.current.typing) {
+          event.preventDefault();
+          handleSelect();
+        } else {
+          allowSelectRef.current = true;
+        }
+      },
+      onClick() {
+        if (allowSelectRef.current) {
+          setSelectedIndex(index);
+          setOpen(false);
+        }
+      },
+      onMouseUp() {
+        if (!allowMouseUpRef.current) {
+          return;
+        }
+        if (allowSelectRef.current) {
+          handleSelect();
+        }
+        clearTimeout(selectTimeoutRef.current);
+        selectTimeoutRef.current = setTimeout(() => {
+          allowSelectRef.current = true;
+        });
+      }
+    }) : {
+      onPress: handleSelect
+    };
+    return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected}><ListItem backgrounded pressTheme cursor="" focusTheme componentName={ITEM_NAME} ref={composedRefs} aria-labelledby={textId} aria-selected={isSelected} data-state={isSelected ? "active" : "inactive"} aria-disabled={disabled || void 0} data-disabled={disabled ? "" : void 0} tabIndex={disabled ? void 0 : -1} size={context.size} {...itemProps} {...selectItemProps} /></SelectItemContextProvider>;
+  }
+);
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
-const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  var _a;
-  const { __scopeSelect, className, style, ...itemTextProps } = props;
-  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 = useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, itemContext.isSelected ? contentContext.onSelectedItemTextChange : void 0);
-  return <>
-    <Primitive.span id={itemContext.textId} {...itemTextProps} ref={composedRefs} />
-    {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
-    {context.bubbleSelect ? ReactDOM.createPortal(<option value={itemContext.value}>{(_a = ref.current) == null ? void 0 : _a.textContent}</option>, context.bubbleSelect) : null}
-  </>;
+const SelectItemTextFrame = styled(Paragraph, {
+  name: ITEM_TEXT_NAME,
+  selectable: false
 });
+const SelectItemText = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, className, ...itemTextProps } = props;
+    const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
+    const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const isSelected = Boolean(itemContext.isSelected && context.valueNode);
+    const contents = React.useMemo(
+      () => <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />,
+      [props, context.size, className, itemContext.textId]
+    );
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents);
+      }
+    }, [isSelected, contents]);
+    return <>{contents}</>;
+  }
+);
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
-const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...itemIndicatorProps } = props;
-  const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? <Primitive.span aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
+const SelectItemIndicatorFrame = styled(XStack, {
+  name: ITEM_TEXT_NAME
 });
+const SelectItemIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...itemIndicatorProps } = props;
+    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return itemContext.isSelected ? <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
+  }
+);
 SelectItemIndicator.displayName = ITEM_INDICATOR_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 = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange);
-  return canScrollUp ? <SelectScrollButtonImpl {...props} ref={composedRefs} onAutoScroll={() => {
-    const { viewport, selectedItem } = contentContext;
-    if (viewport && selectedItem) {
-      viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
-    }
-  }} /> : null;
-});
-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 = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange);
-  return canScrollDown ? <SelectScrollButtonImpl {...props} ref={composedRefs} onAutoScroll={() => {
-    const { viewport, selectedItem } = contentContext;
-    if (viewport && selectedItem) {
-      viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
-    }
-  }} /> : null;
+const GROUP_NAME = "SelectGroup";
+const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
+const SelectGroupFrame = styled(YStack, {
+  name: GROUP_NAME,
+  width: "100%"
 });
-SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
-  const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React.useRef(null);
-  const intervalRef = React.useRef();
-  const loopingRef = React.useRef(false);
-  const { x, y, reference, floating, strategy, update, refs } = useFloating({
-    strategy: "fixed",
-    placement: dir === "up" ? "top" : "bottom",
-    middleware: [offset(({ floating: floating2 }) => -floating2.height)]
-  });
-  return <Primitive.div aria-hidden {...scrollIndicatorProps} ref={forwardedRef} style={{ flexShrink: 0, ...scrollIndicatorProps.style }} onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {
-    contentContext.onItemLeave();
-    if (autoScrollTimerRef.current === null) {
-      autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
-    }
-  })} onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {
-    clearAutoScrollTimer();
-  })} />;
+const SelectGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...groupProps } = props;
+    const groupId = useId();
+    return <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ""}><SelectGroupFrame role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
+  }
+);
+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 groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} size={context.size} {...labelProps} ref={forwardedRef} />;
+  }
+);
+SelectLabel.displayName = LABEL_NAME;
+const SelectSeparator = styled(Separator, {
+  name: "SelectSeparator"
 });
-const SEPARATOR_NAME = "SelectSeparator";
-const SelectSeparator = Separator;
-SelectSeparator.displayName = SEPARATOR_NAME;
-const BubbleSelect = React.forwardRef((props, forwardedRef) => {
-  const { value, ...selectProps } = props;
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref);
-  const prevValue = usePrevious(value);
-  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 SelectSheetController = (props) => {
+  const context = useSelectContext("SelectSheetController", props.__scopeSelect);
+  const showSheet = useShowSelectSheet(context);
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  const getShowSheet = useGet(showSheet);
+  return <SheetController onOpenChange={(val) => {
+    if (getShowSheet()) {
+      props.onOpenChange(val);
     }
-  }, [prevValue, value]);
-  return null;
-  return <VisuallyHidden asChild><select {...selectProps} ref={composedRefs} defaultValue={value} /></VisuallyHidden>;
-});
+  }} open={context.open} hidden={breakpointActive === false}>{props.children}</SheetController>;
+};
+const SHEET_CONTENTS_NAME = "SelectSheetContents";
+const SelectSheetContents = ({ __scopeSelect }) => {
+  const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect);
+  return <PortalHost name={`${context.scopeKey}SheetContents`} />;
+};
+SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
+const SelectSheetImpl = (props) => {
+  return <>{props.children}</>;
+};
+const Select = withStaticProperties(
+  (props) => {
+    const {
+      __scopeSelect,
+      children,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      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,
+      onChange: onOpenChange,
+      strategy: "most-recent-wins"
+    });
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue || "",
+      onChange: onValueChange,
+      strategy: "most-recent-wins"
+    });
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const selectedIndexRef = React.useRef(null);
+    const activeIndexRef = React.useRef(null);
+    const listContentRef = React.useRef([]);
+    const [selectedIndex, setSelectedIndex] = React.useState(
+      Math.max(0, listContentRef.current.indexOf(value))
+    );
+    const [valueNode, setValueNode] = React.useState(null);
+    const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+      selectedIndexRef.current = selectedIndex;
+      activeIndexRef.current = activeIndex;
+    });
+    const id = useId();
+    const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id;
+    return <SelectProvider dir={dir} blockSelection={false} size={sizeProp} fallback={false} selectedItem={selectedItem} setSelectedItem={setSelectedItem} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={scopeKey} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
+      listContentRef.current[index] = value2;
+    }} activeIndex={activeIndex} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}><SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider>;
+  },
+  {
+    Content: SelectContent,
+    Group: SelectGroup,
+    Icon: SelectIcon,
+    Item: SelectItem,
+    ItemIndicator: SelectItemIndicator,
+    ItemText: SelectItemText,
+    Label: SelectLabel,
+    ScrollDownButton: SelectScrollDownButton,
+    ScrollUpButton: SelectScrollUpButton,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Viewport: SelectViewport,
+    SheetContents: SelectSheetContents,
+    Sheet: ControlledSheet
+  }
+);
+Select.displayName = SELECT_NAME;
 export {
   Select,
-  SelectContent,
-  SelectGroup,
+  SelectGroupFrame,
   SelectIcon,
   SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
+  SelectItemTextFrame,
   SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  createSelectScope
+  SelectSheetContents,
+  SelectTrigger
 };
+//# sourceMappingURL=Select.js.map