@tamagui/select 1.0.1-beta.46 → 1.0.1-beta.49

package/dist/jsx/Select.js

@@ -18,7 +18,6 @@ import {
   useTypeahead
 } from "@floating-ui/react-dom-interactions";
 import { usePrevious } from "@radix-ui/react-use-previous";
-import { Button } from "@tamagui/button";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import {
   getVariableValue,
@@ -28,6 +27,7 @@ import {
 } from "@tamagui/core";
 import { useId } from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
+import { ListItem } from "@tamagui/list-item";
 import { Separator } from "@tamagui/separator";
 import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
 import { Paragraph } from "@tamagui/text";
@@ -69,7 +69,7 @@ const SelectTrigger = React.forwardRef((props, forwardedRef) => {
     ...triggerProps
   } = props;
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
-  return <Button componentName={TRIGGER_NAME} aria-expanded={context.open} aria-autocomplete="none" disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={forwardedRef} {...context.interactions.getReferenceProps()} />;
+  return <ListItem backgrounded radiused hoverable pressable focusable tabIndex={-1} borderWidth={1} componentName={TRIGGER_NAME} aria-expanded={context.open} aria-autocomplete="none" disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={forwardedRef} {...context.interactions.getReferenceProps()} />;
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 const VALUE_NAME = "SelectValue";
@@ -102,6 +102,8 @@ const SelectViewportFrame = styled(ThemeableStack, {
   name: VIEWPORT_NAME,
   backgroundColor: "$background",
   elevate: true,
+  overflow: "hidden",
+  userSelect: "none",
   variants: {
     size: {
       "...size": (val, { tokens }) => {
@@ -131,26 +133,6 @@ const SelectViewport = React.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 const ITEM_NAME = "SelectItem";
 const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-const SelectItemFrame = styled(YStack, {
-  name: ITEM_NAME,
-  tag: "li",
-  role: "option",
-  width: "100%",
-  hoverStyle: {
-    backgroundColor: "$backgroundHover"
-  },
-  focusStyle: {
-    backgroundColor: "$backgroundFocus"
-  },
-  variants: {
-    size: {
-      "...size": getSelectItemSize
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
 const SelectItem = React.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
@@ -174,18 +156,20 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     onChange,
     activeIndex,
     setActiveIndex,
+    setValueAtIndex,
     dataRef
   } = context;
   const composedRefs = useComposedRefs(forwardedRef, (node) => {
-    console.log("node", 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() {
-    console.log("handling select!");
     setSelectedIndex(index);
     onChange(value);
     setOpen(false);
@@ -206,7 +190,6 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     }
   }, [open, index, setActiveIndex, selectedIndex]);
   function handleKeyDown(event) {
-    console.log("item key down");
     if (event.key === "Enter" || event.key === " " && !dataRef.current.typing) {
       event.preventDefault();
       handleSelect();
@@ -219,7 +202,7 @@ const SelectItem = React.forwardRef((props, forwardedRef) => {
     onKeyDown: handleKeyDown
   });
   return <SelectItemContextProvider scope={__scopeSelect} value={value} textId={textId || ""} isSelected={isSelected} onItemTextChange={React.useCallback((node) => {
-  }, [])}><SelectItemFrame 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} {...itemProps} {...selectItemProps} /></SelectItemContextProvider>;
+  }, [])}><ListItem backgrounded hoverable pressable focusable 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} {...itemProps} {...selectItemProps} /></SelectItemContextProvider>;
 });
 SelectItem.displayName = ITEM_NAME;
 const ITEM_TEXT_NAME = "SelectItemText";
@@ -262,27 +245,10 @@ const SelectGroup = React.forwardRef((props, forwardedRef) => {
 });
 SelectGroup.displayName = GROUP_NAME;
 const LABEL_NAME = "SelectLabel";
-const SelectLabelFrame = styled(SelectItemTextFrame, {
-  name: LABEL_NAME,
-  variants: {
-    size: {
-      "...size": (val, extras) => {
-        const size2 = getSelectItemSize(val, extras);
-        return {
-          ...size2,
-          paddingTop: size2.paddingVertical * 4
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
 const SelectLabel = React.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-  return <SelectLabelFrame id={groupContext.id} {...labelProps} ref={forwardedRef} />;
+  return <ListItem componentName={LABEL_NAME} fontWeight="800" id={groupContext.id} {...labelProps} ref={forwardedRef} />;
 });
 SelectLabel.displayName = LABEL_NAME;
 const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
@@ -352,7 +318,6 @@ const SelectSeparator = styled(Separator, {
   name: "SelectSeparator"
 });
 const Select = withStaticProperties((props) => {
-  var _a;
   const {
     __scopeSelect,
     children,
@@ -383,10 +348,7 @@ const Select = withStaticProperties((props) => {
   const [showArrows, setShowArrows] = React.useState(false);
   const [scrollTop, setScrollTop] = React.useState(0);
   const listItemsRef = React.useRef([]);
-  const listContentRef = React.useRef([
-    "Select...",
-    ...(_a = React.Children.map(children, (child) => React.Children.map(React.isValidElement(child) && child.props.children, (child2) => child2.props.value))) != null ? _a : []
-  ]);
+  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");
@@ -409,11 +371,11 @@ const Select = withStaticProperties((props) => {
     };
   }, [open]);
   function getFloatingPadding(floating2) {
-    var _a2;
+    var _a;
     if (!floating2) {
       return 0;
     }
-    return Number((_a2 = getComputedStyle(floating2).paddingLeft) == null ? void 0 : _a2.replace("px", ""));
+    return Number((_a = getComputedStyle(floating2).paddingLeft) == null ? void 0 : _a.replace("px", ""));
   }
   __name(getFloatingPadding, "getFloatingPadding");
   const { x, y, reference, floating, strategy, context, refs, middlewareData, update } = useFloating({
@@ -422,8 +384,8 @@ const Select = withStaticProperties((props) => {
     placement: "bottom",
     middleware: middlewareType === "align" ? [
       offset(({ rects }) => {
-        var _a2;
-        const index = (_a2 = activeIndexRef.current) != null ? _a2 : selectedIndexRef.current;
+        var _a;
+        const index = (_a = activeIndexRef.current) != null ? _a : selectedIndexRef.current;
         if (index == null) {
           return 0;
         }
@@ -439,7 +401,7 @@ const Select = withStaticProperties((props) => {
       {
         name: "size",
         async fn(args) {
-          var _a2;
+          var _a;
           const {
             elements: { floating: floating2 },
             rects: { reference: reference2 },
@@ -451,7 +413,7 @@ const Select = withStaticProperties((props) => {
           const top = Math.max(0, overflow.top);
           const bottom = Math.max(0, overflow.bottom);
           const nextY = args.y + top;
-          if ((_a2 = middlewareData2.size) == null ? void 0 : _a2.skip) {
+          if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
             return {
               y: nextY,
               data: {
@@ -493,10 +455,6 @@ const Select = withStaticProperties((props) => {
   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;
-  console.log("Select", {
-    activeIndex,
-    selectedIndex
-  });
   const interactions = useInteractions([
     useClick(context, { pointerDown: true }),
     useRole(context, { role: "listbox" }),
@@ -542,7 +500,7 @@ const Select = withStaticProperties((props) => {
   }, [middlewareType]);
   const touchPageYRef = React.useRef(null);
   const handleWheel = React.useCallback((event) => {
-    var _a2, _b;
+    var _a, _b;
     const pinching = event.ctrlKey;
     const currentTarget = event.currentTarget;
     function isWheelEvent(event2) {
@@ -553,7 +511,7 @@ const Select = withStaticProperties((props) => {
       return event2.touches != null;
     }
     __name(isTouchEvent, "isTouchEvent");
-    if (Math.abs(((_a2 = currentTarget == null ? void 0 : currentTarget.offsetHeight) != null ? _a2 : 0) - (visualViewport.height - WINDOW_PADDING * 2)) > 1 && !pinching) {
+    if (Math.abs(((_a = currentTarget == null ? void 0 : currentTarget.offsetHeight) != null ? _a : 0) - (visualViewport.height - WINDOW_PADDING * 2)) > 1 && !pinching) {
       event.preventDefault();
     } else if (isWheelEvent(event) && isFirefox) {
       currentTarget.scrollTop += event.deltaY;
@@ -599,12 +557,12 @@ const Select = withStaticProperties((props) => {
     };
   }, [update]);
   React.useLayoutEffect(() => {
-    var _a2, _b, _c;
+    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 = (_a2 = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a2.offsetHeight) != null ? _b : 0;
+        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;
@@ -633,7 +591,7 @@ const Select = withStaticProperties((props) => {
     increaseHeight
   ]);
   React.useLayoutEffect(() => {
-    var _a2;
+    var _a;
     const floating2 = refs.floating.current;
     const reference2 = refs.reference.current;
     if (open && floating2 && reference2 && floating2.offsetHeight < floating2.scrollHeight) {
@@ -645,7 +603,7 @@ const Select = withStaticProperties((props) => {
         }
         return;
       }
-      floating2.scrollTop = (_a2 = middlewareData.size) == null ? void 0 : _a2.y;
+      floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
       const closeToBottom = visualViewport.height + getVisualOffsetTop() - referenceRect.bottom < FALLBACK_THRESHOLD;
       const closeToTop = referenceRect.top < FALLBACK_THRESHOLD;
       if (floating2.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
@@ -662,11 +620,10 @@ const Select = withStaticProperties((props) => {
     middlewareData
   ]);
   React.useLayoutEffect(() => {
-    console.log("focusin", selectedIndex, listItemsRef.current[selectedIndex], listItemsRef.current);
     if (open && selectedIndex != null) {
       requestAnimationFrame(() => {
-        var _a2;
-        (_a2 = listItemsRef.current[selectedIndex]) == null ? void 0 : _a2.focus({ preventScroll: true });
+        var _a;
+        (_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.focus({ preventScroll: true });
       });
     }
   }, [listItemsRef, selectedIndex, open]);
@@ -684,7 +641,9 @@ const Select = withStaticProperties((props) => {
   }, [open]);
   const [valueNode, setValueNode] = React.useState(null);
   const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);
-  return <SelectProvider scope={__scopeSelect} increaseHeight={increaseHeight} forceUpdate={forceUpdate} floatingRef={floatingRef} valueNode={valueNode} onValueNodeChange={setValueNode} valueNodeHasChildren={valueNodeHasChildren} onValueNodeHasChildrenChange={setValueNodeHasChildren} interactions={{
+  return <SelectProvider 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({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/select",
-  "version": "1.0.1-beta.46",
+  "version": "1.0.1-beta.49",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -23,14 +23,14 @@
     "@floating-ui/react-native": "^0.7.0",
     "@radix-ui/react-use-callback-ref": "^0.1.0",
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/button": "^1.0.1-beta.46",
-    "@tamagui/compose-refs": "^1.0.1-beta.46",
-    "@tamagui/core": "^1.0.1-beta.46",
-    "@tamagui/create-context": "^1.0.1-beta.46",
-    "@tamagui/separator": "^1.0.1-beta.46",
-    "@tamagui/stacks": "^1.0.1-beta.46",
-    "@tamagui/text": "^1.0.1-beta.46",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.46"
+    "@tamagui/compose-refs": "^1.0.1-beta.49",
+    "@tamagui/core": "^1.0.1-beta.49",
+    "@tamagui/create-context": "^1.0.1-beta.49",
+    "@tamagui/list-item": "^1.0.1-beta.49",
+    "@tamagui/separator": "^1.0.1-beta.49",
+    "@tamagui/stacks": "^1.0.1-beta.49",
+    "@tamagui/text": "^1.0.1-beta.49",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.49"
   },
   "peerDependencies": {
     "react": "*",
@@ -38,7 +38,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.46",
+    "@tamagui/build": "^1.0.1-beta.49",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",