@tamagui/select 1.88.13 → 1.89.0-1706308641099

package/dist/jsx/SelectItem.mjs

@@ -0,0 +1,121 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { ListItemFrame, useListItem } from "@tamagui/list-item";
+import * as React from "react";
+import { createSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+const ITEM_NAME = "SelectItem",
+  [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME),
+  SelectItem = ListItemFrame.styleable(function (props, forwardedRef) {
+    const {
+        __scopeSelect,
+        value,
+        disabled = !1,
+        textValue: textValueProp,
+        index,
+        ...restProps
+      } = props,
+      {
+        props: listItemProps
+      } = useListItem({
+        ...(!props.unstyled && {
+          ellipse: !0
+        }),
+        ...restProps
+      }),
+      context = useSelectItemParentContext(ITEM_NAME, __scopeSelect),
+      {
+        setSelectedIndex,
+        listRef,
+        setOpen,
+        onChange,
+        activeIndexSubscribe,
+        valueSubscribe,
+        allowMouseUpRef,
+        allowSelectRef,
+        setValueAtIndex,
+        selectTimeoutRef,
+        dataRef,
+        interactions,
+        shouldRenderWebNative,
+        size,
+        onActiveChange,
+        initialValue
+      } = context,
+      [isSelected, setSelected] = React.useState(initialValue === value);
+    React.useEffect(() => activeIndexSubscribe(i => {
+      index === i && (onActiveChange(value, index), listRef?.current[index]?.focus());
+    }), [index]), React.useEffect(() => valueSubscribe(val => {
+      setSelected(val === value);
+    }), [value]);
+    const textId = React.useId(),
+      composedRefs = useComposedRefs(forwardedRef, node => {
+        isWeb && node instanceof HTMLElement && listRef && (listRef.current[index] = node);
+      });
+    useIsomorphicLayoutEffect(() => {
+      setValueAtIndex(index, value);
+    }, [index, setValueAtIndex, value]);
+    function handleSelect() {
+      setSelectedIndex(index), onChange(value), setOpen(!1);
+    }
+    const selectItemProps = React.useMemo(() => interactions ? interactions.getItemProps({
+      onTouchMove() {
+        allowSelectRef.current = !0, allowMouseUpRef.current = !1;
+      },
+      onTouchEnd() {
+        allowSelectRef.current = !1, allowMouseUpRef.current = !0;
+      },
+      onKeyDown(event) {
+        event.key === "Enter" || event.key === " " && !dataRef?.current.typing ? (event.preventDefault(), handleSelect()) : allowSelectRef.current = !0;
+      },
+      onClick() {
+        allowSelectRef.current && handleSelect();
+      },
+      onMouseUp() {
+        allowMouseUpRef.current && (allowSelectRef.current && handleSelect(), clearTimeout(selectTimeoutRef.current), selectTimeoutRef.current = setTimeout(() => {
+          allowSelectRef.current = !0;
+        }));
+      }
+    }) : {
+      onPress: handleSelect
+    }, [handleSelect]);
+    return /* @__PURE__ */jsx(SelectItemContextProvider, {
+      scope: __scopeSelect,
+      value,
+      textId: textId || "",
+      isSelected,
+      children: shouldRenderWebNative ? /* @__PURE__ */jsx("option", {
+        value,
+        children: props.children
+      }) : /* @__PURE__ */jsx(ListItemFrame, {
+        tag: "div",
+        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,
+        ...(!props.unstyled && {
+          backgrounded: !0,
+          pressTheme: !0,
+          hoverTheme: !0,
+          cursor: "default",
+          size,
+          outlineOffset: -1,
+          focusStyle: {
+            outlineColor: "$outlineColor",
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            outlineOffset: -2
+          }
+        }),
+        ...listItemProps,
+        ...selectItemProps
+      })
+    });
+  }, {
+    disableTheme: !0
+  });
+export { SelectItem, SelectItemContextProvider, useSelectItemContext };

package/dist/jsx/SelectItemText.mjs

@@ -0,0 +1,52 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { styled } from "@tamagui/core";
+import { SizableText } from "@tamagui/text";
+import * as React from "react";
+import { useSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { useSelectItemContext } from "./SelectItem.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+const ITEM_TEXT_NAME = "SelectItemText",
+  SelectItemTextFrame = styled(SizableText, {
+    name: ITEM_TEXT_NAME,
+    variants: {
+      unstyled: {
+        false: {
+          userSelect: "none",
+          color: "$color",
+          ellipse: !0
+        }
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  SelectItemText = SelectItemTextFrame.styleable(function (props, forwardedRef) {
+    const {
+        __scopeSelect,
+        className,
+        ...itemTextProps
+      } = props,
+      context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(ITEM_TEXT_NAME, __scopeSelect),
+      ref = React.useRef(null),
+      composedRefs = useComposedRefs(forwardedRef, ref),
+      itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect),
+      contents = React.useRef();
+    return contents.current = /* @__PURE__ */jsx(SelectItemTextFrame, {
+      className,
+      size: itemParentContext.size,
+      id: itemContext.textId,
+      ...itemTextProps,
+      ref: composedRefs
+    }), React.useEffect(() => {
+      itemParentContext.initialValue === itemContext.value && !context.selectedIndex && context.setSelectedItem(contents.current);
+    }, []), React.useEffect(() => itemParentContext.valueSubscribe(val => {
+      val === itemContext.value && context.setSelectedItem(contents.current);
+    }), [itemContext.value]), itemParentContext.shouldRenderWebNative ? /* @__PURE__ */jsx(Fragment, {
+      children: props.children
+    }) : /* @__PURE__ */jsx(Fragment, {
+      children: contents.current
+    });
+  });
+export { ITEM_TEXT_NAME, SelectItemText, SelectItemTextFrame };

package/dist/jsx/SelectScrollButton.mjs

@@ -0,0 +1,100 @@
+import { autoUpdate, offset, useFloating } from "@floating-ui/react";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { flushSync } from "react-dom";
+import { useSelectContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton",
+  SelectScrollUpButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */jsx(SelectScrollButtonImpl, {
+    componentName: SCROLL_UP_BUTTON_NAME,
+    ...props,
+    dir: "up",
+    ref: forwardedRef
+  }));
+SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
+const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton",
+  SelectScrollDownButton = React.forwardRef((props, forwardedRef) => /* @__PURE__ */jsx(SelectScrollButtonImpl, {
+    componentName: SCROLL_DOWN_BUTTON_NAME,
+    ...props,
+    dir: "down",
+    ref: forwardedRef
+  }));
+SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
+const SelectScrollButtonImpl = React.memo(React.forwardRef((props, forwardedRef) => {
+  const {
+      __scopeSelect,
+      dir,
+      componentName,
+      ...scrollIndicatorProps
+    } = props,
+    {
+      forceUpdate,
+      open,
+      fallback,
+      setScrollTop,
+      setInnerOffset,
+      ...context
+    } = useSelectContext(componentName, __scopeSelect),
+    floatingRef = context.floatingContext?.refs.floating,
+    statusRef = React.useRef("idle"),
+    isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"],
+    frameRef = React.useRef(),
+    {
+      x,
+      y,
+      refs,
+      strategy
+    } = useFloating({
+      open: open && isVisible,
+      strategy: "fixed",
+      elements: {
+        reference: floatingRef?.current
+      },
+      placement: dir === "up" ? "top" : "bottom",
+      middleware: [offset(({
+        rects
+      }) => -rects.floating.height)],
+      whileElementsMounted: (...args) => autoUpdate(...args, {
+        animationFrame: !0
+      })
+    }),
+    composedRef = useComposedRefs(forwardedRef, refs.setFloating);
+  if (!isVisible) return null;
+  const onScroll = amount => {
+    const floating = floatingRef;
+    floating && (fallback ? floating.current && (floating.current.scrollTop -= amount, flushSync(() => setScrollTop(floating.current?.scrollTop ?? 0))) : flushSync(() => setInnerOffset(value => value - amount)));
+  };
+  return /* @__PURE__ */jsx(YStack, {
+    ref: composedRef,
+    componentName,
+    "aria-hidden": !0,
+    ...scrollIndicatorProps,
+    zIndex: 1e3,
+    position: strategy,
+    left: x || 0,
+    top: y || 0,
+    width: `calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`,
+    onPointerEnter: () => {
+      statusRef.current = "active";
+      let prevNow = Date.now();
+      function frame() {
+        const element = floatingRef?.current;
+        if (element) {
+          const currentNow = Date.now(),
+            msElapsed = currentNow - prevNow;
+          prevNow = currentNow;
+          const pixelsToScroll = msElapsed / 2,
+            remainingPixels = dir === "up" ? element.scrollTop : element.scrollHeight - element.clientHeight - element.scrollTop,
+            scrollRemaining = dir === "up" ? element.scrollTop - pixelsToScroll > 0 : element.scrollTop + pixelsToScroll < element.scrollHeight - element.clientHeight;
+          onScroll(dir === "up" ? Math.min(pixelsToScroll, remainingPixels) : Math.max(-pixelsToScroll, -remainingPixels)), scrollRemaining && (frameRef.current = requestAnimationFrame(frame));
+        }
+      }
+      cancelAnimationFrame(frameRef.current), frameRef.current = requestAnimationFrame(frame);
+    },
+    onPointerLeave: () => {
+      statusRef.current = "idle", cancelAnimationFrame(frameRef.current);
+    }
+  });
+}));
+export { SelectScrollDownButton, SelectScrollUpButton };

package/dist/jsx/SelectTrigger.mjs

@@ -0,0 +1,53 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { ListItem } from "@tamagui/list-item";
+import * as React from "react";
+import { useSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { jsx } from "react/jsx-runtime";
+const TRIGGER_NAME = "SelectTrigger",
+  SelectTrigger = React.forwardRef(function (props, forwardedRef) {
+    const {
+        __scopeSelect,
+        disabled = !1,
+        unstyled = !1,
+        ...triggerProps
+      } = props,
+      context = useSelectContext(TRIGGER_NAME, __scopeSelect),
+      itemParentContext = useSelectItemParentContext(TRIGGER_NAME, __scopeSelect),
+      composedRefs = useComposedRefs(forwardedRef, context.floatingContext?.refs.setReference);
+    return itemParentContext.shouldRenderWebNative ? null : /* @__PURE__ */jsx(ListItem, {
+      componentName: TRIGGER_NAME,
+      unstyled,
+      ...(!unstyled && {
+        backgrounded: !0,
+        radiused: !0,
+        hoverTheme: !0,
+        pressTheme: !0,
+        focusable: !0,
+        focusStyle: {
+          outlineStyle: "solid",
+          outlineWidth: 2,
+          outlineColor: "$outlineColor"
+        },
+        borderWidth: 1
+      }),
+      size: itemParentContext.size,
+      "aria-expanded": context.open,
+      "aria-autocomplete": "none",
+      dir: context.dir,
+      disabled,
+      "data-disabled": disabled ? "" : void 0,
+      ...triggerProps,
+      ref: composedRefs,
+      ...(itemParentContext.interactions ? {
+        ...itemParentContext.interactions.getReferenceProps(),
+        onMouseDown() {
+          context.floatingContext?.update(), itemParentContext.setOpen(!context.open);
+        }
+      } : {
+        onPress() {
+          itemParentContext.setOpen(!context.open);
+        }
+      })
+    });
+  });
+export { SelectTrigger };

package/dist/jsx/SelectViewport.mjs

@@ -0,0 +1,117 @@
+import { FloatingFocusManager } from "@floating-ui/react";
+import { AnimatePresence } from "@tamagui/animate-presence";
+import { composeRefs } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { styled } from "@tamagui/core";
+import { PortalItem } from "@tamagui/portal";
+import { ThemeableStack } from "@tamagui/stacks";
+import { VIEWPORT_NAME } from "./constants.mjs";
+import { ForwardSelectContext, useSelectContext, useSelectItemParentContext } from "./context.mjs";
+import { useSelectBreakpointActive } from "./useSelectBreakpointActive.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const SelectViewportFrame = styled(ThemeableStack, {
+    name: VIEWPORT_NAME,
+    variants: {
+      unstyled: {
+        false: {
+          size: "$2",
+          backgroundColor: "$background",
+          elevate: !0,
+          bordered: !0,
+          userSelect: "none",
+          outlineWidth: 0
+        }
+      },
+      size: {
+        "...size": (val, {
+          tokens
+        }) => ({
+          borderRadius: tokens.radius[val] ?? val
+        })
+      }
+    },
+    defaultVariants: {
+      unstyled: process.env.TAMAGUI_HEADLESS === "1"
+    }
+  }),
+  SelectViewport = SelectViewportFrame.styleable(function (props, forwardedRef) {
+    const {
+        __scopeSelect,
+        children,
+        disableScroll,
+        ...viewportProps
+      } = props,
+      context = useSelectContext(VIEWPORT_NAME, __scopeSelect),
+      itemContext = useSelectItemParentContext(VIEWPORT_NAME, __scopeSelect),
+      breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+    if (useIsomorphicLayoutEffect(() => {
+      context.update && context.update();
+    }, [breakpointActive]), itemContext.shouldRenderWebNative) return /* @__PURE__ */jsx(Fragment, {
+      children
+    });
+    if (breakpointActive || !isWeb) return /* @__PURE__ */jsx(PortalItem, {
+      hostName: `${context.scopeKey}SheetContents`,
+      children: /* @__PURE__ */jsx(ForwardSelectContext, {
+        __scopeSelect,
+        itemContext,
+        context,
+        children
+      })
+    });
+    if (!itemContext.interactions) return process.env.NODE_ENV === "development" && console.warn("No interactions provided to Select, potentially missing Adapt"), null;
+    const {
+        style,
+        // remove this, it was set to "Select" always
+        className,
+        ...floatingProps
+      } = itemContext.interactions.getFloatingProps(),
+      composedRefs = composeRefs(forwardedRef, context.floatingContext?.refs.setFloating),
+      {
+        scrollbarWidth,
+        listStyleType,
+        overflow,
+        ...restStyle
+      } = style;
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [!disableScroll && !props.unstyled && /* @__PURE__ */jsx("style", {
+        dangerouslySetInnerHTML: {
+          __html: selectViewportCSS
+        }
+      }), /* @__PURE__ */jsx(AnimatePresence, {
+        children: context.open ? /* @__PURE__ */jsx(FloatingFocusManager, {
+          context: context.floatingContext,
+          modal: !1,
+          children: /* @__PURE__ */jsx(SelectViewportFrame, {
+            disableClassName: !0,
+            size: itemContext.size,
+            role: "presentation",
+            ...viewportProps,
+            ...floatingProps,
+            ...restStyle,
+            ...(!props.unstyled && {
+              overflow: disableScroll ? void 0 : overflow ?? "scroll"
+            }),
+            ref: composedRefs,
+            children
+          }, "select-viewport")
+        }) : null
+      }), !context.open && /* @__PURE__ */jsx("div", {
+        style: {
+          display: "none"
+        },
+        children: props.children
+      })]
+    });
+  }),
+  selectViewportCSS = `
+.is_SelectViewport {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.is_SelectViewport::-webkit-scrollbar{
+  display:none
+}
+`;
+export { SelectViewport, SelectViewportFrame };

package/dist/jsx/constants.mjs

@@ -0,0 +1,8 @@
+const SELECT_NAME = "Select",
+  WINDOW_PADDING = 8,
+  SCROLL_ARROW_VELOCITY = 8,
+  SCROLL_ARROW_THRESHOLD = 8,
+  MIN_HEIGHT = 80,
+  FALLBACK_THRESHOLD = 16,
+  VIEWPORT_NAME = "SelectViewport";
+export { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, SCROLL_ARROW_VELOCITY, SELECT_NAME, VIEWPORT_NAME, WINDOW_PADDING };

package/dist/jsx/context.mjs

@@ -0,0 +1,23 @@
+import { createContextScope } from "@tamagui/create-context";
+import { SELECT_NAME } from "./constants.mjs";
+import { jsx } from "react/jsx-runtime";
+const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME),
+  [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME),
+  [createSelectItemParentContext, createSelectItemParentScope] = createContextScope(SELECT_NAME),
+  [SelectItemParentProvider, useSelectItemParentContext] = createSelectContext(SELECT_NAME),
+  ForwardSelectContext = ({
+    __scopeSelect,
+    context,
+    itemContext,
+    children
+  }) => /* @__PURE__ */jsx(SelectProvider, {
+    isInSheet: !0,
+    scope: __scopeSelect,
+    ...context,
+    children: /* @__PURE__ */jsx(SelectItemParentProvider, {
+      scope: __scopeSelect,
+      ...itemContext,
+      children
+    })
+  });
+export { ForwardSelectContext, SelectItemParentProvider, SelectProvider, createSelectContext, createSelectItemParentContext, createSelectItemParentScope, createSelectScope, useSelectContext, useSelectItemParentContext };

package/dist/jsx/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Select.mjs";
+export * from "./context.mjs";

package/dist/jsx/useSelectBreakpointActive.mjs

@@ -0,0 +1,10 @@
+import { useMedia } from "@tamagui/core";
+const useSelectBreakpointActive = sheetBreakpoint => {
+    const media = useMedia();
+    return sheetBreakpoint ? sheetBreakpoint === !0 ? !0 : sheetBreakpoint ? media[sheetBreakpoint] : !1 : !1;
+  },
+  useShowSelectSheet = context => {
+    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+    return context.open === !1 ? !1 : breakpointActive;
+  };
+export { useSelectBreakpointActive, useShowSelectSheet };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/select",
-  "version": "1.88.13",
+  "version": "1.89.0-1706308641099",
   "sideEffects": [
     "*.css"
   ],
@@ -35,27 +35,27 @@
     "@floating-ui/react": "^0.26.6",
     "@floating-ui/react-dom": "^2.0.6",
     "@floating-ui/react-native": "^0.10.3",
-    "@tamagui/adapt": "1.88.13",
-    "@tamagui/animate-presence": "1.88.13",
-    "@tamagui/compose-refs": "1.88.13",
-    "@tamagui/constants": "1.88.13",
-    "@tamagui/core": "1.88.13",
-    "@tamagui/create-context": "1.88.13",
-    "@tamagui/dismissable": "1.88.13",
-    "@tamagui/focus-scope": "1.88.13",
-    "@tamagui/get-token": "1.88.13",
-    "@tamagui/helpers": "1.88.13",
-    "@tamagui/list-item": "1.88.13",
-    "@tamagui/portal": "1.88.13",
-    "@tamagui/remove-scroll": "1.88.13",
-    "@tamagui/separator": "1.88.13",
-    "@tamagui/sheet": "1.88.13",
-    "@tamagui/stacks": "1.88.13",
-    "@tamagui/text": "1.88.13",
-    "@tamagui/use-controllable-state": "1.88.13",
-    "@tamagui/use-debounce": "1.88.13",
-    "@tamagui/use-event": "1.88.13",
-    "@tamagui/use-previous": "1.88.13",
+    "@tamagui/adapt": "1.89.0-1706308641099",
+    "@tamagui/animate-presence": "1.89.0-1706308641099",
+    "@tamagui/compose-refs": "1.89.0-1706308641099",
+    "@tamagui/constants": "1.89.0-1706308641099",
+    "@tamagui/core": "1.89.0-1706308641099",
+    "@tamagui/create-context": "1.89.0-1706308641099",
+    "@tamagui/dismissable": "1.89.0-1706308641099",
+    "@tamagui/focus-scope": "1.89.0-1706308641099",
+    "@tamagui/get-token": "1.89.0-1706308641099",
+    "@tamagui/helpers": "1.89.0-1706308641099",
+    "@tamagui/list-item": "1.89.0-1706308641099",
+    "@tamagui/portal": "1.89.0-1706308641099",
+    "@tamagui/remove-scroll": "1.89.0-1706308641099",
+    "@tamagui/separator": "1.89.0-1706308641099",
+    "@tamagui/sheet": "1.89.0-1706308641099",
+    "@tamagui/stacks": "1.89.0-1706308641099",
+    "@tamagui/text": "1.89.0-1706308641099",
+    "@tamagui/use-controllable-state": "1.89.0-1706308641099",
+    "@tamagui/use-debounce": "1.89.0-1706308641099",
+    "@tamagui/use-event": "1.89.0-1706308641099",
+    "@tamagui/use-previous": "1.89.0-1706308641099",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
@@ -63,7 +63,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.89.0-1706308641099",
     "react": "^18.2.0",
     "react-native": "^0.72.6"
   },