@tamagui/select 1.0.1-beta.73 → 1.0.1-beta.76

package/dist/esm/Select.js

@@ -1,3 +1,34 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import {
   FloatingFocusManager,
   FloatingOverlay,
@@ -18,7 +49,6 @@ import {
 import { usePrevious } from "@radix-ui/react-use-previous";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import {
-  getVariableValue,
   styled,
   useIsomorphicLayoutEffect,
   withStaticProperties
@@ -40,13 +70,6 @@ if (isFirefox) {
 function getVisualOffsetTop() {
   return !/^((?!chrome|android).)*safari/i.test(userAgent) ? visualViewport.offsetTop : 0;
 }
-const getSelectItemSize = (val, { tokens }) => {
-  const padding = getVariableValue(tokens.size[val]);
-  return {
-    paddingHorizontal: padding / 2,
-    paddingVertical: padding / 4
-  };
-};
 const SELECT_NAME = "Select";
 const WINDOW_PADDING = 8;
 const SCROLL_ARROW_VELOCITY = 8;
@@ -55,18 +78,19 @@ const MIN_HEIGHT = 80;
 const FALLBACK_THRESHOLD = 16;
 const [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME);
 const [SelectProvider, useSelectContext] = createSelectContext(SELECT_NAME);
-const OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
-const SELECTION_KEYS = [" ", "Enter"];
 const TRIGGER_NAME = "SelectTrigger";
 const SelectTrigger = React.forwardRef((props, forwardedRef) => {
-  const {
+  const _a = props, {
     __scopeSelect,
     disabled = false,
-    "aria-labelledby": ariaLabelledby,
-    ...triggerProps
-  } = props;
+    "aria-labelledby": ariaLabelledby
+  } = _a, triggerProps = __objRest(_a, [
+    "__scopeSelect",
+    "disabled",
+    "aria-labelledby"
+  ]);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
-  return /* @__PURE__ */ React.createElement(ListItem, {
+  return /* @__PURE__ */ React.createElement(ListItem, __spreadValues(__spreadProps(__spreadValues({
     backgrounded: true,
     radiused: true,
     hoverTheme: true,
@@ -79,16 +103,16 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     "aria-expanded": context.open,
     "aria-autocomplete": "none",
     disabled,
-    "data-disabled": disabled ? "" : void 0,
-    ...triggerProps,
-    ref: forwardedRef,
-    ...context.interactions.getReferenceProps()
-  });
+    "data-disabled": disabled ? "" : void 0
+  }, triggerProps), {
+    ref: forwardedRef
+  }), context.interactions.getReferenceProps()));
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
 const SelectValueFrame = styled(Paragraph, {
-  name: VALUE_NAME
+  name: VALUE_NAME,
+  selectable: false
 });
 const SelectValue = SelectValueFrame.extractable(React.forwardRef(({ __scopeSelect, children, placeholder }, forwardedRef) => {
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
@@ -126,12 +150,12 @@ const SelectViewportFrame = styled(ThemeableStack, {
   elevate: true,
   overflow: "hidden",
   userSelect: "none",
+  maxHeight: "100%",
   variants: {
     size: {
       "...size": (val, { tokens }) => {
-        var _a;
         return {
-          borderRadius: (_a = tokens.radius[val]) != null ? _a : val
+          borderRadius: tokens.radius[val] ?? val
         };
       }
     }
@@ -141,7 +165,7 @@ const SelectViewportFrame = styled(ThemeableStack, {
   }
 });
 const SelectViewport = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, children, ...viewportProps } = props;
+  const _a = props, { __scopeSelect, children } = _a, viewportProps = __objRest(_a, ["__scopeSelect", "children"]);
   const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef);
   const prevScrollTopRef = React.useRef(0);
@@ -152,31 +176,34 @@ const SelectViewport = React.forwardRef((props, forwardedRef) => {
   }), /* @__PURE__ */ React.createElement(FloatingFocusManager, {
     context: context.floatingContext,
     preventTabbing: true
-  }, /* @__PURE__ */ React.createElement("div", {
-    ...context.interactions.getFloatingProps()
-  }, /* @__PURE__ */ React.createElement(SelectViewportFrame, {
+  }, /* @__PURE__ */ React.createElement("div", __spreadValues({}, context.interactions.getFloatingProps()), /* @__PURE__ */ React.createElement(SelectViewportFrame, __spreadProps(__spreadValues({
     size: context.size,
     "data-radix-select-viewport": "",
-    role: "presentation",
-    ...viewportProps,
+    role: "presentation"
+  }, viewportProps), {
     ref: composedRefs
-  }, children))));
+  }), children))));
 });
 SelectViewport.displayName = VIEWPORT_NAME;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
 const SelectItem = React.forwardRef((props, forwardedRef) => {
-  const {
+  const _a = props, {
     __scopeSelect,
     value,
     disabled = false,
     textValue: textValueProp,
-    index,
-    ...itemProps
-  } = props;
+    index
+  } = _a, itemProps = __objRest(_a, [
+    "__scopeSelect",
+    "value",
+    "disabled",
+    "textValue",
+    "index"
+  ]);
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React.useState(textValueProp != null ? textValueProp : "");
+  const [textValue, setTextValue] = React.useState(textValueProp ?? "");
   const [isFocused, setIsFocused] = React.useState(false);
   const textId = useId();
   const {
@@ -206,7 +233,7 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     onChange(value);
     setOpen(false);
   }
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     clearTimeout(timeoutRef.current);
     if (open) {
       if (selectedIndex !== index) {
@@ -237,8 +264,9 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     textId: textId || "",
     isSelected,
     onItemTextChange: React.useCallback((node) => {
+      setTextValue((prevTextValue) => prevTextValue || ((node == null ? void 0 : node.textContent) ?? "").trim());
     }, [])
-  }, /* @__PURE__ */ React.createElement(ListItem, {
+  }, /* @__PURE__ */ React.createElement(ListItem, __spreadValues(__spreadValues({
     backgrounded: true,
     hoverTheme: true,
     pressTheme: true,
@@ -251,29 +279,27 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     "aria-disabled": disabled || void 0,
     "data-disabled": disabled ? "" : void 0,
     tabIndex: disabled ? void 0 : -1,
-    size: context.size,
-    ...itemProps,
-    ...selectItemProps
-  }));
+    size: context.size
+  }, itemProps), selectItemProps)));
 });
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
 const SelectItemTextFrame = styled(Paragraph, {
   name: ITEM_TEXT_NAME,
-  cursor: "default"
+  selectable: false
 });
 const SelectItemText = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, className, style, ...itemTextProps } = props;
