@tamagui/select 1.0.1-beta.99 → 1.0.1-rc.0

package/dist/jsx/Select.js

@@ -1,233 +1,190 @@
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  autoUpdate,
-  detectOverflow,
-  flip,
-  offset,
-  size,
-  useClick,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useListNavigation,
-  useRole,
-  useTypeahead
-} from "@floating-ui/react-dom-interactions";
-import { usePrevious } from "@radix-ui/react-use-previous";
+import { Adapt, useAdaptParent } from "@tamagui/adapt";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import {
-  Theme,
-  styled,
-  useIsomorphicLayoutEffect,
-  useThemeName,
-  withStaticProperties
-} from "@tamagui/core";
+import { isWeb } from "@tamagui/core";
+import { styled, useGet, useIsomorphicLayoutEffect, withStaticProperties } from "@tamagui/core";
 import { useId } from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
 import { ListItem } from "@tamagui/list-item";
+import { PortalHost } from "@tamagui/portal";
 import { Separator } from "@tamagui/separator";
-import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
-import { Paragraph } from "@tamagui/text";
+import { ControlledSheet, SheetController } from "@tamagui/sheet";
+import { XStack, YStack } from "@tamagui/stacks";
+import { Paragraph, SizableText } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
-const userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
-const isFirefox = userAgent.toLowerCase().includes("firefox");
-if (isFirefox) {
-  document.body.classList.add("firefox");
-}
-function getVisualOffsetTop() {
-  var _a;
-  return !/^((?!chrome|android).)*safari/i.test(userAgent) ? (_a = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _a : 0 : 0;
-}
-const SELECT_NAME = "Select";
-const WINDOW_PADDING = 8;
-const SCROLL_ARROW_VELOCITY = 8;
-const SCROLL_ARROW_THRESHOLD = 8;
-const MIN_HEIGHT = 80;
-const FALLBACK_THRESHOLD = 16;
-const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
-const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
+import { SELECT_NAME } from "./constants";
+import { SelectProvider, createSelectContext, useSelectContext } from "./context";
+import { SelectContent } from "./SelectContent";
+import { SelectInlineImpl } from "./SelectImpl";
+import { SelectScrollDownButton, SelectScrollUpButton } from "./SelectScrollButton";
+import { SelectViewport } from "./SelectViewport";
+import { useSelectBreakpointActive, useShowSelectSheet } from "./useSelectBreakpointActive";
 const TRIGGER_NAME = "SelectTrigger";
-const SelectTrigger = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeSelect,
-    disabled = false,
-    "aria-labelledby": ariaLabelledby,
-    ...triggerProps
-  } = props;
-  const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
-  return <ListItem backgrounded radiused hoverTheme pressTheme focusTheme focusable={false} borderWidth={1} componentName={TRIGGER_NAME} size={context.size} aria-expanded={context.open} aria-autocomplete="none" disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={forwardedRef} {...context.interactions.getReferenceProps()} />;
-});
+const SelectTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      disabled = false,
+      "aria-labelledby": ariaLabelledby,
+      ...triggerProps
+    } = props;
+    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
+    const labelledBy = ariaLabelledby;
+    return <ListItem componentName={TRIGGER_NAME} backgrounded radiused hoverTheme pressTheme focusTheme focusable borderWidth={1} size={context.size} aria-expanded={context.open} aria-autocomplete="none" aria-labelledby={labelledBy} dir={context.dir} disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={forwardedRef} {...process.env.TAMAGUI_TARGET === "web" && context.interactions ? context.interactions.getReferenceProps() : {
+      onPress() {
+        context.setOpen(!context.open);
+      }
+    }} />;
+  }
+);
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
 const SelectValueFrame = styled(Paragraph, {
   name: VALUE_NAME,
   selectable: false
 });
