@tamagui/select 2.7.6 → 3.0.0-beta.637.1

package/dist/cjs/SelectItem.native.cjs

@@ -0,0 +1,317 @@
+"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 SelectItem_exports = {};
+__export(SelectItem_exports, {
+	SelectItem: () => SelectItem,
+	SelectItemContextProvider: () => SelectItemContextProvider,
+	SelectItemFrame: () => SelectItemFrame,
+	useSelectItemContext: () => useSelectItemContext
+});
+module.exports = __toCommonJS(SelectItem_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_adapt = require("@tamagui/adapt");
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var import_helpers = require("@tamagui/helpers");
+var React = __toESM(require("react"), 1);
+var import_context = require("./context.native.js");
+var import_selectionController = require("./selectionController.native.js");
+function _instanceof(left, right) {
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+		return !!right[Symbol.hasInstance](left);
+	} else {
+		return left instanceof right;
+	}
+}
+var ITEM_NAME = "SelectItem";
+var { Provider: SelectItemContextProvider, useStyledContext: useSelectItemContext } = (0, import_core.createStyledContext)(null, ITEM_NAME);
+var SelectItemFrame = (0, import_core.styled)(import_core.View, {
+	displayName: ITEM_NAME,
+	alignItems: "center",
+	flexDirection: "row"
+});
+var SelectItem = (0, import_core.createStyledHOC)(SelectItemFrame, function SelectItem2(props, forwardedRef) {
+	var { scope, value, disabled: disabledProp, "aria-disabled": ariaDisabled, textValue: textValueProp, ...restProps } = props;
+	var disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : ariaDisabled === true;
+	var context = (0, import_context.useSelectItemParentContext)(scope);
+	var selectContext = (0, import_context.useSelectContext)(scope);
+	var isAdapted = (0, import_adapt.useAdaptIsActive)(selectContext.adaptScope);
+	var { listRef, registry, mode, selectedValues, selectValue, activeIndexSubscribe, activeIndexRef, allowMouseUpRef, allowSelectRef, selectTimeoutRef, interactions, shouldRenderWebNative, setActiveIndexFast, moveActive, search } = context;
+	var isSelected = selectedValues.includes(value);
+	var pendingMouseUpSelectionRef = React.useRef(false);
+	var itemNodeRef = React.useRef(null);
+	var [, rerenderRegistry] = React.useReducer(function(version) {
+		return version + 1;
+	}, 0);
+	var registrationRef = React.useRef(null);
+	var initialRegistration = React.useRef({
+		value,
+		disabled,
+		textValue: textValueProp
+	});
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		return registry.subscribe(function() {
+			return rerenderRegistry();
+		});
+	}, [registry]);
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var registration = registry.registerItem(initialRegistration.current);
+		registrationRef.current = registration;
+		var registeredNode = itemNodeRef.current;
+		registration.setNode(registeredNode);
+		var registeredIndex = registry.getItems().findIndex(function(item) {
+			return item.id === registration.id;
+		});
+		if (import_constants.isWeb && listRef && registeredIndex >= 0 && _instanceof(registeredNode, HTMLElement)) {
+			listRef.current[registeredIndex] = registeredNode;
+		}
+		return function() {
+			var currentIndex = registry.getItems().findIndex(function(item) {
+				return item.id === registration.id;
+			});
+			if (listRef && currentIndex >= 0 && listRef.current[currentIndex] === registeredNode) {
+				listRef.current[currentIndex] = null;
+			}
+			registrationRef.current = null;
+			registration.unregister();
+		};
+	}, [registry]);
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var _registrationRef_current;
+		(_registrationRef_current = registrationRef.current) === null || _registrationRef_current === void 0 ? void 0 : _registrationRef_current.update({
+			value,
+			disabled,
+			textValue: textValueProp
+		});
+	}, [
+		disabled,
+		textValueProp,
+		value
+	]);
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var _registrationRef_current;
+		(_registrationRef_current = registrationRef.current) === null || _registrationRef_current === void 0 ? void 0 : _registrationRef_current.setNode(itemNodeRef.current);
+	});
+	var index = registry.getIndex(value);
+	React.useEffect(function() {
+		var handleActiveIndex = function(i) {
+			if (index === i) {
+				if (import_constants.isWeb) {
+					requestAnimationFrame(function() {
+						var _listRef_current_index;
+						listRef === null || listRef === void 0 ? void 0 : (_listRef_current_index = listRef.current[index]) === null || _listRef_current_index === void 0 ? void 0 : _listRef_current_index.focus();
+					});
+				}
+			}
+		};
+		var currentActiveIndex = activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current;
+		if (currentActiveIndex !== null && currentActiveIndex !== void 0) {
+			handleActiveIndex(currentActiveIndex);
+		}
+		return activeIndexSubscribe(handleActiveIndex);
+	}, [
+		activeIndexRef,
+		activeIndexSubscribe,
+		index,
+		listRef
+	]);
+	var textId = React.useId();
+	var refCallback = React.useCallback(function(node) {
+		var _registrationRef_current;
+		itemNodeRef.current = node;
+		(_registrationRef_current = registrationRef.current) === null || _registrationRef_current === void 0 ? void 0 : _registrationRef_current.setNode(node);
+		if (!import_constants.isWeb) return;
+		if (listRef && index >= 0) {
+			listRef.current[index] = _instanceof(node, HTMLElement) ? node : null;
+		}
+	}, [index, listRef]);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, refCallback);
+	var handleSelect = React.useCallback(function(event) {
+		var reason = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "item-press";
+		if (disabled) return;
+		var nativeEvent = (event === null || event === void 0 ? void 0 : event.nativeEvent) || event;
+		selectValue(value, (0, import_core.createChangeEventDetails)(reason, nativeEvent, event === null || event === void 0 ? void 0 : event.currentTarget));
+	}, [
+		disabled,
+		selectValue,
+		value
+	]);
+	var handleKeyDown = React.useCallback(function(event) {
+		var _event_key;
+		if (disabled) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			handleSelect(event, "keyboard");
+			return;
+		}
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			event.stopPropagation();
+			moveActive(event.key === "ArrowDown" ? 1 : -1, event.nativeEvent || event);
+			return;
+		}
+		if (!interactions && ((_event_key = event.key) === null || _event_key === void 0 ? void 0 : _event_key.length) === 1 && !event.metaKey && !event.ctrlKey) {
+			search(event.key, event.nativeEvent || event);
+		}
+		if (allowSelectRef) {
+			allowSelectRef.current = true;
+		}
+	}, [
+		allowSelectRef,
+		disabled,
+		handleSelect,
+		interactions,
+		moveActive,
+		search
+	]);
+	var selectItemProps = React.useMemo(function() {
+		if (interactions) {
+			var { onTouchMove, onTouchEnd, onKeyDown, onClick, onMouseUp, onMouseMove, onPress, ...itemProps } = restProps;
+			var interactionProps = interactions.getItemProps({
+				...itemProps,
+				onTouchMove() {
+					allowSelectRef.current = true;
+					allowMouseUpRef.current = false;
+				},
+				onTouchEnd() {
+					allowSelectRef.current = false;
+					allowMouseUpRef.current = true;
+				},
+				onMouseMove(event) {
+					if (disabled || index < 0) return;
+					setActiveIndexFast === null || setActiveIndexFast === void 0 ? void 0 : setActiveIndexFast(index, {
+						reason: "item-hover",
+						event: event.nativeEvent || event,
+						trigger: event.currentTarget,
+						index
+					});
+				},
+				onKeyDown: handleKeyDown,
+				onClick(event) {
+					if (disabled) return;
+					var shouldSelect = pendingMouseUpSelectionRef.current || allowSelectRef.current;
+					pendingMouseUpSelectionRef.current = false;
+					clearTimeout(selectTimeoutRef.current);
+					allowSelectRef.current = true;
+					if (shouldSelect) {
+						handleSelect(event);
+					}
+				},
+				onMouseUp(event) {
+					if (disabled) return;
+					if (!allowMouseUpRef.current) {
+						allowMouseUpRef.current = true;
+						allowSelectRef.current = true;
+						return;
+					}
+					pendingMouseUpSelectionRef.current = allowSelectRef.current;
+					clearTimeout(selectTimeoutRef.current);
+					selectTimeoutRef.current = setTimeout(function() {
+						allowSelectRef.current = true;
+						if (pendingMouseUpSelectionRef.current) {
+							pendingMouseUpSelectionRef.current = false;
+							handleSelect(event);
+						}
+					});
+				}
+			});
+			return {
+				...interactionProps,
+				onTouchMove: (0, import_helpers.composeEventHandlers)(onTouchMove, interactionProps.onTouchMove),
+				onTouchEnd: (0, import_helpers.composeEventHandlers)(onTouchEnd, interactionProps.onTouchEnd),
+				onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, interactionProps.onKeyDown),
+				onClick(event) {
+					var _interactionProps_onClick;
+					onClick === null || onClick === void 0 ? void 0 : onClick(event);
+					if (event.defaultPrevented) {
+						pendingMouseUpSelectionRef.current = false;
+						clearTimeout(selectTimeoutRef.current);
+						allowSelectRef.current = true;
+						return;
+					}
+					(_interactionProps_onClick = interactionProps.onClick) === null || _interactionProps_onClick === void 0 ? void 0 : _interactionProps_onClick.call(interactionProps, event);
+				},
+				onMouseUp: (0, import_helpers.composeEventHandlers)(onMouseUp, interactionProps.onMouseUp),
+				onMouseMove: (0, import_helpers.composeEventHandlers)(onMouseMove, interactionProps.onMouseMove),
+				onPress
+			};
+		}
+		return {
+			...restProps,
+			onKeyDown: (0, import_helpers.composeEventHandlers)(restProps.onKeyDown, handleKeyDown),
+			onMouseMove: (0, import_helpers.composeEventHandlers)(restProps.onMouseMove, function(event) {
+				if (disabled || index < 0) return;
+				setActiveIndexFast === null || setActiveIndexFast === void 0 ? void 0 : setActiveIndexFast(index, {
+					reason: "item-hover",
+					event: event.nativeEvent || event,
+					trigger: event.currentTarget,
+					index
+				});
+			}),
+			onPress: (0, import_helpers.composeEventHandlers)(restProps.onPress, handleSelect)
+		};
+	}, [
+		allowMouseUpRef,
+		allowSelectRef,
+		disabled,
+		handleKeyDown,
+		handleSelect,
+		index,
+		interactions,
+		restProps,
+		selectTimeoutRef,
+		setActiveIndexFast
+	]);
+	var accessibilityProps = (0, import_selectionController.getSelectOptionProps)(mode, isSelected, disabled, import_constants.isWeb ? "web" : "native");
+	var _selectContext_activeIndex;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemContextProvider, {
+		scope,
+		value,
+		textId: textId || "",
+		textValue: textValueProp,
+		isSelected,
+		children: shouldRenderWebNative ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+			value,
+			disabled,
+			children: props.children
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectItemFrame, {
+			render: "div",
+			ref: composedRefs,
+			"aria-labelledby": textId,
+			"data-state": isSelected ? "active" : "inactive",
+			"data-disabled": disabled ? "" : void 0,
+			tabIndex: disabled ? void 0 : import_constants.isWeb && isAdapted ? index === ((_selectContext_activeIndex = selectContext.activeIndex) !== null && _selectContext_activeIndex !== void 0 ? _selectContext_activeIndex : selectContext.selectedIndex) ? 0 : -1 : -1,
+			zIndex: 100,
+			...selectItemProps,
+			...accessibilityProps
+		})
+	});
+}, { disableTheme: true });