@tamagui/select 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/esm/Select.native.js

@@ -13,7 +13,7 @@ import { XStack, YStack } from "@tamagui/stacks";
 import { Paragraph, SizableText } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
-import { SelectItemParentProvider, SelectProvider, useSelectContext, useSelectItemParentContext } from "./context.native.js";
+import { SelectItemParentProvider, SelectProvider, SelectZIndexContext, 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";
@@ -22,409 +22,413 @@ import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButt
 import { SelectTrigger } from "./SelectTrigger.native.js";
 import { SelectViewport } from "./SelectViewport.native.js";
 import { useShowSelectSheet } from "./useSelectBreakpointActive.native.js";
-var VALUE_NAME = "SelectValue",
-  SelectValueFrame = styled(SizableText, {
-    name: VALUE_NAME,
-    userSelect: "none"
-  }),
-  SelectValue = SelectValueFrame.styleable(function (param, forwardedRef) {
-    var {
-        scope,
-        children: childrenProp,
-        placeholder,
-        ...props
-      } = param,
-      _context_renderValue,
-      context = useSelectContext(scope),
-      itemParentContext = useSelectItemParentContext(scope),
-      composedRefs = useComposedRefs(
-      // @ts-ignore TODO react 19 type needs fix
-      forwardedRef, context.onValueNodeChange),
-      isEmptyValue = context.value == null || context.value === "",
-      renderedValue = (_context_renderValue = context.renderValue) === null || _context_renderValue === void 0 ? void 0 : _context_renderValue.call(context, context.value),
-      _ref,
-      _ref1,
-      children = (_ref1 = (_ref = childrenProp ?? renderedValue) !== null && _ref !== void 0 ? _ref : itemParentContext.selectedItem) !== null && _ref1 !== void 0 ? _ref1 : context.value,
-      selectValueChildren = isEmptyValue ? placeholder ?? children : children;
-    return /* @__PURE__ */_jsx(SelectValueFrame, {
-      ...(!props.unstyled && {
-        size: itemParentContext.size,
-        ellipsis: !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)
-    });
+var SelectValueFrame = styled(SizableText, {
+  name: "SelectValue",
+  userSelect: "none"
+});
+var SelectValue = SelectValueFrame.styleable(function SelectValue2(param, forwardedRef) {
+  var {
+    scope,
+    children: childrenProp,
+    placeholder,
+    ...props
+  } = param;
+  var _context_renderValue;
+  var context = useSelectContext(scope);
+  var itemParentContext = useSelectItemParentContext(scope);
+  var composedRefs = useComposedRefs(
+  // @ts-ignore TODO react 19 type needs fix
+  forwardedRef, context.onValueNodeChange);
+  var isEmptyValue = context.value == null || context.value === "";
+  var renderedValue = (_context_renderValue = context.renderValue) === null || _context_renderValue === void 0 ? void 0 : _context_renderValue.call(context, context.value);
+  var _ref, _ref1;
+  var children = (_ref1 = (_ref = childrenProp !== null && childrenProp !== void 0 ? childrenProp : renderedValue) !== null && _ref !== void 0 ? _ref : itemParentContext.selectedItem) !== null && _ref1 !== void 0 ? _ref1 : context.value;
+  var selectValueChildren = isEmptyValue ? placeholder !== null && placeholder !== void 0 ? placeholder : children : children;
+  return /* @__PURE__ */_jsx(SelectValueFrame, {
+    ...(!props.unstyled && {
+      size: itemParentContext.size,
+      ellipsis: true,
+      pointerEvents: "none"
+    }),
+    ref: composedRefs,
+    ...props,
+    children: unwrapSelectItem(selectValueChildren)
   });
+});
 function unwrapSelectItem(selectValueChildren) {
   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 ? 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 ? 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"
-    })
-  }),
-  SelectItemIndicatorFrame = styled(XStack, {
-    name: "SelectItemIndicator"
-  }),
-  SelectItemIndicator = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        scope,
-        ...itemIndicatorProps
-      } = props,
-      context = useSelectItemParentContext(scope),
-      itemContext = useSelectItemContext(scope);
-    return context.shouldRenderWebNative ? null : itemContext.isSelected ? /* @__PURE__ */_jsx(SelectItemIndicatorFrame, {
-      "aria-hidden": !0,
-      ...itemIndicatorProps,
-      ref: forwardedRef
-    }) : null;
-  }),
-  SelectIndicatorFrame = styled(YStack, {
-    name: "SelectIndicator",
-    variants: {
-      unstyled: {
-        false: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          backgroundColor: "$background",
-          borderRadius: 0
-        }
+  name: "SelectIcon",
+  "aria-hidden": true,
+  children: /* @__PURE__ */_jsx(Paragraph, {
+    children: "▼"
+  })
+});
+var SelectItemIndicatorFrame = styled(XStack, {
+  name: "SelectItemIndicator"
+});
+var SelectItemIndicator = /* @__PURE__ */React.forwardRef(function SelectItemIndicator2(props, forwardedRef) {
+  var {
+    scope,
+    ...itemIndicatorProps
+  } = props;
+  var context = useSelectItemParentContext(scope);
+  var itemContext = useSelectItemContext(scope);
+  if (context.shouldRenderWebNative) return null;
+  return itemContext.isSelected ? /* @__PURE__ */_jsx(SelectItemIndicatorFrame, {
+    "aria-hidden": true,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  }) : null;
+});
+var SelectIndicatorFrame = styled(YStack, {
+  name: "SelectIndicator",
+  variants: {
+    unstyled: {
+      false: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        zIndex: 10,
+        backgroundColor: "$background",
+        borderRadius: 0
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  SelectIndicator = SelectIndicatorFrame.styleable(function (param, forwardedRef) {
-    var {
-        scope,
-        ...props
-      } = param,
-      itemContext = useSelectItemParentContext(scope),
-      context = useSelectContext(scope),
-      [layout, setLayout] = React.useState(null),
-      rafRef = React.useRef(0);
-    return React.useLayoutEffect(function () {
-      var update = function (index) {
-        typeof index == "number" && (cancelAnimationFrame(rafRef.current), rafRef.current = requestAnimationFrame(function () {
-          var _itemContext_listRef_current,
-            _itemContext_listRef,
-            node = (_itemContext_listRef = itemContext.listRef) === null || _itemContext_listRef === void 0 || (_itemContext_listRef_current = _itemContext_listRef.current) === null || _itemContext_listRef_current === void 0 ? void 0 : _itemContext_listRef_current[index];
-          node && setLayout({
-            width: Math.round(node.offsetWidth),
-            height: Math.round(node.offsetHeight),
-            x: Math.round(node.offsetLeft),
-            y: Math.round(node.offsetTop)
-          });
-        }));
-      };
-      return context.open && context.activeIndexRef.current !== null && update(context.activeIndexRef.current), itemContext.activeIndexSubscribe(update);
-    }, [context.open, itemContext.listRef]), layout ? /* @__PURE__ */_jsx(SelectIndicatorFrame, {
-      ref: forwardedRef,
-      ...props,
-      width: layout.width,
-      height: layout.height,
-      x: layout.x,
-      y: layout.y
-    }) : null;
-  }),
-  GROUP_NAME = "SelectGroup",
-  {
-    Provider: SelectGroupContextProvider,
-    useStyledContext: useSelectGroupContext
-  } = createStyledContext({
-    id: ""
-  }, "SelectGroup"),
-  SelectGroupFrame = styled(YStack, {
-    name: GROUP_NAME,
-    width: "100%"
-  }),
-  NativeSelectTextFrame = styled(SizableText, {
-    render: "select",
-    backgroundColor: "$background",
-    borderColor: "$borderColor",
-    hoverStyle: {
-      backgroundColor: "$backgroundHover"
-    }
-  }),
-  NativeSelectFrame = styled(YStack, {
-    name: "NativeSelect",
-    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
-            })
-          };
-        }
-      },
-      unstyled: {
-        false: {
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          userSelect: "none",
-          outlineWidth: 0,
-          paddingRight: 10
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var SelectIndicator = SelectIndicatorFrame.styleable(function SelectIndicator2(param, forwardedRef) {
+  var {
+    scope,
+    ...props
+  } = param;
+  var itemContext = useSelectItemParentContext(scope);
+  var context = useSelectContext(scope);
+  var [layout, setLayout] = React.useState(null);
+  var rafRef = React.useRef(0);
+  React.useLayoutEffect(function () {
+    var update = function (index) {
+      if (typeof index !== "number") return;
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(function () {
+        var _itemContext_listRef_current, _itemContext_listRef;
+        var node = (_itemContext_listRef = itemContext.listRef) === null || _itemContext_listRef === void 0 ? void 0 : (_itemContext_listRef_current = _itemContext_listRef.current) === null || _itemContext_listRef_current === void 0 ? void 0 : _itemContext_listRef_current[index];
+        if (node) setLayout({
+          width: Math.round(node.offsetWidth),
+          height: Math.round(node.offsetHeight),
+          x: Math.round(node.offsetLeft),
+          y: Math.round(node.offsetTop)
+        });
+      });
+    };
+    if (context.open && context.activeIndexRef.current !== null) update(context.activeIndexRef.current);
+    return itemContext.activeIndexSubscribe(update);
+  }, [context.open, itemContext.listRef]);
+  if (!layout) return null;
+  return /* @__PURE__ */_jsx(SelectIndicatorFrame, {
+    ref: forwardedRef,
+    ...props,
+    width: layout.width,
+    height: layout.height,
+    x: layout.x,
+    y: layout.y
+  });
+});
+var GROUP_NAME = "SelectGroup";
+var {
+  Provider: SelectGroupContextProvider,
+  useStyledContext: useSelectGroupContext
+} = createStyledContext({
+  id: ""
+}, "SelectGroup");
+var SelectGroupFrame = styled(YStack, {
+  name: GROUP_NAME,
+  width: "100%"
+});
+var NativeSelectTextFrame = styled(SizableText, {
+  render: "select",
+  backgroundColor: "$background",
+  borderColor: "$borderColor",
+  hoverStyle: {
+    backgroundColor: "$backgroundHover"
+  }
+});
+var NativeSelectFrame = styled(YStack, {
+  name: "NativeSelect",
+  variants: {
+    size: {
+      "...size": function (val, extras) {
+        var {
+          tokens
+        } = extras;
+        var paddingHorizontal = getVariableValue(tokens.space[val]);
+        var _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",
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    unstyled: {
+      false: {
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        userSelect: "none",
+        outlineWidth: 0,
+        paddingRight: 10
+      }
     }
-  }),
-  SelectGroup = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-    var {
-        scope,
-        ...groupProps
-      } = props,
-      groupId = React.useId(),
-      context = useSelectContext(scope),
-      itemParentContext = useSelectItemParentContext(scope),
-      _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 render="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
-          role: "group",
-          "aria-labelledby": groupId,
-          ...groupProps,
-          ref: forwardedRef
-        });
-      }();
-    return /* @__PURE__ */_jsx(SelectGroupContextProvider, {
-      scope,
-      id: groupId || "",
-      children: content
+  },
+  defaultVariants: {
+    size: "$2",
+    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
+  }
+});
+var SelectGroup = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
+  var {
+    scope,
+    ...groupProps
+  } = props;
+  var groupId = React.useId();
+  var context = useSelectContext(scope);
+  var itemParentContext = useSelectItemParentContext(scope);
+  var _itemParentContext_size;
+  var size = (_itemParentContext_size = itemParentContext.size) !== null && _itemParentContext_size !== void 0 ? _itemParentContext_size : "$true";
+  var nativeSelectRef = React.useRef(null);
+  var content = function () {
+    if (itemParentContext.shouldRenderWebNative) return /* @__PURE__ */_jsx(NativeSelectFrame, {
+      asChild: true,
+      size,
+      value: context.value,
+      id: itemParentContext.id,
+      children: /* @__PURE__ */_jsx(NativeSelectTextFrame, {
+        onChange: function (event) {
+          itemParentContext.onChange(event.currentTarget.value);
+        },
+        size,
+        ref: nativeSelectRef,
+        style: {
+          color: "var(--color)",
+          appearance: "none"
+        },
+        children: props.children
+      })
+    });
+    return /* @__PURE__ */_jsx(SelectGroupFrame, {
+      role: "group",
+      "aria-labelledby": groupId,
+      ...groupProps,
+      ref: forwardedRef
     });
+  }();
+  return /* @__PURE__ */_jsx(SelectGroupContextProvider, {
+    scope,
+    id: groupId || "",
+    children: content
   });
+});
 SelectGroup.displayName = GROUP_NAME;
-var LABEL_NAME = "SelectLabel",
-  SelectLabelFrame = styled(SizableText, {
-    name: LABEL_NAME,
-    variants: {
-      unstyled: {
-        false: {
-          size: "$true",
-          ellipsis: !0,
-          maxWidth: "100%",
-          cursor: "default"
-        }
-      },
-      size: {
-        "...size": function (val, param) {
-          var {
-            tokens
-          } = param;
-          return {
-            paddingHorizontal: tokens.space[val],
-            paddingVertical: getSpace(tokens.space[val], {
-              shift: -4
-            })
-          };
-        }
+var SelectLabelFrame = styled(SizableText, {
+  name: "SelectLabel",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        ellipsis: true,
+        maxWidth: "100%",
+        cursor: "default"
       }
     },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    size: {
+      "...size": function (val, param) {
+        var {
+          tokens
+        } = param;
+        return {
+          paddingHorizontal: tokens.space[val],
+          paddingVertical: getSpace(tokens.space[val], {
+            shift: -4
+          })
+        };
+      }
     }
-  }),
-  SelectLabel = SelectLabelFrame.styleable(function (props, forwardedRef) {
-    var {
-        scope,
-        ...labelProps
-      } = props,
-      context = useSelectItemParentContext(scope),
-      groupContext = useSelectGroupContext(scope);
-    return context.shouldRenderWebNative ? null : /* @__PURE__ */_jsx(SelectLabelFrame, {
-      render: "div",
-      id: groupContext.id,
-      size: context.size,
-      ...labelProps,
-      ref: forwardedRef
-    });
-  }),
-  SelectSeparator = styled(Separator, {
-    name: "SelectSeparator"
-  }),
-  SelectSheetController = function (props) {
-    var context = useSelectContext(props.scope),
-      showSheet = useShowSelectSheet(context),
-      isAdapted = useAdaptIsActive(context.adaptScope),
-      getShowSheet = useGet(showSheet);
-    return /* @__PURE__ */_jsx(SheetController, {
-      onOpenChange: function (val) {
-        getShowSheet() && props.onOpenChange(val);
-      },
-      open: context.open,
-      hidden: !isAdapted,
-      children: props.children
-    });
-  },
-  SelectSheetImpl = function (props) {
-    return /* @__PURE__ */_jsx(_Fragment, {
-      children: props.children
-    });
   },
-  Select = withStaticProperties(function (props) {
-    var adaptScope = `AdaptSelect${props.scope || ""}`;
-    return /* @__PURE__ */_jsx(AdaptParent, {
-      scope: adaptScope,
-      portal: !0,
-      children: /* @__PURE__ */_jsx(SelectInner, {
-        scope: props.scope,
-        adaptScope,
-        ...props
-      })
-    });
-  }, {
-    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,
-    Indicator: SelectIndicator,
-    FocusScope: FocusScopeController
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+var SelectLabel = SelectLabelFrame.styleable(function (props, forwardedRef) {
+  var {
+    scope,
+    ...labelProps
+  } = props;
+  var context = useSelectItemParentContext(scope);
+  var groupContext = useSelectGroupContext(scope);
+  if (context.shouldRenderWebNative) return null;
+  return /* @__PURE__ */_jsx(SelectLabelFrame, {
+    render: "div",
+    id: groupContext.id,
+    size: context.size,
+    ...labelProps,
+    ref: forwardedRef
+  });
+});
+var SelectSeparator = styled(Separator, {
+  name: "SelectSeparator"
+});
+var SelectSheetController = function (props) {
+  var context = useSelectContext(props.scope);
+  var showSheet = useShowSelectSheet(context);
+  var isAdapted = useAdaptIsActive(context.adaptScope);
+  var getShowSheet = useGet(showSheet);
+  return /* @__PURE__ */_jsx(SheetController, {
+    onOpenChange: function (val) {
+      if (getShowSheet()) props.onOpenChange(val);
+    },
+    open: context.open,
+    hidden: !isAdapted,
+    children: props.children
+  });
+};
+var SelectSheetImpl = function (props) {
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children: props.children
+  });
+};
+var Select = withStaticProperties(function Select2(props) {
+  var adaptScope = `AdaptSelect${props.scope || ""}`;
+  return /* @__PURE__ */_jsx(AdaptParent, {
+    scope: adaptScope,
+    portal: true,
+    children: /* @__PURE__ */_jsx(SelectInner, {
+      scope: props.scope,
+      adaptScope,
+      ...props
+    })
   });
+}, {
+  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,
+  Indicator: SelectIndicator,
+  FocusScope: FocusScopeController
+});
 function useEmitter() {
-  var listenersRef = React.useRef(/* @__PURE__ */new Set()),
-    emit = React.useCallback(function (value) {
-      listenersRef.current.forEach(function (l) {
-        return l(value);
-      });
-    }, []),
-    subscribe = React.useCallback(function (listener) {
-      return listenersRef.current.add(listener), function () {
-        listenersRef.current.delete(listener);
-      };
-    }, []);
-  return [emit, subscribe];
+  var listenersRef = React.useRef(/* @__PURE__ */new Set());
+  return [React.useCallback(function (value) {
+    listenersRef.current.forEach(function (l) {
+      return l(value);
+    });
+  }, []), React.useCallback(function (listener) {
+    listenersRef.current.add(listener);
+    return function () {
+      listenersRef.current.delete(listener);
+    };
+  }, [])];
 }
 function SelectInner(props) {
   var {
-      scope = "",
-      adaptScope,
-      native,
-      children,
-      open: openProp,
-      defaultOpen,
-      onOpenChange,
-      value: valueProp,
-      defaultValue,
-      onValueChange,
-      disablePreventBodyScroll,
-      size: sizeProp = "$true",
-      onActiveChange,
-      dir,
-      id,
-      renderValue
-    } = props,
-    isAdapted = useAdaptIsActive(adaptScope),
-    SelectImpl = isAdapted || !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
-    });
+    scope = "",
+    adaptScope,
+    native,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    disablePreventBodyScroll,
+    size: sizeProp = "$true",
+    onActiveChange,
+    dir,
+    id,
+    renderValue,
+    lazyMount,
+    zIndex
+  } = props;
+  var SelectImpl = useAdaptIsActive(adaptScope) || !isWeb ? SelectSheetImpl : SelectInlineImpl;
+  var forceUpdate = React.useReducer(function () {
+    return {};
+  }, {})[1];
+  var [selectedItem, setSelectedItem] = React.useState(null);
+  var [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange
+  });
+  var [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue || "",
+    onChange: onValueChange,
+    transition: true
+  });
+  React.useEffect(function () {
+    if (open) emitValue(value);
+  }, [open]);
   React.useEffect(function () {
-    open && emitValue(value);
-  }, [open]), React.useEffect(function () {
     emitValue(value);
-  }, [value]), React.useEffect(function () {
-    if (props.id) return registerFocusable(props.id, {
+  }, [value]);
+  React.useEffect(function () {
+    if (!props.id) return;
+    return registerFocusable(props.id, {
       focusAndSelect: function () {
-        setOpen?.(function (value2) {
+        setOpen === null || setOpen === void 0 || setOpen(function (value2) {
           return !value2;
         });
       },
       focus: function () {}
     });
   }, [props.id]);
-  var activeIndexRef = React.useRef(null),
-    [activeIndex, setActiveIndexState] = React.useState(null),
-    [emitValue, valueSubscribe] = useEmitter(),
-    [emitActiveIndex, activeIndexSubscribe] = useEmitter(),
-    selectedIndexRef = React.useRef(null),
-    listContentRef = React.useRef([]),
-    [selectedIndex, setSelectedIndex] = React.useState(0),
-    [valueNode, setValueNode] = React.useState(null);
+  var activeIndexRef = React.useRef(null);
+  var [activeIndex, setActiveIndexState] = React.useState(null);
+  var [emitValue, valueSubscribe] = useEmitter();
+  var [emitActiveIndex, activeIndexSubscribe] = useEmitter();
+  var selectedIndexRef = React.useRef(null);
+  var listContentRef = React.useRef([]);
+  var [selectedIndex, setSelectedIndex] = React.useState(0);
+  var [valueNode, setValueNode] = React.useState(null);
   useIsomorphicLayoutEffect(function () {
     selectedIndexRef.current = selectedIndex;
   });
-  var shouldRenderWebNative = isWeb && (native === !0 || native === "web" || Array.isArray(native) && native.includes("web")),
-    setActiveIndexFast = React.useCallback(function (index) {
-      activeIndexRef.current !== index && (activeIndexRef.current = index, typeof index == "number" && emitActiveIndex(index));
-    }, [emitActiveIndex]),
-    setActiveIndex = React.useCallback(function (index) {
-      setActiveIndexFast(index), setActiveIndexState(index);
-    }, [setActiveIndexFast]);
-  return /* @__PURE__ */_jsx(SelectItemParentProvider, {
+  var shouldRenderWebNative = isWeb && (native === true || native === "web" || Array.isArray(native) && native.includes("web"));
+  var setActiveIndexFast = React.useCallback(function (index) {
+    if (activeIndexRef.current !== index) {
+      activeIndexRef.current = index;
+      if (typeof index === "number") emitActiveIndex(index);
+    }
+  }, [emitActiveIndex]);
+  var setActiveIndex = React.useCallback(function (index) {
+    setActiveIndexFast(index);
+    setActiveIndexState(index);
+  }, [setActiveIndexFast]);
+  var content = /* @__PURE__ */_jsx(SelectItemParentProvider, {
     scopeName: scope,
     scope,
     adaptScope,
@@ -433,14 +437,16 @@ function SelectInner(props) {
     }, [open]),
     size: sizeProp,
     activeIndexSubscribe,
+    activeIndexRef,
     valueSubscribe,
     setOpen,
     id,
     onChange: React.useCallback(function (val) {
-      setValue(val), emitValue(val);
+      setValue(val);
+      emitValue(val);
     }, []),
     onActiveChange: useEvent(function (value2, index) {
-      onActiveChange?.(value2, index);
+      onActiveChange === null || onActiveChange === void 0 || onActiveChange(value2, index);
     }),
     setSelectedIndex,
     setValueAtIndex: React.useCallback(function (index, value2) {
@@ -456,8 +462,8 @@ function SelectInner(props) {
       adaptScope,
       disablePreventBodyScroll,
       dir,
-      blockSelection: !1,
-      fallback: !1,
+      blockSelection: false,
+      fallback: false,
       forceUpdate,
       valueNode,
       onValueNodeChange: setValueNode,
@@ -469,6 +475,7 @@ function SelectInner(props) {
       open,
       native,
       renderValue,
+      lazyMount,
       children: /* @__PURE__ */_jsx(SelectSheetController, {
         onOpenChange: setOpen,
         scope,
@@ -485,6 +492,11 @@ function SelectInner(props) {
       })
     })
   });
+  if (zIndex !== void 0) return /* @__PURE__ */_jsx(SelectZIndexContext.Provider, {
+    value: zIndex,
+    children: content
+  });
+  return content;
 }
 export { Select, SelectGroupFrame, SelectIcon, SelectSeparator };
 //# sourceMappingURL=Select.native.js.map