-const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children, placeholder }, forwardedRef) => {
-  const context = useSelectContext(VALUE_NAME, __scopeSelect);
-  const { onValueNodeHasChildrenChange } = context;
-  const hasChildren = children !== void 0;
-  const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
-  React.useLayoutEffect(() => {
-    onValueNodeHasChildrenChange(hasChildren);
-  }, [onValueNodeHasChildrenChange, hasChildren]);
-  return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{context.value === void 0 && placeholder !== void 0 ? placeholder : children}</SelectValueFrame>;
-}));
+const SelectValue = SelectValueFrame.extractable(
+  React.forwardRef(
+    ({ __scopeSelect, children: childrenProp, placeholder }, forwardedRef) => {
+      const context = useSelectContext(VALUE_NAME, __scopeSelect);
+      const { onValueNodeHasChildrenChange } = context;
+      const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
+      const children = childrenProp ?? context.selectedItem;
+      const hasChildren = !!children;
+      const selectValueChildren = context.value === void 0 && placeholder !== void 0 ? placeholder : children;
+      useIsomorphicLayoutEffect(() => {
+        onValueNodeHasChildrenChange(hasChildren);
+      }, [onValueNodeHasChildrenChange, hasChildren]);
+      return <SelectValueFrame size={context.size} ref={composedRefs} pointerEvents="none">{selectValueChildren}</SelectValueFrame>;
+    }
+  )
+);
 SelectValue.displayName = VALUE_NAME;
 const SelectIcon = styled(XStack, {
   name: "SelectIcon",
   "aria-hidden": true,
   children: <Paragraph>{"\u25BC"}</Paragraph>
 });
-const CONTENT_NAME = "SelectContent";
-const SelectContent = ({ children, __scopeSelect }) => {
-  const context = useSelectContext(CONTENT_NAME, __scopeSelect);
-  const themeName = useThemeName();
-  const contents = <Theme name={themeName}>{children}</Theme>;
-  return <FloatingPortal>{context.open ? <FloatingOverlay lockScroll>{contents}</FloatingOverlay> : <div style={{ display: "none" }}>{contents}</div>}</FloatingPortal>;
-};
-const VIEWPORT_NAME = "SelectViewport";
-const SelectViewportFrame = styled(ThemeableStack, {
-  name: VIEWPORT_NAME,
-  backgroundColor: "$background",
-  elevate: true,
-  bordered: true,
-  overflow: "scroll",
-  userSelect: "none",
-  variants: {
-    size: {
-      "...size": (val, { tokens }) => {
-        var _a;
-        return {
-          borderRadius: (_a = tokens.radius[val]) != null ? _a : val
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$2"
-  }
-});
-const SelectViewport = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, children, ...viewportProps } = props;
-  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
-  const { style, ...floatingProps } = context.interactions.getFloatingProps();
-  delete style["scrollbarWidth"];
-  delete style["listStyleType"];
-  return <>
-    <style dangerouslySetInnerHTML={{
-      __html: `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`
-    }} />
-    <FloatingFocusManager context={context.floatingContext} preventTabbing><SelectViewportFrame size={context.size} data-tamagui-select-viewport="" role="presentation" {...viewportProps} ref={forwardedRef} {...floatingProps} {...style}>{children}</SelectViewportFrame></FloatingFocusManager>
-  </>;
-});
-SelectViewport.displayName = VIEWPORT_NAME;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-const SelectItem = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeSelect,
-    value,
-    disabled = false,
-    textValue: textValueProp,
-    index,
-    ...itemProps
-  } = props;
-  const context = useSelectContext(ITEM_NAME, __scopeSelect);
-  const isSelected = context.value === value;
-  const [textValue, setTextValue] = React.useState(textValueProp != null ? textValueProp : "");
-  const [isFocused, setIsFocused] = React.useState(false);
-  const textId = useId();
-  const {
-    selectedIndex,
-    setSelectedIndex,
-    listRef,
-    open,
-    setOpen,
-    onChange,
-    activeIndex,
-    setActiveIndex,
-    setValueAtIndex,
-    dataRef
-  } = context;
-  const composedRefs = useComposedRefs(forwardedRef, (node) => {
-    if (node instanceof HTMLElement) {
-      listRef.current[index] = node;
-    }
-  });
-  React.useEffect(() => {
-    setValueAtIndex(index, value);
-  }, [index]);
-  const timeoutRef = React.useRef();
-  const [allowMouseUp, setAllowMouseUp] = React.useState(false);
-  function handleSelect() {
-    setSelectedIndex(index);
-    onChange(value);
-    setOpen(false);
-  }
-  React.useLayoutEffect(() => {
-    clearTimeout(timeoutRef.current);
-    if (open) {
-      if (selectedIndex !== index) {
-        setAllowMouseUp(true);
-      } else {
-        timeoutRef.current = setTimeout(() => {
-          setAllowMouseUp(true);
-        }, 300);
+const SelectItem = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeSelect,
+      value,
+      disabled = false,
+      textValue: textValueProp,
+      index,
+      ...itemProps
+    } = props;
+    const context = useSelectContext(ITEM_NAME, __scopeSelect);
+    const isSelected = context.value === value;
+    const textId = useId();
+    const {
+      selectedIndex,
+      setSelectedIndex,
+      listRef,
+      open,
+      setOpen,
+      onChange,
+      setActiveIndex,
+      allowMouseUpRef,
+      allowSelectRef,
+      setValueAtIndex,
+      selectTimeoutRef,
+      dataRef
+    } = context;
+    const composedRefs = useComposedRefs(forwardedRef, (node) => {
+      if (!isWeb)
+        return;
+      if (node instanceof HTMLElement) {
+        if (listRef) {
+          listRef.current[index] = node;
+        }
       }
-    } else {
-      setAllowMouseUp(false);
-    }
-  }, [open, index, setActiveIndex, selectedIndex]);
-  function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " " && !dataRef.current.typing) {
-      event.preventDefault();
-      handleSelect();
+    });
+    React.useEffect(() => {
+      setValueAtIndex(index, value);
+    }, [index, setValueAtIndex, value]);
+    function handleSelect() {
+      setSelectedIndex(index);
+      onChange(value);
+      setOpen(false);
     }
