@tamagui/select 1.0.1-beta.103 → 1.0.1-beta.106

package/dist/cjs/Select.js

@@ -55,6 +55,7 @@ __export(Select_exports, {
   SelectItem: () => SelectItem,
   SelectItemTextFrame: () => SelectItemTextFrame,
   SelectSeparator: () => SelectSeparator,
+  SelectSheetContents: () => SelectSheetContents,
   SelectTrigger: () => SelectTrigger,
   SelectViewport: () => SelectViewport,
   SelectViewportFrame: () => SelectViewportFrame,
@@ -66,14 +67,23 @@ 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");
+var import_sheet = require("@tamagui/sheet");
 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 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 userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
 const isFirefox = userAgent.toLowerCase().includes("firefox");
 if (isFirefox) {
@@ -82,12 +92,6 @@ if (isFirefox) {
 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;
-const SCROLL_ARROW_THRESHOLD = 8;
-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 TRIGGER_NAME = "SelectTrigger";
@@ -102,6 +106,7 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     "aria-labelledby"
   ]);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+  const labelledBy = ariaLabelledby;
   return /* @__PURE__ */ React.createElement(import_list_item.ListItem, __spreadValues(__spreadProps(__spreadValues({
     backgrounded: true,
     radiused: true,
@@ -114,15 +119,21 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     size: context.size,
     "aria-expanded": context.open,
     "aria-autocomplete": "none",
+    "aria-labelledby": labelledBy,
+    dir: context.dir,
     disabled,
     "data-disabled": disabled ? "" : void 0
   }, triggerProps), {
     ref: forwardedRef
-  }), context.interactions.getReferenceProps()));
+  }), context.interactions ? context.interactions.getReferenceProps() : {
+    onPress() {
+      context.setOpen(!context.open);
+    }
+  }));
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
-const SelectValueFrame = (0, import_core.styled)(import_text.Paragraph, {
+const SelectValueFrame = (0, import_core2.styled)(import_text.Paragraph, {
   name: VALUE_NAME,
   selectable: false
 });
@@ -141,7 +152,7 @@ const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSele
   }, context.value === void 0 && placeholder !== void 0 ? placeholder : children);
 }));
 SelectValue.displayName = VALUE_NAME;