+  const _a = props, { __scopeSelect, className, style } = _a, itemTextProps = __objRest(_a, ["__scopeSelect", "className", "style"]);
   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 /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectItemTextFrame, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectItemTextFrame, __spreadProps(__spreadValues({
     size: context.size,
-    id: itemContext.textId,
-    ...itemTextProps,
+    id: itemContext.textId
+  }, itemTextProps), {
     ref: composedRefs
-  }), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
+  })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null);
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 const ITEM_INDICATOR_NAME = "SelectItemIndicator";
@@ -281,13 +307,13 @@ const SelectItemIndicatorFrame = styled(XStack, {
   name: ITEM_TEXT_NAME
 });
 const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...itemIndicatorProps } = props;
+  const _a = props, { __scopeSelect } = _a, itemIndicatorProps = __objRest(_a, ["__scopeSelect"]);
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-  return itemContext.isSelected ? /* @__PURE__ */ React.createElement(SelectItemIndicatorFrame, {
-    "aria-hidden": true,
-    ...itemIndicatorProps,
+  return itemContext.isSelected ? /* @__PURE__ */ React.createElement(SelectItemIndicatorFrame, __spreadProps(__spreadValues({
+    "aria-hidden": true
+  }, itemIndicatorProps), {
     ref: forwardedRef
-  }) : null;
+  })) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 const GROUP_NAME = "SelectGroup";
@@ -297,58 +323,58 @@ const SelectGroupFrame = styled(YStack, {
   width: "100%"
 });
 const SelectGroup = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...groupProps } = props;