+    const selectItemProps = context.interactions ? context.interactions.getItemProps({
+      onTouchStart() {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = false;
+      },
+      onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " " && !dataRef?.current.typing) {
+          event.preventDefault();
+          handleSelect();
+        } else {
+          allowSelectRef.current = true;
+        }
+      },
+      onClick() {
+        if (allowSelectRef.current) {
+          setSelectedIndex(index);
+          setOpen(false);
+        }
+      },
+      onMouseUp() {
+        if (!allowMouseUpRef.current) {
+          return;
+        }
+        if (allowSelectRef.current) {
+          handleSelect();
+        }
+        clearTimeout(selectTimeoutRef.current);
+        selectTimeoutRef.current = setTimeout(() => {
+          allowSelectRef.current = true;
+        });
+      }
+    }) : {
+      onPress: handleSelect
+    };
+    return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected}><ListItem backgrounded pressTheme cursor="" focusTheme componentName={ITEM_NAME} ref={composedRefs} aria-labelledby={textId} aria-selected={isSelected} data-state={isSelected ? "active" : "inactive"} aria-disabled={disabled || void 0} data-disabled={disabled ? "" : void 0} tabIndex={disabled ? void 0 : -1} size={context.size} {...itemProps} {...selectItemProps} /></SelectItemContextProvider>;
   }
-  const selectItemProps = context.interactions.getItemProps({
-    onClick: allowMouseUp ? handleSelect : void 0,
-    onMouseUp: allowMouseUp ? handleSelect : void 0,
-    onKeyDown: handleKeyDown
-  });
-  return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected} onItemTextChange={React.useCallback((node) => {
-    setTextValue((prevTextValue) => {
-      var _a;
-      return prevTextValue || ((_a = node == null ? void 0 : node.textContent) != null ? _a : "").trim();
-    });
-  }, [])}><ListItem backgrounded pressTheme focusTheme componentName={ITEM_NAME} ref={composedRefs} aria-labelledby={textId} aria-selected={isSelected && isFocused} data-state={isSelected ? "active" : "inactive"} aria-disabled={disabled || void 0} data-disabled={disabled ? "" : void 0} tabIndex={disabled ? void 0 : -1} size={context.size} {...itemProps} {...selectItemProps} /></SelectItemContextProvider>;
-});
+);
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
-const SelectItemTextFrame = styled(Paragraph, {
+const SelectItemTextFrame = styled(SizableText, {
   name: ITEM_TEXT_NAME,
   selectable: false
 });
-const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, className, style, ...itemTextProps } = props;
-  const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
-  const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
-  const ref = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange);
-  return <>
-    <SelectItemTextFrame size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />
-    {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
-  </>;
-});
+const SelectItemText = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, className, ...itemTextProps } = props;
+    const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
+    const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref);
+    const isSelected = Boolean(itemContext.isSelected && context.valueNode);
+    const contents = React.useMemo(
+      () => <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />,
+      [props, context.size, className, itemContext.textId]
+    );
+    React.useEffect(() => {
+      if (isSelected) {
+        context.setSelectedItem(contents);
+      }
+    }, [isSelected, contents]);
+    return <>{contents}</>;
+  }
+);
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
 const SelectItemIndicatorFrame = styled(XStack, {
   name: ITEM_TEXT_NAME
 });
