@tamagui/select 2.7.6 → 3.0.0-beta.637.1

package/dist/cjs/Select.native.cjs

@@ -0,0 +1,495 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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
+	});
+};
+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;
+};
+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 Select_exports = {};
+__export(Select_exports, {
+	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_jsx_runtime = require("react/jsx-runtime");
+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");
+var import_focusable = require("@tamagui/focusable");
+var import_helpers = require("@tamagui/helpers");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var React = __toESM(require("react"), 1);
+var import_context = require("./context.native.js");
+var import_SelectContent = require("./SelectContent.native.js");
+var import_SelectImpl = require("./SelectImpl.native.js");
+var import_SelectItem = require("./SelectItem.native.js");
+var import_SelectItemText = require("./SelectItemText.native.js");
+var import_SelectScrollButton = require("./SelectScrollButton.native.js");
+var import_SelectTrigger = require("./SelectTrigger.native.js");
+var import_SelectViewport = require("./SelectViewport.native.js");
+var import_selectionController = require("./selectionController.native.js");
+var SelectValueFrame = (0, import_core.styled)(import_core.Text, { displayName: "SelectValue" });
+var SelectValue = (0, import_core.createStyledHOC)(SelectValueFrame, function SelectValue2(param, forwardedRef) {
+	var { scope, children: childrenProp, placeholder, ...props } = param;
+	var _itemParentContext_registry_getItem;
+	var context = (0, import_context.useSelectContext)(scope);
+	var itemParentContext = (0, import_context.useSelectItemParentContext)(scope);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.onValueNodeChange);
+	var isEmptyValue = context.selectedValues.length === 0;
+	var _itemParentContext_registry_getItem_label;
+	var registeredValue = context.mode === "multiple" ? context.selectedValues.map(function(value, index) {
+		var _itemParentContext_registry_getItem2;
+		var _itemParentContext_registry_getItem_label2;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(React.Fragment, { children: [index > 0 ? ", " : null, (_itemParentContext_registry_getItem_label2 = (_itemParentContext_registry_getItem2 = itemParentContext.registry.getItem(value)) === null || _itemParentContext_registry_getItem2 === void 0 ? void 0 : _itemParentContext_registry_getItem2.label) !== null && _itemParentContext_registry_getItem_label2 !== void 0 ? _itemParentContext_registry_getItem_label2 : value] }, value);
+	}) : (_itemParentContext_registry_getItem_label = (_itemParentContext_registry_getItem = itemParentContext.registry.getItem(context.selectedValues[0])) === null || _itemParentContext_registry_getItem === void 0 ? void 0 : _itemParentContext_registry_getItem.label) !== null && _itemParentContext_registry_getItem_label !== void 0 ? _itemParentContext_registry_getItem_label : context.value;
+	var children = childrenProp !== void 0 ? childrenProp : context.renderValue ? context.renderValue(context.value) : registeredValue;
+	var selectValueChildren = isEmptyValue ? placeholder !== null && placeholder !== void 0 ? placeholder : children : children;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectValueFrame, {
+		pointerEvents: "none",
+		ref: composedRefs,
+		...props,
+		children: selectValueChildren
+	});
+});
+var SelectIcon = (0, import_core.styled)(import_core.View, {
+	displayName: "SelectIcon",
+	"aria-hidden": true
+});
+var SelectItemIndicatorFrame = (0, import_core.styled)(import_core.View, { displayName: "SelectItemIndicator" });
+var SelectItemIndicator = (0, import_core.createStyledHOC)(SelectItemIndicatorFrame, function SelectItemIndicator2(props, forwardedRef) {
+	var { scope, ...itemIndicatorProps } = props;
+	var context = (0, import_context.useSelectItemParentContext)(scope);
+	var 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;
+});
+var SelectIndicatorFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "SelectIndicator",
+	position: "absolute",
+	top: 0,
+	left: 0,
+	pointerEvents: "none",
+	zIndex: 10
+});
+var SelectIndicator = (0, import_core.createStyledHOC)(SelectIndicatorFrame, function SelectIndicator2(param, forwardedRef) {
+	var { scope, ...props } = param;
+	var itemContext = (0, import_context.useSelectItemParentContext)(scope);
+	var context = (0, import_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__ */ (0, import_jsx_runtime.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 } = (0, import_core.createStyledContext)({ id: "" }, "SelectGroup");
+var SelectGroupFrame = (0, import_core.styled)(import_core.View, { displayName: GROUP_NAME });
+var NativeSelect = (0, import_core.styled)(import_core.Text, {
+	displayName: "NativeSelect",
+	render: "select"
+});
+var SelectGroup = (0, import_core.createStyledHOC)(SelectGroupFrame, function(props, forwardedRef) {
+	var { scope, ...groupProps } = props;
+	var groupId = React.useId();
+	var context = (0, import_context.useSelectContext)(scope);
+	var itemParentContext = (0, import_context.useSelectItemParentContext)(scope);
+	var StyledNativeSelect = React.useContext(import_context.SelectNativeComponentContext);
+	var nativeSelectRef = React.useRef(null);
+	var content = (function() {
+		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: function(event) {
+				var value = context.mode === "multiple" ? Array.from(event.currentTarget.selectedOptions, function(option) {
+					return 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;
+var SelectLabelFrame = (0, import_core.styled)(import_core.Text, { displayName: "SelectLabel" });
+var SelectLabel = (0, import_core.createStyledHOC)(SelectLabelFrame, function(props, forwardedRef) {
+	var { scope, ...labelProps } = props;
+	var context = (0, import_context.useSelectItemParentContext)(scope);
+	var groupContext = useSelectGroupContext(scope);
+	if (context.shouldRenderWebNative) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectLabelFrame, {
+		render: "div",
+		id: groupContext.id,
+		...labelProps,
+		ref: forwardedRef
+	});
+});
+var SelectSeparator = (0, import_core.styled)(import_core.View, { displayName: "SelectSeparator" });
+var SelectSheetImpl = function(props) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
+};
+function SelectRoot(props) {
+	var adaptScope = `AdaptSelect${props.scope || ""}`;
+	var [open, requestOpenChange] = (0, import_use_controllable_state.useControllableState)({
+		prop: props.open,
+		defaultProp: props.defaultOpen || false,
+		onChange: props.onOpenChange
+	});
+	var handleAdaptOpenChange = React.useCallback(function(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,
+		open,
+		onOpenChange: handleAdaptOpenChange,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectInner, {
+			...props,
+			scope: props.scope,
+			adaptScope,
+			open,
+			requestOpenChange
+		})
+	});
+}
+var 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() {
+	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 _registry_getItems_activeIndex, _controller_selectionAnchor;
+	var { 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;
+	var SelectImpl = (0, import_adapt.useAdaptIsActive)(adaptScope) ? SelectSheetImpl : import_SelectImpl.SelectInlineImpl;
+	var mode = multiple ? "multiple" : "single";
+	var [valueState, requestValueChange] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue !== null && defaultValue !== void 0 ? defaultValue : mode === "multiple" ? [] : "",
+		onChange: onValueChange,
+		transition: true
+	});
+	var value = React.useMemo(function() {
+		return mode === "multiple" ? (0, import_selectionController.selectedValuesFromSelection)(mode, valueState) : typeof valueState === "string" ? valueState : "";
+	}, [mode, valueState]);
+	var selectedValues = React.useMemo(function() {
+		return (0, import_selectionController.selectedValuesFromSelection)(mode, value);
+	}, [mode, value]);
+	var [, rerenderRegistry] = React.useReducer(function(version) {
+		return version + 1;
+	}, 0);
+	var registryRef = React.useRef(null);
+	if (!registryRef.current) registryRef.current = (0, import_selectionController.createSelectItemRegistry)(rerenderRegistry);
+	var registry = registryRef.current;
+	var controllerRef = React.useRef(null);
+	if (!controllerRef.current) controllerRef.current = (0, import_selectionController.createSelectSelectionController)({
+		mode,
+		value,
+		registry
+	});
+	var controller = controllerRef.current;
+	controller.setMode(mode);
+	controller.setValue(value);
+	React.useEffect(function() {
+		if (!props.id) return;
+		return (0, import_focusable.registerFocusable)(props.id, {
+			focusAndSelect: function() {
+				requestOpenChange(function(current) {
+					return !current;
+				}, (0, import_core.createChangeEventDetails)("trigger-press"));
+			},
+			focus: function() {}
+		});
+	}, [props.id, requestOpenChange]);
+	var activeIndexRef = React.useRef(null);
+	var [activeIndex, setActiveIndexState] = React.useState(null);
+	var [emitActiveIndex, activeIndexSubscribe] = useEmitter();
+	var selectedIndexRef = React.useRef(null);
+	var listContentRef = React.useRef([]);
+	var listRef = React.useRef([]);
+	var [valueNode, setValueNode] = React.useState(null);
+	var selectedIndex = Math.max(0, controller.selectionAnchorIndex());
+	listContentRef.current = registry.getTypeaheadLabels();
+	listRef.current.length = registry.getItems().length;
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		selectedIndexRef.current = selectedIndex;
+	});
+	var shouldRenderWebNative = import_constants.isWeb && (native === true || native === "web" || Array.isArray(native) && native.includes("web"));
+	var setActiveIndexFast = React.useCallback(function(index, details) {
+		if (activeIndexRef.current !== index) {
+			activeIndexRef.current = index;
+			controller.setActiveIndex(index);
+			if (typeof index === "number") {
+				emitActiveIndex(index);
+				var item = registry.getItems()[index];
+				if (item && details) onActiveChange === null || onActiveChange === void 0 || onActiveChange(item.value, details);
+			}
+		}
+	}, [
+		controller,
+		emitActiveIndex,
+		onActiveChange,
+		registry
+	]);
+	var setActiveIndex = React.useCallback(function(index, details) {
+		setActiveIndexFast(index, details);
+		setActiveIndexState(index);
+	}, [setActiveIndexFast]);
+	var activeDetails = React.useCallback(function(reason, index, event) {
+		return {
+			reason,
+			event,
+			trigger: void 0,
+			index
+		};
+	}, []);
+	var moveActive = React.useCallback(function(direction, event) {
+		var nextIndex = registry.nextEnabledIndex(activeIndexRef.current, direction);
+		if (nextIndex >= 0) setActiveIndex(nextIndex, activeDetails("keyboard", nextIndex, event));
+	}, [
+		activeDetails,
+		registry,
+		setActiveIndex
+	]);
+	var typeaheadRef = React.useRef({
+		text: "",
+		timeout: null
+	});
+	var search = React.useCallback(function(text, event) {
+		clearTimeout(typeaheadRef.current.timeout);
+		typeaheadRef.current.text += text;
+		var 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(function() {
+			typeaheadRef.current.text = "";
+		}, 750);
+		if (nextIndex >= 0) setActiveIndex(nextIndex, activeDetails("keyboard", nextIndex, event));
+	}, [
+		activeDetails,
+		registry,
+		setActiveIndex
+	]);
+	React.useEffect(function() {
+		return function() {
+			return clearTimeout(typeaheadRef.current.timeout);
+		};
+	}, []);
+	React.useEffect(function() {
+		if (open) {
+			var nextIndex = controller.initialActiveIndex();
+			if (nextIndex >= 0) setActiveIndex(nextIndex, activeDetails("list-navigation", nextIndex));
+		} else {
+			setActiveIndexFast(null);
+			setActiveIndexState(null);
+		}
+	}, [
+		open,
+		selectedIndex,
+		registry.getItems().length
+	]);
+	var selectValue = React.useCallback(function(nextItemValue, details) {
+		var item = registry.getItem(nextItemValue);
+		if (!item || item.disabled) return;
+		controller.setMode(mode);
+		controller.setValue(value);
+		var 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
+	]);
+	var changeNativeValue = React.useCallback(function(nextValue, event) {
+		var details = (0, import_core.createChangeEventDetails)("native-change", event);
+		requestValueChange(nextValue, details);
+		if (!details.isCanceled) controller.setValue(nextValue);
+	}, [controller, requestValueChange]);
+	var 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,
+		setActiveIndexFast,
+		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,
+			activeIndex,
+			activeIndexRef,
+			selectedIndex,
+			setActiveIndex,
+			value,
+			mode,
+			selectedValues,
+			activeItem: activeIndex == null ? void 0 : (_registry_getItems_activeIndex = registry.getItems()[activeIndex]) === null || _registry_getItems_activeIndex === void 0 ? void 0 : _registry_getItems_activeIndex.value,
+			selectionAnchor: (_controller_selectionAnchor = controller.selectionAnchor()) === null || _controller_selectionAnchor === void 0 ? void 0 : _controller_selectionAnchor.value,
+			open,
+			native,
+			renderValue,
+			lazyMount,
+			children: shouldRenderWebNative ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectImpl, {
+				activeIndexRef,
+				listContentRef,
+				selectedIndexRef,
+				setActiveIndexFast,
+				...props,
+				open,
+				value,
+				children
+			})
+		}), import_constants.isWeb && !shouldRenderWebNative && name ? (mode === "multiple" ? selectedValues : [value]).map(function(inputValue) {
+			return /* @__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;
+}