@tamagui/floating 2.7.6 → 3.0.0-beta.637.1

package/dist/cjs/interactions/useListNavigation.native.cjs

@@ -0,0 +1,446 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useListNavigation_exports = {};
+__export(useListNavigation_exports, { useListNavigation: () => useListNavigation });
+module.exports = __toCommonJS(useListNavigation_exports);
+var import_react = require("react");
+var import_use_event = require("@tamagui/use-event");
+var import_utils = require("./utils.native.js");
+var ARROW_UP = "ArrowUp";
+var ARROW_DOWN = "ArrowDown";
+var ARROW_LEFT = "ArrowLeft";
+var ARROW_RIGHT = "ArrowRight";
+function doSwitch(orientation, vertical, horizontal) {
+	switch (orientation) {
+		case "vertical": return vertical;
+		case "horizontal": return horizontal;
+		default: return vertical || horizontal;
+	}
+}
+function isMainOrientationKey(key, orientation) {
+	var vertical = key === ARROW_UP || key === ARROW_DOWN;
+	var horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
+	return doSwitch(orientation, vertical, horizontal);
+}
+function isMainOrientationToEndKey(key, orientation, rtl) {
+	var vertical = key === ARROW_DOWN;
+	var horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+	return doSwitch(orientation, vertical, horizontal) || key === "Enter" || key === " " || key === "";
+}
+function isCrossOrientationOpenKey(key, orientation, rtl) {
+	var vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+	var horizontal = key === ARROW_DOWN;
+	return doSwitch(orientation, vertical, horizontal);
+}
+function isCrossOrientationCloseKey(key, orientation, rtl) {
+	var vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
+	var horizontal = key === ARROW_UP;
+	return doSwitch(orientation, vertical, horizontal);
+}
+function useListNavigation(context, props) {
+	var { open, onOpenChange, elements } = context;
+	var { listRef, activeIndex, onNavigate: unstable_onNavigate = function() {}, enabled = true, selectedIndex = null, allowEscape = false, loop = false, nested = false, rtl = false, virtual = false, focusItemOnOpen = "auto", focusItemOnHover = true, openOnArrowKeyDown = true, disabledIndices = void 0, orientation = "vertical", scrollItemIntoView = true } = props;
+	var typeableComboboxReference = (0, import_utils.isTypeableCombobox)(elements.domReference);
+	var focusItemOnOpenRef = (0, import_react.useRef)(focusItemOnOpen);
+	var indexRef = (0, import_react.useRef)(selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : -1);
+	var keyRef = (0, import_react.useRef)(null);
+	var isPointerModalityRef = (0, import_react.useRef)(true);
+	var previousMountedRef = (0, import_react.useRef)(!!elements.floating);
+	var previousOpenRef = (0, import_react.useRef)(open);
+	var forceSyncFocusRef = (0, import_react.useRef)(false);
+	var forceScrollIntoViewRef = (0, import_react.useRef)(false);
+	var disabledIndicesRef = (0, import_react.useRef)(disabledIndices);
+	disabledIndicesRef.current = disabledIndices;
+	var latestOpenRef = (0, import_react.useRef)(open);
+	latestOpenRef.current = open;
+	var scrollItemIntoViewRef = (0, import_react.useRef)(scrollItemIntoView);
+	scrollItemIntoViewRef.current = scrollItemIntoView;
+	var selectedIndexRef = (0, import_react.useRef)(selectedIndex);
+	selectedIndexRef.current = selectedIndex;
+	var stableOnNavigate = (0, import_use_event.useEvent)(unstable_onNavigate);
+	var [activeId, setActiveId] = (0, import_react.useState)();
+	var onNavigate = (0, import_use_event.useEvent)(function() {
+		stableOnNavigate(indexRef.current === -1 ? null : indexRef.current);
+	});
+	var previousOnNavigateRef = (0, import_react.useRef)(onNavigate);
+	var focusItem = (0, import_use_event.useEvent)(function() {
+		function runFocus(item2) {
+			if (virtual) {
+				setActiveId(item2.id);
+			} else {
+				(0, import_utils.enqueueFocus)(item2, {
+					sync: forceSyncFocusRef.current,
+					preventScroll: true
+				});
+			}
+		}
+		var initialItem = listRef.current[indexRef.current];
+		var forceScrollIntoView = forceScrollIntoViewRef.current;
+		if (initialItem) {
+			runFocus(initialItem);
+		}
+		var scheduler = forceSyncFocusRef.current ? function(v) {
+			return v();
+		} : requestAnimationFrame;
+		scheduler(function() {
+			var waitedItem = listRef.current[indexRef.current] || initialItem;
+			if (!waitedItem) return;
+			if (!initialItem) {
+				runFocus(waitedItem);
+			}
+			var scrollIntoViewOptions = scrollItemIntoViewRef.current;
+			var shouldScrollIntoView = scrollIntoViewOptions && waitedItem && (forceScrollIntoView || !isPointerModalityRef.current);
+			if (shouldScrollIntoView) {
+				var _waitedItem_scrollIntoView;
+				(_waitedItem_scrollIntoView = waitedItem.scrollIntoView) === null || _waitedItem_scrollIntoView === void 0 ? void 0 : _waitedItem_scrollIntoView.call(waitedItem, typeof scrollIntoViewOptions === "boolean" ? {
+					block: "nearest",
+					inline: "nearest"
+				} : scrollIntoViewOptions);
+			}
+		});
+	});
+	(0, import_react.useLayoutEffect)(function() {
+		if (!enabled) return;
+		if (open && elements.floating) {
+			if (focusItemOnOpenRef.current && selectedIndex != null) {
+				forceScrollIntoViewRef.current = true;
+				indexRef.current = selectedIndex;
+				onNavigate();
+			}
+		} else if (previousMountedRef.current) {
+			indexRef.current = -1;
+			previousOnNavigateRef.current();
+		}
+	}, [
+		enabled,
+		open,
+		elements.floating,
+		selectedIndex,
+		onNavigate
+	]);
+	(0, import_react.useLayoutEffect)(function() {
+		if (!enabled) return;
+		if (!open) return;
+		if (!elements.floating) return;
+		if (activeIndex == null) {
+			forceSyncFocusRef.current = false;
+			if (selectedIndexRef.current != null) {
+				return;
+			}
+			if (previousMountedRef.current) {
+				indexRef.current = -1;
+				focusItem();
+			}
+			if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
+				var runs = 0;
+				var waitForListPopulated = function() {
+					if (listRef.current[0] == null) {
+						if (runs < 2) {
+							var scheduler = runs ? requestAnimationFrame : queueMicrotask;
+							scheduler(waitForListPopulated);
+						}
+						runs++;
+					} else {
+						indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? (0, import_utils.getMinListIndex)(listRef, disabledIndicesRef.current) : (0, import_utils.getMaxListIndex)(listRef, disabledIndicesRef.current);
+						keyRef.current = null;
+						onNavigate();
+					}
+				};
+				waitForListPopulated();
+			}
+		} else if (!(0, import_utils.isIndexOutOfListBounds)(listRef, activeIndex)) {
+			indexRef.current = activeIndex;
+			focusItem();
+			forceScrollIntoViewRef.current = false;
+		}
+	}, [
+		enabled,
+		open,
+		elements.floating,
+		activeIndex,
+		selectedIndexRef,
+		nested,
+		listRef,
+		orientation,
+		rtl,
+		onNavigate,
+		focusItem,
+		disabledIndicesRef
+	]);
+	(0, import_react.useLayoutEffect)(function() {
+		previousOnNavigateRef.current = onNavigate;
+		previousOpenRef.current = open;
+		previousMountedRef.current = !!elements.floating;
+	});
+	(0, import_react.useLayoutEffect)(function() {
+		if (!open) {
+			keyRef.current = null;
+			focusItemOnOpenRef.current = focusItemOnOpen;
+		}
+	}, [open, focusItemOnOpen]);
+	var hasActiveIndex = activeIndex != null;
+	var commonOnKeyDown = (0, import_use_event.useEvent)(function(event) {
+		isPointerModalityRef.current = false;
+		forceSyncFocusRef.current = true;
+		if (event.which === 229) {
+			return;
+		}
+		if (!latestOpenRef.current && event.currentTarget === elements.floating) {
+			return;
+		}
+		if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
+			(0, import_utils.stopEvent)(event);
+			onOpenChange(false, event.nativeEvent, "list-navigation");
+			if ((0, import_utils.isHTMLElement)(elements.domReference)) {
+				elements.domReference.focus();
+			}
+			return;
+		}
+		var currentIndex = indexRef.current;
+		var minIndex = (0, import_utils.getMinListIndex)(listRef, disabledIndices);
+		var maxIndex = (0, import_utils.getMaxListIndex)(listRef, disabledIndices);
+		if (!typeableComboboxReference) {
+			if (event.key === "Home") {
+				(0, import_utils.stopEvent)(event);
+				indexRef.current = minIndex;
+				onNavigate();
+			}
+			if (event.key === "End") {
+				(0, import_utils.stopEvent)(event);
+				indexRef.current = maxIndex;
+				onNavigate();
+			}
+		}
+		if (isMainOrientationKey(event.key, orientation)) {
+			(0, import_utils.stopEvent)(event);
+			if (open && !virtual && (0, import_utils.activeElement)(event.currentTarget.ownerDocument) === event.currentTarget) {
+				indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
+				onNavigate();
+				return;
+			}
+			if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
+				if (loop) {
+					indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : (0, import_utils.findNonDisabledListIndex)(listRef, {
+						startingIndex: currentIndex,
+						disabledIndices
+					});
+				} else {
+					indexRef.current = Math.min(maxIndex, (0, import_utils.findNonDisabledListIndex)(listRef, {
+						startingIndex: currentIndex,
+						disabledIndices
+					}));
+				}
+			} else {
+				if (loop) {
+					indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : (0, import_utils.findNonDisabledListIndex)(listRef, {
+						startingIndex: currentIndex,
+						decrement: true,
+						disabledIndices
+					});
+				} else {
+					indexRef.current = Math.max(minIndex, (0, import_utils.findNonDisabledListIndex)(listRef, {
+						startingIndex: currentIndex,
+						decrement: true,
+						disabledIndices
+					}));
+				}
+			}
+			if ((0, import_utils.isIndexOutOfListBounds)(listRef, indexRef.current)) {
+				indexRef.current = -1;
+			}
+			onNavigate();
+		}
+	});
+	var ariaActiveDescendantProp = (0, import_react.useMemo)(function() {
+		return virtual && open && hasActiveIndex && { "aria-activedescendant": activeId };
+	}, [
+		virtual,
+		open,
+		hasActiveIndex,
+		activeId
+	]);
+	var floating = (0, import_react.useMemo)(function() {
+		return {
+			"aria-orientation": orientation === "both" ? void 0 : orientation,
+			...!typeableComboboxReference ? ariaActiveDescendantProp : {},
+			onKeyDown: commonOnKeyDown,
+			onPointerMove() {
+				isPointerModalityRef.current = true;
+			}
+		};
+	}, [
+		ariaActiveDescendantProp,
+		commonOnKeyDown,
+		orientation,
+		typeableComboboxReference
+	]);
+	var reference = (0, import_react.useMemo)(function() {
+		function checkVirtualMouse(event) {
+			if (focusItemOnOpen === "auto" && (0, import_utils.isVirtualClick)(event.nativeEvent)) {
+				focusItemOnOpenRef.current = true;
+			}
+		}
+		function checkVirtualPointer(event) {
+			focusItemOnOpenRef.current = focusItemOnOpen;
+			if (focusItemOnOpen === "auto" && (0, import_utils.isVirtualPointerEvent)(event.nativeEvent)) {
+				focusItemOnOpenRef.current = true;
+			}
+		}
+		return {
+			...ariaActiveDescendantProp,
+			onKeyDown(event) {
+				isPointerModalityRef.current = false;
+				var isArrowKey = event.key.startsWith("Arrow");
+				var isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
+				var isMainKey = isMainOrientationKey(event.key, orientation);
+				var isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === "Enter" || event.key.trim() === "";
+				if (virtual && open) {
+					return commonOnKeyDown(event);
+				}
+				if (!open && !openOnArrowKeyDown && isArrowKey) {
+					return;
+				}
+				if (isNavigationKey) {
+					keyRef.current = event.key;
+				}
+				if (nested) {
+					if (isCrossOpenKey) {
+						(0, import_utils.stopEvent)(event);
+						if (open) {
+							indexRef.current = (0, import_utils.getMinListIndex)(listRef, disabledIndicesRef.current);
+							onNavigate();
+						} else {
+							onOpenChange(true, event.nativeEvent, "list-navigation");
+						}
+					}
+					return;
+				}
+				if (isMainKey) {
+					if (selectedIndex != null) {
+						indexRef.current = selectedIndex;
+					}
+					(0, import_utils.stopEvent)(event);
+					if (!open && openOnArrowKeyDown) {
+						onOpenChange(true, event.nativeEvent, "list-navigation");
+					} else {
+						commonOnKeyDown(event);
+					}
+					if (open) {
+						onNavigate();
+					}
+				}
+			},
+			onFocus() {
+				if (open && !virtual) {
+					indexRef.current = -1;
+					onNavigate();
+				}
+			},
+			onPointerDown: checkVirtualPointer,
+			onPointerEnter: checkVirtualPointer,
+			onMouseDown: checkVirtualMouse,
+			onClick: checkVirtualMouse
+		};
+	}, [
+		ariaActiveDescendantProp,
+		commonOnKeyDown,
+		disabledIndicesRef,
+		focusItemOnOpen,
+		listRef,
+		nested,
+		onNavigate,
+		onOpenChange,
+		open,
+		openOnArrowKeyDown,
+		orientation,
+		rtl,
+		selectedIndex,
+		virtual
+	]);
+	var item = (0, import_react.useMemo)(function() {
+		function syncCurrentTarget(currentTarget) {
+			if (!latestOpenRef.current) return;
+			var index = listRef.current.indexOf(currentTarget);
+			if (index !== -1 && indexRef.current !== index) {
+				indexRef.current = index;
+				onNavigate();
+			}
+		}
+		var itemProps = {
+			onFocus(param) {
+				var { currentTarget } = param;
+				forceSyncFocusRef.current = true;
+				syncCurrentTarget(currentTarget);
+			},
+			onClick: function(param) {
+				var { currentTarget } = param;
+				return currentTarget.focus({ preventScroll: true });
+			},
+			onMouseMove(param) {
+				var { currentTarget } = param;
+				forceSyncFocusRef.current = true;
+				forceScrollIntoViewRef.current = false;
+				if (focusItemOnHover) {
+					syncCurrentTarget(currentTarget);
+				}
+			},
+			onPointerLeave(param) {
+				var { pointerType } = param;
+				if (!isPointerModalityRef.current || pointerType === "touch") {
+					return;
+				}
+				forceSyncFocusRef.current = true;
+				if (!focusItemOnHover) {
+					return;
+				}
+				indexRef.current = -1;
+				onNavigate();
+				if (!virtual) {
+					var _elements_floating;
+					(_elements_floating = elements.floating) === null || _elements_floating === void 0 ? void 0 : _elements_floating.focus({ preventScroll: true });
+				}
+			}
+		};
+		return itemProps;
+	}, [
+		latestOpenRef,
+		focusItemOnHover,
+		listRef,
+		onNavigate,
+		virtual,
+		elements.floating
+	]);
+	return (0, import_react.useMemo)(function() {
+		return enabled ? {
+			reference,
+			floating,
+			item
+		} : {};
+	}, [
+		enabled,
+		reference,
+		floating,
+		item
+	]);
+}