-const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...itemIndicatorProps } = props;
-  const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
-});
+const SelectItemIndicator = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...itemIndicatorProps } = props;
+    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+    return itemContext.isSelected ? <SelectItemIndicatorFrame aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
+  }
+);
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
 const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
@@ -235,470 +192,118 @@ const SelectGroupFrame = styled(YStack, {
   name: GROUP_NAME,
   width: "100%"
 });
-const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...groupProps } = props;
-  const groupId = useId();
-  return <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ""}><SelectGroupFrame role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
-});
+const SelectGroup = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...groupProps } = props;
+    const groupId = useId();
+    return <SelectGroupContextProvider scope={__scopeSelect} id={groupId || ""}><SelectGroupFrame role="group" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} /></SelectGroupContextProvider>;
+  }
+);
 SelectGroup.displayName = GROUP_NAME;
 const LABEL_NAME = "SelectLabel";
-const SelectLabel = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...labelProps } = props;
-  const context = useSelectContext(LABEL_NAME, __scopeSelect);
-  const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} size={context.size} {...labelProps} ref={forwardedRef} />;
-});
-SelectLabel.displayName = LABEL_NAME;
-const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
-  return <SelectScrollButtonImpl componentName={SCROLL_UP_BUTTON_NAME} {...props} dir="up" ref={forwardedRef} />;
-});
-SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
-const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-const SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
-  return <SelectScrollButtonImpl componentName={SCROLL_DOWN_BUTTON_NAME} {...props} dir="down" ref={forwardedRef} />;
-});
-SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
-  var _a, _b;
-  const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props;
-  const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(componentName, __scopeSelect);
-  const intervalRef = React.useRef();
-  const loopingRef = React.useRef(false);
-  const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
-  const { x, y, reference, floating, strategy, update, refs } = useFloating({
-    strategy: "fixed",
-    placement: dir === "up" ? "top" : "bottom",
-    middleware: [offset(({ rects }) => -rects.floating.height)]
-  });
-  const composedRefs = useComposedRefs(forwardedRef, floating);
-  React.useLayoutEffect(() => {
-    reference(floatingRef.current);
-  }, [reference, floatingRef.current]);
-  React.useEffect(() => {
-    if (!refs.reference.current || !refs.floating.current || !isVisible) {
-      return;
-    }
-    const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
-      animationFrame: true
-    });
-    return () => {
-      clearInterval(intervalRef.current);
-      loopingRef.current = false;
-      cleanup();
-    };
-  }, [isVisible, update, refs.floating, refs.reference]);
-  if (!isVisible) {
-    return null;
+const SelectLabel = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSelect, ...labelProps } = props;
+    const context = useSelectContext(LABEL_NAME, __scopeSelect);
+    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+    return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} size={context.size} {...labelProps} ref={forwardedRef} />;
   }
