@tamagui/select 1.0.1-beta.103 → 1.0.1-beta.106

package/dist/jsx/Select.js

@@ -17,9 +17,11 @@ import {
 } from "@floating-ui/react-dom-interactions";
 import { usePrevious } from "@radix-ui/react-use-previous";
 import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb, useMedia } from "@tamagui/core";
 import {
   Theme,
   styled,
+  useGet,
   useIsomorphicLayoutEffect,
   useThemeName,
   withStaticProperties
@@ -27,12 +29,20 @@ import {
 import { useId } from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
 import { ListItem } from "@tamagui/list-item";
+import { PortalHost, PortalItem } from "@tamagui/portal";
 import { Separator } from "@tamagui/separator";
+import { Sheet, SheetController } from "@tamagui/sheet";
 import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
 import { Paragraph } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+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 userAgent = typeof navigator !== "undefined" && navigator.userAgent || "";
 const isFirefox = userAgent.toLowerCase().includes("firefox");
 if (isFirefox) {
@@ -42,12 +52,6 @@ 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);
 const TRIGGER_NAME = "SelectTrigger";
@@ -59,7 +63,12 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     ...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 labelledBy = ariaLabelledby;
+  return <ListItem backgrounded radiused hoverTheme pressTheme focusTheme focusable={false} borderWidth={1} componentName={TRIGGER_NAME} 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} {...context.interactions ? context.interactions.getReferenceProps() : {
+    onPress() {
+      context.setOpen(!context.open);
+    }
+  }} />;
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
@@ -87,7 +96,11 @@ const CONTENT_NAME = "SelectContent";
 const SelectContent = ({ children, __scopeSelect }) => {
   const context = useSelectContext(CONTENT_NAME, __scopeSelect);
   const themeName = useThemeName();
+  const showSheet = useShowSelectSheet(context);
   const contents = <Theme name={themeName}>{children}</Theme>;
+  if (showSheet && context.open) {
+    return contents;
+  }
   return <FloatingPortal>{context.open ? <FloatingOverlay lockScroll>{contents}</FloatingOverlay> : <div style={{ display: "none" }}>{contents}</div>}</FloatingPortal>;
 };
 const VIEWPORT_NAME = "SelectViewport";
@@ -113,9 +126,17 @@ const SelectViewportFrame = styled(ThemeableStack, {
   }
 });
 const SelectViewport = React.forwardRef((props, forwardedRef) => {
+  var _a, _b;
   const { __scopeSelect, children, ...viewportProps } = props;
   const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
-  const { style, ...floatingProps } = context.interactions.getFloatingProps();
+  const { style, ...floatingProps } = (_b = (_a = context.interactions) == null ? void 0 : _a.getFloatingProps()) != null ? _b : {};
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  if (breakpointActive || !isWeb) {
+    return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>;
+  }
+  if (!context.floatingContext) {
+    return null;
+  }
   delete style["scrollbarWidth"];
   delete style["listStyleType"];
   return <>
@@ -156,12 +177,14 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
   } = context;
   const composedRefs = useComposedRefs(forwardedRef, (node) => {
     if (node instanceof HTMLElement) {
-      listRef.current[index] = node;
+      if (listRef) {
+        listRef.current[index] = node;
+      }
     }
   });
   React.useEffect(() => {
     setValueAtIndex(index, value);
-  }, [index]);
+  }, [index, setValueAtIndex, value]);
   const timeoutRef = React.useRef();
   const [allowMouseUp, setAllowMouseUp] = React.useState(false);
   function handleSelect() {
@@ -184,16 +207,18 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     }
   }, [open, index, setActiveIndex, selectedIndex]);
   function handleKeyDown(event) {
-    if (event.key === "Enter" || event.key === " " && !dataRef.current.typing) {
+    if (event.key === "Enter" || event.key === " " && !(dataRef == null ? void 0 : dataRef.current.typing)) {
       event.preventDefault();
       handleSelect();
     }
   }
-  const selectItemProps = context.interactions.getItemProps({
+  const selectItemProps = context.interactions ? context.interactions.getItemProps({
     onClick: allowMouseUp ? handleSelect : void 0,
     onMouseUp: allowMouseUp ? handleSelect : void 0,
     onKeyDown: handleKeyDown
-  });
+  }) : {
+    onPress: handleSelect
+  };
   return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected} onItemTextChange={React.useCallback((node) => {
     setTextValue((prevTextValue) => {
       var _a;
@@ -208,13 +233,13 @@ const SelectItemTextFrame = styled(Paragraph, {
   selectable: false
 });
 const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, className, style, ...itemTextProps } = props;
+  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, itemContext.onItemTextChange);
   return <>
-    <SelectItemTextFrame size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />
+    <SelectItemTextFrame className={className} size={context.size} id={itemContext.textId} {...itemTextProps} ref={composedRefs} />
     {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
   </>;
 });
@@ -259,7 +284,7 @@ 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) => {
+const SelectScrollButtonImpl = React.memo(React.forwardRef((props, forwardedRef) => {
   var _a, _b;
   const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props;
   const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(componentName, __scopeSelect);
@@ -273,8 +298,10 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
   });
   const composedRefs = useComposedRefs(forwardedRef, floating);
   React.useLayoutEffect(() => {
+    if (!floatingRef)
+      return;
     reference(floatingRef.current);
-  }, [reference, floatingRef.current]);
+  }, [reference, floatingRef == null ? void 0 : floatingRef.current]);
   React.useEffect(() => {
     if (!refs.reference.current || !refs.floating.current || !isVisible) {
       return;
@@ -292,17 +319,19 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
     return null;
   }
   const handleScrollArrowChange = () => {
+    if (!floatingRef)
+      return;
     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);
+      increaseHeight == null ? void 0 : 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={() => {
+  return <YStack ref={composedRefs} componentName={componentName} aria-hidden {...scrollIndicatorProps} zIndex={1e3} position={strategy} left={x || 0} top={y || 0} width={`calc(${((_b = (_a = floatingRef == null ? void 0 : 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;
@@ -311,51 +340,52 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
     loopingRef.current = false;
     clearInterval(intervalRef.current);
   }} />;
-});
+}));
 const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
 });
-const Select = withStaticProperties((props) => {
+const useSelectBreakpointActive = (sheetBreakpoint) => {
+  const media = useMedia();
+  return sheetBreakpoint ? media[sheetBreakpoint] : false;
+};
+const useShowSelectSheet = (context) => {
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  return context.open === false ? false : breakpointActive;
+};
+const SelectSheetController = (props) => {
+  const context = useSelectContext("SelectSheetController", props.__scopeSelect);
+  const showSheet = useShowSelectSheet(context);
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  const getShowSheet = useGet(showSheet);
+  return <SheetController onChangeOpen={(val) => {
+    if (getShowSheet()) {
+      props.onChangeOpen(val);
+    }
+  }} 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 SelectInlineImpl = (props) => {
   const {
-    id,
     __scopeSelect,
     children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    size: sizeProp,
-    dir,
-    name,
-    autoComplete
+    open = false,
+    activeIndexRef,
+    selectedIndexRef,
+    listContentRef
   } = 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 selectContext = useSelectContext("SelectSheetImpl", __scopeSelect);
+  const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } = selectContext;
   const [showArrows, setShowArrows] = React.useState(false);
   const [scrollTop, setScrollTop] = React.useState(0);
+  const prevActiveIndex = usePrevious(activeIndex);
   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);
@@ -369,7 +399,7 @@ const Select = withStaticProperties((props) => {
     return () => {
       cancelAnimationFrame(frame);
     };
-  }, [open]);
+  }, [open, setActiveIndex]);
   function getFloatingPadding(floating2) {
     var _a;
     if (!floating2) {
@@ -451,7 +481,6 @@ const Select = withStaticProperties((props) => {
     ]
   });
   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([
@@ -498,7 +527,7 @@ const Select = withStaticProperties((props) => {
       }
       return currentTop - nextTop;
     }
-  }, [middlewareType]);
+  }, [middlewareType, selectedIndexRef]);
   const touchPageYRef = React.useRef(null);
   const handleWheel = React.useCallback((event) => {
     var _a, _b, _c;
@@ -531,7 +560,7 @@ const Select = withStaticProperties((props) => {
       setScrollTop(currentTarget.scrollTop);
       forceUpdate();
     }
-  }, [increaseHeight, forceUpdate]);
+  }, [forceUpdate, increaseHeight]);
   React.useEffect(() => {
     function onTouchEnd() {
       touchPageYRef.current = null;
@@ -637,10 +666,8 @@ const Select = withStaticProperties((props) => {
     });
     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;
+  return <SelectProvider scope={__scopeSelect} {...selectContext} increaseHeight={increaseHeight} floatingRef={floatingRef} setValueAtIndex={(index, value) => {
+    listContentRef.current[index] = value;
   }} interactions={{
     ...interactions,
     getReferenceProps() {
@@ -684,7 +711,52 @@ const Select = withStaticProperties((props) => {
         }
       });
     }
-  }} 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>;
+  }} floatingContext={context} activeIndex={activeIndex} canScrollDown={!!showDownArrow} canScrollUp={!!showUpArrow} controlledScrolling dataRef={context.dataRef} listRef={listItemsRef}>{children}</SelectProvider>;
+};
+const SelectSheetImpl = (props) => {
+  return <>{props.children}</>;
+};
+const Select = withStaticProperties((props) => {
+  const {
+    __scopeSelect,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    size: sizeProp,
+    sheetBreakpoint = false,
+    dir
+  } = props;
+  const isSheet = useSelectBreakpointActive(sheetBreakpoint);
+  const SelectImpl = isSheet ? SelectSheetImpl : SelectInlineImpl;
+  const forceUpdate = React.useReducer(() => ({}), {})[1];
+  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 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;
+  });
+  return <SelectProvider dir={dir} size={sizeProp} forceUpdate={forceUpdate} valueNode={valueNode} onValueNodeChange={setValueNode} onValueNodeHasChildrenChange={setValueNodeHasChildren} valueNodeHasChildren={valueNodeHasChildren} scopeKey={__scopeSelect ? Object.keys(__scopeSelect)[0] : ""} 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 onChangeOpen={setOpen} __scopeSelect={__scopeSelect}><SelectImpl activeIndexRef={activeIndexRef} listContentRef={listContentRef} selectedIndexRef={selectedIndexRef} {...props} open={open} value={value}>{children}</SelectImpl></SelectSheetController></SelectProvider>;
 }, {
   Content: SelectContent,
   Group: SelectGroup,
@@ -697,7 +769,9 @@ const Select = withStaticProperties((props) => {
   ScrollUpButton: SelectScrollUpButton,
   Trigger: SelectTrigger,
   Value: SelectValue,
-  Viewport: SelectViewport
+  Viewport: SelectViewport,
+  SheetContents: SelectSheetContents,
+  Sheet
 });
 Select.displayName = SELECT_NAME;
 export {
@@ -707,6 +781,7 @@ export {
   SelectItem,
   SelectItemTextFrame,
   SelectSeparator,
+  SelectSheetContents,
   SelectTrigger,
   SelectViewport,
   SelectViewportFrame,