@tamagui/select 1.111.7 → 1.111.9

package/dist/esm/Select.native.js

@@ -15,316 +15,383 @@ import { Paragraph, SizableText } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
 import { useDebounce } from "@tamagui/use-debounce";
-import { SELECT_NAME } from "./constants";
-import { SelectItemParentProvider, SelectProvider, createSelectContext, useSelectContext, useSelectItemParentContext } from "./context";
-import { SelectContent } from "./SelectContent";
-import { SelectInlineImpl } from "./SelectImpl";
-import { SelectItem, useSelectItemContext } from "./SelectItem";
-import { ITEM_TEXT_NAME, SelectItemText } from "./SelectItemText";
-import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
-import { SelectTrigger } from "./SelectTrigger";
-import { SelectViewport } from "./SelectViewport";
-import { useSelectBreakpointActive, useShowSelectSheet } from "./useSelectBreakpointActive";
-var VALUE_NAME = "SelectValue", SelectValueFrame = styled(SizableText, {
-  name: VALUE_NAME,
-  userSelect: "none"
-}), SelectValue = SelectValueFrame.styleable(function(param, forwardedRef) {
-  var { __scopeSelect, children: childrenProp, placeholder, ...props } = param, context = useSelectContext(VALUE_NAME, __scopeSelect), itemParentContext = useSelectItemParentContext(VALUE_NAME, __scopeSelect), composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange), children = childrenProp ?? context.selectedItem, isEmptyValue = context.value == null || context.value === "", selectValueChildren = isEmptyValue ? placeholder ?? children : children;
-  return /* @__PURE__ */ _jsx(SelectValueFrame, {
-    ...!props.unstyled && {
-      size: itemParentContext.size,
-      ellipse: !0,
-      // we don't want events from the portalled `SelectValue` children to bubble
-      // through the item they came from
-      pointerEvents: "none"
-    },
-    ref: composedRefs,
-    ...props,
-    children: unwrapSelectItem(selectValueChildren)
+import { SELECT_NAME } from "./constants.native.js";
+import { SelectItemParentProvider, SelectProvider, createSelectContext, useSelectContext, useSelectItemParentContext } from "./context.native.js";
+import { SelectContent } from "./SelectContent.native.js";
+import { SelectInlineImpl } from "./SelectImpl.native.js";
+import { SelectItem, useSelectItemContext } from "./SelectItem.native.js";
+import { ITEM_TEXT_NAME, SelectItemText } from "./SelectItemText.native.js";
+import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton.native.js";
+import { SelectTrigger } from "./SelectTrigger.native.js";
+import { SelectViewport } from "./SelectViewport.native.js";
+import { useSelectBreakpointActive, useShowSelectSheet } from "./useSelectBreakpointActive.native.js";
+var VALUE_NAME = "SelectValue",
+  SelectValueFrame = styled(SizableText, {
+    name: VALUE_NAME,
+    userSelect: "none"
+  }),
+  SelectValue = SelectValueFrame.styleable(function (param, forwardedRef) {
+    var {
+        __scopeSelect,
+        children: childrenProp,
+        placeholder,
+        ...props
+      } = param,
+      context = useSelectContext(VALUE_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(VALUE_NAME, __scopeSelect),
+      composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange),
+      children = childrenProp ?? context.selectedItem,
+      isEmptyValue = context.value == null || context.value === "",
+      selectValueChildren = isEmptyValue ? placeholder ?? children : children;
+    return /* @__PURE__ */_jsx(SelectValueFrame, {
+      ...(!props.unstyled && {
+        size: itemParentContext.size,
+        ellipse: !0,
+        // we don't want events from the portalled `SelectValue` children to bubble
+        // through the item they came from
+        pointerEvents: "none"
+      }),
+      ref: composedRefs,
+      ...props,
+      children: unwrapSelectItem(selectValueChildren)
+    });
   });
-});
 function unwrapSelectItem(selectValueChildren) {
-  return React.Children.map(selectValueChildren, function(child) {
+  return React.Children.map(selectValueChildren, function (child) {
     if (child) {
       var _child_type_staticConfig, _child_type, _child_props;
-      if (((_child_type = child.type) === null || _child_type === void 0 || (_child_type_staticConfig = _child_type.staticConfig) === null || _child_type_staticConfig === void 0 ? void 0 : _child_type_staticConfig.componentName) === ITEM_TEXT_NAME)
-        return child.props.children;
-      if (!((_child_props = child.props) === null || _child_props === void 0) && _child_props.children)
-        return unwrapSelectItem(child.props.children);
+      if (((_child_type = child.type) === null || _child_type === void 0 || (_child_type_staticConfig = _child_type.staticConfig) === null || _child_type_staticConfig === void 0 ? void 0 : _child_type_staticConfig.componentName) === ITEM_TEXT_NAME) return child.props.children;
+      if (!((_child_props = child.props) === null || _child_props === void 0) && _child_props.children) return unwrapSelectItem(child.props.children);
     }
     return child;
   });
 }
 var SelectIcon = styled(XStack, {
-  name: "SelectIcon",
-  // @ts-ignore
-  "aria-hidden": !0,
-  children: /* @__PURE__ */ _jsx(Paragraph, {
-    children: "\u25BC"
-  })
-}), ITEM_INDICATOR_NAME = "SelectItemIndicator", SelectItemIndicatorFrame = styled(XStack, {
-  name: ITEM_TEXT_NAME
-}), SelectItemIndicator = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { __scopeSelect, ...itemIndicatorProps } = props, context = useSelectItemParentContext(ITEM_INDICATOR_NAME, __scopeSelect), itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return context.shouldRenderWebNative ? null : itemContext.isSelected ? /* @__PURE__ */ _jsx(SelectItemIndicatorFrame, {
+    name: "SelectIcon",
+    // @ts-ignore
     "aria-hidden": !0,
-    ...itemIndicatorProps,
-    ref: forwardedRef
-  }) : null;
-});
+    children: /* @__PURE__ */_jsx(Paragraph, {
+      children: "\u25BC"
+    })
+  }),
+  ITEM_INDICATOR_NAME = "SelectItemIndicator",
+  SelectItemIndicatorFrame = styled(XStack, {
+    name: ITEM_TEXT_NAME
+  }),
+  SelectItemIndicator = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeSelect,
+        ...itemIndicatorProps
+      } = props,
+      context = useSelectItemParentContext(ITEM_INDICATOR_NAME, __scopeSelect),
+      itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return context.shouldRenderWebNative ? null : itemContext.isSelected ? /* @__PURE__ */_jsx(SelectItemIndicatorFrame, {
+      "aria-hidden": !0,
+      ...itemIndicatorProps,
+      ref: forwardedRef
+    }) : null;
+  });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
-var GROUP_NAME = "SelectGroup", [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME), SelectGroupFrame = styled(YStack, {
-  name: GROUP_NAME,
-  width: "100%"
-}), NativeSelectTextFrame = styled(SizableText, {
-  tag: "select",
-  backgroundColor: "$background",
-  borderColor: "$borderColor",
-  hoverStyle: {
-    backgroundColor: "$backgroundHover"
-  }
-}), NativeSelectFrame = styled(ThemeableStack, {
-  name: "NativeSelect",
-  bordered: !0,
-  userSelect: "none",
-  outlineWidth: 0,
-  paddingRight: 10,
-  variants: {
-    size: {
-      "...size": function(val, extras) {
-        var { tokens } = extras, paddingHorizontal = getVariableValue(tokens.space[val]), _tokens_radius_val;
-        return {
-          borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val,
-          minHeight: tokens.size[val],
-          paddingRight: paddingHorizontal + 20,
-          paddingLeft: paddingHorizontal,
-          paddingVertical: getSpace(val, {
-            shift: -3
-          })
-        };
+var GROUP_NAME = "SelectGroup",
+  [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME),
+  SelectGroupFrame = styled(YStack, {
+    name: GROUP_NAME,
+    width: "100%"
+  }),
+  NativeSelectTextFrame = styled(SizableText, {
+    tag: "select",
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    hoverStyle: {
+      backgroundColor: "$backgroundHover"
+    }
+  }),
+  NativeSelectFrame = styled(ThemeableStack, {
+    name: "NativeSelect",
+    bordered: !0,
+    userSelect: "none",
+    outlineWidth: 0,
+    paddingRight: 10,
+    variants: {
+      size: {
+        "...size": function (val, extras) {
+          var {
+              tokens
+            } = extras,
+            paddingHorizontal = getVariableValue(tokens.space[val]),
+            _tokens_radius_val;
+          return {
+            borderRadius: (_tokens_radius_val = tokens.radius[val]) !== null && _tokens_radius_val !== void 0 ? _tokens_radius_val : val,
+            minHeight: tokens.size[val],
+            paddingRight: paddingHorizontal + 20,
+            paddingLeft: paddingHorizontal,
+            paddingVertical: getSpace(val, {
+              shift: -3
+            })
+          };
+        }
       }
+    },
+    defaultVariants: {
+      size: "$2"
     }
-  },
-  defaultVariants: {
-    size: "$2"
-  }
-}), SelectGroup = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { __scopeSelect, ...groupProps } = props, groupId = React.useId(), context = useSelectContext(GROUP_NAME, __scopeSelect), itemParentContext = useSelectItemParentContext(GROUP_NAME, __scopeSelect), _itemParentContext_size, size = (_itemParentContext_size = itemParentContext.size) !== null && _itemParentContext_size !== void 0 ? _itemParentContext_size : "$true", nativeSelectRef = React.useRef(null), content = function() {
-    return itemParentContext.shouldRenderWebNative ? /* @__PURE__ */ _jsx(NativeSelectFrame, {
-      asChild: !0,
-      size,
-      // @ts-expect-error until we support typing based on tag
-      value: context.value,
-      id: itemParentContext.id,
-      children: /* @__PURE__ */ _jsx(NativeSelectTextFrame, {
-        // @ts-ignore it's ok since tag="select"
-        onChange: function(event) {
-          itemParentContext.onChange(event.currentTarget.value);
-        },
-        size,
-        ref: nativeSelectRef,
-        style: {
-          color: "var(--color)",
+  }),
+  SelectGroup = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeSelect,
+        ...groupProps
+      } = props,
+      groupId = React.useId(),
+      context = useSelectContext(GROUP_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(GROUP_NAME, __scopeSelect),
+      _itemParentContext_size,
+      size = (_itemParentContext_size = itemParentContext.size) !== null && _itemParentContext_size !== void 0 ? _itemParentContext_size : "$true",
+      nativeSelectRef = React.useRef(null),
+      content = function () {
+        return itemParentContext.shouldRenderWebNative ? /* @__PURE__ */_jsx(NativeSelectFrame, {
+          asChild: !0,
+          size,
+          // @ts-expect-error until we support typing based on tag
+          value: context.value,
+          id: itemParentContext.id,
+          children: /* @__PURE__ */_jsx(NativeSelectTextFrame, {
+            // @ts-ignore it's ok since tag="select"
+            onChange: function (event) {
+              itemParentContext.onChange(event.currentTarget.value);
+            },
+            size,
+            ref: nativeSelectRef,
+            style: {
+              color: "var(--color)",
+              // @ts-ignore
+              appearance: "none"
+            },
+            children: props.children
+          })
+        }) : /* @__PURE__ */_jsx(SelectGroupFrame, {
           // @ts-ignore
-          appearance: "none"
-        },
-        children: props.children
-      })
-    }) : /* @__PURE__ */ _jsx(SelectGroupFrame, {
-      // @ts-ignore
-      role: "group",
-      "aria-labelledby": groupId,
-      ...groupProps,
-      ref: forwardedRef
+          role: "group",
+          "aria-labelledby": groupId,
+          ...groupProps,
+          ref: forwardedRef
+        });
+      }();
+    return /* @__PURE__ */_jsx(SelectGroupContextProvider, {
+      scope: __scopeSelect,
+      id: groupId || "",
+      children: content
     });
-  }();
-  return /* @__PURE__ */ _jsx(SelectGroupContextProvider, {
-    scope: __scopeSelect,
-    id: groupId || "",
-    children: content
   });
-});
 SelectGroup.displayName = GROUP_NAME;
-var LABEL_NAME = "SelectLabel", SelectLabel = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
-  var { __scopeSelect, ...labelProps } = props, context = useSelectItemParentContext(LABEL_NAME, __scopeSelect), groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return context.shouldRenderWebNative ? null : /* @__PURE__ */ _jsx(ListItem, {
-    tag: "div",
-    componentName: LABEL_NAME,
-    fontWeight: "800",
-    id: groupContext.id,
-    size: context.size,
-    ...labelProps,
-    ref: forwardedRef
+var LABEL_NAME = "SelectLabel",
+  SelectLabel = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+    var {
+        __scopeSelect,
+        ...labelProps
+      } = props,
+      context = useSelectItemParentContext(LABEL_NAME, __scopeSelect),
+      groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return context.shouldRenderWebNative ? null : /* @__PURE__ */_jsx(ListItem, {
+      tag: "div",
+      componentName: LABEL_NAME,
+      fontWeight: "800",
+      id: groupContext.id,
+      size: context.size,
+      ...labelProps,
+      ref: forwardedRef
+    });
   });
-});
 SelectLabel.displayName = LABEL_NAME;
 var SelectSeparator = styled(Separator, {
-  name: "SelectSeparator"
-}), SelectSheetController = function(props) {
-  var context = useSelectContext("SelectSheetController", props.__scopeSelect), showSheet = useShowSelectSheet(context), breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint), getShowSheet = useGet(showSheet);
-  return /* @__PURE__ */ _jsx(SheetController, {
-    onOpenChange: function(val) {
-      getShowSheet() && props.onOpenChange(val);
-    },
-    open: context.open,
-    hidden: breakpointActive === !1,
-    children: props.children
-  });
-}, SelectSheetImpl = function(props) {
-  return /* @__PURE__ */ _jsx(_Fragment, {
-    children: props.children
-  });
-}, Select = withStaticProperties(function(props) {
-  var { __scopeSelect, native, children, open: openProp, defaultOpen, onOpenChange, value: valueProp, defaultValue, onValueChange, disablePreventBodyScroll, size: sizeProp = "$true", onActiveChange, dir, id } = props, internalId = React.useId(), _Object_keys_, scopeKey = __scopeSelect && (_Object_keys_ = Object.keys(__scopeSelect)[0]) !== null && _Object_keys_ !== void 0 ? _Object_keys_ : internalId, { when, AdaptProvider } = useAdaptParent({
-    Contents: React.useCallback(function() {
-      return /* @__PURE__ */ _jsx(PortalHost, {
-        name: `${scopeKey}SheetContents`
+    name: "SelectSeparator"
+  }),
+  SelectSheetController = function (props) {
+    var context = useSelectContext("SelectSheetController", props.__scopeSelect),
+      showSheet = useShowSelectSheet(context),
+      breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint),
+      getShowSheet = useGet(showSheet);
+    return /* @__PURE__ */_jsx(SheetController, {
+      onOpenChange: function (val) {
+        getShowSheet() && props.onOpenChange(val);
+      },
+      open: context.open,
+      hidden: breakpointActive === !1,
+      children: props.children
+    });
+  },
+  SelectSheetImpl = function (props) {
+    return /* @__PURE__ */_jsx(_Fragment, {
+      children: props.children
+    });
+  },
+  Select = withStaticProperties(function (props) {
+    var {
+        __scopeSelect,
+        native,
+        children,
+        open: openProp,
+        defaultOpen,
+        onOpenChange,
+        value: valueProp,
+        defaultValue,
+        onValueChange,
+        disablePreventBodyScroll,
+        size: sizeProp = "$true",
+        onActiveChange,
+        dir,
+        id
+      } = props,
+      internalId = React.useId(),
+      _Object_keys_,
+      scopeKey = __scopeSelect && (_Object_keys_ = Object.keys(__scopeSelect)[0]) !== null && _Object_keys_ !== void 0 ? _Object_keys_ : internalId,
+      {
+        when,
+        AdaptProvider
+      } = useAdaptParent({
+        Contents: React.useCallback(function () {
+          return /* @__PURE__ */_jsx(PortalHost, {
+            name: `${scopeKey}SheetContents`
+          });
+        }, [scopeKey])
+      }),
+      sheetBreakpoint = when,
+      isSheet = useSelectBreakpointActive(sheetBreakpoint),
+      SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl,
+      forceUpdate = React.useReducer(function () {
+        return {};
+      }, {})[1],
+      [selectedItem, setSelectedItem] = React.useState(null),
+      [open, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: defaultOpen || !1,
+        onChange: onOpenChange
+      }),
+      [value, setValue] = useControllableState({
+        prop: valueProp,
+        defaultProp: defaultValue || "",
+        onChange: onValueChange,
+        transition: !0
       });
-    }, [
-      scopeKey
-    ])
-  }), sheetBreakpoint = when, isSheet = useSelectBreakpointActive(sheetBreakpoint), SelectImpl = isSheet || !isWeb ? SelectSheetImpl : SelectInlineImpl, forceUpdate = React.useReducer(function() {
-    return {};
-  }, {})[1], [selectedItem, setSelectedItem] = React.useState(null), [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || !1,
-    onChange: onOpenChange
-  }), [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange,
-    transition: !0
-  });
-  React.useEffect(function() {
-    open && emitValue(value);
-  }, [
-    open
-  ]), React.useEffect(function() {
-    emitValue(value);
-  }, [
-    value
-  ]), React.useEffect(function() {
-    if (props.id)
-      return registerFocusable(props.id, {
-        focusAndSelect: function() {
-          setOpen?.(function(value2) {
+    React.useEffect(function () {
+      open && emitValue(value);
+    }, [open]), React.useEffect(function () {
+      emitValue(value);
+    }, [value]), React.useEffect(function () {
+      if (props.id) return registerFocusable(props.id, {
+        focusAndSelect: function () {
+          setOpen?.(function (value2) {
             return !value2;
           });
         },
-        focus: function() {
-        }
+        focus: function () {}
       });
-  }, [
-    props.id
-  ]);
-  var [activeIndex, setActiveIndex] = React.useState(0), [emitValue, valueSubscribe] = useEmitter(), [emitActiveIndex, activeIndexSubscribe] = useEmitter(), selectedIndexRef = React.useRef(null), activeIndexRef = React.useRef(null), listContentRef = React.useRef([]), [selectedIndex, setSelectedIndex] = React.useState(0), [valueNode, setValueNode] = React.useState(null);
-  useIsomorphicLayoutEffect(function() {
-    selectedIndexRef.current = selectedIndex, activeIndexRef.current = activeIndex;
-  });
-  var shouldRenderWebNative = isWeb && (native === !0 || native === "web" || Array.isArray(native) && native.includes("web")), setActiveIndexDebounced = useDebounce(function(index) {
-    setActiveIndex(function(prev) {
-      return prev !== index ? (typeof index == "number" && emitActiveIndex(index), index) : prev;
+    }, [props.id]);
+    var [activeIndex, setActiveIndex] = React.useState(0),
+      [emitValue, valueSubscribe] = useEmitter(),
+      [emitActiveIndex, activeIndexSubscribe] = useEmitter(),
+      selectedIndexRef = React.useRef(null),
+      activeIndexRef = React.useRef(null),
+      listContentRef = React.useRef([]),
+      [selectedIndex, setSelectedIndex] = React.useState(0),
+      [valueNode, setValueNode] = React.useState(null);
+    useIsomorphicLayoutEffect(function () {
+      selectedIndexRef.current = selectedIndex, activeIndexRef.current = activeIndex;
     });
-  }, 1, {}, []);
-  return /* @__PURE__ */ _jsx(AdaptProvider, {
-    children: /* @__PURE__ */ _jsx(SelectItemParentProvider, {
-      scope: __scopeSelect,
-      initialValue: React.useMemo(function() {
-        return value;
-      }, [
-        open
-      ]),
-      size: sizeProp,
-      activeIndexSubscribe,
-      valueSubscribe,
-      setOpen,
-      id,
-      onChange: React.useCallback(function(val) {
-        setValue(val), emitValue(val);
-      }, []),
-      onActiveChange: useEvent(function() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
-          args[_key] = arguments[_key];
-        onActiveChange?.(...args);
-      }),
-      setSelectedIndex,
-      setValueAtIndex: React.useCallback(function(index, value2) {
-        listContentRef.current[index] = value2;
-      }, []),
-      shouldRenderWebNative,
-      children: /* @__PURE__ */ _jsx(SelectProvider, {
+    var shouldRenderWebNative = isWeb && (native === !0 || native === "web" || Array.isArray(native) && native.includes("web")),
+      setActiveIndexDebounced = useDebounce(function (index) {
+        setActiveIndex(function (prev) {
+          return prev !== index ? (typeof index == "number" && emitActiveIndex(index), index) : prev;
+        });
+      }, 1, {}, []);
+    return /* @__PURE__ */_jsx(AdaptProvider, {
+      children: /* @__PURE__ */_jsx(SelectItemParentProvider, {
         scope: __scopeSelect,
-        disablePreventBodyScroll,
-        dir,
-        blockSelection: !1,
-        fallback: !1,
-        selectedItem,
-        setSelectedItem,
-        forceUpdate,
-        valueNode,
-        onValueNodeChange: setValueNode,
-        scopeKey,
-        sheetBreakpoint,
-        activeIndex,
-        selectedIndex,
-        setActiveIndex: setActiveIndexDebounced,
-        value,
-        open,
-        native,
-        children: /* @__PURE__ */ _jsx(SelectSheetController, {
-          onOpenChange: setOpen,
-          __scopeSelect,
-          children: shouldRenderWebNative ? children : /* @__PURE__ */ _jsx(SelectImpl, {
-            activeIndexRef,
-            listContentRef,
-            selectedIndexRef,
-            ...props,
-            open,
-            value,
-            children
+        initialValue: React.useMemo(function () {
+          return value;
+        }, [open]),
+        size: sizeProp,
+        activeIndexSubscribe,
+        valueSubscribe,
+        setOpen,
+        id,
+        onChange: React.useCallback(function (val) {
+          setValue(val), emitValue(val);
+        }, []),
+        onActiveChange: useEvent(function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+          onActiveChange?.(...args);
+        }),
+        setSelectedIndex,
+        setValueAtIndex: React.useCallback(function (index, value2) {
+          listContentRef.current[index] = value2;
+        }, []),
+        shouldRenderWebNative,
+        children: /* @__PURE__ */_jsx(SelectProvider, {
+          scope: __scopeSelect,
+          disablePreventBodyScroll,
+          dir,
+          blockSelection: !1,
+          fallback: !1,
+          selectedItem,
+          setSelectedItem,
+          forceUpdate,
+          valueNode,
+          onValueNodeChange: setValueNode,
+          scopeKey,
+          sheetBreakpoint,
+          activeIndex,
+          selectedIndex,
+          setActiveIndex: setActiveIndexDebounced,
+          value,
+          open,
+          native,
+          children: /* @__PURE__ */_jsx(SelectSheetController, {
+            onOpenChange: setOpen,
+            __scopeSelect,
+            children: shouldRenderWebNative ? children : /* @__PURE__ */_jsx(SelectImpl, {
+              activeIndexRef,
+              listContentRef,
+              selectedIndexRef,
+              ...props,
+              open,
+              value,
+              children
+            })
           })
         })
       })
-    })
+    });
+  }, {
+    Adapt,
+    Content: SelectContent,
+    Group: SelectGroup,
+    Icon: SelectIcon,
+    Item: SelectItem,
+    ItemIndicator: SelectItemIndicator,
+    ItemText: SelectItemText,
+    Label: SelectLabel,
+    ScrollDownButton: SelectScrollDownButton,
+    ScrollUpButton: SelectScrollUpButton,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Viewport: SelectViewport,
+    Sheet: Sheet.Controlled
   });
-}, {
-  Adapt,
-  Content: SelectContent,
-  Group: SelectGroup,
-  Icon: SelectIcon,
-  Item: SelectItem,
-  ItemIndicator: SelectItemIndicator,
-  ItemText: SelectItemText,
-  Label: SelectLabel,
-  ScrollDownButton: SelectScrollDownButton,
-  ScrollUpButton: SelectScrollUpButton,
-  Trigger: SelectTrigger,
-  Value: SelectValue,
-  Viewport: SelectViewport,
-  Sheet: Sheet.Controlled
-});
 function useEmitter() {
   var listeners = React.useRef();
-  listeners.current || (listeners.current = /* @__PURE__ */ new Set());
-  var emit = function(value) {
-    listeners.current.forEach(function(l) {
-      return l(value);
-    });
-  }, subscribe = React.useCallback(function(listener) {
-    return listeners.current.add(listener), function() {
-      listeners.current.delete(listener);
-    };
-  }, []);
-  return [
-    emit,
-    subscribe
-  ];
+  listeners.current || (listeners.current = /* @__PURE__ */new Set());
+  var emit = function (value) {
+      listeners.current.forEach(function (l) {
+        return l(value);
+      });
+    },
+    subscribe = React.useCallback(function (listener) {
+      return listeners.current.add(listener), function () {
+        listeners.current.delete(listener);
+      };
+    }, []);
+  return [emit, subscribe];
 }
 Select.displayName = SELECT_NAME;
-export {
-  Select,
-  SelectGroupFrame,
-  SelectIcon,
-  SelectSeparator
-};
-//# sourceMappingURL=Select.js.map
+export { Select, SelectGroupFrame, SelectIcon, SelectSeparator };
+//# sourceMappingURL=Select.native.js.map