@radix-ui/react-select 2.3.0-rc.1780509379622 → 2.3.0-rc.1780518364979

package/dist/index.d.mts

@@ -1,12 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
+import { Scope } from '@radix-ui/react-context';
 import * as React from 'react';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { Portal as Portal$1 } from '@radix-ui/react-portal';
+import { Portal } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 
 type Direction = 'ltr' | 'rtl';
+type ScopedProps<P> = P & {
+    __scopeSelect?: Scope;
+};
 declare const createSelectScope: _radix_ui_react_context.CreateScope;
 interface SelectSharedProps {
     children?: React.ReactNode;
@@ -25,6 +30,15 @@ type SelectProps = SelectSharedProps & {
     defaultValue?: string;
     onValueChange?(value: string): void;
 };
+interface SelectProviderProps extends SelectSharedProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?(value: string): void;
+}
+declare function SelectProvider(props: ScopedProps<SelectProviderProps>): react_jsx_runtime.JSX.Element;
+declare namespace SelectProvider {
+    var displayName: string;
+}
 declare const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
 interface SelectTriggerProps extends PrimitiveButtonProps {
@@ -38,7 +52,7 @@ declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & Re
 interface SelectIconProps extends PrimitiveSpanProps {
 }
 declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
-type PortalProps = React.ComponentPropsWithoutRef<typeof Portal$1>;
+type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
 interface SelectPortalProps {
     children?: React.ReactNode;
     /**
@@ -127,21 +141,9 @@ type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Ar
 interface SelectArrowProps extends PopperArrowProps {
 }
 declare const SelectArrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<SVGSVGElement>>;
-declare const Root: React.FC<SelectProps>;
-declare const Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const Value: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const Icon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
-declare const Portal: React.FC<SelectPortalProps>;
-declare const Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const Viewport: React.ForwardRefExoticComponent<SelectViewportProps & React.RefAttributes<HTMLDivElement>>;
-declare const Group: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const Label: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
-declare const Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const ItemText: React.ForwardRefExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
-declare const ItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
-declare const ScrollUpButton: React.ForwardRefExoticComponent<SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollDownButton: React.ForwardRefExoticComponent<SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>>;
-declare const Separator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-declare const Arrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<SVGSVGElement>>;
+type PrimitiveSelectProps = React.ComponentPropsWithoutRef<typeof Primitive.select>;
+interface SelectBubbleInputProps extends Omit<PrimitiveSelectProps, 'value'> {
+}
+declare const SelectBubbleInput: React.ForwardRefExoticComponent<SelectBubbleInputProps & React.RefAttributes<HTMLSelectElement>>;
 
-export { Arrow, Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal, Root, ScrollDownButton, ScrollUpButton, Select, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectPortal, type SelectPortalProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, type SelectSharedProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, Separator, Trigger, Value, Viewport, createSelectScope };
+export { SelectArrow as Arrow, SelectContent as Content, SelectGroup as Group, SelectIcon as Icon, SelectItem as Item, SelectItemIndicator as ItemIndicator, SelectItemText as ItemText, SelectLabel as Label, SelectPortal as Portal, Select as Root, SelectScrollDownButton as ScrollDownButton, SelectScrollUpButton as ScrollUpButton, Select, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectPortal, type SelectPortalProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, type SelectSharedProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, SelectViewport as Viewport, createSelectScope, SelectBubbleInput as unstable_BubbleInput, SelectProvider as unstable_Provider, SelectBubbleInput as unstable_SelectBubbleInput, type SelectBubbleInputProps as unstable_SelectBubbleInputProps, SelectProvider as unstable_SelectProvider, type SelectProviderProps as unstable_SelectProviderProps };

package/dist/index.d.ts

@@ -1,12 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _radix_ui_react_context from '@radix-ui/react-context';
+import { Scope } from '@radix-ui/react-context';
 import * as React from 'react';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { Portal as Portal$1 } from '@radix-ui/react-portal';
+import { Portal } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
 
 type Direction = 'ltr' | 'rtl';
+type ScopedProps<P> = P & {
+    __scopeSelect?: Scope;
+};
 declare const createSelectScope: _radix_ui_react_context.CreateScope;
 interface SelectSharedProps {
     children?: React.ReactNode;
@@ -25,6 +30,15 @@ type SelectProps = SelectSharedProps & {
     defaultValue?: string;
     onValueChange?(value: string): void;
 };
+interface SelectProviderProps extends SelectSharedProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?(value: string): void;
+}
+declare function SelectProvider(props: ScopedProps<SelectProviderProps>): react_jsx_runtime.JSX.Element;
+declare namespace SelectProvider {
+    var displayName: string;
+}
 declare const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;
 interface SelectTriggerProps extends PrimitiveButtonProps {
@@ -38,7 +52,7 @@ declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & Re
 interface SelectIconProps extends PrimitiveSpanProps {
 }
 declare const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
-type PortalProps = React.ComponentPropsWithoutRef<typeof Portal$1>;
+type PortalProps = React.ComponentPropsWithoutRef<typeof Portal>;
 interface SelectPortalProps {
     children?: React.ReactNode;
     /**
@@ -127,21 +141,9 @@ type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Ar
 interface SelectArrowProps extends PopperArrowProps {
 }
 declare const SelectArrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<SVGSVGElement>>;
-declare const Root: React.FC<SelectProps>;
-declare const Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-declare const Value: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const Icon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
-declare const Portal: React.FC<SelectPortalProps>;
-declare const Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const Viewport: React.ForwardRefExoticComponent<SelectViewportProps & React.RefAttributes<HTMLDivElement>>;
-declare const Group: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const Label: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<HTMLDivElement>>;
-declare const Item: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const ItemText: React.ForwardRefExoticComponent<SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;
-declare const ItemIndicator: React.ForwardRefExoticComponent<SelectItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
-declare const ScrollUpButton: React.ForwardRefExoticComponent<SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollDownButton: React.ForwardRefExoticComponent<SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>>;
-declare const Separator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
-declare const Arrow: React.ForwardRefExoticComponent<SelectArrowProps & React.RefAttributes<SVGSVGElement>>;
+type PrimitiveSelectProps = React.ComponentPropsWithoutRef<typeof Primitive.select>;
+interface SelectBubbleInputProps extends Omit<PrimitiveSelectProps, 'value'> {
+}
+declare const SelectBubbleInput: React.ForwardRefExoticComponent<SelectBubbleInputProps & React.RefAttributes<HTMLSelectElement>>;
 
-export { Arrow, Content, Group, Icon, Item, ItemIndicator, ItemText, Label, Portal, Root, ScrollDownButton, ScrollUpButton, Select, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectPortal, type SelectPortalProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, type SelectSharedProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, Separator, Trigger, Value, Viewport, createSelectScope };
+export { SelectArrow as Arrow, SelectContent as Content, SelectGroup as Group, SelectIcon as Icon, SelectItem as Item, SelectItemIndicator as ItemIndicator, SelectItemText as ItemText, SelectLabel as Label, SelectPortal as Portal, Select as Root, SelectScrollDownButton as ScrollDownButton, SelectScrollUpButton as ScrollUpButton, Select, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectPortal, type SelectPortalProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, type SelectSharedProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, SelectViewport, type SelectViewportProps, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, SelectViewport as Viewport, createSelectScope, SelectBubbleInput as unstable_BubbleInput, SelectProvider as unstable_Provider, SelectBubbleInput as unstable_SelectBubbleInput, type SelectBubbleInputProps as unstable_SelectBubbleInputProps, SelectProvider as unstable_SelectProvider, type SelectProviderProps as unstable_SelectProviderProps };

package/dist/index.js

@@ -31,18 +31,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Arrow: () => Arrow2,
-  Content: () => Content2,
-  Group: () => Group,
-  Icon: () => Icon,
-  Item: () => Item,
-  ItemIndicator: () => ItemIndicator,
-  ItemText: () => ItemText,
-  Label: () => Label,
-  Portal: () => Portal,
-  Root: () => Root2,
-  ScrollDownButton: () => ScrollDownButton,
-  ScrollUpButton: () => ScrollUpButton,
+  Arrow: () => SelectArrow,
+  Content: () => SelectContent,
+  Group: () => SelectGroup,
+  Icon: () => SelectIcon,
+  Item: () => SelectItem,
+  ItemIndicator: () => SelectItemIndicator,
+  ItemText: () => SelectItemText,
+  Label: () => SelectLabel,
+  Portal: () => SelectPortal,
+  Root: () => Select,
+  ScrollDownButton: () => SelectScrollDownButton,
+  ScrollUpButton: () => SelectScrollUpButton,
   Select: () => Select,
   SelectArrow: () => SelectArrow,
   SelectContent: () => SelectContent,
@@ -59,11 +59,15 @@ __export(index_exports, {
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
   SelectViewport: () => SelectViewport,
-  Separator: () => Separator,
-  Trigger: () => Trigger,
-  Value: () => Value,
-  Viewport: () => Viewport,
-  createSelectScope: () => createSelectScope
+  Separator: () => SelectSeparator,
+  Trigger: () => SelectTrigger,
+  Value: () => SelectValue,
+  Viewport: () => SelectViewport,
+  createSelectScope: () => createSelectScope,
+  unstable_BubbleInput: () => SelectBubbleInput,
+  unstable_Provider: () => SelectProvider,
+  unstable_SelectBubbleInput: () => SelectBubbleInput,
+  unstable_SelectProvider: () => SelectProvider
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -103,9 +107,10 @@ var [createSelectContext, createSelectScope] = (0, import_react_context.createCo
   import_react_popper.createPopperScope
 ]);
 var usePopperScope = (0, import_react_popper.createPopperScope)();
-var [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
+var [SelectProviderImpl, useSelectContext] = createSelectContext(SELECT_NAME);
 var [SelectNativeOptionsProvider, useSelectNativeOptionsContext] = createSelectContext(SELECT_NAME);
-var Select = (props) => {
+var PROVIDER_NAME = "SelectProvider";
+function SelectProvider(props) {
   const {
     __scopeSelect,
     children,
@@ -120,7 +125,9 @@ var Select = (props) => {
     autoComplete,
     disabled,
     required,
-    form
+    form,
+    // @ts-expect-error internal render prop used by `Select` to compose its default parts
+    internal_do_not_use_render
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
@@ -140,68 +147,72 @@ var Select = (props) => {
     caller: SELECT_NAME
   });
   const triggerPointerDownPosRef = React.useRef(null);
-  const isFormControl = trigger ? form || !!trigger.closest("form") : true;
+  const isFormControl = trigger ? !!form || !!trigger.closest("form") : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
+  const contentId = (0, import_react_id.useId)();
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    SelectProvider,
+  const handleNativeOptionAdd = React.useCallback((option) => {
+    setNativeOptionsSet((prev) => new Set(prev).add(option));
+  }, []);
+  const handleNativeOptionRemove = React.useCallback((option) => {
+    setNativeOptionsSet((prev) => {
+      const optionsSet = new Set(prev);
+      optionsSet.delete(option);
+      return optionsSet;
+    });
+  }, []);
+  const context = {
+    required,
+    trigger,
+    onTriggerChange: setTrigger,
+    valueNode,
+    onValueNodeChange: setValueNode,
+    valueNodeHasChildren,
+    onValueNodeHasChildrenChange: setValueNodeHasChildren,
+    contentId,
+    value,
+    onValueChange: setValue,
+    open,
+    onOpenChange: setOpen,
+    dir: direction,
+    triggerPointerDownPosRef,
+    disabled,
+    name,
+    autoComplete,
+    form,
+    nativeOptions: nativeOptionsSet,
+    nativeSelectKey,
+    isFormControl
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectProviderImpl, { scope: __scopeSelect, ...context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SelectNativeOptionsProvider,
     {
-      required,
       scope: __scopeSelect,
-      trigger,
-      onTriggerChange: setTrigger,
-      valueNode,
-      onValueNodeChange: setValueNode,
-      valueNodeHasChildren,
-      onValueNodeHasChildrenChange: setValueNodeHasChildren,
-      contentId: (0, import_react_id.useId)(),
-      value,
-      onValueChange: setValue,
-      open,
-      onOpenChange: setOpen,
-      dir: direction,
-      triggerPointerDownPosRef,
-      disabled,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          SelectNativeOptionsProvider,
-          {
-            scope: props.__scopeSelect,
-            onNativeOptionAdd: React.useCallback((option) => {
-              setNativeOptionsSet((prev) => new Set(prev).add(option));
-            }, []),
-            onNativeOptionRemove: React.useCallback((option) => {
-              setNativeOptionsSet((prev) => {
-                const optionsSet = new Set(prev);
-                optionsSet.delete(option);
-                return optionsSet;
-              });
-            }, []),
-            children
-          }
-        ) }),
-        isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      onNativeOptionAdd: handleNativeOptionAdd,
+      onNativeOptionRemove: handleNativeOptionRemove,
+      children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children
+    }
+  ) }) }) });
+}
+SelectProvider.displayName = PROVIDER_NAME;
+var Select = (props) => {
+  const { __scopeSelect, children, ...providerProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SelectProvider,
+    {
+      __scopeSelect,
+      ...providerProps,
+      internal_do_not_use_render: ({ isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        children,
+        isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           SelectBubbleInput,
           {
-            "aria-hidden": true,
-            required,
-            tabIndex: -1,
-            name,
-            autoComplete,
-            value: value ?? "",
-            onChange: (event) => setValue(event.target.value),
-            disabled,
-            form,
-            children: [
-              shouldShowPlaceholder(value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "" }) : null,
-              Array.from(nativeOptionsSet)
-            ]
-          },
-          nativeSelectKey
+            __scopeSelect
+          }
         ) : null
-      ]
+      ] })
     }
-  ) });
+  );
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
@@ -1145,10 +1156,14 @@ var SelectArrow = React.forwardRef(
 SelectArrow.displayName = ARROW_NAME;
 var BUBBLE_INPUT_NAME = "SelectBubbleInput";
 var SelectBubbleInput = React.forwardRef(
-  ({ __scopeSelect, value, ...props }, forwardedRef) => {
+  ({ __scopeSelect, ...props }, forwardedRef) => {
+    const context = useSelectContext(BUBBLE_INPUT_NAME, __scopeSelect);
+    const { value, onValueChange, required, disabled, name, autoComplete, form } = context;
+    const { nativeOptions, nativeSelectKey } = context;
     const ref = React.useRef(null);
     const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
-    const prevValue = (0, import_react_use_previous.usePrevious)(value);
+    const selectValue = value ?? "";
+    const prevValue = (0, import_react_use_previous.usePrevious)(selectValue);
     React.useEffect(() => {
       const select = ref.current;
       if (!select) return;
@@ -1158,24 +1173,40 @@ var SelectBubbleInput = React.forwardRef(
         "value"
       );
       const setValue = descriptor.set;
-      if (prevValue !== value && setValue) {
+      if (prevValue !== selectValue && setValue) {
         const event = new Event("change", { bubbles: true });
-        setValue.call(select, value);
+        setValue.call(select, selectValue);
         select.dispatchEvent(event);
       }
-    }, [prevValue, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    }, [prevValue, selectValue]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_react_primitive.Primitive.select,
       {
+        "aria-hidden": true,
+        required,
+        tabIndex: -1,
+        name,
+        autoComplete,
+        disabled,
+        form,
+        onChange: (event) => onValueChange(event.target.value),
         ...props,
         style: { ...import_react_visually_hidden.VISUALLY_HIDDEN_STYLES, ...props.style },
         ref: composedRefs,
-        defaultValue: value
-      }
+        defaultValue: selectValue,
+        children: [
+          shouldShowPlaceholder(value) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "" }) : null,
+          Array.from(nativeOptions)
+        ]
+      },
+      nativeSelectKey
     );
   }
 );
 SelectBubbleInput.displayName = BUBBLE_INPUT_NAME;
+function isFunction(value) {
+  return typeof value === "function";
+}
 function shouldShowPlaceholder(value) {
   return value === "" || value === void 0;
 }
@@ -1219,20 +1250,4 @@ function findNextItem(items, search, currentItem) {
 function wrapArray(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
-var Root2 = Select;
-var Trigger = SelectTrigger;
-var Value = SelectValue;
-var Icon = SelectIcon;
-var Portal = SelectPortal;
-var Content2 = SelectContent;
-var Viewport = SelectViewport;
-var Group = SelectGroup;
-var Label = SelectLabel;
-var Item = SelectItem;
-var ItemText = SelectItemText;
-var ItemIndicator = SelectItemIndicator;
-var ScrollUpButton = SelectScrollUpButton;
-var ScrollDownButton = SelectScrollDownButton;
-var Separator = SelectSeparator;
-var Arrow2 = SelectArrow;
 //# sourceMappingURL=index.js.map