@tamagui/select 2.7.7 → 3.0.0-0.canary.1791056644527

package/dist/cjs/Select.cjs

@@ -5,38 +5,41 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 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: true
-  });
+	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;
+	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;
 };
-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: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Select_exports = {};
 __export(Select_exports, {
-  Select: () => Select,
-  SelectGroupFrame: () => SelectGroupFrame,
-  SelectIcon: () => SelectIcon,
-  SelectSeparator: () => SelectSeparator
+	Select: () => Select,
+	SelectGroup: () => SelectGroup,
+	SelectGroupFrame: () => SelectGroupFrame,
+	SelectIcon: () => SelectIcon,
+	SelectIndicator: () => SelectIndicator,
+	SelectIndicatorFrame: () => SelectIndicatorFrame,
+	SelectItemIndicator: () => SelectItemIndicator,
+	SelectItemIndicatorFrame: () => SelectItemIndicatorFrame,
+	SelectLabel: () => SelectLabel,
+	SelectLabelFrame: () => SelectLabelFrame,
+	SelectRoot: () => SelectRoot,
+	SelectSeparator: () => SelectSeparator,
+	SelectValue: () => SelectValue,
+	SelectValueFrame: () => SelectValueFrame
 });
 module.exports = __toCommonJS(Select_exports);
 var import_adapt = require("@tamagui/adapt");
@@ -45,12 +48,7 @@ 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");
@@ -61,455 +59,396 @@ 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_selectionController = require("./selectionController.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const SelectValueFrame = (0, import_core.styled)(import_text.SizableText, {
-  name: "SelectValue",
-  userSelect: "none"
+const SelectValueFrame = (0, import_core.styled)(import_core.Text, { displayName: "SelectValue" });
+const SelectValue = (0, import_core.createStyledHOC)(SelectValueFrame, 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)(forwardedRef, context.onValueNodeChange);
+	const isEmptyValue = context.selectedValues.length === 0;
+	const [, rerender] = React.useReducer((version) => version + 1, 0);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => itemParentContext.registry.subscribe(rerender), [itemParentContext.registry]);
+	const registeredValue = context.mode === "multiple" ? context.selectedValues.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [index > 0 ? ", " : null, itemParentContext.registry.getItem(value)?.label ?? value] }, value)) : itemParentContext.registry.getItem(context.selectedValues[0])?.label ?? context.value;
+	const children = childrenProp !== void 0 ? childrenProp : context.renderValue ? context.renderValue(context.value) : registeredValue;
+	const selectValueChildren = isEmptyValue ? placeholder ?? children : children;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValueFrame, {
+		pointerEvents: "none",
+		ref: composedRefs,
+		...props,
+		children: selectValueChildren
+	});
 });
-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)
-  });
+const SelectIcon = (0, import_core.styled)(import_core.View, {
+	displayName: "SelectIcon",
+	"aria-hidden": true
 });
