@tamagui/select 1.88.13 → 1.89.0-1706308641099

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/BubbleSelect.mjs

@@ -0,0 +1,23 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { usePrevious } from "@tamagui/use-previous";
+import * as React from "react";
+const BubbleSelect = React.forwardRef((props, forwardedRef) => {
+  const {
+      value,
+      ...selectProps
+    } = props,
+    ref = React.useRef(null),
+    composedRefs = useComposedRefs(forwardedRef, ref),
+    prevValue = usePrevious(value);
+  return React.useEffect(() => {
+    const select = ref.current,
+      selectProto = window.HTMLSelectElement.prototype,
+      setValue = Object.getOwnPropertyDescriptor(selectProto, "value").set;
+    if (prevValue !== value && setValue) {
+      const event = new Event("change", {
+        bubbles: !0
+      });
+      setValue.call(select, value), select.dispatchEvent(event);
+    }
+  }, [prevValue, value]), null;
+});

package/dist/esm/Select.mjs

@@ -0,0 +1,359 @@
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { getVariableValue, styled, useEvent, useGet } from "@tamagui/core";
+import { getSpace } from "@tamagui/get-token";
+import { withStaticProperties } from "@tamagui/helpers";
+import { ListItem } from "@tamagui/list-item";
+import { PortalHost } from "@tamagui/portal";
+import { Separator } from "@tamagui/separator";
+import { Sheet, SheetController } from "@tamagui/sheet";
+import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
+import { Paragraph, SizableText } from "@tamagui/text";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import { useDebounce } from "@tamagui/use-debounce";
+import { SELECT_NAME } from "./constants.mjs";
+import { SelectItemParentProvider, SelectProvider, createSelectContext, useSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { SelectContent } from "./SelectContent.mjs";
+import { SelectInlineImpl } from "./SelectImpl.mjs";
+import { SelectItem, useSelectItemContext } from "./SelectItem.mjs";
+import { ITEM_TEXT_NAME, SelectItemText } from "./SelectItemText.mjs";
+import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton.mjs";
+import { SelectTrigger } from "./SelectTrigger.mjs";
+import { SelectViewport } from "./SelectViewport.mjs";
+import { useSelectBreakpointActive, useShowSelectSheet } from "./useSelectBreakpointActive.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+const VALUE_NAME = "SelectValue",
+  SelectValueFrame = styled(SizableText, {
+    name: VALUE_NAME,
+    userSelect: "none"
+  }),
+  SelectValue = SelectValueFrame.styleable(function ({
+    __scopeSelect,
+    children: childrenProp,
+    placeholder,
+    ...props
+  }, forwardedRef) {
+    const context = useSelectContext(VALUE_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(VALUE_NAME, __scopeSelect),
+      composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange),
+      children = childrenProp ?? context.selectedItem,
+      selectValueChildren = context.value == null || context.value === "" ? placeholder ?? children : children;
+    return /* @__PURE__ */jsx(SelectValueFrame, {
+      ...(!props.unstyled && {
+        size: itemParentContext.size,
+        ellipse: !0,
+        // we don't want events from the portalled `SelectValue` children to bubble
+        // through the item they came from
+        pointerEvents: "none"
+      }),
+      ref: composedRefs,
+      ...props,
+      children: unwrapSelectItem(selectValueChildren)
+    });
+  });
+function unwrapSelectItem(selectValueChildren) {
+  return React.Children.map(selectValueChildren, child => {
+    if (child) {
+      if (child.type?.staticConfig?.componentName === ITEM_TEXT_NAME) return child.props.children;
+      if (child.props?.children) return unwrapSelectItem(child.props.children);
+    }
+    return child;
+  });
+}
+const SelectIcon = styled(XStack, {
+    name: "SelectIcon",
+    // @ts-ignore
+    "aria-hidden": !0,
+    children: /* @__PURE__ */jsx(Paragraph, {
+      children: "\u25BC"
+    })
+  }),
+  ITEM_INDICATOR_NAME = "SelectItemIndicator",
+  SelectItemIndicatorFrame = styled(XStack, {
+    name: ITEM_TEXT_NAME
+  }),
+  SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
+    const {
+        __scopeSelect,
+        ...itemIndicatorProps
+      } = props,
+      context = useSelectItemParentContext(ITEM_INDICATOR_NAME, __scopeSelect),
+      itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return context.shouldRenderWebNative ? null : itemContext.isSelected ? /* @__PURE__ */jsx(SelectItemIndicatorFrame, {
+      "aria-hidden": !0,
+      ...itemIndicatorProps,
+      ref: forwardedRef
+    }) : null;
+  });
+SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
+const GROUP_NAME = "SelectGroup",
+  [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME),
+  SelectGroupFrame = styled(YStack, {
+    name: GROUP_NAME,
+    width: "100%"
+  }),
+  NativeSelectTextFrame = styled(SizableText, {
+    tag: "select",
+    backgroundColor: "$background",
+    borderColor: "$borderColor",
+    hoverStyle: {
+      backgroundColor: "$backgroundHover"
+    }
+  }),
+  NativeSelectFrame = styled(ThemeableStack, {
+    name: "NativeSelect",
+    bordered: !0,
+    userSelect: "none",
+    outlineWidth: 0,
+    paddingRight: 10,
+    variants: {
+      size: {
+        "...size": (val, extras) => {
+          const {
+              tokens
+            } = extras,
+            paddingHorizontal = getVariableValue(tokens.space[val]);
+          return {
+            borderRadius: tokens.radius[val] ?? val,
+            minHeight: tokens.size[val],
+            paddingRight: paddingHorizontal + 20,
+            paddingLeft: paddingHorizontal,
+            paddingVertical: getSpace(val, {
+              shift: -3
+            })
+          };
+        }
+      }
+    },
+    defaultVariants: {
+      size: "$2"
+    }
+  }),
+  SelectGroup = React.forwardRef((props, forwardedRef) => {
+    const {
+        __scopeSelect,
+        ...groupProps
+      } = props,
+      groupId = React.useId(),
+      context = useSelectContext(GROUP_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(GROUP_NAME, __scopeSelect),
+      size = itemParentContext.size ?? "$true",
+      nativeSelectRef = React.useRef(null),
+      content = itemParentContext.shouldRenderWebNative ?
+      // @ts-expect-error until we support typing based on tag
+      /* @__PURE__ */
+      jsx(NativeSelectFrame, {
+        asChild: !0,
+        size,
+        value: context.value,
+        children: /* @__PURE__ */jsx(NativeSelectTextFrame, {
+          onChange: event => {
+            itemParentContext.onChange(event.currentTarget.value);
+          },
+          size,
+          ref: nativeSelectRef,
+          style: {
+            color: "var(--color)",
+            // @ts-ignore
+            appearance: "none"
+          },
+          children: props.children
+        })
+      }) : /* @__PURE__ */jsx(SelectGroupFrame, {
+        role: "group",
+        "aria-labelledby": groupId,
+        ...groupProps,
+        ref: forwardedRef
+      });
+    return /* @__PURE__ */jsx(SelectGroupContextProvider, {
+      scope: __scopeSelect,
+      id: groupId || "",
+      children: content
+    });
+  });
+SelectGroup.displayName = GROUP_NAME;
+const LABEL_NAME = "SelectLabel",
+  SelectLabel = React.forwardRef((props, forwardedRef) => {
+    const {
+        __scopeSelect,
+        ...labelProps
+      } = props,
+      context = useSelectItemParentContext(LABEL_NAME, __scopeSelect),
+      groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return context.shouldRenderWebNative ? null : /* @__PURE__ */jsx(ListItem, {
+      tag: "div",
+      componentName: LABEL_NAME,
+      fontWeight: "800",
+      id: groupContext.id,
+      size: context.size,
+      ...labelProps,
+      ref: forwardedRef
+    });
+  });
+SelectLabel.displayName = LABEL_NAME;
+const SelectSeparator = styled(Separator, {
+    name: "SelectSeparator"
+  }),
+  SelectSheetController = props => {
+    const context = useSelectContext("SelectSheetController", props.__scopeSelect),
+      showSheet = useShowSelectSheet(context),
+      breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint),
+      getShowSheet = useGet(showSheet);
+    return /* @__PURE__ */jsx(SheetController, {
+      onOpenChange: val => {
+        getShowSheet() && props.onOpenChange(val);
+      },
+      open: context.open,
+      hidden: breakpointActive === !1,
+      children: props.children
+    });
+  },
+  SelectSheetImpl = props => /* @__PURE__ */jsx(Fragment, {
+    children: props.children
+  }),
+  Select = withStaticProperties(props => {
+    const {
+        __scopeSelect,
+        native,
+        children,
+        open: openProp,
+        defaultOpen,
+        onOpenChange,
+        value: valueProp,
+        defaultValue,
+        onValueChange,
+        disablePreventBodyScroll,
+        size: sizeProp = "$true",
+        onActiveChange,
+        dir
+      } = props,
+      id = React.useId(),
+      scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id,
+      {
+        when,
+        AdaptProvider
+      } = useAdaptParent({
+        Contents: React.useCallback(() => /* @__PURE__ */jsx(PortalHost, {
+          name: `${scopeKey}SheetContents`
+        }), [scopeKey])
+      }),
+      sheetBreakpoint = when,
+      SelectImpl = useSelectBreakpointActive(sheetBreakpoint) || !isWeb ? SelectSheetImpl : SelectInlineImpl,
+      forceUpdate = React.useReducer(() => ({}), {})[1],
+      [selectedItem, setSelectedItem] = React.useState(null),
+      [open, setOpen] = useControllableState({
+        prop: openProp,
+        defaultProp: defaultOpen || !1,
+        onChange: onOpenChange
+      }),
+      [value, setValue] = useControllableState({
+        prop: valueProp,
+        defaultProp: defaultValue || "",
+        onChange: onValueChange,
+        transition: !0
+      });
+    React.useEffect(() => {
+      open && emitValue(value);
+    }, [open]), React.useEffect(() => {
+      emitValue(value);
+    }, [value]);
+    const [activeIndex, setActiveIndex] = React.useState(0),
+      [emitValue, valueSubscribe] = useEmitter(),
+      [emitActiveIndex, activeIndexSubscribe] = useEmitter(),
+      selectedIndexRef = React.useRef(null),
+      activeIndexRef = React.useRef(null),
+      listContentRef = React.useRef([]),
+      [selectedIndex, setSelectedIndex] = React.useState(0),
+      [valueNode, setValueNode] = React.useState(null);
+    useIsomorphicLayoutEffect(() => {
+      selectedIndexRef.current = selectedIndex, activeIndexRef.current = activeIndex;
+    });
+    const shouldRenderWebNative = isWeb && (native === !0 || native === "web" || Array.isArray(native) && native.includes("web")),
+      setActiveIndexDebounced = useDebounce(index => {
+        setActiveIndex(prev => prev !== index ? (typeof index == "number" && emitActiveIndex(index), index) : prev);
+      }, 1, {}, []);
+    return /* @__PURE__ */jsx(AdaptProvider, {
+      children: /* @__PURE__ */jsx(SelectItemParentProvider, {
+        scope: __scopeSelect,
+        initialValue: React.useMemo(() => value, []),
+        size: sizeProp,
+        activeIndexSubscribe,
+        valueSubscribe,
+        setOpen,
+        onChange: React.useCallback(val => {
+          setValue(val), emitValue(val);
+        }, []),
+        onActiveChange: useEvent((...args) => {
+          onActiveChange?.(...args);
+        }),
+        setSelectedIndex,
+        setValueAtIndex: React.useCallback((index, value2) => {
+          listContentRef.current[index] = value2;
+        }, []),
+        shouldRenderWebNative,
+        children: /* @__PURE__ */jsx(SelectProvider, {
+          scope: __scopeSelect,
+          disablePreventBodyScroll,
+          dir,
+          blockSelection: !1,
+          fallback: !1,
+          selectedItem,
+          setSelectedItem,
+          forceUpdate,
+          valueNode,
+          onValueNodeChange: setValueNode,
+          scopeKey,
+          sheetBreakpoint,
+          activeIndex,
+          selectedIndex,
+          setActiveIndex: setActiveIndexDebounced,
+          value,
+          open,
+          native,
+          children: /* @__PURE__ */jsx(SelectSheetController, {
+            onOpenChange: setOpen,
+            __scopeSelect,
+            children: shouldRenderWebNative ? children : /* @__PURE__ */jsx(SelectImpl, {
+              activeIndexRef,
+              listContentRef,
+              selectedIndexRef,
+              ...props,
+              open,
+              value,
+              children
+            })
+          })
+        })
+      })
+    });
+  }, {
+    Adapt,
+    Content: SelectContent,
+    Group: SelectGroup,
+    Icon: SelectIcon,
+    Item: SelectItem,
+    ItemIndicator: SelectItemIndicator,
+    ItemText: SelectItemText,
+    Label: SelectLabel,
+    ScrollDownButton: SelectScrollDownButton,
+    ScrollUpButton: SelectScrollUpButton,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Viewport: SelectViewport,
+    Sheet: Sheet.Controlled
+  });
+function useEmitter() {
+  const listeners = React.useRef();
+  listeners.current || (listeners.current = /* @__PURE__ */new Set());
+  const emit = value => {
+      listeners.current.forEach(l => l(value));
+    },
+    subscribe = React.useCallback(listener => (listeners.current.add(listener), () => {
+      listeners.current.delete(listener);
+    }), []);
+  return [emit, subscribe];
+}
+Select.displayName = SELECT_NAME;
+export { Select, SelectGroupFrame, SelectIcon, SelectSeparator };

