@tamagui/select 1.0.0-beta.11

package/dist/jsx/Select.js

@@ -0,0 +1,301 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import {
+  offset,
+  useFloating
+} from "@floating-ui/react-dom-interactions";
+import { usePrevious } from "@radix-ui/react-use-previous";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { composeEventHandlers, useIsomorphicLayoutEffect } from "@tamagui/core";
+import { useId } from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { Separator } from "@tamagui/separator";
+import { XStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+const OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
+const SELECTION_KEYS = [" ", "Enter"];
+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 Select = /* @__PURE__ */ __name((props) => {
+  const {
+    __scopeSelect,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    dir: dir2,
+    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 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 [activeIndex, setActiveIndex] = React.useState(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(Math.max(0, listContentRef.current.indexOf(value)));
+  useIsomorphicLayoutEffect(() => {
+    selectedIndexRef.current = selectedIndex;
+    activeIndexRef.current = activeIndex;
+  });
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setShowArrows(open);
+      if (!open) {
+        setScrollTop(0);
+        setMiddlewareType("align");
+        setActiveIndex(null);
+        setControlledScrolling(false);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open]);
+  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
+  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
+  return <SelectProvider scope={__scopeSelect} open={open}>{children}</SelectProvider>;
+}, "Select");
+Select.displayName = SELECT_NAME;
+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);
+  const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
+  const getItems = useCollection(__scopeSelect);
+  const handleOpen = /* @__PURE__ */ __name(() => {
+    if (!disabled) {
+      context.onOpenChange(true);
+      resetTypeahead();
+    }
+  }, "handleOpen");
+  return <Primitive.button type="button" role="combobox" aria-controls={context.contentId} aria-expanded={context.open} aria-autocomplete="none" dir={context.dir} disabled={disabled} data-disabled={disabled ? "" : void 0} {...triggerProps} ref={composedRefs} onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {
+    ;
+    event.target.releasePointerCapture(event.pointerId);
+    if (event.button === 0 && event.ctrlKey === false) {
+      handleOpen();
+      context.triggerPointerDownPosRef.current = {
+        x: Math.round(event.pageX),
+        y: Math.round(event.pageY)
+      };
+      event.preventDefault();
+    }
+  })} onKeyDown={composeEventHandlers(triggerProps.onKeyDown, (event) => {
+    const isTypingAhead = searchRef.current !== "";
+    const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+    if (!isModifierKey && event.key.length === 1)
+      handleTypeaheadSearch(event.key);
+    if (isTypingAhead && event.key === " ")
+      return;
+    if (OPEN_KEYS.includes(event.key)) {
+      handleOpen();
+      event.preventDefault();
+    }
+  })} />;
+});
+SelectTrigger.displayName = TRIGGER_NAME;
+const VALUE_NAME = "SelectValue";
+const SelectValue = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, className, style, ...valueProps } = props;
+  return <XStack {...valueProps} pointerEvents="none" />;
+});
+const ICON_NAME = "SelectIcon";
+const SelectIcon = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, children, ...iconProps } = props;
+  return <XStack aria-hidden {...iconProps} ref={forwardedRef}>{children || "\u25BC"}</XStack>;
+});
+SelectIcon.displayName = ICON_NAME;
+const CONTENT_NAME = "SelectContent";
+const SelectContent = React.forwardRef((props, forwardedRef) => {
+  const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);
+  return props.children;
+});
+const GROUP_NAME = "SelectGroup";
+const [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
+const SelectGroup = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, ...groupProps } = props;
+  const groupId = useId();
+  return <SelectGroupContextProvider scope={__scopeSelect} id={groupId}><Primitive.div 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 groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+  return <Primitive.div id={groupContext.id} {...labelProps} ref={forwardedRef} />;
+});
+SelectLabel.displayName = LABEL_NAME;
+const ITEM_NAME = "SelectItem";
+const [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
+const SelectItem = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, value, disabled = false, textValue: textValueProp, ...itemProps } = props;
+  const context = useSelectContext(ITEM_NAME, __scopeSelect);
+  const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
+  const isSelected = context.value === value;
+  const [textValue, setTextValue] = React.useState(textValueProp != null ? textValueProp : "");
+  const [isFocused, setIsFocused] = React.useState(false);
+  const composedRefs = useComposedRefs(forwardedRef, isSelected ? contentContext.onSelectedItemChange : void 0);
+  const textId = useId();
+  const handleSelect = /* @__PURE__ */ __name(() => {
+    if (!disabled) {
+      context.onValueChange(value);
+      context.onOpenChange(false);
+    }
+  }, "handleSelect");
+  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();
+    });
+  }, [])}><Collection.ItemSlot scope={__scopeSelect} value={value} disabled={disabled} textValue={textValue}><Primitive.div role="option" 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} ref={composedRefs} onFocus={composeEventHandlers(itemProps.onFocus, () => setIsFocused(true))} onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))} onPointerUp={composeEventHandlers(itemProps.onPointerUp, handleSelect)} onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {
+    if (disabled) {
+      contentContext.onItemLeave();
+    } else {
+      event.currentTarget.focus({ preventScroll: true });
+    }
+  })} onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {
+    if (event.currentTarget === document.activeElement) {
+      contentContext.onItemLeave();
+    }
+  })} onKeyDown={composeEventHandlers(itemProps.onKeyDown, (event) => {
+    const isTypingAhead = contentContext.searchRef.current !== "";
+    if (isTypingAhead && event.key === " ")
+      return;
+    if (SELECTION_KEYS.includes(event.key))
+      handleSelect();
+    if (event.key === " ")
+      event.preventDefault();
+  })} /></Collection.ItemSlot></SelectItemContextProvider>;
+});
+SelectItem.displayName = ITEM_NAME;
+const ITEM_TEXT_NAME = "SelectItemText";
+const SelectItemText = React.forwardRef((props, forwardedRef) => {
+  var _a;
+  const { __scopeSelect, className, style, ...itemTextProps } = props;
+  const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
+  const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
+  const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, itemContext.isSelected ? contentContext.onSelectedItemTextChange : void 0);
+  return <>
+    <Primitive.span id={itemContext.textId} {...itemTextProps} ref={composedRefs} />
+    {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM.createPortal(itemTextProps.children, context.valueNode) : null}
+    {context.bubbleSelect ? ReactDOM.createPortal(<option value={itemContext.value}>{(_a = ref.current) == null ? void 0 : _a.textContent}</option>, context.bubbleSelect) : null}
+  </>;
+});
+SelectItemText.displayName = ITEM_TEXT_NAME;
+const ITEM_INDICATOR_NAME = "SelectItemIndicator";
+const SelectItemIndicator = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, ...itemIndicatorProps } = props;
+  const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
+  return itemContext.isSelected ? <Primitive.span aria-hidden {...itemIndicatorProps} ref={forwardedRef} /> : null;
+});
+SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
+const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
+const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
+  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
+  const [canScrollUp, setCanScrollUp] = React.useState(false);
+  const composedRefs = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange);
+  return canScrollUp ? <SelectScrollButtonImpl {...props} ref={composedRefs} onAutoScroll={() => {
+    const { viewport, selectedItem } = contentContext;
+    if (viewport && selectedItem) {
+      viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
+    }
+  }} /> : null;
+});
+SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
+const SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
+const SelectScrollDownButton = React.forwardRef((props, forwardedRef) => {
+  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
+  const [canScrollDown, setCanScrollDown] = React.useState(false);
+  const composedRefs = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange);
+  return canScrollDown ? <SelectScrollButtonImpl {...props} ref={composedRefs} onAutoScroll={() => {
+    const { viewport, selectedItem } = contentContext;
+    if (viewport && selectedItem) {
+      viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
+    }
+  }} /> : null;
+});
+SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
+const SelectScrollButtonImpl = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
+  const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
+  const autoScrollTimerRef = React.useRef(null);
+  const intervalRef = React.useRef();
+  const loopingRef = React.useRef(false);
+  const { x, y, reference, floating, strategy, update, refs } = useFloating({
+    strategy: "fixed",
+    placement: dir === "up" ? "top" : "bottom",
+    middleware: [offset(({ floating: floating2 }) => -floating2.height)]
+  });
+  return <Primitive.div aria-hidden {...scrollIndicatorProps} ref={forwardedRef} style={{ flexShrink: 0, ...scrollIndicatorProps.style }} onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {
+    contentContext.onItemLeave();
+    if (autoScrollTimerRef.current === null) {
+      autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);
+    }
+  })} onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {
+    clearAutoScrollTimer();
+  })} />;
+});
+const SEPARATOR_NAME = "SelectSeparator";
+const SelectSeparator = Separator;
+SelectSeparator.displayName = SEPARATOR_NAME;
+const BubbleSelect = React.forwardRef((props, forwardedRef) => {
+  const { value, ...selectProps } = props;
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const prevValue = usePrevious(value);
+  React.useEffect(() => {
+    const select = ref.current;
+    const selectProto = window.HTMLSelectElement.prototype;
+    const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
+    const setValue = descriptor.set;
+    if (prevValue !== value && setValue) {
+      const event = new Event("change", { bubbles: true });
+      setValue.call(select, value);
+      select.dispatchEvent(event);
+    }
+  }, [prevValue, value]);
+  return null;
+  return <VisuallyHidden asChild><select {...selectProps} ref={composedRefs} defaultValue={value} /></VisuallyHidden>;
+});
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  createSelectScope
+};

package/dist/jsx/index.js

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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@tamagui/select",
+  "version": "1.0.0-beta.11",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "typings": "types",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "0.7.0",
+    "@floating-ui/react-dom-interactions": "^0.4.0",
+    "@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/compose-refs": "^1.0.0-beta.11",
+    "@tamagui/core": "^1.0.0-beta.11",
+    "@tamagui/create-context": "^1.0.0-beta.11",
+    "@tamagui/separator": "^1.0.0-beta.11",
+    "@tamagui/stacks": "^1.0.0-beta.11",
+    "@tamagui/use-controllable-state": "^1.0.0-beta.11"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.0-beta.11",
+    "@types/react-native": "^0.67.3",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}