+  const _a = props, { __scopeSelect } = _a, groupProps = __objRest(_a, ["__scopeSelect"]);
   const groupId = useId();
   return /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
     scope: __scopeSelect,
     id: groupId || ""
-  }, /* @__PURE__ */ React.createElement(SelectGroupFrame, {
+  }, /* @__PURE__ */ React.createElement(SelectGroupFrame, __spreadProps(__spreadValues({
     role: "group",
-    "aria-labelledby": groupId,
-    ...groupProps,
+    "aria-labelledby": groupId
+  }, groupProps), {
     ref: forwardedRef
-  }));
+  })));
 });
 SelectGroup.displayName = GROUP_NAME;
 const LABEL_NAME = "SelectLabel";
 const SelectLabel = React.forwardRef((props, forwardedRef) => {
-  const { __scopeSelect, ...labelProps } = props;
+  const _a = props, { __scopeSelect } = _a, labelProps = __objRest(_a, ["__scopeSelect"]);
   const context = useSelectContext(LABEL_NAME, __scopeSelect);
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return /* @__PURE__ */ React.createElement(ListItem, {
+  return /* @__PURE__ */ React.createElement(ListItem, __spreadProps(__spreadValues({
     componentName: LABEL_NAME,
     fontWeight: "800",
     id: groupContext.id,
-    size: context.size,
-    ...labelProps,
+    size: context.size
+  }, labelProps), {
     ref: forwardedRef
-  });
+  }));
 });
 SelectLabel.displayName = LABEL_NAME;
 const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
 const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, {
-    componentName: SCROLL_UP_BUTTON_NAME,
-    ...props,
+  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({
+    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 /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, {
-    componentName: SCROLL_DOWN_BUTTON_NAME,
-    ...props,
+  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, __spreadProps(__spreadValues({
+    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);
+  var _c;
+  const _a = props, { __scopeSelect, dir, componentName } = _a, scrollIndicatorProps = __objRest(_a, ["__scopeSelect", "dir", "componentName"]);
+  const _b = useSelectContext(componentName, __scopeSelect), { floatingRef, increaseHeight, forceUpdate } = _b, context = __objRest(_b, ["floatingRef", "increaseHeight", "forceUpdate"]);
   const intervalRef = React.useRef();
   const loopingRef = React.useRef(false);
   const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
@@ -388,15 +414,16 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
       forceUpdate();
     }
   };
-  return /* @__PURE__ */ React.createElement(YStack, {
+  return /* @__PURE__ */ React.createElement(YStack, __spreadProps(__spreadValues({
     ref: composedRefs,
     componentName,
-    "aria-hidden": true,
-    ...scrollIndicatorProps,
+    "aria-hidden": true
+  }, 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)`,
+    width: `calc(${(((_c = floatingRef.current) == null ? void 0 : _c.offsetWidth) ?? 0) - 2}px)`,
     background: `linear-gradient(to ${dir === "up" ? "bottom" : "top"}, #29282b 50%, rgba(53, 54, 55, 0.01))`,
     onPointerMove: () => {
       if (!loopingRef.current) {
@@ -408,7 +435,7 @@ const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
       loopingRef.current = false;
       clearInterval(intervalRef.current);
     }
-  });
+  }));
 });
 const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
@@ -481,8 +508,7 @@ const Select = withStaticProperties((props) => {
     placement: "bottom",
     middleware: middlewareType === "align" ? [
       offset(({ rects }) => {
-        var _a;
-        const index = (_a = activeIndexRef.current) != null ? _a : selectedIndexRef.current;
+        const index = activeIndexRef.current ?? selectedIndexRef.current;
         if (index == null) {
           return 0;
         }
@@ -597,7 +623,7 @@ const Select = withStaticProperties((props) => {
   }, [middlewareType]);
   const touchPageYRef = React.useRef(null);
   const handleWheel = React.useCallback((event) => {
-    var _a, _b;
+    var _a;
     const pinching = event.ctrlKey;
     const currentTarget = event.currentTarget;
     function isWheelEvent(event2) {
@@ -606,7 +632,7 @@ const Select = withStaticProperties((props) => {
     function isTouchEvent(event2) {
       return event2.touches != null;
     }
-    if (Math.abs(((_a = currentTarget == null ? void 0 : currentTarget.offsetHeight) != null ? _a : 0) - (visualViewport.height - WINDOW_PADDING * 2)) > 1 && !pinching) {
+    if (Math.abs(((currentTarget == null ? void 0 : currentTarget.offsetHeight) ?? 0) - (visualViewport.height - WINDOW_PADDING * 2)) > 1 && !pinching) {
       event.preventDefault();
     } else if (isWheelEvent(event) && isFirefox) {
       currentTarget.scrollTop += event.deltaY;
@@ -615,7 +641,7 @@ const Select = withStaticProperties((props) => {
       let delta = 5;
       if (isTouchEvent(event)) {
         const currentPageY = touchPageYRef.current;
-        const pageY = (_b = event.touches[0]) == null ? void 0 : _b.pageY;
+        const pageY = (_a = event.touches[0]) == null ? void 0 : _a.pageY;
         if (pageY != null) {
           touchPageYRef.current = pageY;
           if (currentPageY != null) {
@@ -651,12 +677,12 @@ const Select = withStaticProperties((props) => {
     };
   }, [update]);
   React.useLayoutEffect(() => {
-    var _a, _b, _c;
+    var _a;
     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 itemHeight = ((_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) ?? 0;
         const floatingHeight = floating2.offsetHeight;
         const top = item.offsetTop;
         const bottom = top + itemHeight;
@@ -670,7 +696,7 @@ const Select = withStaticProperties((props) => {
           const diff = bottom - floatingHeight - floating2.scrollTop + 20;
           floating2.scrollTop += diff;
           if (activeIndex != selectedIndex && activeIndex != null) {
-            floating2.scrollTop -= (_c = increaseHeight(floating2, diff)) != null ? _c : 0;
+            floating2.scrollTop -= increaseHeight(floating2, diff) ?? 0;
           }
         }
       }
@@ -748,8 +774,7 @@ const Select = withStaticProperties((props) => {
     setValueAtIndex: (index, value2) => {
       listContentRef.current[index] = value2;
     },
-    interactions: {
-      ...interactions,
+    interactions: __spreadProps(__spreadValues({}, interactions), {
       getReferenceProps() {
         return interactions.getReferenceProps({
           ref: reference,
@@ -768,8 +793,13 @@ const Select = withStaticProperties((props) => {
           className: "Select",
           style: {
             position: strategy,
-            top: y != null ? y : "",
-            left: x != null ? x : ""
+            top: y ?? "",
+            left: x ?? "",
+            outline: 0,
+            overflowY: "auto",
+            listStyleType: "none",
+            scrollbarWidth: "none",
+            userSelect: "none"
           },
           onPointerEnter() {
             setControlledScrolling(false);
@@ -785,7 +815,7 @@ const Select = withStaticProperties((props) => {
           }
         });
       }
-    },
+    }),
     floatingContext: context,
     activeIndex,
     canScrollDown: !!showDownArrow,
@@ -794,7 +824,7 @@ const Select = withStaticProperties((props) => {
     dataRef: context.dataRef,
     listRef: listItemsRef,
     onChange: setValue,
-    selectedIndex: 0,
+    selectedIndex,
     setActiveIndex,
     setOpen,
     setSelectedIndex,