package/dist/esm/SelectContent.mjs

@@ -0,0 +1,47 @@
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
+import { Theme, useIsTouchDevice, useThemeName } from "@tamagui/core";
+import { FocusScope } from "@tamagui/focus-scope";
+import { useMemo } from "react";
+import { useSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { useShowSelectSheet } from "./useSelectBreakpointActive.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+const CONTENT_NAME = "SelectContent",
+  SelectContent = ({
+    children,
+    __scopeSelect,
+    zIndex = 1e3,
+    ...focusScopeProps
+  }) => {
+    const context = useSelectContext(CONTENT_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(CONTENT_NAME, __scopeSelect),
+      themeName = useThemeName(),
+      showSheet = useShowSelectSheet(context),
+      contents = /* @__PURE__ */jsx(Theme, {
+        forceClassName: !0,
+        name: themeName,
+        children
+      }),
+      touch = useIsTouchDevice(),
+      overlayStyle = useMemo(() => ({
+        zIndex,
+        pointerEvents: context.open ? "auto" : "none"
+      }), [context.open]);
+    return itemParentContext.shouldRenderWebNative ? /* @__PURE__ */jsx(Fragment, {
+      children
+    }) : showSheet ? context.open ? /* @__PURE__ */jsx(Fragment, {
+      children: contents
+    }) : null : /* @__PURE__ */jsx(FloatingPortal, {
+      children: /* @__PURE__ */jsx(FloatingOverlay, {
+        style: overlayStyle,
+        lockScroll: !context.disablePreventBodyScroll && !!context.open && !touch,
+        children: /* @__PURE__ */jsx(FocusScope, {
+          loop: !0,
+          enabled: !!context.open,
+          trapped: !0,
+          ...focusScopeProps,
+          children: contents
+        })
+      })
+    });
+  };
+export { SelectContent };

package/dist/esm/SelectImpl.mjs

@@ -0,0 +1,233 @@
+import { flip, inner, offset, shift, size, useClick, useDismiss, useFloating, useInnerOffset, useInteractions, useListNavigation, useRole, useTypeahead } from "@floating-ui/react";
+import { isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useEvent, useIsTouchDevice } from "@tamagui/core";
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from "./constants.mjs";
+import { SelectItemParentProvider, SelectProvider, useSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+const SelectInlineImpl = props => {
+  const {
+      __scopeSelect,
+      children,
+      open = !1,
+      selectedIndexRef,
+      listContentRef
+    } = props,
+    selectContext = useSelectContext("SelectSheetImpl", __scopeSelect),
+    selectItemParentContext = useSelectItemParentContext("SelectSheetImpl", __scopeSelect),
+    {
+      setActiveIndex,
+      selectedIndex,
+      activeIndex,
+      forceUpdate
+    } = selectContext,
+    {
+      setOpen,
+      setSelectedIndex
+    } = selectItemParentContext,
+    [scrollTop, setScrollTop] = React.useState(0),
+    touch = useIsTouchDevice(),
+    listItemsRef = React.useRef([]),
+    overflowRef = React.useRef(null),
+    upArrowRef = React.useRef(null),
+    downArrowRef = React.useRef(null),
+    allowSelectRef = React.useRef(!1),
+    allowMouseUpRef = React.useRef(!0),
+    selectTimeoutRef = React.useRef(),
+    state = React.useRef({
+      isMouseOutside: !1
+    }),
+    [controlledScrolling, setControlledScrolling] = React.useState(!1),
+    [fallback, setFallback] = React.useState(!1),
+    [innerOffset, setInnerOffset] = React.useState(0),
+    [blockSelection, setBlockSelection] = React.useState(!1),
+    floatingStyle = React.useRef({});
+  useIsomorphicLayoutEffect(() => {
+    queueMicrotask(() => {
+      open || (setScrollTop(0), setFallback(!1), setActiveIndex(null), setControlledScrolling(!1));
+    });
+  }, [open, setActiveIndex]), isWeb && isClient && useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    const mouseUp = e => {
+      state.current.isMouseOutside && setOpen(!1);
+    };
+    return document.addEventListener("mouseup", mouseUp), () => {
+      document.removeEventListener("mouseup", mouseUp);
+    };
+  }, [open]);
+  const flipOrShiftMiddlewares = [touch ? shift({
+      crossAxis: !0,
+      padding: WINDOW_PADDING
+    }) : flip({
+      padding: WINDOW_PADDING
+    })],
+    {
+      x,
+      y,
+      strategy,
+      context,
+      refs,
+      update
+    } = useFloating({
+      open,
+      onOpenChange: setOpen,
+      placement: "bottom-start",
+      middleware: [size({
+        apply({
+          rects: {
+            reference: {
+              width
+            }
+          }
+        }) {
+          floatingStyle.current = {
+            minWidth: width + 8
+          };
+        }
+      }), ...flipOrShiftMiddlewares, inner({
+        listRef: listItemsRef,
+        overflowRef,
+        index: selectedIndex,
+        offset: innerOffset,
+        // onFallbackChange: setFallback,
+        padding: 10,
+        minItemsVisible: touch ? 10 : 4,
+        referenceOverflowThreshold: 20
+      }), offset({
+        crossAxis: -5
+      })]
+    });
+  useIsomorphicLayoutEffect(() => (window.addEventListener("resize", update), open && update(), () => window.removeEventListener("resize", update)), [update, open]);
+  const floatingRef = refs.floating,
+    showUpArrow = open && scrollTop > SCROLL_ARROW_THRESHOLD,
+    showDownArrow = open && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD,
+    onMatch = useEvent(index => (open ? setActiveIndex : setSelectedIndex)(index)),
+    interactionsProps = [useClick(context, {
+      event: "mousedown",
+      keyboardHandlers: !1
+    }), useDismiss(context, {
+      outsidePress: !1
+    }), useRole(context, {
+      role: "listbox"
+    }), useInnerOffset(context, {
+      enabled: !fallback && (!!showUpArrow || !!showDownArrow),
+      onChange: setInnerOffset,
+      overflowRef,
+      scrollRef: refs.floating
+    }), useListNavigation(context, {
+      listRef: listItemsRef,
+      activeIndex: activeIndex || 0,
+      selectedIndex,
+      onNavigate: setActiveIndex
+    }), useTypeahead(context, {
+      listRef: listContentRef,
+      onMatch,
+      selectedIndex,
+      activeIndex
+    })],
+    interactions = useInteractions(
+    // unfortunately these memos will just always break due to floating-ui context always changing :/
+    React.useMemo(() => interactionsProps, interactionsProps)),
+    interactionsContext = React.useMemo(() => ({
+      ...interactions,
+      getReferenceProps() {
+        return interactions.getReferenceProps({
+          ref: refs.reference,
+          className: "SelectTrigger",
+          onKeyDown(event) {
+            (event.key === "Enter" || event.code === "Space" || event.key === " " && !context.dataRef.current.typing) && (event.preventDefault(), setOpen(!0));
+          }
+        });
+      },
+      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(!1), state.current.isMouseOutside = !1;
+          },
+          onPointerLeave() {
+            state.current.isMouseOutside = !0;
+          },
+          onPointerMove() {
+            state.current.isMouseOutside = !1, setControlledScrolling(!1);
+          },
+          onKeyDown() {
+            setControlledScrolling(!0);
+          },
+          onContextMenu(e) {
+            e.preventDefault();
+          },
+          onScroll(event) {
+            flushSync(() => setScrollTop(event.currentTarget.scrollTop));
+          }
+        });
+      }
+    }), [refs.reference.current, x, y, refs.floating.current, interactions]);
+  return useIsomorphicLayoutEffect(() => {
+    if (open) return selectTimeoutRef.current = setTimeout(() => {
+      allowSelectRef.current = !0;
+    }, 300), () => {
+      clearTimeout(selectTimeoutRef.current);
+    };
+    allowSelectRef.current = !1, allowMouseUpRef.current = !0, setInnerOffset(0), setFallback(!1), setBlockSelection(!1);
+  }, [open]), useIsomorphicLayoutEffect(() => {
+    !open && state.current.isMouseOutside && (state.current.isMouseOutside = !1);
+  }, [open]), useIsomorphicLayoutEffect(() => {
+    function onPointerDown(e) {
+      const target = e.target;
+      refs.floating.current?.contains(target) || upArrowRef.current?.contains(target) || downArrowRef.current?.contains(target) || (setOpen(!1), setControlledScrolling(!1));
+    }
+    if (open) return document.addEventListener("pointerdown", onPointerDown), () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open, refs, setOpen]), React.useEffect(() => {
+    open && controlledScrolling && activeIndex != null && listItemsRef.current[activeIndex]?.scrollIntoView({
+      block: "nearest"
+    }), setScrollTop(refs.floating.current?.scrollTop ?? 0);
+  }, [open, refs, controlledScrolling, activeIndex]), React.useEffect(() => {
+    open && fallback && selectedIndex != null && listItemsRef.current[selectedIndex]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [open, fallback, selectedIndex]), useIsomorphicLayoutEffect(() => {
+    refs.floating.current && fallback && (refs.floating.current.style.maxHeight = "");
+  }, [refs, fallback]), /* @__PURE__ */jsx(SelectProvider, {
+    scope: __scopeSelect,
+    ...selectContext,
+    setScrollTop,
+    setInnerOffset,
+    fallback,
+    floatingContext: context,
+    activeIndex,
+    canScrollDown: !!showDownArrow,
+    canScrollUp: !!showUpArrow,
+    controlledScrolling,
+    blockSelection,
+    upArrowRef,
+    downArrowRef,
+    update,
+    children: /* @__PURE__ */jsx(SelectItemParentProvider, {
+      scope: __scopeSelect,
+      ...selectItemParentContext,
+      allowMouseUpRef,
+      allowSelectRef,
+      dataRef: context.dataRef,
+      interactions: interactionsContext,
+      listRef: listItemsRef,
+      selectTimeoutRef,
+      children
+    })
+  });
+};
+export { SelectInlineImpl };