-function unwrapSelectItem(selectValueChildren) {
-  return React.Children.map(selectValueChildren, child => {
-    if (child) {
-      if (child.type?.staticConfig?.componentName === import_SelectItemText.ITEM_TEXT_NAME) return child.props.children;
-      if (child.props?.children) return unwrapSelectItem(child.props.children);
-    }
-    return child;
-  });
-}
-const SelectIcon = (0, import_core.styled)(import_stacks.XStack, {
-  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,
-    ...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 SelectItemIndicatorFrame = (0, import_core.styled)(import_core.View, { displayName: "SelectItemIndicator" });
+const SelectItemIndicator = (0, import_core.createStyledHOC)(SelectItemIndicatorFrame, function SelectItemIndicator2(props, forwardedRef) {
+	const { scope, ...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
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+const SelectIndicatorFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "SelectIndicator",
+	position: "absolute",
+	top: 0,
+	left: 0,
+	pointerEvents: "none",
+	zIndex: 10
 });
-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 SelectIndicator = (0, import_core.createStyledHOC)(SelectIndicatorFrame, 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);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		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
-          })
-        };
-      }
-    },
-    unstyled: {
-      false: {
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        userSelect: "none",
-        outlineWidth: 0,
-        paddingRight: 10
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$2",
-    unstyled: process.env.TAMAGUI_HEADLESS === "1" ? true : false
-  }
+const { Provider: SelectGroupContextProvider, useStyledContext: useSelectGroupContext } = (0, import_core.createStyledContext)({ id: "" }, "SelectGroup");
+const SelectGroupFrame = (0, import_core.styled)(import_core.View, { displayName: GROUP_NAME });
+const NativeSelect = (0, import_core.styled)(import_core.Text, {
+	displayName: "NativeSelect",
+	render: "select"
 });
-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,
-        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
-  });
+const SelectGroup = (0, import_core.createStyledHOC)(SelectGroupFrame, (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 StyledNativeSelect = React.useContext(import_context.SelectNativeComponentContext);
+	const nativeSelectRef = React.useRef(null);
+	const content = (() => {
+		if (itemParentContext.shouldRenderWebNative) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NativeSelect, {
+			...StyledNativeSelect && {
+				render: StyledNativeSelect,
+				size: itemParentContext.size,
+				style: { appearance: "none" }
+			},
+			...groupProps,
+			value: context.value,
+			multiple: context.mode === "multiple",
+			name: itemParentContext.name,
+			form: itemParentContext.form,
+			id: itemParentContext.id,
+			onChange: ((event) => {
+				const value = context.mode === "multiple" ? Array.from(event.currentTarget.selectedOptions, (option) => option.value) : event.currentTarget.value;
+				itemParentContext.changeNativeValue(value, event.nativeEvent);
+			}),
+			ref: nativeSelectRef,
+			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 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"
-  }
+const SelectLabelFrame = (0, import_core.styled)(import_core.Text, { displayName: "SelectLabel" });
+const SelectLabel = (0, import_core.createStyledHOC)(SelectLabelFrame, (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,
+		...labelProps,
+		ref: forwardedRef
+	});
 });
-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
-  });
-};
-const SelectSheetImpl = props => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
-    children: props.children
-  });
+const SelectSeparator = (0, import_core.styled)(import_core.View, { displayName: "SelectSeparator" });
+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 SelectRoot(props) {
+	const adaptScope = `AdaptSelect${props.scope || ""}`;
+	const [open, requestOpenChange] = (0, import_use_controllable_state.useControllableState)({
+		prop: props.open,
+		defaultProp: props.defaultOpen || false,
+		onChange: props.onOpenChange
+	});
+	const handleAdaptOpenChange = React.useCallback((nextOpen) => {
+		requestOpenChange(nextOpen, (0, import_core.createChangeEventDetails)(nextOpen ? "trigger-press" : "outside-press"));
+	}, [requestOpenChange]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
+		scope: adaptScope,
+		adaptChildren: props.children,
+		open,
+		onOpenChange: handleAdaptOpenChange,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectInner, {
+			...props,
+			scope: props.scope,
+			adaptScope,
+			open,
+			requestOpenChange
+		})
+	});
+}
+const Select = (0, import_helpers.withStaticProperties)(SelectRoot, {
+	Root: SelectRoot,
+	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,
+	Separator: SelectSeparator,
+	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());
-  return [React.useCallback(value => {
-    listenersRef.current.forEach(l => l(value));
-  }, []), React.useCallback(listener => {
-    listenersRef.current.add(listener);
-    return () => {
-      listenersRef.current.delete(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);
+		};
+	}, [])];
 }
 function SelectInner(props) {
-  const {
-    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(() => {
-    emitValue(value);
-  }, [value]);
-  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 === 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);
-    }, []),
-    onActiveChange: (0, import_core.useEvent)((value2, index) => {
-      onActiveChange?.(value2, index);
-    }),
-    setSelectedIndex,
-    setValueAtIndex: React.useCallback((index, value2) => {
-      listContentRef.current[index] = value2;
-    }, []),
-    shouldRenderWebNative,
-    setActiveIndexFast,
-    selectedItem,
-    setSelectedItem,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
-      scope,
-      scopeName: scope,
-      adaptScope,
-      disablePreventBodyScroll,
-      dir,
-      blockSelection: false,
-      fallback: false,
-      forceUpdate,
-      valueNode,
-      onValueNodeChange: setValueNode,
-      activeIndex,
-      activeIndexRef,
-      selectedIndex,
-      setActiveIndex,
-      value,
-      open,
-      native,
-      renderValue,
-      lazyMount,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectSheetController, {
-        onOpenChange: setOpen,
-        scope,
-        children: shouldRenderWebNative ? children : /* @__PURE__ */(0, import_jsx_runtime.jsx)(SelectImpl, {
-          activeIndexRef,
-          listContentRef,
-          selectedIndexRef,
-          setActiveIndexFast,
-          ...props,
-          open,
-          value,
-          children
-        })
-      })
-    })
-  });
-  if (zIndex !== void 0) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectZIndexContext.Provider, {
-    value: zIndex,
-    children: content
-  });
-  return content;
-}
+	const { scope = "", adaptScope, native, children, open, requestOpenChange, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, value: valueProp, defaultValue, onValueChange, multiple = false, name, form, disablePreventBodyScroll, size: sizeProp = true, onActiveChange, dir, id, renderValue, lazyMount, zIndex } = props;
+	const SelectImpl = (0, import_adapt.useAdaptIsActive)(adaptScope) ? SelectSheetImpl : import_SelectImpl.SelectInlineImpl;
+	const mode = multiple ? "multiple" : "single";
+	const [valueState, requestValueChange] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue ?? (mode === "multiple" ? [] : ""),
+		onChange: onValueChange,
+		transition: true
+	});
+	const value = React.useMemo(() => mode === "multiple" ? (0, import_selectionController.selectedValuesFromSelection)(mode, valueState) : typeof valueState === "string" ? valueState : "", [mode, valueState]);
+	const selectedValues = React.useMemo(() => (0, import_selectionController.selectedValuesFromSelection)(mode, value), [mode, value]);
+	const [, rerenderRegistry] = React.useReducer((version) => version + 1, 0);
+	const registryRef = React.useRef(null);
+	if (!registryRef.current) registryRef.current = (0, import_selectionController.createSelectItemRegistry)(rerenderRegistry);
+	const registry = registryRef.current;
+	const controllerRef = React.useRef(null);
+	if (!controllerRef.current) controllerRef.current = (0, import_selectionController.createSelectSelectionController)({
+		mode,
+		value,
+		registry
+	});
+	const controller = controllerRef.current;
+	controller.setMode(mode);
+	controller.setValue(value);
+	React.useEffect(() => {}, [props.id, requestOpenChange]);
+	const activeIndexRef = React.useRef(null);
+	const [emitActiveIndex, activeIndexSubscribe] = useEmitter();
+	const selectedIndexRef = React.useRef(null);
+	const lastPointerRef = React.useRef({
+		x: -1,
+		y: -1
+	});
+	const listContentRef = React.useRef([]);
+	const listRef = React.useRef([]);
+	const [valueNode, setValueNode] = React.useState(null);
+	const selectedIndex = Math.max(0, controller.selectionAnchorIndex());
+	listContentRef.current = registry.getTypeaheadLabels();
+	const itemNodes = registry.getNodes();
+	listRef.current.length = itemNodes.length;
+	for (let i = 0; i < itemNodes.length; i++) listRef.current[i] = itemNodes[i];
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		selectedIndexRef.current = selectedIndex;
+	});
+	const shouldRenderWebNative = import_constants.isWeb && (native === true || native === "web" || Array.isArray(native) && native.includes("web"));
+	const setActiveIndex = React.useCallback((index, details) => {
+		if (activeIndexRef.current === index) return;
+		activeIndexRef.current = index;
+		controller.setActiveIndex(index);
+		emitActiveIndex(index);
+		if (typeof index === "number") {
+			const item = registry.getItems()[index];
+			if (item && details) onActiveChange?.(item.value, details);
+		}
+	}, [
+		controller,
+		emitActiveIndex,
+		onActiveChange,
+		registry
+	]);
+	const activeDetails = React.useCallback((reason, index, event) => ({
+		reason,
+		event,
+		trigger: void 0,
+		index
+	}), []);
+	const moveActive = React.useCallback((direction, event) => {
+		const nextIndex = registry.nextEnabledIndex(activeIndexRef.current, direction);
+		if (nextIndex >= 0) setActiveIndex(nextIndex, activeDetails("keyboard", nextIndex, event));
+	}, [
+		activeDetails,
+		registry,
+		setActiveIndex
+	]);
+	const typeaheadRef = React.useRef({
+		text: "",
+		timeout: null
+	});
+	const search = React.useCallback((text, event) => {
+		clearTimeout(typeaheadRef.current.timeout);
+		typeaheadRef.current.text += text;
+		let nextIndex = registry.findTypeaheadIndex(typeaheadRef.current.text, activeIndexRef.current);
+		if (nextIndex < 0 && typeaheadRef.current.text.length > 1) {
+			typeaheadRef.current.text = text;
+			nextIndex = registry.findTypeaheadIndex(text, activeIndexRef.current);
+		}
+		typeaheadRef.current.timeout = setTimeout(() => {
+			typeaheadRef.current.text = "";
+		}, 750);
+		if (nextIndex >= 0) setActiveIndex(nextIndex, activeDetails("keyboard", nextIndex, event));
+	}, [
+		activeDetails,
+		registry,
+		setActiveIndex
+	]);
+	React.useEffect(() => {
+		return () => clearTimeout(typeaheadRef.current.timeout);
+	}, []);
+	React.useEffect(() => {
+		if (open) {
+			const nextIndex = controller.initialActiveIndex();
+			if (nextIndex >= 0) setActiveIndex(nextIndex, activeDetails("list-navigation", nextIndex));
+		} else setActiveIndex(null);
+	}, [
+		open,
+		selectedIndex,
+		registry.getItems().length
+	]);
+	const selectValue = React.useCallback((nextItemValue, details) => {
+		const item = registry.getItem(nextItemValue);
+		if (!item || item.disabled) return;
+		controller.setMode(mode);
+		controller.setValue(value);
+		const previousValue = controller.value;
+		requestValueChange(controller.toggle(nextItemValue), details);
+		if (details.isCanceled) {
+			controller.setValue(previousValue);
+			return;
+		}
+		if (controller.shouldCloseOnSelect) requestOpenChange(false, (0, import_core.createChangeEventDetails)(details.reason === "keyboard" ? "keyboard" : "item-press", details.event, details.trigger));
+	}, [
+		controller,
+		mode,
+		registry,
+		requestOpenChange,
+		requestValueChange,
+		value
+	]);
+	const changeNativeValue = React.useCallback((nextValue, event) => {
+		const details = (0, import_core.createChangeEventDetails)("native-change", event);
+		requestValueChange(nextValue, details);
+		if (!details.isCanceled) controller.setValue(nextValue);
+	}, [controller, requestValueChange]);
+	const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_context.SelectItemParentProvider, {
+		scopeName: scope,
+		scope,
+		adaptScope,
+		mode,
+		selectedValues,
+		registry,
+		size: sizeProp,
+		activeIndexSubscribe,
+		activeIndexRef,
+		requestOpenChange,
+		id,
+		name,
+		form,
+		selectValue,
+		changeNativeValue,
+		shouldRenderWebNative,
+		setActiveIndex,
+		selectedIndex,
+		lastPointerRef,
+		listRef,
+		moveActive,
+		search,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
+			scope,
+			scopeName: scope,
+			adaptScope,
+			disablePreventBodyScroll,
+			dir,
+			blockSelection: false,
+			fallback: false,
+			valueNode,
+			onValueNodeChange: setValueNode,
+			activeIndexRef,
+			selectedIndex,
+			setActiveIndex,
+			value,
+			mode,
+			selectedValues,
+			open,
+			native,
+			renderValue,
+			lazyMount,
+			children: shouldRenderWebNative ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectImpl, {
+				activeIndexRef,
+				listContentRef,
+				selectedIndexRef,
+				...props,
+				open,
+				value,
+				children
+			})
+		}), import_constants.isWeb && !shouldRenderWebNative && name ? (mode === "multiple" ? selectedValues : [value]).map((inputValue) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			type: "hidden",
+			name,
+			form,
+			value: inputValue
+		}, inputValue)) : null]
+	});
+	if (zIndex !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectZIndexContext.Provider, {
+		value: zIndex,
+		children: content
+	});
+	return content;
+}