-  const handleScrollArrowChange = () => {
-    const floating2 = floatingRef.current;
-    const isUp = dir === "up";
-    if (floating2) {
-      const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY;
-      const multi = isUp && floating2.scrollTop <= SCROLL_ARROW_THRESHOLD * 2 || !isUp && floating2.scrollTop >= floating2.scrollHeight - floating2.clientHeight - SCROLL_ARROW_THRESHOLD * 2 ? 2 : 1;
-      floating2.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY);
-      increaseHeight(floating2, multi === 2 ? value * 2 : value);
-      forceUpdate();
-    }
-  };
-  return <YStack ref={composedRefs} componentName={componentName} aria-hidden {...scrollIndicatorProps} zIndex={1e3} position={strategy} left={x || 0} top={y || 0} width={`calc(${((_b = (_a = floatingRef.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0) - 2}px)`} onPointerMove={() => {
-    if (!loopingRef.current) {
-      intervalRef.current = setInterval(handleScrollArrowChange, 1e3 / 60);
-      loopingRef.current = true;
-    }
-  }} onPointerLeave={() => {
-    loopingRef.current = false;
-    clearInterval(intervalRef.current);
-  }} />;
-});
+);
+SelectLabel.displayName = LABEL_NAME;
 const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
 });
-const Select = withStaticProperties((props) => {
-  const {
-    id,
-    __scopeSelect,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    size: sizeProp,
-    dir,
-    name,
-    autoComplete
-  } = props;
-  const [open, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen || false,
-    onChange: onOpenChange
-  });
-  const [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const selectedIndexRef = React.useRef(null);
-  const activeIndexRef = React.useRef(null);
-  const prevActiveIndex = usePrevious(activeIndex);
-  const [showArrows, setShowArrows] = React.useState(false);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const listItemsRef = React.useRef([]);
-  const listContentRef = React.useRef([]);
-  const [selectedIndex, setSelectedIndex] = React.useState(Math.max(0, listContentRef.current.indexOf(value)));
-  const [controlledScrolling, setControlledScrolling] = React.useState(false);
-  const [middlewareType, setMiddlewareType] = React.useState("align");
-  useIsomorphicLayoutEffect(() => {
-    selectedIndexRef.current = selectedIndex;
-    activeIndexRef.current = activeIndex;
-  });
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
-    });
-    return () => {
-      cancelAnimationFrame(frame);
-    };
-  }, [open]);
-  function getFloatingPadding(floating2) {
-    var _a;
-    if (!floating2) {
-      return 0;
-    }
-    return Number((_a = getComputedStyle(floating2).paddingLeft) == null ? void 0 : _a.replace("px", ""));
-  }
-  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } = useFloating({
-    open,
-    onOpenChange: setOpen,
-    placement: "bottom",
-    middleware: middlewareType === "align" ? [
-      offset(({ rects }) => {
-        var _a;
-        const index = (_a = activeIndexRef.current) != null ? _a : selectedIndexRef.current;
-        if (index == null) {
-          return 0;
-        }
-        const item = listItemsRef.current[index];
-        if (item == null) {
-          return 0;
-        }
-        const offsetTop = item.offsetTop;
-        const itemHeight = item.offsetHeight;
-        const height = rects.reference.height;
-        return -offsetTop - height - (itemHeight - height) / 2;
-      }),
-      {
-        name: "size",
-        async fn(args) {
-          var _a;
-          const {
-            elements: { floating: floating2 },
-            rects: { reference: reference2 },
-            middlewareData: middlewareData2
-          } = args;
-          const overflow = await detectOverflow(args, {
-            padding: WINDOW_PADDING
-          });
-          const top = Math.max(0, overflow.top);
-          const bottom = Math.max(0, overflow.bottom);
-          const nextY = args.y + top;
-          if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
-            return {
-              y: nextY,
-              data: {
-                y: middlewareData2.size.y
-              }
-            };
-          }
-          Object.assign(floating2.style, {
-            maxHeight: `${floating2.scrollHeight - Math.abs(top + bottom)}px`,
-            minWidth: `${reference2.width + getFloatingPadding(floating2) * 2}px`
-          });
-          return {
-            y: nextY,
-            data: {
-              y: top,
-              skip: true
-            },
-            reset: {
-              rects: true
-            }
-          };
-        }
-      }
-    ] : [
-      offset(5),
-      flip(),
-      size({
-        apply({ rects, availableHeight, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        },
-        padding: WINDOW_PADDING
-      })
-    ]
-  });
-  const floatingRef = refs.floating;
-  const forceUpdate = React.useReducer(() => ({}), {})[1];
-  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
-  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
-  const interactions = useInteractions([
-    useClick(context, { pointerDown: true }),
-    useRole(context, { role: "listbox" }),
-    useDismiss(context),
-    useListNavigation(context, {
-      listRef: listItemsRef,
-      activeIndex,
-      selectedIndex,
-      onNavigate: setActiveIndex
-    }),
-    useTypeahead(context, {
-      listRef: listContentRef,
-      onMatch: open ? setActiveIndex : setSelectedIndex,
-      selectedIndex,
-      activeIndex
-    })
-  ]);
-  const increaseHeight = React.useCallback((floating2, amount = 0) => {
-    var _a;
-    if (middlewareType === "fallback") {
-      return;
-    }
-    const currentMaxHeight = Number(floating2.style.maxHeight.replace("px", ""));
-    const currentTop = Number(floating2.style.top.replace("px", ""));
-    const rect = floating2.getBoundingClientRect();
-    const rectTop = rect.top;
-    const rectBottom = rect.bottom;
-    const viewportHeight = (_a = visualViewport == null ? void 0 : visualViewport.height) != null ? _a : 0;
-    const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2;
-    if (amount < 0 && selectedIndexRef.current != null && Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)) {
-      floating2.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`;
-    }
-    if (amount > 0 && Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) && floating2.scrollHeight > floating2.offsetHeight) {
-      const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount);
-      const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount);
-      Object.assign(floating2.style, {
-        maxHeight: `${nextMaxHeight}px`,
-        top: `${nextTop}px`
-      });
-      if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
-        floating2.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating2);
-      }
-      return currentTop - nextTop;
-    }
-  }, [middlewareType]);
-  const touchPageYRef = React.useRef(null);
-  const handleWheel = React.useCallback((event) => {
-    var _a, _b, _c;
-    const pinching = event.ctrlKey;
-    const currentTarget = event.currentTarget;
-    function isWheelEvent(event2) {
-      return typeof event2.deltaY === "number";
-    }
-    function isTouchEvent(event2) {
-      return event2.touches != null;
-    }
-    if (Math.abs(((_a = currentTarget == null ? void 0 : currentTarget.offsetHeight) != null ? _a : 0) - (((_b = visualViewport == null ? void 0 : visualViewport.height) != null ? _b : 0) - WINDOW_PADDING * 2)) > 1 && !pinching) {
-      event.preventDefault();
-    } else if (isWheelEvent(event) && isFirefox) {
-      currentTarget.scrollTop += event.deltaY;
-    }
-    if (!pinching) {
-      let delta = 5;
-      if (isTouchEvent(event)) {
-        const currentPageY = touchPageYRef.current;
-        const pageY = (_c = event.touches[0]) == null ? void 0 : _c.pageY;
-        if (pageY != null) {
-          touchPageYRef.current = pageY;
-          if (currentPageY != null) {
-            delta = currentPageY - pageY;
-          }
-        }
-      }
-      increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta);
-      setScrollTop(currentTarget.scrollTop);
-      forceUpdate();
-    }
-  }, [increaseHeight, forceUpdate]);
-  React.useEffect(() => {
-    function onTouchEnd() {
-      touchPageYRef.current = null;
-    }
-    const floating2 = floatingRef.current;
-    if (open && floating2 && middlewareType === "align") {
-      floating2.addEventListener("wheel", handleWheel);
-      floating2.addEventListener("touchmove", handleWheel);
-      floating2.addEventListener("touchend", onTouchEnd, { passive: true });
-      return () => {
-        floating2.removeEventListener("wheel", handleWheel);
-        floating2.removeEventListener("touchmove", handleWheel);
-        floating2.removeEventListener("touchend", onTouchEnd);
-      };
-    }
-  }, [open, floatingRef, handleWheel, middlewareType]);
-  React.useEffect(() => {
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("resize", update);
-    };
-  }, [update]);
-  React.useLayoutEffect(() => {
-    var _a, _b, _c;
-    const floating2 = floatingRef.current;
-    if (open && controlledScrolling && floating2) {
-      const item = activeIndex != null ? listItemsRef.current[activeIndex] : selectedIndex != null ? listItemsRef.current[selectedIndex] : null;
-      if (item && prevActiveIndex != null) {
-        const itemHeight = (_b = (_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) != null ? _b : 0;
-        const floatingHeight = floating2.offsetHeight;
-        const top = item.offsetTop;
-        const bottom = top + itemHeight;
-        if (top < floating2.scrollTop + 20) {
-          const diff = floating2.scrollTop - top + 20;
-          floating2.scrollTop -= diff;
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            increaseHeight(floating2, -diff);
-          }
-        } else if (bottom > floatingHeight + floating2.scrollTop - 20) {
-          const diff = bottom - floatingHeight - floating2.scrollTop + 20;
-          floating2.scrollTop += diff;
-          if (activeIndex != selectedIndex && activeIndex != null) {
-            floating2.scrollTop -= (_c = increaseHeight(floating2, diff)) != null ? _c : 0;
-          }
-        }
-      }
+const SelectSheetController = (props) => {
+  const context = useSelectContext("SelectSheetController", props.__scopeSelect);
+  const showSheet = useShowSelectSheet(context);
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  const getShowSheet = useGet(showSheet);
+  return <SheetController onOpenChange={(val) => {
+    if (getShowSheet()) {
+      props.onOpenChange(val);
     }
-  }, [
-    open,
-    controlledScrolling,
-    prevActiveIndex,
-    activeIndex,
-    selectedIndex,
-    floatingRef,
-    increaseHeight
-  ]);
-  React.useLayoutEffect(() => {
-    var _a, _b;
-    const floating2 = refs.floating.current;
-    const reference2 = refs.reference.current;
-    if (open && floating2 && reference2 && floating2.offsetHeight < floating2.scrollHeight) {
-      const referenceRect = reference2.getBoundingClientRect();
-      if (middlewareType === "fallback") {
-        const item = listItemsRef.current[selectedIndex];
-        if (item) {
-          floating2.scrollTop = item.offsetTop - floating2.clientHeight + referenceRect.height;
-        }
-        return;
-      }
-      floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
-      const closeToBottom = ((_b = visualViewport == null ? void 0 : visualViewport.height) != null ? _b : 0) + getVisualOffsetTop() - referenceRect.bottom < FALLBACK_THRESHOLD;
-      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD;
-      if (floating2.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
-        setMiddlewareType("fallback");
-      }
-    }
-  }, [
-    open,
-    increaseHeight,
-    selectedIndex,
-    middlewareType,
-    refs.floating,
-    refs.reference,
-    middlewareData
-  ]);
-  React.useLayoutEffect(() => {
-    if (open && selectedIndex != null) {
-      requestAnimationFrame(() => {
-        var _a;
-        (_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.focus({ preventScroll: true });
-      });
-    }
-  }, [listItemsRef, selectedIndex, open]);
-  React.useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      setShowArrows(open);
-      if (!open) {
-        setScrollTop(0);
-        setMiddlewareType("align");
-        setActiveIndex(null);
-        setControlledScrolling(false);
-      }
+  }} open={context.open} hidden={breakpointActive === false}>{props.children}</SheetController>;
+};
+const SHEET_CONTENTS_NAME = "SelectSheetContents";
+const SelectSheetContents = ({ __scopeSelect }) => {
+  const context = useSelectContext(SHEET_CONTENTS_NAME, __scopeSelect);
+  return <PortalHost name={`${context.scopeKey}SheetContents`} />;
+};
+SelectSheetContents.displayName = SHEET_CONTENTS_NAME;
+const SelectSheetImpl = (props) => {
+  return <>{props.children}</>;
+};
+const Select = withStaticProperties(
+  (props) => {
+    const {
+      __scopeSelect,
+      children,
+      open: openProp,
+      defaultOpen,
+      onOpenChange,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      size: sizeProp = "$4",
+      dir
+    } = props;
+    const { when, AdaptProvider } = useAdaptParent({
+      Contents: SelectSheetContents
     });
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  const [valueNode, setValueNode] = React.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
-  return <SelectProvider size={sizeProp} scope={__scopeSelect} increaseHeight={increaseHeight} forceUpdate={forceUpdate} floatingRef={floatingRef} valueNode={valueNode} onValueNodeChange={setValueNode} valueNodeHasChildren={valueNodeHasChildren} onValueNodeHasChildrenChange={setValueNodeHasChildren} setValueAtIndex={(index, value2) => {
-    listContentRef.current[index] = value2;
-  }} interactions={{
-    ...interactions,
-    getReferenceProps() {
-      return interactions.getReferenceProps({
-        ref: reference,
-        className: "SelectTrigger",
-        onKeyDown(event) {
-          if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
-            event.preventDefault();
-            setOpen(true);
-          }
-        }
-      });
-    },
-    getFloatingProps(props2) {
-      return interactions.getFloatingProps({
-        ref: floating,
-        className: "Select",
-        ...props2,
-        style: {
-          position: strategy,
-          top: y != null ? y : "",
-          left: x != null ? x : "",
-          outline: 0,
-          listStyleType: "none",
-          scrollbarWidth: "none",
-          userSelect: "none",
-          ...props2 == null ? void 0 : props2.style
-        },
-        onPointerEnter() {
-          setControlledScrolling(false);
-        },
-        onPointerMove() {
-          setControlledScrolling(false);
-        },
-        onKeyDown() {
-          setControlledScrolling(true);
-        },
-        onScroll(event) {
-          setScrollTop(event.currentTarget.scrollTop);
-        }
-      });
-    }
-  }} floatingContext={context} activeIndex={activeIndex} canScrollDown={!!showDownArrow} canScrollUp={!!showUpArrow} controlledScrolling dataRef={context.dataRef} listRef={listItemsRef} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}>{children}</SelectProvider>;
-}, {
-  Content: SelectContent,
-  Group: SelectGroup,
-  Icon: SelectIcon,
-  Item: SelectItem,
-  ItemIndicator: SelectItemIndicator,
-  ItemText: SelectItemText,
-  Label: SelectLabel,
-  ScrollDownButton: SelectScrollDownButton,
-  ScrollUpButton: SelectScrollUpButton,
-  Trigger: SelectTrigger,
-  Value: SelectValue,
-  Viewport: SelectViewport
-});
+    const sheetBreakpoint = when || false;
+    const isSheet = useSelectBreakpointActive(sheetBreakpoint);
+    const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl;
+    const forceUpdate = React.useReducer(() => ({}), {})[1];
+    const [selectedItem, setSelectedItem] = React.useState(null);
+    const [open, setOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange: onOpenChange,
+      strategy: "most-recent-wins"
+    });
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue || "",
+      onChange: onValueChange,
+      strategy: "most-recent-wins"
+    });
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const selectedIndexRef = React.useRef(null);
+    const activeIndexRef = React.useRef(null);
+    const listContentRef = React.useRef([]);
+    const [selectedIndex, setSelectedIndex] = React.useState(
+      Math.max(0, listContentRef.current.indexOf(value))
+    );
+    const [valueNode, setValueNode] = React.useState(null);
+    const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+      selectedIndexRef.current = selectedIndex;
+      activeIndexRef.current = activeIndex;
+    });
+    const id = useId();
+    const scopeKey = __scopeSelect ? Object.keys(__scopeSelect)[0] ?? id : id;
+    return <AdaptProvider><SelectProvider dir={dir} blockSelection={false} size={sizeProp} fallback={false} selectedItem={selectedItem} setSelectedItem={setSelectedItem} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={scopeKey} sheetBreakpoint={sheetBreakpoint} scope={__scopeSelect} setValueAtIndex={(index, value2) => {
+      listContentRef.current[index] = value2;
+    }} activeIndex={activeIndex} onChange={setValue} selectedIndex={selectedIndex} setActiveIndex={setActiveIndex} setOpen={setOpen} setSelectedIndex={setSelectedIndex} value={value} open={open}><SelectSheetController onOpenChange={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider></AdaptProvider>;
+  },
+  {
+    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,
+    SheetContents: SelectSheetContents,
+    Sheet: ControlledSheet
+  }
+);
 Select.displayName = SELECT_NAME;
 export {
   Select,
@@ -707,9 +312,7 @@ export {
   SelectItem,
   SelectItemTextFrame,
   SelectSeparator,
-  SelectTrigger,
-  SelectViewport,
-  SelectViewportFrame,
-  createSelectScope
+  SelectSheetContents,
+  SelectTrigger
 };
 //# sourceMappingURL=Select.js.map