-const SelectIcon = (0, import_core.styled)(import_stacks.XStack, {
+const SelectIcon = (0, import_core2.styled)(import_stacks.XStack, {
   name: "SelectIcon",
   "aria-hidden": true,
   children: /* @__PURE__ */ React.createElement(import_text.Paragraph, null, "\u25BC")
@@ -149,10 +160,14 @@ const SelectIcon = (0, import_core.styled)(import_stacks.XStack, {
 const CONTENT_NAME = "SelectContent";
 const SelectContent = ({ children, __scopeSelect }) => {
   const context = useSelectContext(CONTENT_NAME, __scopeSelect);
-  const themeName = (0, import_core.useThemeName)();
-  const contents = /* @__PURE__ */ React.createElement(import_core.Theme, {
+  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", {
@@ -160,7 +175,7 @@ const SelectContent = ({ children, __scopeSelect }) => {
   }, contents));
 };
 const VIEWPORT_NAME = "SelectViewport";
-const SelectViewportFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
+const SelectViewportFrame = (0, import_core2.styled)(import_stacks.ThemeableStack, {
   name: VIEWPORT_NAME,
   backgroundColor: "$background",
   elevate: true,
@@ -181,9 +196,19 @@ const SelectViewportFrame = (0, import_core.styled)(import_stacks.ThemeableStack
   }
 });
 const SelectViewport = React.forwardRef((props, forwardedRef) => {
+  var _b;
   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"]);
+  const _c = ((_b = context.interactions) == null ? void 0 : _b.getFloatingProps()) ?? {}, { style } = _c, floatingProps = __objRest(_c, ["style"]);
+  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", {
@@ -222,7 +247,7 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
   const isSelected = context.value === value;
   const [textValue, setTextValue] = React.useState(textValueProp ?? "");
   const [isFocused, setIsFocused] = React.useState(false);
-  const textId = (0, import_core2.useId)();
+  const textId = (0, import_core3.useId)();
   const {
     selectedIndex,
     setSelectedIndex,
@@ -237,12 +262,14 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
   } = context;
   const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => {
     if (node instanceof HTMLElement) {
-      listRef.current[index] = node;
+      if (listRef) {
+        listRef.current[index] = node;
+      }
     }
   });
   React.useEffect(() => {
     setValueAtIndex(index, value);
-  }, [index]);
+  }, [index, setValueAtIndex, value]);
   const timeoutRef = React.useRef();
   const [allowMouseUp, setAllowMouseUp] = React.useState(false);
   function handleSelect() {
@@ -265,16 +292,18 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     }
   }, [open, index, setActiveIndex, selectedIndex]);
   function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " " && !dataRef.current.typing) {
+    if (event.key === "Enter" || event.key === " " && !(dataRef == null ? void 0 : dataRef.current.typing)) {
       event.preventDefault();
       handleSelect();
     }
   }
-  const selectItemProps = context.interactions.getItemProps({
+  const selectItemProps = context.interactions ? context.interactions.getItemProps({
     onClick: allowMouseUp ? handleSelect : void 0,
     onMouseUp: allowMouseUp ? handleSelect : void 0,
     onKeyDown: handleKeyDown
-  });
+  }) : {
+    onPress: handleSelect
+  };
   return /* @__PURE__ */ React.createElement(SelectItemContextProvider, {
     scope: __scopeSelect,
     value,
@@ -300,17 +329,18 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
-const SelectItemTextFrame = (0, import_core.styled)(import_text.Paragraph, {
+const SelectItemTextFrame = (0, import_core2.styled)(import_text.Paragraph, {
   name: ITEM_TEXT_NAME,
   selectable: false
 });
 const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSelect, className, style } = _a, itemTextProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
+  const _a = props, { __scopeSelect, className } = _a, itemTextProps = __objRest(_a, ["__scopeSelect", "className"]);
   const 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, __spreadProps(__spreadValues({
+    className,
     size: context.size,
     id: itemContext.textId
   }, itemTextProps), {
@@ -319,7 +349,7 @@ const SelectItemText = React.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
-const SelectItemIndicatorFrame = (0, import_core.styled)(import_stacks.XStack, {
+const SelectItemIndicatorFrame = (0, import_core2.styled)(import_stacks.XStack, {
   name: ITEM_TEXT_NAME
 });
 const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
@@ -334,13 +364,13 @@ const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
 const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-const SelectGroupFrame = (0, import_core.styled)(import_stacks.YStack, {
+const SelectGroupFrame = (0, import_core2.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)();
+  const groupId = (0, import_core3.useId)();
   return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
     scope: __scopeSelect,
     id: groupId || ""
@@ -387,7 +417,7 @@ const SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
   }));
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
+const SelectScrollButtonImpl = React.memo(React.forwardRef((props, forwardedRef) => {
   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"]);
@@ -401,8 +431,10 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
   });
   const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, floating);
   React.useLayoutEffect(() => {
+    if (!floatingRef)
+      return;
     reference(floatingRef.current);
-  }, [reference, floatingRef.current]);
+  }, [reference, floatingRef == null ? void 0 : floatingRef.current]);
   React.useEffect(() => {
     if (!refs.reference.current || !refs.floating.current || !isVisible) {
       return;
@@ -420,13 +452,15 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
     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(floating2, multi === 2 ? value * 2 : value);
+      increaseHeight == null ? void 0 : increaseHeight(floating2, multi === 2 ? value * 2 : value);
       forceUpdate();
     }
   };
@@ -439,7 +473,7 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
     position: strategy,
     left: x || 0,
     top: y || 0,
-    width: `calc(${(((_c = floatingRef.current) == null ? void 0 : _c.offsetWidth) ?? 0) - 2}px)`,
+    width: `calc(${(((_c = floatingRef == null ? void 0 : floatingRef.current) == null ? void 0 : _c.offsetWidth) ?? 0) - 2}px)`,
     onPointerMove: () => {
       if (!loopingRef.current) {
         intervalRef.current = setInterval(handleScrollArrowChange, 1e3 / 60);
@@ -451,51 +485,58 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
       clearInterval(intervalRef.current);
     }
   }));
-});
-const SelectSeparator = (0, import_core.styled)(import_separator.Separator, {
+}));
+const SelectSeparator = (0, import_core2.styled)(import_separator.Separator, {
   name: "SelectSeparator"
 });
-const Select = (0, import_core.withStaticProperties)((props) => {
+const useSelectBreakpointActive = (sheetBreakpoint) => {
+  const media = (0, import_core.useMedia)();
+  return sheetBreakpoint ? media[sheetBreakpoint] : false;
+};
+const useShowSelectSheet = (context) => {
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  return context.open === false ? false : breakpointActive;
+};
+const SelectSheetController = (props) => {
+  const context = useSelectContext("SelectSheetController", props.__scopeSelect);
+  const showSheet = useShowSelectSheet(context);
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  const getShowSheet = (0, import_core2.useGet)(showSheet);
+  return /* @__PURE__ */ React.createElement(import_sheet.SheetController, {
+    onChangeOpen: (val) => {
+      if (getShowSheet()) {
+        props.onChangeOpen(val);
+      }
+    },
+    open: context.open,
+    hidden: breakpointActive === false
+  }, props.children);
+};
+const SHEET_CONTENTS_NAME = "SelectSheetContents";
+const SelectSheetContents = ({ __scopeSelect }) => {
+  const 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 {
-    id,
     __scopeSelect,
     children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    size: sizeProp,
-    dir,
-    name,
-    autoComplete
+    open = false,
+    activeIndexRef,
+    selectedIndexRef,
+    listContentRef
   } = 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 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 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 frame = requestAnimationFrame(() => {
       setShowArrows(open);
@@ -509,7 +550,7 @@ const Select = (0, import_core.withStaticProperties)((props) => {
     return () => {
       cancelAnimationFrame(frame);
     };
-  }, [open]);
+  }, [open, setActiveIndex]);
   function getFloatingPadding(floating2) {
     var _a;
     if (!floating2) {
@@ -590,7 +631,6 @@ const Select = (0, import_core.withStaticProperties)((props) => {
     ]
   });
   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)([
@@ -636,7 +676,7 @@ const Select = (0, import_core.withStaticProperties)((props) => {
       }
       return currentTop - nextTop;
     }
-  }, [middlewareType]);
+  }, [middlewareType, selectedIndexRef]);
   const touchPageYRef = React.useRef(null);
   const handleWheel = React.useCallback((event) => {
     var _a;
@@ -669,7 +709,7 @@ const Select = (0, import_core.withStaticProperties)((props) => {
       setScrollTop(currentTarget.scrollTop);
       forceUpdate();
     }
-  }, [increaseHeight, forceUpdate]);
+  }, [forceUpdate, increaseHeight]);
   React.useEffect(() => {
     function onTouchEnd() {
       touchPageYRef.current = null;
@@ -775,20 +815,13 @@ const Select = (0, import_core.withStaticProperties)((props) => {
     });
     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,
+  return /* @__PURE__ */ React.createElement(SelectProvider, __spreadProps(__spreadValues({
+    scope: __scopeSelect
+  }, selectContext), {
     increaseHeight,
-    forceUpdate,
     floatingRef,
-    valueNode,
-    onValueNodeChange: setValueNode,
-    valueNodeHasChildren,
-    onValueNodeHasChildrenChange: setValueNodeHasChildren,
-    setValueAtIndex: (index, value2) => {
-      listContentRef.current[index] = value2;
+    setValueAtIndex: (index, value) => {
+      listContentRef.current[index] = value;
     },
     interactions: __spreadProps(__spreadValues({}, interactions), {
       getReferenceProps() {
@@ -838,7 +871,65 @@ const Select = (0, import_core.withStaticProperties)((props) => {
     canScrollUp: !!showUpArrow,
     controlledScrolling: true,
     dataRef: context.dataRef,
-    listRef: listItemsRef,
+    listRef: listItemsRef
+  }), children);
+};
+const SelectSheetImpl = (props) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.children);
+};
+const Select = (0, import_core2.withStaticProperties)((props) => {
+  const {
+    __scopeSelect,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    size: sizeProp,
+    sheetBreakpoint = false,
+    dir
+  } = props;
+  const isSheet = useSelectBreakpointActive(sheetBreakpoint);
+  const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl;
+  const forceUpdate = React.useReducer(() => ({}), {})[1];
+  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 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);
+  (0, import_core2.useIsomorphicLayoutEffect)(() => {
+    selectedIndexRef.current = selectedIndex;
+    activeIndexRef.current = activeIndex;
+  });
+  return /* @__PURE__ */ React.createElement(SelectProvider, {
+    dir,
+    size: sizeProp,
+    forceUpdate,
+    valueNode,
+    onValueNodeChange: setValueNode,
+    onValueNodeHasChildrenChange: setValueNodeHasChildren,
+    valueNodeHasChildren,
+    scopeKey: __scopeSelect ? Object.keys(__scopeSelect)[0] : "",
+    sheetBreakpoint,
+    scope: __scopeSelect,
+    setValueAtIndex: (index, value2) => {
+      listContentRef.current[index] = value2;
+    },
+    activeIndex,
     onChange: setValue,
     selectedIndex,
     setActiveIndex,
@@ -846,7 +937,17 @@ const Select = (0, import_core.withStaticProperties)((props) => {
     setSelectedIndex,
     value,
     open
-  }, children);
+  }, /* @__PURE__ */ React.createElement(SelectSheetController, {
+    onChangeOpen: setOpen,
+    __scopeSelect
+  }, /* @__PURE__ */ React.createElement(SelectImpl, __spreadProps(__spreadValues({
+    activeIndexRef,
+    listContentRef,
+    selectedIndexRef
+  }, props), {
+    open,
+    value
+  }), children)));
 }, {
   Content: SelectContent,
   Group: SelectGroup,
@@ -859,7 +960,9 @@ const Select = (0, import_core.withStaticProperties)((props) => {
   ScrollUpButton: SelectScrollUpButton,
   Trigger: SelectTrigger,
   Value: SelectValue,
-  Viewport: SelectViewport
+  Viewport: SelectViewport,
+  SheetContents: SelectSheetContents,
+  Sheet: import_sheet.Sheet
 });
 Select.displayName = SELECT_NAME;
 // Annotate the CommonJS export names for ESM import in node:
@@ -870,6 +973,7 @@ Select.displayName = SELECT_NAME;
   SelectItem,
   SelectItemTextFrame,
   SelectSeparator,
+  SelectSheetContents,
   SelectTrigger,
   SelectViewport,
   SelectViewportFrame,