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

package/dist/cjs/Select.cjs

@@ -2,33 +2,35 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Select_exports = {};
 __export(Select_exports, {
   Select: () => Select,
@@ -37,63 +39,60 @@ __export(Select_exports, {
   SelectSeparator: () => SelectSeparator
 });
 module.exports = __toCommonJS(Select_exports);
-var import_adapt = require("@tamagui/adapt"),
-  import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_focus_scope = require("@tamagui/focus-scope"),
-  import_focusable = require("@tamagui/focusable"),
-  import_get_token = require("@tamagui/get-token"),
-  import_helpers = require("@tamagui/helpers"),
-  import_separator = require("@tamagui/separator"),
-  import_controller = require("@tamagui/sheet/controller"),
-  import_stacks = require("@tamagui/stacks"),
-  import_text = require("@tamagui/text"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  React = __toESM(require("react"), 1),
-  import_context = require("./context.cjs"),
-  import_SelectContent = require("./SelectContent.cjs"),
-  import_SelectImpl = require("./SelectImpl.cjs"),
-  import_SelectItem = require("./SelectItem.cjs"),
-  import_SelectItemText = require("./SelectItemText.cjs"),
-  import_SelectScrollButton = require("./SelectScrollButton.cjs"),
-  import_SelectTrigger = require("./SelectTrigger.cjs"),
-  import_SelectViewport = require("./SelectViewport.cjs"),
-  import_useSelectBreakpointActive = require("./useSelectBreakpointActive.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const VALUE_NAME = "SelectValue",
-  SelectValueFrame = (0, import_core.styled)(import_text.SizableText, {
-    name: VALUE_NAME,
-    userSelect: "none"
-  }),
-  SelectValue = SelectValueFrame.styleable(function ({
-    scope,
-    children: childrenProp,
-    placeholder,
-    ...props
-  }, forwardedRef) {
-    const context = (0, import_context.useSelectContext)(scope),
-      itemParentContext = (0, import_context.useSelectItemParentContext)(scope),
-      composedRefs = (0, import_compose_refs.useComposedRefs)(
-      // @ts-ignore TODO react 19 type needs fix
-      forwardedRef, context.onValueNodeChange),
-      isEmptyValue = context.value == null || context.value === "",
-      renderedValue = context.renderValue?.(context.value),
-      children = childrenProp ?? renderedValue ?? itemParentContext.selectedItem ?? context.value,
-      selectValueChildren = isEmptyValue ? placeholder ?? children : children;
-    return /* @__PURE__ */(0, import_jsx_runtime.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 import_adapt = require("@tamagui/adapt");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_focus_scope = require("@tamagui/focus-scope");
+require("@tamagui/focusable");
+var import_get_token = require("@tamagui/get-token");
+var import_helpers = require("@tamagui/helpers");
+var import_separator = require("@tamagui/separator");
+var import_controller = require("@tamagui/sheet/controller");
+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"), 1);
+var import_context = require("./context.cjs");
+var import_SelectContent = require("./SelectContent.cjs");
+var import_SelectImpl = require("./SelectImpl.cjs");
+var import_SelectItem = require("./SelectItem.cjs");
+var import_SelectItemText = require("./SelectItemText.cjs");
+var import_SelectScrollButton = require("./SelectScrollButton.cjs");
+var import_SelectTrigger = require("./SelectTrigger.cjs");
+var import_SelectViewport = require("./SelectViewport.cjs");
+var import_useSelectBreakpointActive = require("./useSelectBreakpointActive.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const SelectValueFrame = (0, import_core.styled)(import_text.SizableText, {
+  name: "SelectValue",
+  userSelect: "none"
+});
+const SelectValue = SelectValueFrame.styleable(function SelectValue2({
+  scope,
+  children: childrenProp,
+  placeholder,
+  ...props
+}, forwardedRef) {
+  const context = (0, import_context.useSelectContext)(scope);
+  const itemParentContext = (0, import_context.useSelectItemParentContext)(scope);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(
+  // @ts-ignore TODO react 19 type needs fix
+  forwardedRef, context.onValueNodeChange);
+  const isEmptyValue = context.value == null || context.value === "";
+  const renderedValue = context.renderValue?.(context.value);
+  const children = childrenProp ?? renderedValue ?? itemParentContext.selectedItem ?? context.value;
+  const selectValueChildren = isEmptyValue ? placeholder ?? children : children;
+  return /* @__PURE__ */(0, import_jsx_runtime.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, child => {
     if (child) {
@@ -104,341 +103,362 @@ function unwrapSelectItem(selectValueChildren) {
   });
 }
 const SelectIcon = (0, import_core.styled)(import_stacks.XStack, {
-    name: "SelectIcon",
-    // @ts-ignore
-    "aria-hidden": !0,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.Paragraph, {
-      children: "\u25BC"
-    })
-  }),
-  SelectItemIndicatorFrame = (0, import_core.styled)(import_stacks.XStack, {
-    name: "SelectItemIndicator"
-  }),
-  SelectItemIndicator = React.forwardRef(function (props, forwardedRef) {
-    const {
-        scope,
-        ...itemIndicatorProps
-      } = props,
-      context = (0, import_context.useSelectItemParentContext)(scope),
-      itemContext = (0, import_SelectItem.useSelectItemContext)(scope);
-    return context.shouldRenderWebNative ? null : itemContext.isSelected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectItemIndicatorFrame, {
-      "aria-hidden": !0,
-      ...itemIndicatorProps,
-      ref: forwardedRef
-    }) : null;
-  }),
-  SelectIndicatorFrame = (0, import_core.styled)(import_stacks.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 ({
+  name: "SelectIcon",
+  "aria-hidden": true,
+  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_text.Paragraph, {
+    children: "▼"
+  })
+});
+const SelectItemIndicatorFrame = (0, import_core.styled)(import_stacks.XStack, {
+  name: "SelectItemIndicator"
+});
+const SelectItemIndicator = React.forwardRef(function SelectItemIndicator2(props, forwardedRef) {
+  const {
     scope,
-    ...props
-  }, forwardedRef) {
-    const itemContext = (0, import_context.useSelectItemParentContext)(scope),
-      context = (0, import_context.useSelectContext)(scope),
-      [layout, setLayout] = React.useState(null),
-      rafRef = React.useRef(0);
-    return React.useLayoutEffect(() => {
-      const update = index => {
-        typeof index == "number" && (cancelAnimationFrame(rafRef.current), rafRef.current = requestAnimationFrame(() => {
-          const node = 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__ */(0, import_jsx_runtime.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
-  } = (0, import_core.createStyledContext)({
-    id: ""
-  }, "SelectGroup"),
-  SelectGroupFrame = (0, import_core.styled)(import_stacks.YStack, {
-    name: GROUP_NAME,
-    width: "100%"
-  }),
-  NativeSelectTextFrame = (0, import_core.styled)(import_text.SizableText, {
-    render: "select",
-    backgroundColor: "$background",
-    borderColor: "$borderColor",
-    hoverStyle: {
-      backgroundColor: "$backgroundHover"
+    ...itemIndicatorProps
+  } = props;
+  const context = (0, import_context.useSelectItemParentContext)(scope);
+  const itemContext = (0, import_SelectItem.useSelectItemContext)(scope);
+  if (context.shouldRenderWebNative) return null;
+  return itemContext.isSelected ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectItemIndicatorFrame, {
+    "aria-hidden": true,
+    ...itemIndicatorProps,
+    ref: forwardedRef
+  }) : null;
+});
+const SelectIndicatorFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: "SelectIndicator",
+  variants: {
+    unstyled: {
+      false: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        zIndex: 10,
+        backgroundColor: "$background",
+        borderRadius: 0
+      }
     }
-  }),
-  NativeSelectFrame = (0, import_core.styled)(import_stacks.YStack, {
-    name: "NativeSelect",
-    variants: {
-      size: {
-        "...size": (val, extras) => {
-          const {
-              tokens
-            } = extras,
-            paddingHorizontal = (0, import_core.getVariableValue)(tokens.space[val]);
-          return {
-            borderRadius: tokens.radius[val] ?? val,
-            minHeight: tokens.size[val],
-            paddingRight: paddingHorizontal + 20,
-            paddingLeft: paddingHorizontal,
-            paddingVertical: (0, import_get_token.getSpace)(val, {
-              shift: -3
-            })
-          };
-        }
-      },
-      unstyled: {
-        false: {
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          userSelect: "none",
-          outlineWidth: 0,
-          paddingRight: 10
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SelectIndicator = SelectIndicatorFrame.styleable(function SelectIndicator2({
+  scope,
+  ...props
+}, forwardedRef) {
+  const itemContext = (0, import_context.useSelectItemParentContext)(scope);
+  const context = (0, import_context.useSelectContext)(scope);
+  const [layout, setLayout] = React.useState(null);
+  const rafRef = React.useRef(0);
+  React.useLayoutEffect(() => {
+    const update = index => {
+      if (typeof index !== "number") return;
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        const node = 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__ */(0, import_jsx_runtime.jsx)(SelectIndicatorFrame, {
+    ref: forwardedRef,
+    ...props,
+    width: layout.width,
+    height: layout.height,
+    x: layout.x,
+    y: layout.y
+  });
+});
+const GROUP_NAME = "SelectGroup";
+const {
+  Provider: SelectGroupContextProvider,
+  useStyledContext: useSelectGroupContext
+} = (0, import_core.createStyledContext)({
+  id: ""
+}, "SelectGroup");
+const SelectGroupFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: GROUP_NAME,
+  width: "100%"
+});
+const NativeSelectTextFrame = (0, import_core.styled)(import_text.SizableText, {
+  render: "select",
+  backgroundColor: "$background",
+  borderColor: "$borderColor",
+  hoverStyle: {
+    backgroundColor: "$backgroundHover"
+  }
+});
+const NativeSelectFrame = (0, import_core.styled)(import_stacks.YStack, {
+  name: "NativeSelect",
+  variants: {
+    size: {
+      "...size": (val, extras) => {
+        const {
+          tokens
+        } = extras;
+        const paddingHorizontal = (0, import_core.getVariableValue)(tokens.space[val]);
+        return {
+          borderRadius: tokens.radius[val] ?? val,
+          minHeight: tokens.size[val],
+          paddingRight: paddingHorizontal + 20,
+          paddingLeft: paddingHorizontal,
+          paddingVertical: (0, import_get_token.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 = React.forwardRef((props, forwardedRef) => {
-    const {
-        scope,
-        ...groupProps
-      } = props,
-      groupId = React.useId(),
-      context = (0, import_context.useSelectContext)(scope),
-      itemParentContext = (0, import_context.useSelectItemParentContext)(scope),
-      size = itemParentContext.size ?? "$true",
-      nativeSelectRef = React.useRef(null),
-      content = itemParentContext.shouldRenderWebNative ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeSelectFrame, {
-        asChild: !0,
+  },
+  defaultVariants: {
+    size: "$2",
+    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
+  }
+});
+const SelectGroup = React.forwardRef((props, forwardedRef) => {
+  const {
+    scope,
+    ...groupProps
+  } = props;
+  const groupId = React.useId();
+  const context = (0, import_context.useSelectContext)(scope);
+  const itemParentContext = (0, import_context.useSelectItemParentContext)(scope);
+  const size = itemParentContext.size ?? "$true";
+  const nativeSelectRef = React.useRef(null);
+  const content = (() => {
+    if (itemParentContext.shouldRenderWebNative) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeSelectFrame, {
+      asChild: true,
+      size,
+      value: context.value,
+      id: itemParentContext.id,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeSelectTextFrame, {
+        onChange: event => {
+          itemParentContext.onChange(event.currentTarget.value);
+        },
         size,
-        value: context.value,
-        id: itemParentContext.id,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(NativeSelectTextFrame, {
-          onChange: event => {
-            itemParentContext.onChange(event.currentTarget.value);
-          },
-          size,
-          ref: nativeSelectRef,
-          style: {
-            color: "var(--color)",
-            // @ts-ignore
-            appearance: "none"
-          },
-          children: props.children
-        })
-      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectGroupFrame, {
-        role: "group",
-        "aria-labelledby": groupId,
-        ...groupProps,
-        ref: forwardedRef
-      });
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectGroupContextProvider, {
-      scope,
-      id: groupId || "",
-      children: content
+        ref: nativeSelectRef,
+        style: {
+          color: "var(--color)",
+          appearance: "none"
+        },
+        children: props.children
+      })
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectGroupFrame, {
+      role: "group",
+      "aria-labelledby": groupId,
+      ...groupProps,
+      ref: forwardedRef
     });
+  })();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectGroupContextProvider, {
+    scope,
+    id: groupId || "",
+    children: content
   });
+});
 SelectGroup.displayName = GROUP_NAME;
-const LABEL_NAME = "SelectLabel",
-  SelectLabelFrame = (0, import_core.styled)(import_text.SizableText, {
-    name: LABEL_NAME,
-    variants: {
-      unstyled: {
-        false: {
-          size: "$true",
-          ellipsis: !0,
-          maxWidth: "100%",
-          cursor: "default"
-        }
-      },
-      size: {
-        "...size": (val, {
-          tokens
-        }) => ({
+const SelectLabelFrame = (0, import_core.styled)(import_text.SizableText, {
+  name: "SelectLabel",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        ellipsis: true,
+        maxWidth: "100%",
+        cursor: "default"
+      }
+    },
+    size: {
+      "...size": (val, {
+        tokens
+      }) => {
+        return {
           paddingHorizontal: tokens.space[val],
           paddingVertical: (0, import_get_token.getSpace)(tokens.space[val], {
             shift: -4
           })
-        })
+        };
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  SelectLabel = SelectLabelFrame.styleable((props, forwardedRef) => {
-    const {
-        scope,
-        ...labelProps
-      } = props,
-      context = (0, import_context.useSelectItemParentContext)(scope),
-      groupContext = useSelectGroupContext(scope);
-    return context.shouldRenderWebNative ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectLabelFrame, {
-      render: "div",
-      id: groupContext.id,
-      size: context.size,
-      ...labelProps,
-      ref: forwardedRef
-    });
-  }),
-  SelectSeparator = (0, import_core.styled)(import_separator.Separator, {
-    name: "SelectSeparator"
-  }),
-  SelectSheetController = props => {
-    const context = (0, import_context.useSelectContext)(props.scope),
-      showSheet = (0, import_useSelectBreakpointActive.useShowSelectSheet)(context),
-      isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope),
-      getShowSheet = (0, import_core.useGet)(showSheet);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
-      onOpenChange: val => {
-        getShowSheet() && props.onOpenChange(val);
-      },
-      open: context.open,
-      hidden: !isAdapted,
-      children: props.children
-    });
   },
-  SelectSheetImpl = props => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SelectLabel = SelectLabelFrame.styleable((props, forwardedRef) => {
+  const {
+    scope,
+    ...labelProps
+  } = props;
+  const context = (0, import_context.useSelectItemParentContext)(scope);
+  const groupContext = useSelectGroupContext(scope);
+  if (context.shouldRenderWebNative) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectLabelFrame, {
+    render: "div",
+    id: groupContext.id,
+    size: context.size,
+    ...labelProps,
+    ref: forwardedRef
+  });
+});
+const SelectSeparator = (0, import_core.styled)(import_separator.Separator, {
+  name: "SelectSeparator"
+});
+const SelectSheetController = props => {
+  const context = (0, import_context.useSelectContext)(props.scope);
+  const showSheet = (0, import_useSelectBreakpointActive.useShowSelectSheet)(context);
+  const isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+  const getShowSheet = (0, import_core.useGet)(showSheet);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_controller.SheetController, {
+    onOpenChange: val => {
+      if (getShowSheet()) props.onOpenChange(val);
+    },
+    open: context.open,
+    hidden: !isAdapted,
     children: props.children
-  }),
-  Select = (0, import_helpers.withStaticProperties)(function (props) {
-    const adaptScope = `AdaptSelect${props.scope || ""}`;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
-      scope: adaptScope,
-      portal: !0,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectInner, {
-        scope: props.scope,
-        adaptScope,
-        ...props
-      })
-    });
-  }, {
-    Adapt: import_adapt.Adapt,
-    Content: import_SelectContent.SelectContent,
-    Group: SelectGroup,
-    Icon: SelectIcon,
-    Item: import_SelectItem.SelectItem,
-    ItemIndicator: SelectItemIndicator,
-    ItemText: import_SelectItemText.SelectItemText,
-    Label: SelectLabel,
-    ScrollDownButton: import_SelectScrollButton.SelectScrollDownButton,
-    ScrollUpButton: import_SelectScrollButton.SelectScrollUpButton,
-    Trigger: import_SelectTrigger.SelectTrigger,
-    Value: SelectValue,
-    Viewport: import_SelectViewport.SelectViewport,
-    Indicator: SelectIndicator,
-    FocusScope: import_focus_scope.FocusScopeController
   });
+};
+const SelectSheetImpl = props => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: props.children
+  });
+};
+const Select = (0, import_helpers.withStaticProperties)(function Select2(props) {
+  const adaptScope = `AdaptSelect${props.scope || ""}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
+    scope: adaptScope,
+    portal: true,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectInner, {
+      scope: props.scope,
+      adaptScope,
+      ...props
+    })
+  });
+}, {
+  Adapt: import_adapt.Adapt,
+  Content: import_SelectContent.SelectContent,
+  Group: SelectGroup,
+  Icon: SelectIcon,
+  Item: import_SelectItem.SelectItem,
+  ItemIndicator: SelectItemIndicator,
+  ItemText: import_SelectItemText.SelectItemText,
+  Label: SelectLabel,
+  ScrollDownButton: import_SelectScrollButton.SelectScrollDownButton,
+  ScrollUpButton: import_SelectScrollButton.SelectScrollUpButton,
+  Trigger: import_SelectTrigger.SelectTrigger,
+  Value: SelectValue,
+  Viewport: import_SelectViewport.SelectViewport,
+  Indicator: SelectIndicator,
+  FocusScope: import_focus_scope.FocusScopeController
+});
 function useEmitter() {
-  const listenersRef = React.useRef(/* @__PURE__ */new Set()),
-    emit = React.useCallback(value => {
-      listenersRef.current.forEach(l => l(value));
-    }, []),
-    subscribe = React.useCallback(listener => (listenersRef.current.add(listener), () => {
+  const listenersRef = React.useRef(/* @__PURE__ */new Set());
+  return [React.useCallback(value => {
+    listenersRef.current.forEach(l => l(value));
+  }, []), React.useCallback(listener => {
+    listenersRef.current.add(listener);
+    return () => {
       listenersRef.current.delete(listener);
-    }), []);
-  return [emit, subscribe];
+    };
+  }, [])];
 }
 function SelectInner(props) {
   const {
-      scope = "",
-      adaptScope,
-      native,
-      children,
-      open: openProp,
-      defaultOpen,
-      onOpenChange,
-      value: valueProp,
-      defaultValue,
-      onValueChange,
-      disablePreventBodyScroll,
-      size: sizeProp = "$true",
-      onActiveChange,
-      dir,
-      id,
-      renderValue
-    } = props,
-    SelectImpl = (0, import_adapt.useAdaptIsActive)(adaptScope) || !import_constants.isWeb ? SelectSheetImpl : import_SelectImpl.SelectInlineImpl,
-    forceUpdate = React.useReducer(() => ({}), {})[1],
-    [selectedItem, setSelectedItem] = React.useState(null),
-    [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
-      prop: openProp,
-      defaultProp: defaultOpen || !1,
-      onChange: onOpenChange
-    }),
-    [value, setValue] = (0, import_use_controllable_state.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;
+  const SelectImpl = (0, import_adapt.useAdaptIsActive)(adaptScope) || !import_constants.isWeb ? SelectSheetImpl : import_SelectImpl.SelectInlineImpl;
+  const forceUpdate = React.useReducer(() => ({}), {})[1];
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  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,
+    transition: true
+  });
+  React.useEffect(() => {
+    if (open) emitValue(value);
+  }, [open]);
   React.useEffect(() => {
-    open && emitValue(value);
-  }, [open]), React.useEffect(() => {
     emitValue(value);
   }, [value]);
-  const 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);
+  const activeIndexRef = React.useRef(null);
+  const [activeIndex, setActiveIndexState] = React.useState(null);
+  const [emitValue, valueSubscribe] = useEmitter();
+  const [emitActiveIndex, activeIndexSubscribe] = useEmitter();
+  const selectedIndexRef = React.useRef(null);
+  const listContentRef = React.useRef([]);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [valueNode, setValueNode] = React.useState(null);
   (0, import_constants.useIsomorphicLayoutEffect)(() => {
     selectedIndexRef.current = selectedIndex;
   });
-  const shouldRenderWebNative = import_constants.isWeb && (native === !0 || native === "web" || Array.isArray(native) && native.includes("web")),
-    setActiveIndexFast = React.useCallback(index => {
-      activeIndexRef.current !== index && (activeIndexRef.current = index, typeof index == "number" && emitActiveIndex(index));
-    }, [emitActiveIndex]),
-    setActiveIndex = React.useCallback(index => {
-      setActiveIndexFast(index), setActiveIndexState(index);
-    }, [setActiveIndexFast]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectItemParentProvider, {
+  const shouldRenderWebNative = import_constants.isWeb && (native === true || native === "web" || Array.isArray(native) && native.includes("web"));
+  const setActiveIndexFast = React.useCallback(index => {
+    if (activeIndexRef.current !== index) {
+      activeIndexRef.current = index;
+      if (typeof index === "number") emitActiveIndex(index);
+    }
+  }, [emitActiveIndex]);
+  const setActiveIndex = React.useCallback(index => {
+    setActiveIndexFast(index);
+    setActiveIndexState(index);
+  }, [setActiveIndexFast]);
+  const content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectItemParentProvider, {
     scopeName: scope,
     scope,
     adaptScope,
     initialValue: React.useMemo(() => value, [open]),
     size: sizeProp,
     activeIndexSubscribe,
+    activeIndexRef,
     valueSubscribe,
     setOpen,
     id,
     onChange: React.useCallback(val => {
-      setValue(val), emitValue(val);
+      setValue(val);
+      emitValue(val);
     }, []),
     onActiveChange: (0, import_core.useEvent)((value2, index) => {
       onActiveChange?.(value2, index);
@@ -457,8 +477,8 @@ function SelectInner(props) {
       adaptScope,
       disablePreventBodyScroll,
       dir,
-      blockSelection: !1,
-      fallback: !1,
+      blockSelection: false,
+      fallback: false,
       forceUpdate,
       valueNode,
       onValueNodeChange: setValueNode,
@@ -470,6 +490,7 @@ function SelectInner(props) {
       open,
       native,
       renderValue,
+      lazyMount,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectSheetController, {
         onOpenChange: setOpen,
         scope,
@@ -486,4 +507,9 @@ function SelectInner(props) {
       })
     })
   });
+  if (zIndex !== void 0) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectZIndexContext.Provider, {
+    value: zIndex,
+    children: content
+  });
+  return content;
 }