@tamagui/select 1.0.0-beta.11

package/dist/esm/Select.js

@@ -0,0 +1,391 @@
+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 /* @__PURE__ */ React.createElement(SelectProvider, {
+    scope: __scopeSelect,
+    open
+  }, children);
+}, "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 /* @__PURE__ */ React.createElement(Primitive.button, {
+    type: "button",
+    role: "combobox",
+    "aria-controls": context.contentId,
+    "aria-expanded": context.open,
+    "aria-autocomplete": "none",
+    dir: context.dir,
+    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 /* @__PURE__ */ React.createElement(XStack, {
+    ...valueProps,
+    pointerEvents: "none"
+  });
+});
+const ICON_NAME = "SelectIcon";
+const SelectIcon = React.forwardRef((props, forwardedRef) => {
+  const { __scopeSelect, children, ...iconProps } = props;
+  return /* @__PURE__ */ React.createElement(XStack, {
+    "aria-hidden": true,
+    ...iconProps,
+    ref: forwardedRef
+  }, children || "\u25BC");
+});
+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 /* @__PURE__ */ React.createElement(SelectGroupContextProvider, {
+    scope: __scopeSelect,
+    id: groupId
+  }, /* @__PURE__ */ React.createElement(Primitive.div, {
+    role: "group",
+    "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 groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
+  return /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ React.createElement(SelectItemContextProvider, {
+    scope: __scopeSelect,
+    value,
+    textId,
+    isSelected,
+    onItemTextChange: React.useCallback((node) => {
+      setTextValue((prevTextValue) => {
+        var _a;
+        return prevTextValue || ((_a = node == null ? void 0 : node.textContent) != null ? _a : "").trim();
+      });
+    }, [])
+  }, /* @__PURE__ */ React.createElement(Collection.ItemSlot, {
+    scope: __scopeSelect,
+    value,
+    disabled,
+    textValue
+  }, /* @__PURE__ */ React.createElement(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();
+    })
+  })));
+});
+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 /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(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(/* @__PURE__ */ React.createElement("option", {
+    value: itemContext.value
+  }, (_a = ref.current) == null ? void 0 : _a.textContent), 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 ? /* @__PURE__ */ React.createElement(Primitive.span, {
+    "aria-hidden": true,
+    ...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 ? /* @__PURE__ */ React.createElement(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 ? /* @__PURE__ */ React.createElement(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 /* @__PURE__ */ React.createElement(Primitive.div, {
+    "aria-hidden": true,
+    ...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 /* @__PURE__ */ React.createElement(VisuallyHidden, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement("select", {
+    ...selectProps,
+    ref: composedRefs,
+    defaultValue: value
+  }));
+});
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  createSelectScope
+};
+//# sourceMappingURL=Select.js.map

package/dist/esm/Select.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Select.tsx"],
+  "sourcesContent": ["import {\n  ContextData,\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  autoUpdate,\n  detectOverflow,\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n  useTypeahead,\n} from '@floating-ui/react-dom-interactions'\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers, useIsomorphicLayoutEffect } from '@tamagui/core'\n// import { useDirection } from '@tamagui/react-direction'\n// import { DismissableLayer } from '@tamagui/react-dismissable-layer'\n// import { FocusScope } from '@tamagui/react-focus-scope'\nimport { useId } from '@tamagui/core'\nimport { createContextScope } from '@tamagui/create-context'\nimport type { Scope } from '@tamagui/create-context'\nimport { clamp } from '@tamagui/helpers'\n// import { useLabelContext } from '@tamagui/react-label'\nimport { Portal } from '@tamagui/portal'\nimport { Separator } from '@tamagui/separator'\nimport { XStack, YStack, YStackProps } from '@tamagui/stacks'\n// import { Primitive } from '@tamagui/react-primitive'\n// import type * as Radix from '@tamagui/react-primitive'\nimport { useControllableState } from '@tamagui/use-controllable-state'\n// import { useLayoutEffect } from '@tamagui/react-use-layout-effect'\n// import { usePrevious } from '@tamagui/react-use-previous'\n// import { VisuallyHidden } from '@tamagui/core'\n// import { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport { View } from 'react-native'\n\n// import { RemoveScroll } from 'react-remove-scroll'\n\n//   upsides:\n//     could virtualize in the future\n//     should be a decent amount faster\n//     no having to set keys\n//     no internal awkward traversal of children, impossible on native\n\n//   downsides:\n//     have to have a hook with a new type of pattern\n\n// alternate is just to require passing index={}\n\n// const select = useSelect()\n//\n// <Select items={[]}>\n//   <SelectTrigger>\n//     <SelectIcon />\n//     <SelectValue />\n//   </SelectTrigger>\n//\n//   <SelectContent>\n//     <SelectScrollUpButton />\n//     <SelectScrollDownButton />\n//\n//     can optionally include group\n//     <SelectItemGroup>\n//       <SelectItemGroupLabel />\n//     </SelectItemGroup>\n//\n//     <SelectItem>\n//       <SelectItemText>\n//          {select.text}\n//       </SelectItemText>\n//       <SelectItemIndicator />\n//     </SelectItem>\n//   </SelectItemGroup>\n//\n//   </SelectContent>\n// </Select>\n\ntype GenericElement = HTMLElement | View\n\ntype Direction = 'ltr' | 'rtl'\n\nconst OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown']\nconst SELECTION_KEYS = [' ', 'Enter']\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nconst SELECT_NAME = 'Select'\n\nconst WINDOW_PADDING = 8\nconst SCROLL_ARROW_VELOCITY = 8\nconst SCROLL_ARROW_THRESHOLD = 8\nconst MIN_HEIGHT = 80\nconst FALLBACK_THRESHOLD = 16\n\ninterface SelectContextValue {\n  selectedIndex: number\n  setSelectedIndex: (index: number) => void\n  activeIndex: number | null\n  setActiveIndex: (index: number | null) => void\n  listRef: React.MutableRefObject<Array<HTMLLIElement | null>>\n  open: boolean\n  setOpen: (open: boolean) => void\n  onChange: (value: string) => void\n  dataRef: React.MutableRefObject<ContextData>\n  getItemProps: (userProps?: React.HTMLProps<HTMLElement>) => any\n  controlledScrolling: boolean\n  canScrollUp: boolean\n  canScrollDown: boolean\n}\n\n// type SelectContentContextValue = {\n//   contentWrapper: HTMLDivElement | null\n//   content: SelectContentElement | null\n//   viewport: SelectViewportElement | null\n//   onViewportChange(node: SelectViewportElement | null): void\n//   selectedItem: SelectItemElement | null\n//   onSelectedItemChange(node: SelectItemElement | null): void\n//   selectedItemText: SelectItemTextElement | null\n//   onSelectedItemTextChange(node: SelectItemTextElement | null): void\n//   onScrollButtonChange(node: SelectScrollButtonImplElement | null): void\n//   onItemLeave(): void\n//   isPositioned: boolean\n//   shouldExpandOnScrollRef: React.RefObject<boolean>\n//   searchRef: React.RefObject<string>\n// }\n\n// const [SelectContentContextProvider, useSelectContentContext] =\n//   createSelectContext<SelectContentContextValue>(CONTENT_NAME)\n\n// const SelectContext = React.createContext({} as SelectContextValue)\n\ntype ScopedProps<P> = P & { __scopeSelect?: Scope }\n\nconst [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME)\nconst [SelectProvider, useSelectContext] = createSelectContext<SelectContextValue>(SELECT_NAME)\n\ninterface SelectProps {\n  children?: React.ReactNode\n  value?: string\n  defaultValue?: string\n  onValueChange?(value: string): void\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?(open: boolean): void\n  dir?: Direction\n  name?: string\n  autoComplete?: string\n}\n\nconst Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {\n  const {\n    __scopeSelect,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    dir,\n    name,\n    autoComplete,\n  } = props\n  // const [trigger, setTrigger] = React.useState<SelectTriggerElement | null>(null)\n  // const [valueNode, setValueNode] = React.useState<SelectValueElement | null>(null)\n  // const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false)\n  // const direction = useDirection(dir)\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen || false,\n    onChange: onOpenChange,\n  })\n  const [value, setValue] = useControllableState({\n    prop: valueProp,\n    defaultProp: defaultValue || '',\n    onChange: onValueChange,\n  })\n\n  // const listContentRef = useRef([\n  //   \"Select...\",\n  //   ...(Children.map(children, (child) =>\n  //     Children.map(\n  //       isValidElement(child) && child.props.children,\n  //       (child) => child.props.value\n  //     )\n  //   ) ?? [])\n  // ]);\n\n  const selectedIndexRef = React.useRef<number | null>(null)\n  const activeIndexRef = React.useRef<number | null>(null)\n  const prevActiveIndex = usePrevious<number | null>(activeIndex)\n\n  const [showArrows, setShowArrows] = React.useState(false)\n  const [scrollTop, setScrollTop] = React.useState(0)\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n  const [selectedIndex, setSelectedIndex] = React.useState(\n    Math.max(0, listContentRef.current.indexOf(value))\n  )\n\n  useIsomorphicLayoutEffect(() => {\n    selectedIndexRef.current = selectedIndex\n    activeIndexRef.current = activeIndex\n  })\n\n  // Wait for scroll position to settle before showing arrows to prevent\n  // interference with pointer events.\n  useEffect(() => {\n    const frame = requestAnimationFrame(() => {\n      setShowArrows(open)\n\n      if (!open) {\n        setScrollTop(0)\n        setMiddlewareType('align')\n        setActiveIndex(null)\n        setControlledScrolling(false)\n      }\n    })\n    return () => cancelAnimationFrame(frame)\n  }, [open])\n\n  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD\n  const showDownArrow =\n    showArrows &&\n    floatingRef.current &&\n    scrollTop <\n      floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD\n\n  // We set this to true by default so that events bubble to forms without JS (SSR)\n  // const isFormControl = trigger ? Boolean(trigger.closest('form')) : true\n  // const [bubbleSelect, setBubbleSelect] = React.useState<HTMLSelectElement | null>(null)\n  // const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null)\n\n  return (\n    <SelectProvider\n      scope={__scopeSelect}\n      // trigger={trigger}\n      // onTriggerChange={setTrigger}\n      // valueNode={valueNode}\n      // onValueNodeChange={setValueNode}\n      // valueNodeHasChildren={valueNodeHasChildren}\n      // onValueNodeHasChildrenChange={setValueNodeHasChildren}\n      // contentId={useId() || ''}\n      // value={value}\n      // onValueChange={setValue}\n      open={open}\n      // onOpenChange={setOpen}\n      // TODO\n      // dir={'rtl'} //direction}\n      // bubbleSelect={bubbleSelect}\n      // triggerPointerDownPosRef={triggerPointerDownPosRef}\n    >\n      {/* <Collection.Provider scope={__scopeSelect}>{children}</Collection.Provider> */}\n      {children}\n      {/* {isFormControl ? (\n        <BubbleSelect\n          ref={setBubbleSelect}\n          aria-hidden\n          tabIndex={-1}\n          name={name}\n          autoComplete={autoComplete}\n          value={value}\n          // enable form autofill\n          onChange={(event) => setValue(event.target.value)}\n        />\n      ) : null} */}\n    </SelectProvider>\n  )\n}\n\nSelect.displayName = SELECT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger'\n\ntype SelectTriggerElement = GenericElement\ntype SelectTriggerProps = YStackProps\n\nconst SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(\n  (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n    const {\n      __scopeSelect,\n      disabled = false,\n      // @ts-ignore\n      'aria-labelledby': ariaLabelledby,\n      ...triggerProps\n    } = props\n    const context = useSelectContext(TRIGGER_NAME, __scopeSelect)\n    const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange)\n    const getItems = useCollection(__scopeSelect)\n    // const labelId = useLabelContext(context.trigger)\n    // const labelledBy = ariaLabelledby || labelId\n\n    // const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {\n    //   const enabledItems = getItems().filter((item) => !item.disabled)\n    //   const currentItem = enabledItems.find((item) => item.value === context.value)\n    //   const nextItem = findNextItem(enabledItems, search, currentItem)\n    //   if (nextItem !== undefined) {\n    //     context.onValueChange(nextItem.value)\n    //   }\n    // })\n\n    const handleOpen = () => {\n      if (!disabled) {\n        context.onOpenChange(true)\n        // reset typeahead when we open\n        resetTypeahead()\n      }\n    }\n\n    return (\n      <Primitive.button\n        type=\"button\"\n        role=\"combobox\"\n        aria-controls={context.contentId}\n        aria-expanded={context.open}\n        aria-autocomplete=\"none\"\n        // aria-labelledby={labelledBy}\n        dir={context.dir}\n        disabled={disabled}\n        data-disabled={disabled ? '' : undefined}\n        {...triggerProps}\n        ref={composedRefs}\n        onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {\n          // prevent implicit pointer capture\n          // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n          ;(event.target as HTMLElement).releasePointerCapture(event.pointerId)\n\n          // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n          // but not when the control key is pressed (avoiding MacOS right click)\n          if (event.button === 0 && event.ctrlKey === false) {\n            handleOpen()\n            context.triggerPointerDownPosRef.current = {\n              x: Math.round(event.pageX),\n              y: Math.round(event.pageY),\n            }\n            // prevent trigger from stealing focus from the active item after opening.\n            event.preventDefault()\n          }\n        })}\n        onKeyDown={composeEventHandlers(triggerProps.onKeyDown, (event) => {\n          const isTypingAhead = searchRef.current !== ''\n          const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n          if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key)\n          if (isTypingAhead && event.key === ' ') return\n          if (OPEN_KEYS.includes(event.key)) {\n            handleOpen()\n            event.preventDefault()\n          }\n        })}\n      />\n    )\n  }\n)\n\nSelectTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue'\n\ntype SelectValueElement = GenericElement\ntype SelectValueProps = YStackProps\n\nconst SelectValue = React.forwardRef<SelectValueElement, SelectValueProps>(\n  (props: ScopedProps<SelectValueProps>, forwardedRef) => {\n    // We ignore `className` and `style` as this part shouldn't be styled.\n    const { __scopeSelect, className, style, ...valueProps } = props\n    // const context = useSelectContext(VALUE_NAME, __scopeSelect)\n    // const { onValueNodeHasChildrenChange } = context\n    // const hasChildren = props.children !== undefined\n    // const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange)\n\n    // React.useEffect(() => {\n    //   onValueNodeHasChildrenChange(hasChildren)\n    // }, [onValueNodeHasChildrenChange, hasChildren])\n\n    return (\n      <XStack\n        {...valueProps}\n        // ref={composedRefs}\n        // we don't want events from the portalled `SelectValue` children to bubble\n        // through the item they came from\n        pointerEvents=\"none\"\n      />\n    )\n  }\n)\n\n// SelectValue.displayName = VALUE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst ICON_NAME = 'SelectIcon'\n\ntype SelectIconProps = YStackProps\ntype SelectIconElement = GenericElement\n\nconst SelectIcon = React.forwardRef<SelectIconElement, SelectIconProps>(\n  (props: ScopedProps<SelectIconProps>, forwardedRef) => {\n    const { __scopeSelect, children, ...iconProps } = props\n    return (\n      <XStack aria-hidden {...iconProps} ref={forwardedRef}>\n        {children || '\u25BC'}\n      </XStack>\n    )\n  }\n)\n\nSelectIcon.displayName = ICON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent'\n\ntype SelectContentElement = any\ntype SelectContentProps = any\n\nconst SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(\n  (props: ScopedProps<SelectContentProps>, forwardedRef) => {\n    const context = useSelectContext(CONTENT_NAME, props.__scopeSelect)\n    return props.children\n  }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup'\n\ntype SelectGroupContextValue = { id: string }\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n  createSelectContext<SelectGroupContextValue>(GROUP_NAME)\n\ntype SelectGroupElement = React.ElementRef<typeof Primitive.div>\ninterface SelectGroupProps extends PrimitiveDivProps {}\n\nconst SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(\n  (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n    const { __scopeSelect, ...groupProps } = props\n    const groupId = useId()\n    return (\n      <SelectGroupContextProvider scope={__scopeSelect} id={groupId}>\n        <Primitive.div role=\"group\" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} />\n      </SelectGroupContextProvider>\n    )\n  }\n)\n\nSelectGroup.displayName = GROUP_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel'\n\ntype SelectLabelElement = React.ElementRef<typeof Primitive.div>\ninterface SelectLabelProps extends PrimitiveDivProps {}\n\nconst SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(\n  (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n    const { __scopeSelect, ...labelProps } = props\n    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect)\n    return <Primitive.div id={groupContext.id} {...labelProps} ref={forwardedRef} />\n  }\n)\n\nSelectLabel.displayName = LABEL_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem'\n\ntype SelectItemContextValue = {\n  value: string\n  textId: string\n  isSelected: boolean\n  onItemTextChange(node: SelectItemTextElement | null): void\n}\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n  createSelectContext<SelectItemContextValue>(ITEM_NAME)\n\ntype SelectItemElement = React.ElementRef<typeof Primitive.div>\ninterface SelectItemProps extends PrimitiveDivProps {\n  value: string\n  disabled?: boolean\n  textValue?: string\n}\n\nconst SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(\n  (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n    const { __scopeSelect, value, disabled = false, textValue: textValueProp, ...itemProps } = props\n    const context = useSelectContext(ITEM_NAME, __scopeSelect)\n    const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect)\n    const isSelected = context.value === value\n    const [textValue, setTextValue] = React.useState(textValueProp ?? '')\n    const [isFocused, setIsFocused] = React.useState(false)\n    const composedRefs = useComposedRefs(\n      forwardedRef,\n      isSelected ? contentContext.onSelectedItemChange : undefined\n    )\n    const textId = useId()\n\n    const handleSelect = () => {\n      if (!disabled) {\n        context.onValueChange(value)\n        context.onOpenChange(false)\n      }\n    }\n\n    return (\n      <SelectItemContextProvider\n        scope={__scopeSelect}\n        value={value}\n        textId={textId}\n        isSelected={isSelected}\n        onItemTextChange={React.useCallback((node) => {\n          setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim())\n        }, [])}\n      >\n        <Collection.ItemSlot\n          scope={__scopeSelect}\n          value={value}\n          disabled={disabled}\n          textValue={textValue}\n        >\n          <Primitive.div\n            role=\"option\"\n            aria-labelledby={textId}\n            // `isFocused` caveat fixes stuttering in VoiceOver\n            aria-selected={isSelected && isFocused}\n            data-state={isSelected ? 'active' : 'inactive'}\n            aria-disabled={disabled || undefined}\n            data-disabled={disabled ? '' : undefined}\n            tabIndex={disabled ? undefined : -1}\n            {...itemProps}\n            ref={composedRefs}\n            onFocus={composeEventHandlers(itemProps.onFocus, () => setIsFocused(true))}\n            onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))}\n            onPointerUp={composeEventHandlers(itemProps.onPointerUp, handleSelect)}\n            onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {\n              if (disabled) {\n                contentContext.onItemLeave()\n              } else {\n                // even though safari doesn't support this option, it's acceptable\n                // as it only means it might scroll a few pixels when using the pointer.\n                event.currentTarget.focus({ preventScroll: true })\n              }\n            })}\n            onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {\n              if (event.currentTarget === document.activeElement) {\n                contentContext.onItemLeave()\n              }\n            })}\n            onKeyDown={composeEventHandlers(itemProps.onKeyDown, (event) => {\n              const isTypingAhead = contentContext.searchRef.current !== ''\n              if (isTypingAhead && event.key === ' ') return\n              if (SELECTION_KEYS.includes(event.key)) handleSelect()\n              // prevent page scroll if using the space key to select an item\n              if (event.key === ' ') event.preventDefault()\n            })}\n          />\n        </Collection.ItemSlot>\n      </SelectItemContextProvider>\n    )\n  }\n)\n\nSelectItem.displayName = ITEM_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText'\n\ntype SelectItemTextElement = React.ElementRef<typeof Primitive.span>\ninterface SelectItemTextProps extends PrimitiveSpanProps {}\n\nconst SelectItemText = React.forwardRef<SelectItemTextElement, SelectItemTextProps>(\n  (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n    // We ignore `className` and `style` as this part shouldn't be styled.\n    const { __scopeSelect, className, style, ...itemTextProps } = props\n    const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect)\n    const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect)\n    const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect)\n    const ref = React.useRef<SelectItemTextElement | null>(null)\n    const composedRefs = useComposedRefs(\n      forwardedRef,\n      ref,\n      itemContext.onItemTextChange,\n      itemContext.isSelected ? contentContext.onSelectedItemTextChange : undefined\n    )\n\n    return (\n      <>\n        <Primitive.span id={itemContext.textId} {...itemTextProps} ref={composedRefs} />\n\n        {/* Portal the select item text into the trigger value node */}\n        {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n          ? ReactDOM.createPortal(itemTextProps.children, context.valueNode)\n          : null}\n\n        {/* Portal an option in the bubble select */}\n        {context.bubbleSelect\n          ? ReactDOM.createPortal(\n              // we use `.textContent` because `option` only support `string` or `number`\n              <option value={itemContext.value}>{ref.current?.textContent}</option>,\n              context.bubbleSelect\n            )\n          : null}\n      </>\n    )\n  }\n)\n\nSelectItemText.displayName = ITEM_TEXT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator'\n\ntype SelectItemIndicatorElement = React.ElementRef<typeof Primitive.span>\ninterface SelectItemIndicatorProps extends PrimitiveSpanProps {}\n\nconst SelectItemIndicator = React.forwardRef<SelectItemIndicatorElement, SelectItemIndicatorProps>(\n  (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n    const { __scopeSelect, ...itemIndicatorProps } = props\n    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect)\n    return itemContext.isSelected ? (\n      <Primitive.span aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n    ) : null\n  }\n)\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'\n\ntype SelectScrollUpButtonElement = SelectScrollButtonImplElement\ninterface SelectScrollUpButtonProps extends Omit<SelectScrollButtonImplProps, 'onAutoScroll'> {}\n\nconst SelectScrollUpButton = React.forwardRef<\n  SelectScrollUpButtonElement,\n  SelectScrollUpButtonProps\n>((props: ScopedProps<SelectScrollUpButtonProps>, forwardedRef) => {\n  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect)\n  const [canScrollUp, setCanScrollUp] = React.useState(false)\n  const composedRefs = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange)\n\n  // useLayoutEffect(() => {\n  //   if (contentContext.viewport && contentContext.isPositioned) {\n  //     const viewport = contentContext.viewport\n  //     function handleScroll() {\n  //       const canScrollUp = viewport.scrollTop > 0\n  //       setCanScrollUp(canScrollUp)\n  //     }\n  //     handleScroll()\n  //     viewport.addEventListener('scroll', handleScroll)\n  //     return () => viewport.removeEventListener('scroll', handleScroll)\n  //   }\n  // }, [contentContext.viewport, contentContext.isPositioned])\n\n  return canScrollUp ? (\n    <SelectScrollButtonImpl\n      {...props}\n      ref={composedRefs}\n      onAutoScroll={() => {\n        const { viewport, selectedItem } = contentContext\n        if (viewport && selectedItem) {\n          viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight\n        }\n      }}\n    />\n  ) : null\n})\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'\n\ntype SelectScrollDownButtonElement = SelectScrollButtonImplElement\ninterface SelectScrollDownButtonProps extends Omit<SelectScrollButtonImplProps, 'onAutoScroll'> {}\n\nconst SelectScrollDownButton = React.forwardRef<\n  SelectScrollDownButtonElement,\n  SelectScrollDownButtonProps\n>((props: ScopedProps<SelectScrollDownButtonProps>, forwardedRef) => {\n  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect)\n  const [canScrollDown, setCanScrollDown] = React.useState(false)\n  const composedRefs = useComposedRefs(forwardedRef, contentContext.onScrollButtonChange)\n\n  // useLayoutEffect(() => {\n  //   if (contentContext.viewport && contentContext.isPositioned) {\n  //     const viewport = contentContext.viewport\n  //     function handleScroll() {\n  //       const maxScroll = viewport.scrollHeight - viewport.clientHeight\n  //       // we use Math.ceil here because if the UI is zoomed-in\n  //       // `scrollTop` is not always reported as an integer\n  //       const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll\n  //       setCanScrollDown(canScrollDown)\n  //     }\n  //     handleScroll()\n  //     viewport.addEventListener('scroll', handleScroll)\n  //     return () => viewport.removeEventListener('scroll', handleScroll)\n  //   }\n  // }, [contentContext.viewport, contentContext.isPositioned])\n\n  return canScrollDown ? (\n    <SelectScrollButtonImpl\n      {...props}\n      ref={composedRefs}\n      onAutoScroll={() => {\n        const { viewport, selectedItem } = contentContext\n        if (viewport && selectedItem) {\n          viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight\n        }\n      }}\n    />\n  ) : null\n})\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME\n\ntype SelectScrollButtonImplElement = React.ElementRef<typeof Primitive.div>\ninterface SelectScrollButtonImplProps extends PrimitiveDivProps {\n  onAutoScroll(): void\n}\n\nconst SelectScrollButtonImpl = React.forwardRef<\n  SelectScrollButtonImplElement,\n  SelectScrollButtonImplProps\n>((props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n  const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props\n  const contentContext = useSelectContentContext('SelectScrollButton', __scopeSelect)\n  const autoScrollTimerRef = React.useRef<number | null>(null)\n\n  const intervalRef = React.useRef<any>()\n  const loopingRef = React.useRef(false)\n\n  const { x, y, reference, floating, strategy, update, refs } = useFloating({\n    strategy: 'fixed',\n    placement: dir === 'up' ? 'top' : 'bottom',\n    middleware: [offset(({ floating }) => -floating.height)],\n  })\n\n  return (\n    <Primitive.div\n      aria-hidden\n      {...scrollIndicatorProps}\n      ref={forwardedRef}\n      style={{ flexShrink: 0, ...scrollIndicatorProps.style }}\n      onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {\n        contentContext.onItemLeave()\n        if (autoScrollTimerRef.current === null) {\n          autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50)\n        }\n      })}\n      onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {\n        clearAutoScrollTimer()\n      })}\n    />\n  )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'SelectSeparator'\n\ntype SelectSeparatorElement = React.ElementRef<typeof Primitive.div>\ninterface SelectSeparatorProps extends PrimitiveDivProps {}\n\nconst SelectSeparator = Separator\n// React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(\n//   (props: ScopedProps<SelectSeparatorProps>, forwardedRef) => {\n//     const { __scopeSelect, ...separatorProps } = props\n//     return <Primitive.div aria-hidden {...separatorProps} ref={forwardedRef} />\n//   }\n// )\n\nSelectSeparator.displayName = SEPARATOR_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWithoutRef<'select'>>(\n  (props, forwardedRef) => {\n    const { value, ...selectProps } = props\n    const ref = React.useRef<HTMLSelectElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n    const prevValue = usePrevious(value)\n\n    // Bubble value change to parents (e.g form change event)\n    React.useEffect(() => {\n      const select = ref.current!\n      const selectProto = window.HTMLSelectElement.prototype\n      const descriptor = Object.getOwnPropertyDescriptor(selectProto, 'value') as PropertyDescriptor\n      const setValue = descriptor.set\n      if (prevValue !== value && setValue) {\n        const event = new Event('change', { bubbles: true })\n        setValue.call(select, value)\n        select.dispatchEvent(event)\n      }\n    }, [prevValue, value])\n\n    /**\n     * We purposefully use a `select` here to support form autofill as much\n     * as possible.\n     *\n     * We purposefully do not add the `value` attribute here to allow the value\n     * to be set programatically and bubble to any parent form `onChange` event.\n     * Adding the `value` will cause React to consider the programatic\n     * dispatch a duplicate and it will get swallowed.\n     *\n     * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n     * won't work otherwise.\n     */\n    // TODO\n    return null\n    return (\n      <VisuallyHidden asChild>\n        <select {...selectProps} ref={composedRefs} defaultValue={value} />\n      </VisuallyHidden>\n    )\n  }\n)\n\n// const Root = Select\n// const Trigger = SelectTrigger\n// const Value = SelectValue\n// const Icon = SelectIcon\n// const Content = SelectContent\n// const Viewport = SelectViewport\n// const Group = SelectGroup\n// const Label = SelectLabel\n// const Item = SelectItem\n// const ItemText = SelectItemText\n// const ItemIndicator = SelectItemIndicator\n// const ScrollUpButton = SelectScrollUpButton\n// const ScrollDownButton = SelectScrollDownButton\n// const Separator = SelectSeparator\n\nexport {\n  createSelectScope,\n  //\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectContent,\n  // SelectViewport,\n  SelectGroup,\n  SelectLabel,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n  SelectSeparator,\n  //\n  // Root,\n  // Trigger,\n  // Value,\n  // Icon,\n  // Content,\n  // Viewport,\n  // Group,\n  // Label,\n  // Item,\n  // ItemText,\n  // ItemIndicator,\n  // ScrollUpButton,\n  // ScrollDownButton,\n  // Separator,\n}\nexport type {\n  SelectProps,\n  SelectTriggerProps,\n  SelectValueProps,\n  SelectIconProps,\n  SelectContentProps,\n  SelectViewportProps,\n  SelectGroupProps,\n  SelectLabelProps,\n  SelectItemProps,\n  SelectItemTextProps,\n  SelectItemIndicatorProps,\n  SelectScrollUpButtonProps,\n  SelectScrollDownButtonProps,\n  SelectSeparatorProps,\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from "./Select";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './Select'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}