@tamagui/select 2.7.7 → 3.0.0-beta.1091.1

package/dist/esm/SelectImpl.mjs

@@ -1,304 +1,300 @@
 import { autoUpdate, inner, offset, size, useClick, useFloatingRaw, useInnerOffset, useInteractions, useListNavigation, useRole, useTypeahead } from "@tamagui/floating";
 import { useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { useEvent, useIsTouchDevice } from "@tamagui/core";
+import { createChangeEventDetails, useEvent, useIsTouchDevice } from "@tamagui/core";
+import { composeEventHandlers } from "@tamagui/helpers";
 import * as React from "react";
-import { flushSync } from "react-dom";
 import { SCROLL_ARROW_THRESHOLD } from "./constants.mjs";
 import { SelectItemParentProvider, SelectProvider, useSelectContext, useSelectItemParentContext } from "./context.mjs";
 import { jsx } from "react/jsx-runtime";
-const SelectInlineImpl = props => {
-  const {
-    scope,
-    children,
-    open = false,
-    listContentRef,
-    setActiveIndexFast
-  } = props;
-  const selectContext = useSelectContext(scope);
-  const selectItemParentContext = useSelectItemParentContext(scope);
-  const {
-    setActiveIndex,
-    selectedIndex,
-    activeIndexRef
-  } = selectContext;
-  const {
-    setOpen,
-    setSelectedIndex
-  } = selectItemParentContext;
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const touch = 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]);
-  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
-  } = useFloatingRaw({
-    open,
-    placement: "bottom-start",
-    whileElementsMounted: autoUpdate,
-    middleware: [size({
-      apply({
-        rects: {
-          reference: {
-            width
-          }
-        }
-      }) {
-        Object.assign(floatingStyle.current, {
-          minWidth: width + 8
-        });
-        if (refs.floating.current) Object.assign(refs.floating.current.style, floatingStyle.current);
-      }
-    }), inner({
-      listRef: listItemsRef,
-      overflowRef,
-      index: selectedIndex,
-      offset: innerOffset,
-      onFallbackChange: setFallback,
-      padding: 10,
-      minItemsVisible: touch ? 10 : 4,
-      referenceOverflowThreshold: 20
-    }), offset({
-      crossAxis: -5
-    })]
-  });
-  const floatingRef = refs.floating;
-  const showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
-  const isScrollable = showDownArrow || showUpArrow;
-  useIsomorphicLayoutEffect(() => {
-    if (typeof window === "undefined") return;
-    window.addEventListener("resize", update);
-    if (open) update();
-    return () => window.removeEventListener("resize", update);
-  }, [update, open]);
-  const onMatch = 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 = [useClick(interactionContext, {
-    event: "mousedown",
-    keyboardHandlers: false
-  }), useRole(interactionContext, {
-    role: "listbox"
-  }), useInnerOffset(interactionContext, {
-    enabled: !fallback && isScrollable,
-    onChange: setInnerOffset,
-    overflowRef,
-    scrollRef: refs.floating
-  }), useListNavigation(interactionContext, {
-    listRef: listItemsRef,
-    activeIndex: selectContext.activeIndex ?? 0,
-    selectedIndex,
-    onNavigate: index => {
-      if (index !== null) setActiveIndex(index);
-    },
-    scrollItemIntoView: false
-  }), useTypeahead(interactionContext, {
-    listRef: listContentRef,
-    onMatch,
-    selectedIndex,
-    activeIndex: selectContext.activeIndex,
-    onTypingChange: e => {
-      state.current.isTyping = e;
-    }
-  })];
-  const interactions = 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) {
-            flushSync(() => {
-              setScrollTop(event.currentTarget.scrollTop);
-            });
-          }
-        });
-      }
-    };
-  }, [refs.reference.current, x, y, refs.floating.current, interactions]);
-  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]);
-  useIsomorphicLayoutEffect(() => {
-    if (!open && state.current.isMouseOutside) state.current.isMouseOutside = false;
-  }, [open]);
-  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]);
-  useIsomorphicLayoutEffect(() => {
-    if (refs.floating.current && fallback) refs.floating.current.style.maxHeight = "";
-  }, [refs, fallback]);
-  const floatingContext = React.useMemo(() => ({
-    refs,
-    dataRef
-  }), [refs]);
-  return /* @__PURE__ */jsx(SelectProvider, {
-    scope,
-    ...selectContext,
-    setScrollTop,
-    setInnerOffset,
-    fallback,
-    floatingContext,
-    canScrollDown: !!showDownArrow,
-    canScrollUp: !!showUpArrow,
-    controlledScrolling,
-    blockSelection,
-    upArrowRef,
-    downArrowRef,
-    update,
-    children: /* @__PURE__ */jsx(SelectItemParentProvider, {
-      scope,
-      ...selectItemParentContext,
-      allowMouseUpRef,
-      allowSelectRef,
-      dataRef,
-      interactions: interactionsContext,
-      listRef: listItemsRef,
-      selectTimeoutRef,
-      children
-    })
-  });
+
+const SelectInlineImpl = (props) => {
+	const { scope, children, open = false, listContentRef } = props;
+	const selectContext = useSelectContext(scope);
+	const selectItemParentContext = useSelectItemParentContext(scope);
+	const { setActiveIndex, selectedIndex, activeIndexRef } = selectContext;
+	const { requestOpenChange, registry } = selectItemParentContext;
+	const touch = 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]);
+	useIsomorphicLayoutEffect(() => {
+		if (!open) return;
+		const mouseUp = (e) => {
+			if (state.current.isMouseOutside) requestOpenChange(false, createChangeEventDetails("outside-press", e));
+		};
+		document.addEventListener("mouseup", mouseUp);
+		return () => {
+			document.removeEventListener("mouseup", mouseUp);
+		};
+	}, [open]);
+	const { x, y, strategy, refs, update, placement: computedPlacement } = useFloatingRaw({
+		open,
+		placement: "bottom-start",
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			size({ apply({ rects, elements }) {
+				elements.floating.style.minWidth = `${rects.reference.width + 8}px`;
+			} }),
+			inner({
+				listRef: listItemsRef,
+				overflowRef,
+				index: selectedIndex,
+				offset: innerOffset,
+				onFallbackChange: setFallback,
+				padding: 10,
+				minItemsVisible: touch ? 10 : 4,
+				referenceOverflowThreshold: 20
+			}),
+			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 > SCROLL_ARROW_THRESHOLD);
+		setCanScrollDown(el.scrollTop < el.scrollHeight - el.clientHeight - SCROLL_ARROW_THRESHOLD);
+	}, [refs]);
+	const showUpArrow = open && canScrollUp;
+	const showDownArrow = open && canScrollDown;
+	const isScrollable = showDownArrow || showUpArrow;
+	useIsomorphicLayoutEffect(() => {
+		if (open) update();
+	}, [update, open]);
+	const onMatch = 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 = useEvent((nextOpen, event, reason) => {
+		requestOpenChange(nextOpen, 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 = [
+		useClick(interactionContext, {
+			event: "mousedown",
+			keyboardHandlers: false
+		}),
+		useRole(interactionContext, { role: "listbox" }),
+		useInnerOffset(interactionContext, {
+			enabled: !fallback && isScrollable,
+			onChange: setInnerOffset,
+			overflowRef,
+			scrollRef: refs.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
+		}),
+		useTypeahead(interactionContext, {
+			listRef: listContentRef,
+			onMatch,
+			selectedIndex,
+			activeIndex: null,
+			onTypingChange: (e) => {
+				state.current.isTyping = e;
+			}
+		})
+	];
+	const interactions = useInteractions(React.useMemo(() => {
+		return interactionsProps;
+	}, interactionsProps));
+	const interactionsContext = React.useMemo(() => {
+		return {
+			getReferenceProps(props2 = {}) {
+				return interactions.getReferenceProps({
+					...props2,
+					onKeyDown: 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, 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
+	]);
+	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]);
+	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
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (refs.floating.current && fallback) refs.floating.current.style.maxHeight = "";
+	}, [refs, fallback]);
+	const floatingContext = React.useMemo(() => ({
+		refs,
+		dataRef
+	}), [refs]);
+	return /* @__PURE__ */ jsx(SelectProvider, {
+		scope,
+		...selectContext,
+		updateScrollArrows,
+		setInnerOffset,
+		fallback,
+		floatingContext,
+		interactions: interactionsContext,
+		floatingPosition,
+		canScrollDown: !!showDownArrow,
+		canScrollUp: !!showUpArrow,
+		controlledScrolling,
+		blockSelection,
+		upArrowRef,
+		downArrowRef,
+		update,
+		children: /* @__PURE__ */ jsx(SelectItemParentProvider, {
+			scope,
+			...selectItemParentContext,
+			allowMouseUpRef,
+			allowSelectRef,
+			dataRef,
+			getItemProps: interactions.getItemProps,
+			listRef: listItemsRef,
+			selectTimeoutRef,
+			children
+		})
+	});
 };
+
 export { SelectInlineImpl };
 //# sourceMappingURL=SelectImpl.mjs.map