@tamagui/select 2.7.7 → 3.0.0-beta.1093.1

package/dist/cjs/SelectItem.native.cjs

@@ -0,0 +1,288 @@
+"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");
+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 isAdapted = (0, import_adapt.useAdaptIsActive)(context.adaptScope);
+	var { registry, mode, selectedValues, selectValue, activeIndexSubscribe, activeIndexRef, allowMouseUpRef, allowSelectRef, selectTimeoutRef, getItemProps, shouldRenderWebNative, setActiveIndex, lastPointerRef, moveActive, search } = context;
+	var isSelected = selectedValues.includes(value);
+	var pendingMouseUpSelectionRef = React.useRef(false);
+	var itemNodeRef = React.useRef(null);
+	var registrationRef = React.useRef(null);
+	var initialRegistration = React.useRef({
+		value,
+		disabled,
+		textValue: textValueProp
+	});
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		var registration = registry.registerItem(initialRegistration.current);
+		registrationRef.current = registration;
+		registration.setNode(itemNodeRef.current);
+		return function() {
+			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 [isActive, setIsActive] = React.useState(false);
+	var isActiveRef = React.useRef(false);
+	React.useEffect(function() {
+		var handleActiveIndex = function(i) {
+			var next = i != null && registry.getIndex(value) === i;
+			if (next !== isActiveRef.current) {
+				isActiveRef.current = next;
+				setIsActive(next);
+			}
+			if (next && import_constants.isWeb) {
+				requestAnimationFrame(function() {
+					var _itemNodeRef_current_focus, _itemNodeRef_current;
+					(_itemNodeRef_current = itemNodeRef.current) === null || _itemNodeRef_current === void 0 ? void 0 : (_itemNodeRef_current_focus = _itemNodeRef_current.focus) === null || _itemNodeRef_current_focus === void 0 ? void 0 : _itemNodeRef_current_focus.call(_itemNodeRef_current);
+				});
+			}
+		};
+		var _activeIndexRef_current;
+		handleActiveIndex((_activeIndexRef_current = activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current) !== null && _activeIndexRef_current !== void 0 ? _activeIndexRef_current : null);
+		return activeIndexSubscribe(handleActiveIndex);
+	}, [
+		activeIndexRef,
+		activeIndexSubscribe,
+		registry,
+		value
+	]);
+	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);
+	}, []);
+	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 handleMouseMove = React.useCallback(function(event) {
+		if (disabled) return;
+		var index = registry.getIndex(value);
+		if (index < 0) return;
+		var last = lastPointerRef.current;
+		if (event.clientX === last.x && event.clientY === last.y) return;
+		last.x = event.clientX;
+		last.y = event.clientY;
+		setActiveIndex(index, {
+			reason: "item-hover",
+			event: event.nativeEvent || event,
+			trigger: event.currentTarget,
+			index
+		});
+	}, [
+		disabled,
+		lastPointerRef,
+		registry,
+		setActiveIndex,
+		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 (!getItemProps && ((_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,
+		getItemProps,
+		moveActive,
+		search
+	]);
+	var selectItemProps = React.useMemo(function() {
+		if (getItemProps) {
+			var { onTouchMove, onTouchEnd, onKeyDown, onClick, onMouseUp, onMouseMove, onPress, ...itemProps } = restProps;
+			var interactionProps = getItemProps({
+				...itemProps,
+				onTouchMove() {
+					allowSelectRef.current = true;
+					allowMouseUpRef.current = false;
+				},
+				onTouchEnd() {
+					allowSelectRef.current = false;
+					allowMouseUpRef.current = true;
+				},
+				onMouseMove: handleMouseMove,
+				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, handleMouseMove),
+			onPress: (0, import_helpers.composeEventHandlers)(restProps.onPress, handleSelect)
+		};
+	}, [
+		allowMouseUpRef,
+		allowSelectRef,
+		disabled,
+		handleKeyDown,
+		handleMouseMove,
+		handleSelect,
+		getItemProps,
+		restProps,
+		selectTimeoutRef
+	]);
+	var accessibilityProps = (0, import_selectionController.getSelectOptionProps)(mode, isSelected, disabled, import_constants.isWeb ? "web" : "native");
+	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 && (isActive || (activeIndexRef === null || activeIndexRef === void 0 ? void 0 : activeIndexRef.current) == null && isSelected) ? 0 : -1,
+			zIndex: 100,
+			...selectItemProps,
+			...accessibilityProps
+		})
+	});
+}, { disableTheme: true });