@tamagui/select 2.7.7 → 3.0.0-beta.1091.1

package/dist/cjs/SelectImpl.cjs

@@ -5,336 +5,321 @@ 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 SelectImpl_exports = {};
-__export(SelectImpl_exports, {
-  SelectInlineImpl: () => SelectInlineImpl
-});
+__export(SelectImpl_exports, { SelectInlineImpl: () => SelectInlineImpl });
 module.exports = __toCommonJS(SelectImpl_exports);
 var import_floating = require("@tamagui/floating");
 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_react_dom = require("react-dom");
 var import_constants2 = require("./constants.cjs");
 var import_context = require("./context.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const SelectInlineImpl = props => {
-  const {
-    scope,
-    children,
-    open = false,
-    listContentRef,
-    setActiveIndexFast
-  } = props;
-  const selectContext = (0, import_context.useSelectContext)(scope);
-  const selectItemParentContext = (0, import_context.useSelectItemParentContext)(scope);
-  const {
-    setActiveIndex,
-    selectedIndex,
-    activeIndexRef
-  } = selectContext;
-  const {
-    setOpen,
-    setSelectedIndex
-  } = selectItemParentContext;
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const touch = (0, import_core.useIsTouchDevice)();
-  const listItemsRef = React.useRef([]);
-  const overflowRef = React.useRef(null);
-  const upArrowRef = React.useRef(null);
-  const downArrowRef = React.useRef(null);
-  const allowSelectRef = React.useRef(false);
-  const allowMouseUpRef = React.useRef(true);
-  const selectTimeoutRef = React.useRef(null);
-  const state = React.useRef({
-    isMouseOutside: false,
-    isTyping: false
-  });
-  const [controlledScrolling, setControlledScrolling] = React.useState(false);
-  const [fallback, setFallback] = React.useState(false);
-  const [innerOffset, setInnerOffset] = React.useState(0);
-  const [blockSelection, setBlockSelection] = React.useState(false);
-  const floatingStyle = React.useRef({});
-  React.useEffect(() => {
-    if (open) setActiveIndexFast(selectedIndex ?? 0);else {
-      setScrollTop(0);
-      setFallback(false);
-      setActiveIndexFast(null);
-      setControlledScrolling(false);
-    }
-  }, [open, selectedIndex, setActiveIndexFast]);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (!open) return;
-    const mouseUp = e => {
-      if (state.current.isMouseOutside) setOpen(false);
-    };
-    document.addEventListener("mouseup", mouseUp);
-    return () => {
-      document.removeEventListener("mouseup", mouseUp);
-    };
-  }, [open]);
-  const {
-    x,
-    y,
-    strategy,
-    refs,
-    update,
-    placement: computedPlacement
-  } = (0, import_floating.useFloatingRaw)({
-    open,
-    placement: "bottom-start",
-    whileElementsMounted: import_floating.autoUpdate,
-    middleware: [(0, import_floating.size)({
-      apply({
-        rects: {
-          reference: {
-            width
-          }
-        }
-      }) {
-        Object.assign(floatingStyle.current, {
-          minWidth: width + 8
-        });
-        if (refs.floating.current) Object.assign(refs.floating.current.style, floatingStyle.current);
-      }
-    }), (0, import_floating.inner)({
-      listRef: listItemsRef,
-      overflowRef,
-      index: selectedIndex,
-      offset: innerOffset,
-      onFallbackChange: setFallback,
-      padding: 10,
-      minItemsVisible: touch ? 10 : 4,
-      referenceOverflowThreshold: 20
-    }), (0, import_floating.offset)({
-      crossAxis: -5
-    })]
-  });
-  const floatingRef = refs.floating;
-  const showUpArrow = open && scrollTop > import_constants2.SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - import_constants2.SCROLL_ARROW_THRESHOLD;
-  const isScrollable = showDownArrow || showUpArrow;
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (typeof window === "undefined") return;
-    window.addEventListener("resize", update);
-    if (open) update();
-    return () => window.removeEventListener("resize", update);
-  }, [update, open]);
-  const onMatch = (0, import_core.useEvent)(index => {
-    return (open ? setActiveIndex : setSelectedIndex)(index);
-  });
-  const dataRef = React.useRef({});
-  dataRef.current.placement = computedPlacement;
-  const interactionContext = {
-    open,
-    onOpenChange: val => setOpen(val),
-    refs: {
-      reference: refs.reference,
-      floating: refs.floating,
-      domReference: refs.reference
-    },
-    elements: {
-      reference: refs.reference?.current || null,
-      floating: refs.floating?.current || null,
-      domReference: refs.reference?.current || null
-    },
-    dataRef
-  };
-  const interactionsProps = [(0, import_floating.useClick)(interactionContext, {
-    event: "mousedown",
-    keyboardHandlers: false
-  }), (0, import_floating.useRole)(interactionContext, {
-    role: "listbox"
-  }), (0, import_floating.useInnerOffset)(interactionContext, {
-    enabled: !fallback && isScrollable,
-    onChange: setInnerOffset,
-    overflowRef,
-    scrollRef: refs.floating
-  }), (0, import_floating.useListNavigation)(interactionContext, {
-    listRef: listItemsRef,
-    activeIndex: selectContext.activeIndex ?? 0,
-    selectedIndex,
-    onNavigate: index => {
-      if (index !== null) setActiveIndex(index);
-    },
-    scrollItemIntoView: false
-  }), (0, import_floating.useTypeahead)(interactionContext, {
-    listRef: listContentRef,
-    onMatch,
-    selectedIndex,
-    activeIndex: selectContext.activeIndex,
-    onTypingChange: e => {
-      state.current.isTyping = e;
-    }
-  })];
-  const interactions = (0, import_floating.useInteractions)(React.useMemo(() => {
-    return interactionsProps;
-  }, interactionsProps));
-  const interactionsContext = React.useMemo(() => {
-    return {
-      ...interactions,
-      getReferenceProps() {
-        return interactions.getReferenceProps({
-          ref: refs.reference,
-          className: "SelectTrigger",
-          onKeyDown(event) {
-            if (event.key === "Enter" || event.code === "Space" || event.key === " " && !state.current.isTyping) {
-              event.preventDefault();
-              setOpen(true);
-            }
-          }
-        });
-      },
-      getFloatingProps(props2) {
-        return interactions.getFloatingProps({
-          ref: refs.floating,
-          className: "Select",
-          ...props2,
-          style: {
-            position: strategy,
-            top: y ?? "",
-            left: x ?? "",
-            outline: 0,
-            scrollbarWidth: "none",
-            ...floatingStyle.current,
-            ...props2?.style
-          },
-          onPointerEnter() {
-            setControlledScrolling(false);
-            state.current.isMouseOutside = false;
-          },
-          onPointerLeave() {
-            state.current.isMouseOutside = true;
-          },
-          onPointerMove() {
-            state.current.isMouseOutside = false;
-            setControlledScrolling(false);
-          },
-          onKeyDown() {
-            setControlledScrolling(true);
-          },
-          onContextMenu(e) {
-            e.preventDefault();
-          },
-          onScroll(event) {
-            (0, import_react_dom.flushSync)(() => {
-              setScrollTop(event.currentTarget.scrollTop);
-            });
-          }
-        });
-      }
-    };
-  }, [refs.reference.current, x, y, refs.floating.current, interactions]);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (open) {
-      allowMouseUpRef.current = false;
-      selectTimeoutRef.current = setTimeout(() => {
-        allowSelectRef.current = true;
-        allowMouseUpRef.current = true;
-      }, 300);
-      return () => {
-        clearTimeout(selectTimeoutRef.current);
-      };
-    }
-    allowSelectRef.current = false;
-    allowMouseUpRef.current = true;
-    setInnerOffset(0);
-    setFallback(false);
-    setBlockSelection(false);
-  }, [open]);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (!open && state.current.isMouseOutside) state.current.isMouseOutside = false;
-  }, [open]);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    function onPointerDown(e) {
-      const target = e.target;
-      if (!(refs.floating.current?.contains(target) || upArrowRef.current?.contains(target) || downArrowRef.current?.contains(target))) {
-        setOpen(false);
-        setControlledScrolling(false);
-      }
-    }
-    if (open) {
-      document.addEventListener("pointerdown", onPointerDown);
-      return () => {
-        document.removeEventListener("pointerdown", onPointerDown);
-      };
-    }
-  }, [open, refs, setOpen]);
-  React.useEffect(() => {
-    if (!open) return;
-    const scrollActiveIntoView = index => {
-      if (controlledScrolling && index != null) listItemsRef.current[index]?.scrollIntoView({
-        block: "nearest"
-      });
-      setScrollTop(refs.floating.current?.scrollTop ?? 0);
-    };
-    scrollActiveIntoView(activeIndexRef.current);
-    return selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView);
-  }, [open, refs, controlledScrolling, selectItemParentContext.activeIndexSubscribe]);
-  React.useEffect(() => {
-    if (open && fallback) {
-      if (selectedIndex != null) listItemsRef.current[selectedIndex]?.scrollIntoView({
-        block: "nearest"
-      });
-    }
-  }, [open, fallback, selectedIndex]);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (refs.floating.current && fallback) refs.floating.current.style.maxHeight = "";
-  }, [refs, fallback]);
-  const floatingContext = React.useMemo(() => ({
-    refs,
-    dataRef
-  }), [refs]);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
-    scope,
-    ...selectContext,
-    setScrollTop,
-    setInnerOffset,
-    fallback,
-    floatingContext,
-    canScrollDown: !!showDownArrow,
-    canScrollUp: !!showUpArrow,
-    controlledScrolling,
-    blockSelection,
-    upArrowRef,
-    downArrowRef,
-    update,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_context.SelectItemParentProvider, {
-      scope,
-      ...selectItemParentContext,
-      allowMouseUpRef,
-      allowSelectRef,
-      dataRef,
-      interactions: interactionsContext,
-      listRef: listItemsRef,
-      selectTimeoutRef,
-      children
-    })
-  });
-};
+const SelectInlineImpl = (props) => {
+	const { scope, children, open = false, listContentRef } = props;
+	const selectContext = (0, import_context.useSelectContext)(scope);
+	const selectItemParentContext = (0, import_context.useSelectItemParentContext)(scope);
+	const { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;
+	const { requestOpenChange, registry } = selectItemParentContext;
+	const touch = (0, import_core.useIsTouchDevice)();
+	const listItemsRef = selectItemParentContext.listRef;
+	const overflowRef = React.useRef(null);
+	const upArrowRef = React.useRef(null);
+	const downArrowRef = React.useRef(null);
+	const allowSelectRef = React.useRef(false);
+	const allowMouseUpRef = React.useRef(true);
+	const selectTimeoutRef = React.useRef(null);
+	const latestKeyboardEventRef = React.useRef(void 0);
+	const state = React.useRef({
+		isMouseOutside: false,
+		isTyping: false
+	});
+	const [controlledScrolling, setControlledScrolling] = React.useState(false);
+	const [fallback, setFallback] = React.useState(false);
+	const [innerOffset, setInnerOffset] = React.useState(0);
+	const [blockSelection, setBlockSelection] = React.useState(false);
+	React.useEffect(() => {
+		if (!open) {
+			setCanScrollUp(false);
+			setCanScrollDown(false);
+			setFallback(false);
+			setControlledScrolling(false);
+		}
+	}, [open]);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (!open) return;
+		const mouseUp = (e) => {
+			if (state.current.isMouseOutside) requestOpenChange(false, (0, import_core.createChangeEventDetails)("outside-press", e));
+		};
+		document.addEventListener("mouseup", mouseUp);
+		return () => {
+			document.removeEventListener("mouseup", mouseUp);
+		};
+	}, [open]);
+	const { x, y, strategy, refs, update, placement: computedPlacement } = (0, import_floating.useFloatingRaw)({
+		open,
+		placement: "bottom-start",
+		whileElementsMounted: import_floating.autoUpdate,
+		middleware: [
+			(0, import_floating.size)({ apply({ rects, elements }) {
+				elements.floating.style.minWidth = `${rects.reference.width + 8}px`;
+			} }),
+			(0, import_floating.inner)({
+				listRef: listItemsRef,
+				overflowRef,
+				index: selectedIndex,
+				offset: innerOffset,
+				onFallbackChange: setFallback,
+				padding: 10,
+				minItemsVisible: touch ? 10 : 4,
+				referenceOverflowThreshold: 20
+			}),
+			(0, import_floating.offset)({ crossAxis: -4 })
+		]
+	});
+	const [canScrollUp, setCanScrollUp] = React.useState(false);
+	const [canScrollDown, setCanScrollDown] = React.useState(false);
+	const updateScrollArrows = React.useCallback(() => {
+		const el = refs.floating.current;
+		if (!el) return;
+		setCanScrollUp(el.scrollTop > import_constants2.SCROLL_ARROW_THRESHOLD);
+		setCanScrollDown(el.scrollTop < el.scrollHeight - el.clientHeight - import_constants2.SCROLL_ARROW_THRESHOLD);
+	}, [refs]);
+	const showUpArrow = open && canScrollUp;
+	const showDownArrow = open && canScrollDown;
+	const isScrollable = showDownArrow || showUpArrow;
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (open) update();
+	}, [update, open]);
+	const onMatch = (0, import_core.useEvent)((index) => {
+		if (!open) return;
+		setActiveIndex(index, {
+			reason: "keyboard",
+			event: latestKeyboardEventRef.current,
+			trigger: void 0,
+			index
+		});
+	});
+	const dataRef = React.useRef({});
+	dataRef.current.placement = computedPlacement;
+	const onOpenChange = (0, import_core.useEvent)((nextOpen, event, reason) => {
+		requestOpenChange(nextOpen, (0, import_core.createChangeEventDetails)(reason === "list-navigation" ? "keyboard" : "trigger-press", event, refs.reference.current));
+	});
+	const referenceElement = refs.reference.current || null;
+	const floatingElement = refs.floating.current || null;
+	const interactionContext = React.useMemo(() => ({
+		open,
+		onOpenChange,
+		refs: {
+			reference: refs.reference,
+			floating: refs.floating,
+			domReference: refs.reference
+		},
+		elements: {
+			reference: referenceElement,
+			floating: floatingElement,
+			domReference: referenceElement
+		},
+		dataRef
+	}), [
+		open,
+		onOpenChange,
+		refs,
+		referenceElement,
+		floatingElement
+	]);
+	const interactionsProps = [
+		(0, import_floating.useClick)(interactionContext, {
+			event: "mousedown",
+			keyboardHandlers: false
+		}),
+		(0, import_floating.useRole)(interactionContext, { role: "listbox" }),
+		(0, import_floating.useInnerOffset)(interactionContext, {
+			enabled: !fallback && isScrollable,
+			onChange: setInnerOffset,
+			overflowRef,
+			scrollRef: refs.floating
+		}),
+		(0, import_floating.useListNavigation)(interactionContext, {
+			listRef: listItemsRef,
+			activeIndex: null,
+			selectedIndex,
+			onNavigate: (index) => {
+				if (index !== null) setActiveIndex(index, {
+					reason: "list-navigation",
+					event: latestKeyboardEventRef.current,
+					trigger: void 0,
+					index
+				});
+			},
+			disabledIndices: registry.getDisabledIndices(),
+			scrollItemIntoView: false,
+			focusItemOnHover: false
+		}),
+		(0, import_floating.useTypeahead)(interactionContext, {
+			listRef: listContentRef,
+			onMatch,
+			selectedIndex,
+			activeIndex: null,
+			onTypingChange: (e) => {
+				state.current.isTyping = e;
+			}
+		})
+	];
+	const interactions = (0, import_floating.useInteractions)(React.useMemo(() => {
+		return interactionsProps;
+	}, interactionsProps));
+	const interactionsContext = React.useMemo(() => {
+		return {
+			getReferenceProps(props2 = {}) {
+				return interactions.getReferenceProps({
+					...props2,
+					onKeyDown: (0, import_helpers.composeEventHandlers)(props2.onKeyDown, (event) => {
+						latestKeyboardEventRef.current = event.nativeEvent || event;
+						if (event.key === "Enter" || event.code === "Space" || event.key === " " && !state.current.isTyping) {
+							event.preventDefault();
+							requestOpenChange(true, (0, import_core.createChangeEventDetails)("keyboard", event.nativeEvent || event, refs.reference.current));
+						}
+					})
+				});
+			},
+			getFloatingProps(props2) {
+				return interactions.getFloatingProps({
+					ref: refs.floating,
+					...props2,
+					onPointerEnter() {
+						setControlledScrolling(false);
+						state.current.isMouseOutside = false;
+					},
+					onPointerLeave() {
+						state.current.isMouseOutside = true;
+					},
+					onPointerMove() {
+						state.current.isMouseOutside = false;
+						setControlledScrolling(false);
+					},
+					onKeyDown(event) {
+						latestKeyboardEventRef.current = event.nativeEvent || event;
+						setControlledScrolling(true);
+					},
+					onContextMenu(e) {
+						e.preventDefault();
+					},
+					onScroll: updateScrollArrows
+				});
+			}
+		};
+	}, [
+		refs,
+		interactions,
+		requestOpenChange,
+		updateScrollArrows
+	]);
+	const floatingPosition = React.useMemo(() => ({
+		position: strategy,
+		top: y ?? "",
+		left: x ?? ""
+	}), [
+		strategy,
+		x,
+		y
+	]);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (open) {
+			allowMouseUpRef.current = false;
+			selectTimeoutRef.current = setTimeout(() => {
+				allowSelectRef.current = true;
+				allowMouseUpRef.current = true;
+			}, 300);
+			return () => {
+				clearTimeout(selectTimeoutRef.current);
+			};
+		}
+		allowSelectRef.current = false;
+		allowMouseUpRef.current = true;
+		setInnerOffset(0);
+		setFallback(false);
+		setBlockSelection(false);
+	}, [open]);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (!open && state.current.isMouseOutside) state.current.isMouseOutside = false;
+	}, [open]);
+	React.useEffect(() => {
+		if (!open) return;
+		const scrollActiveIntoView = (index) => {
+			if (controlledScrolling && index != null) listItemsRef.current[index]?.scrollIntoView({ block: "nearest" });
+			updateScrollArrows();
+		};
+		scrollActiveIntoView(activeIndexRef.current);
+		return selectItemParentContext.activeIndexSubscribe(scrollActiveIntoView);
+	}, [
+		open,
+		controlledScrolling,
+		selectItemParentContext.activeIndexSubscribe,
+		updateScrollArrows
+	]);
+	React.useEffect(() => {
+		if (open && fallback) {
+			if (selectedIndex != null) listItemsRef.current[selectedIndex]?.scrollIntoView({ block: "nearest" });
+		}
+	}, [
+		open,
+		fallback,
+		selectedIndex
+	]);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (refs.floating.current && fallback) refs.floating.current.style.maxHeight = "";
+	}, [refs, fallback]);
+	const floatingContext = React.useMemo(() => ({
+		refs,
+		dataRef
+	}), [refs]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectProvider, {
+		scope,
+		...selectContext,
+		updateScrollArrows,
+		setInnerOffset,
+		fallback,
+		floatingContext,
+		interactions: interactionsContext,
+		floatingPosition,
+		canScrollDown: !!showDownArrow,
+		canScrollUp: !!showUpArrow,
+		controlledScrolling,
+		blockSelection,
+		upArrowRef,
+		downArrowRef,
+		update,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.SelectItemParentProvider, {
+			scope,
+			...selectItemParentContext,
+			allowMouseUpRef,
+			allowSelectRef,
+			dataRef,
+			getItemProps: interactions.getItemProps,
+			listRef: listItemsRef,
+			selectTimeoutRef,
+			children
+		})
+	});
+};