@tamagui/select 1.0.1-beta.113 → 1.0.1-beta.114

package/dist/esm/SelectImpl.js

@@ -0,0 +1,378 @@
+import {
+  detectOverflow,
+  flip,
+  offset,
+  size,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead
+} from "@floating-ui/react-dom-interactions";
+import { usePrevious } from "@radix-ui/react-use-previous";
+import * as React from "react";
+import { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from "./constants";
+import { SelectProvider, useSelectContext } from "./context";
+import { getVisualOffsetTop, isFirefox } from "./Select";
+const SelectInlineImpl = (props) => {
+  const {
+    __scopeSelect,
+    children,
+    open = false,
+    activeIndexRef,
+    selectedIndexRef,
+    listContentRef
+  } = props;
+  const selectContext = useSelectContext("SelectSheetImpl", __scopeSelect);
+  const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } = selectContext;
+  const [showArrows, setShowArrows] = React.useState(false);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const prevActiveIndex = usePrevious(activeIndex);
+  const listItemsRef = React.useRef([]);
+  const [controlledScrolling, setControlledScrolling] = React.useState(false);
+  const [middlewareType, setMiddlewareType] = React.useState("align");
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setShowArrows(open);
+      if (!open) {
+        setScrollTop(0);
+        setMiddlewareType("align");
+        setActiveIndex(null);
+        setControlledScrolling(false);
+      }
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [open, setActiveIndex]);
+  function getFloatingPadding(floating2) {
+    var _a;
+    if (!floating2) {
+      return 0;
+    }
+    return Number((_a = getComputedStyle(floating2).paddingLeft) == null ? void 0 : _a.replace("px", ""));
+  }
+  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom",
+    middleware: middlewareType === "align" ? [
+      offset(({ rects }) => {
+        const index = activeIndexRef.current ?? selectedIndexRef.current;
+        if (index == null) {
+          return 0;
+        }
+        const item = listItemsRef.current[index];
+        if (item == null) {
+          return 0;
+        }
+        const offsetTop = item.offsetTop;
+        const itemHeight = item.offsetHeight;
+        const height = rects.reference.height;
+        return -offsetTop - height - (itemHeight - height) / 2;
+      }),
+      {
+        name: "size",
+        async fn(args) {
+          var _a;
+          const {
+            elements: { floating: floating2 },
+            rects: { reference: reference2 },
+            middlewareData: middlewareData2
+          } = args;
+          const overflow = await detectOverflow(args, {
+            padding: WINDOW_PADDING
+          });
+          const top = Math.max(0, overflow.top);
+          const bottom = Math.max(0, overflow.bottom);
+          const nextY = args.y + top;
+          if ((_a = middlewareData2.size) == null ? void 0 : _a.skip) {
+            return {
+              y: nextY,
+              data: {
+                y: middlewareData2.size.y
+              }
+            };
+          }
+          Object.assign(floating2.style, {
+            maxHeight: `${floating2.scrollHeight - Math.abs(top + bottom)}px`,
+            minWidth: `${reference2.width + getFloatingPadding(floating2) * 2}px`
+          });
+          return {
+            y: nextY,
+            data: {
+              y: top,
+              skip: true
+            },
+            reset: {
+              rects: true
+            }
+          };
+        }
+      }
+    ] : [
+      offset(5),
+      flip(),
+      size({
+        apply({ rects, availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            width: `${rects.reference.width}px`,
+            maxHeight: `${availableHeight}px`
+          });
+        },
+        padding: WINDOW_PADDING
+      })
+    ]
+  });
+  const floatingRef = refs.floating;
+  const showUpArrow = showArrows && scrollTop > SCROLL_ARROW_THRESHOLD;
+  const showDownArrow = showArrows && floatingRef.current && scrollTop < floatingRef.current.scrollHeight - floatingRef.current.clientHeight - SCROLL_ARROW_THRESHOLD;
+  const interactions = useInteractions([
+    useClick(context, { pointerDown: true }),
+    useRole(context, { role: "listbox" }),
+    useDismiss(context),
+    useListNavigation(context, {
+      listRef: listItemsRef,
+      activeIndex,
+      selectedIndex,
+      onNavigate: setActiveIndex
+    }),
+    useTypeahead(context, {
+      listRef: listContentRef,
+      onMatch: open ? setActiveIndex : setSelectedIndex,
+      selectedIndex,
+      activeIndex
+    })
+  ]);
+  const increaseHeight = React.useCallback((floating2, amount = 0) => {
+    if (middlewareType === "fallback") {
+      return;
+    }
+    const currentMaxHeight = Number(floating2.style.maxHeight.replace("px", ""));
+    const currentTop = Number(floating2.style.top.replace("px", ""));
+    const rect = floating2.getBoundingClientRect();
+    const rectTop = rect.top;
+    const rectBottom = rect.bottom;
+    const viewportHeight = (visualViewport == null ? void 0 : visualViewport.height) ?? 0;
+    const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2;
+    if (amount < 0 && selectedIndexRef.current != null && Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)) {
+      floating2.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`;
+    }
+    if (amount > 0 && Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) && floating2.scrollHeight > floating2.offsetHeight) {
+      const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount);
+      const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount);
+      Object.assign(floating2.style, {
+        maxHeight: `${nextMaxHeight}px`,
+        top: `${nextTop}px`
+      });
+      if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {
+        floating2.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating2);
+      }
+      return currentTop - nextTop;
+    }
+  }, [middlewareType, selectedIndexRef]);
+  const touchPageYRef = React.useRef(null);
+  const handleWheel = React.useCallback((event) => {
+    var _a;
+    const pinching = event.ctrlKey;
+    const currentTarget = event.currentTarget;
+    function isWheelEvent(event2) {
+      return typeof event2.deltaY === "number";
+    }
+    function isTouchEvent(event2) {
+      return event2.touches != null;
+    }
+    if (Math.abs(((currentTarget == null ? void 0 : currentTarget.offsetHeight) ?? 0) - (((visualViewport == null ? void 0 : visualViewport.height) ?? 0) - WINDOW_PADDING * 2)) > 1 && !pinching) {
+      event.preventDefault();
+    } else if (isWheelEvent(event) && isFirefox) {
+      currentTarget.scrollTop += event.deltaY;
+    }
+    if (!pinching) {
+      let delta = 5;
+      if (isTouchEvent(event)) {
+        const currentPageY = touchPageYRef.current;
+        const pageY = (_a = event.touches[0]) == null ? void 0 : _a.pageY;
+        if (pageY != null) {
+          touchPageYRef.current = pageY;
+          if (currentPageY != null) {
+            delta = currentPageY - pageY;
+          }
+        }
+      }
+      increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta);
+      setScrollTop(currentTarget.scrollTop);
+      forceUpdate();
+    }
+  }, [forceUpdate, increaseHeight]);
+  React.useEffect(() => {
+    function onTouchEnd() {
+      touchPageYRef.current = null;
+    }
+    const floating2 = floatingRef.current;
+    if (open && floating2 && middlewareType === "align") {
+      floating2.addEventListener("wheel", handleWheel);
+      floating2.addEventListener("touchmove", handleWheel);
+      floating2.addEventListener("touchend", onTouchEnd, { passive: true });
+      return () => {
+        floating2.removeEventListener("wheel", handleWheel);
+        floating2.removeEventListener("touchmove", handleWheel);
+        floating2.removeEventListener("touchend", onTouchEnd);
+      };
+    }
+  }, [open, floatingRef, handleWheel, middlewareType]);
+  React.useEffect(() => {
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("resize", update);
+    };
+  }, [update]);
+  React.useLayoutEffect(() => {
+    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 = ((_a = listItemsRef.current[prevActiveIndex]) == null ? void 0 : _a.offsetHeight) ?? 0;
+        const floatingHeight = floating2.offsetHeight;
+        const top = item.offsetTop;
+        const bottom = top + itemHeight;
+        if (top < floating2.scrollTop + 20) {
+          const diff = floating2.scrollTop - top + 20;
+          floating2.scrollTop -= diff;
+          if (activeIndex != selectedIndex && activeIndex != null) {
+            increaseHeight(floating2, -diff);
+          }
+        } else if (bottom > floatingHeight + floating2.scrollTop - 20) {
+          const diff = bottom - floatingHeight - floating2.scrollTop + 20;
+          floating2.scrollTop += diff;
+          if (activeIndex != selectedIndex && activeIndex != null) {
+            floating2.scrollTop -= increaseHeight(floating2, diff) ?? 0;
+          }
+        }
+      }
+    }
+  }, [
+    open,
+    controlledScrolling,
+    prevActiveIndex,
+    activeIndex,
+    selectedIndex,
+    floatingRef,
+    increaseHeight
+  ]);
+  React.useLayoutEffect(() => {
+    var _a;
+    const floating2 = refs.floating.current;
+    const reference2 = refs.reference.current;
+    if (open && floating2 && reference2 && floating2.offsetHeight < floating2.scrollHeight) {
+      const referenceRect = reference2.getBoundingClientRect();
+      if (middlewareType === "fallback") {
+        const item = listItemsRef.current[selectedIndex];
+        if (item) {
+          floating2.scrollTop = item.offsetTop - floating2.clientHeight + referenceRect.height;
+        }
+        return;
+      }
+      floating2.scrollTop = (_a = middlewareData.size) == null ? void 0 : _a.y;
+      const closeToBottom = ((visualViewport == null ? void 0 : visualViewport.height) ?? 0) + getVisualOffsetTop() - referenceRect.bottom < FALLBACK_THRESHOLD;
+      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD;
+      if (floating2.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {
+        setMiddlewareType("fallback");
+      }
+    }
+  }, [
+    open,
+    increaseHeight,
+    selectedIndex,
+    middlewareType,
+    refs.floating,
+    refs.reference,
+    middlewareData
+  ]);
+  React.useLayoutEffect(() => {
+    if (open && selectedIndex != null) {
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = listItemsRef.current[selectedIndex]) == null ? void 0 : _a.focus({ preventScroll: true });
+      });
+    }
+  }, [listItemsRef, selectedIndex, open]);
+  React.useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      setShowArrows(open);
+      if (!open) {
+        setScrollTop(0);
+        setMiddlewareType("align");
+        setActiveIndex(null);
+        setControlledScrolling(false);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, setActiveIndex]);
+  return /* @__PURE__ */ React.createElement(SelectProvider, {
+    scope: __scopeSelect,
+    ...selectContext,
+    increaseHeight,
+    floatingRef,
+    setValueAtIndex: (index, value) => {
+      listContentRef.current[index] = value;
+    },
+    interactions: {
+      ...interactions,
+      getReferenceProps() {
+        return interactions.getReferenceProps({
+          ref: reference,
+          className: "SelectTrigger",
+          onKeyDown(event) {
+            if (event.key === "Enter" || event.key === " " && !context.dataRef.current.typing) {
+              event.preventDefault();
+              setOpen(true);
+            }
+          }
+        });
+      },
+      getFloatingProps(props2) {
+        return interactions.getFloatingProps({
+          ref: floating,
+          className: "Select",
+          ...props2,
+          style: {
+            position: strategy,
+            top: y ?? "",
+            left: x ?? "",
+            outline: 0,
+            listStyleType: "none",
+            scrollbarWidth: "none",
+            userSelect: "none",
+            ...props2 == null ? void 0 : props2.style
+          },
+          onPointerEnter() {
+            setControlledScrolling(false);
+          },
+          onPointerMove() {
+            setControlledScrolling(false);
+          },
+          onKeyDown() {
+            setControlledScrolling(true);
+          },
+          onScroll(event) {
+            setScrollTop(event.currentTarget.scrollTop);
+          }
+        });
+      }
+    },
+    floatingContext: context,
+    activeIndex,
+    canScrollDown: !!showDownArrow,
+    canScrollUp: !!showUpArrow,
+    controlledScrolling: true,
+    dataRef: context.dataRef,
+    listRef: listItemsRef
+  }, children);
+};
+export {
+  SelectInlineImpl
+};
+//# sourceMappingURL=SelectImpl.js.map

package/dist/esm/SelectImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectImpl.tsx"],
+  "sourcesContent": ["import {\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 { usePrevious } from '@radix-ui/react-use-previous'\nimport * as React from 'react'\n\nimport { FALLBACK_THRESHOLD, MIN_HEIGHT, SCROLL_ARROW_THRESHOLD, WINDOW_PADDING } from './constants'\nimport { SelectProvider, useSelectContext } from './context'\nimport { getVisualOffsetTop, isFirefox } from './Select'\nimport { ScopedProps, SelectProps } from './types'\n\nexport type SelectImplProps = ScopedProps<SelectProps> & {\n  activeIndexRef: any\n  selectedIndexRef: any\n  listContentRef: any\n}\n\n// TODO use id for focusing from label\nexport const SelectInlineImpl = (props: SelectImplProps) => {\n  const {\n    __scopeSelect,\n    children,\n    open = false,\n    activeIndexRef,\n    selectedIndexRef,\n    listContentRef,\n  } = props\n\n  const selectContext = useSelectContext('SelectSheetImpl', __scopeSelect)\n  const { setActiveIndex, setOpen, setSelectedIndex, selectedIndex, activeIndex, forceUpdate } =\n    selectContext\n  const [showArrows, setShowArrows] = React.useState(false)\n  const [scrollTop, setScrollTop] = React.useState(0)\n  const prevActiveIndex = usePrevious<number | null>(activeIndex)\n\n  const listItemsRef = React.useRef<Array<HTMLElement | null>>([])\n\n  const [controlledScrolling, setControlledScrolling] = React.useState(false)\n  const [middlewareType, setMiddlewareType] = React.useState<'align' | 'fallback'>('align')\n\n  // Wait for scroll position to settle before showing arrows to prevent\n  // interference with pointer events.\n  React.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 () => {\n      cancelAnimationFrame(frame)\n    }\n  }, [open, setActiveIndex])\n\n  function getFloatingPadding(floating: HTMLElement | null) {\n    if (!floating) {\n      return 0\n    }\n    return Number(getComputedStyle(floating).paddingLeft?.replace('px', ''))\n  }\n\n  const { x, y, reference, floating, strategy, context, refs, middlewareData, update } =\n    useFloating({\n      open,\n      onOpenChange: setOpen,\n      placement: 'bottom',\n      middleware:\n        middlewareType === 'align'\n          ? [\n              offset(({ rects }) => {\n                const index = activeIndexRef.current ?? selectedIndexRef.current\n\n                if (index == null) {\n                  return 0\n                }\n\n                const item = listItemsRef.current[index]\n\n                if (item == null) {\n                  return 0\n                }\n\n                const offsetTop = item.offsetTop\n                const itemHeight = item.offsetHeight\n                const height = rects.reference.height\n\n                return -offsetTop - height - (itemHeight - height) / 2\n              }),\n              // Custom `size` that can handle the opposite direction of the placement\n              {\n                name: 'size',\n                async fn(args) {\n                  const {\n                    elements: { floating },\n                    rects: { reference },\n                    middlewareData,\n                  } = args\n\n                  const overflow = await detectOverflow(args, {\n                    padding: WINDOW_PADDING,\n                  })\n\n                  const top = Math.max(0, overflow.top)\n                  const bottom = Math.max(0, overflow.bottom)\n                  const nextY = args.y + top\n\n                  if (middlewareData.size?.skip) {\n                    return {\n                      y: nextY,\n                      data: {\n                        y: middlewareData.size.y,\n                      },\n                    }\n                  }\n\n                  Object.assign(floating.style, {\n                    maxHeight: `${floating.scrollHeight - Math.abs(top + bottom)}px`,\n                    minWidth: `${reference.width + getFloatingPadding(floating) * 2}px`,\n                  })\n\n                  return {\n                    y: nextY,\n                    data: {\n                      y: top,\n                      skip: true,\n                    },\n                    reset: {\n                      rects: true,\n                    },\n                  }\n                },\n              },\n            ]\n          : [\n              offset(5),\n              flip(),\n              size({\n                apply({ rects, availableHeight, elements }) {\n                  Object.assign(elements.floating.style, {\n                    width: `${rects.reference.width}px`,\n                    maxHeight: `${availableHeight}px`,\n                  })\n                },\n                padding: WINDOW_PADDING,\n              }),\n            ],\n    })\n\n  const floatingRef = refs.floating\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  const interactions = useInteractions([\n    useClick(context, { pointerDown: true }),\n    useRole(context, { role: 'listbox' }),\n    useDismiss(context),\n    useListNavigation(context, {\n      listRef: listItemsRef,\n      activeIndex,\n      selectedIndex,\n      onNavigate: setActiveIndex,\n    }),\n    useTypeahead(context, {\n      listRef: listContentRef,\n      onMatch: open ? setActiveIndex : setSelectedIndex,\n      selectedIndex,\n      activeIndex,\n    }),\n  ])\n\n  const increaseHeight = React.useCallback(\n    (floating: HTMLElement, amount = 0) => {\n      if (middlewareType === 'fallback') {\n        return\n      }\n\n      const currentMaxHeight = Number(floating.style.maxHeight.replace('px', ''))\n      const currentTop = Number(floating.style.top.replace('px', ''))\n      const rect = floating.getBoundingClientRect()\n      const rectTop = rect.top\n      const rectBottom = rect.bottom\n      const viewportHeight = visualViewport?.height ?? 0\n      const visualMaxHeight = viewportHeight - WINDOW_PADDING * 2\n\n      if (\n        amount < 0 &&\n        selectedIndexRef.current != null &&\n        Math.round(rectBottom) < Math.round(viewportHeight + getVisualOffsetTop() - WINDOW_PADDING)\n      ) {\n        floating.style.maxHeight = `${Math.min(visualMaxHeight, currentMaxHeight - amount)}px`\n      }\n\n      if (\n        amount > 0 &&\n        Math.round(rectTop) > Math.round(WINDOW_PADDING - getVisualOffsetTop()) &&\n        floating.scrollHeight > floating.offsetHeight\n      ) {\n        const nextTop = Math.max(WINDOW_PADDING + getVisualOffsetTop(), currentTop - amount)\n\n        const nextMaxHeight = Math.min(visualMaxHeight, currentMaxHeight + amount)\n\n        Object.assign(floating.style, {\n          maxHeight: `${nextMaxHeight}px`,\n          top: `${nextTop}px`,\n        })\n\n        if (nextTop - WINDOW_PADDING > getVisualOffsetTop()) {\n          floating.scrollTop -= nextMaxHeight - currentMaxHeight + getFloatingPadding(floating)\n        }\n\n        return currentTop - nextTop\n      }\n    },\n    [middlewareType, selectedIndexRef]\n  )\n\n  const touchPageYRef = React.useRef<number | null>(null)\n\n  const handleWheel = React.useCallback(\n    (event: WheelEvent | TouchEvent) => {\n      const pinching = event.ctrlKey\n\n      const currentTarget = event.currentTarget as HTMLElement\n\n      function isWheelEvent(event: any): event is WheelEvent {\n        return typeof event.deltaY === 'number'\n      }\n\n      function isTouchEvent(event: any): event is TouchEvent {\n        return event.touches != null\n      }\n\n      if (\n        Math.abs(\n          (currentTarget?.offsetHeight ?? 0) - ((visualViewport?.height ?? 0) - WINDOW_PADDING * 2)\n        ) > 1 &&\n        !pinching\n      ) {\n        event.preventDefault()\n      } else if (isWheelEvent(event) && isFirefox) {\n        // Firefox needs this to propagate scrolling\n        // during momentum scrolling phase if the\n        // height reached its maximum (at boundaries)\n        currentTarget.scrollTop += event.deltaY\n      }\n\n      if (!pinching) {\n        let delta = 5\n\n        if (isTouchEvent(event)) {\n          const currentPageY = touchPageYRef.current\n          const pageY = event.touches[0]?.pageY\n\n          if (pageY != null) {\n            touchPageYRef.current = pageY\n\n            if (currentPageY != null) {\n              delta = currentPageY - pageY\n            }\n          }\n        }\n\n        increaseHeight(currentTarget, isWheelEvent(event) ? event.deltaY : delta)\n        setScrollTop(currentTarget.scrollTop)\n        // Ensure derived data (scroll arrows) is fresh\n        forceUpdate()\n      }\n    },\n    [forceUpdate, increaseHeight]\n  )\n\n  // Handle `onWheel` event in an effect to remove the `passive` option so we\n  // can .preventDefault() it\n  React.useEffect(() => {\n    function onTouchEnd() {\n      touchPageYRef.current = null\n    }\n\n    const floating = floatingRef.current\n    if (open && floating && middlewareType === 'align') {\n      floating.addEventListener('wheel', handleWheel)\n      floating.addEventListener('touchmove', handleWheel)\n      floating.addEventListener('touchend', onTouchEnd, { passive: true })\n      return () => {\n        floating.removeEventListener('wheel', handleWheel)\n        floating.removeEventListener('touchmove', handleWheel)\n        floating.removeEventListener('touchend', onTouchEnd)\n      }\n    }\n  }, [open, floatingRef, handleWheel, middlewareType])\n\n  // Ensure the menu remains attached to the reference element when resizing.\n  React.useEffect(() => {\n    window.addEventListener('resize', update)\n    return () => {\n      window.removeEventListener('resize', update)\n    }\n  }, [update])\n\n  // Scroll the active or selected item into view when in `controlledScrolling`\n  // mode (i.e. arrow key nav).\n  React.useLayoutEffect(() => {\n    const floating = floatingRef.current\n\n    if (open && controlledScrolling && floating) {\n      const item =\n        activeIndex != null\n          ? listItemsRef.current[activeIndex]\n          : selectedIndex != null\n          ? listItemsRef.current[selectedIndex]\n          : null\n\n      if (item && prevActiveIndex != null) {\n        const itemHeight = listItemsRef.current[prevActiveIndex]?.offsetHeight ?? 0\n\n        const floatingHeight = floating.offsetHeight\n        const top = item.offsetTop\n        const bottom = top + itemHeight\n\n        if (top < floating.scrollTop + 20) {\n          const diff = floating.scrollTop - top + 20\n          floating.scrollTop -= diff\n\n          if (activeIndex != selectedIndex && activeIndex != null) {\n            increaseHeight(floating, -diff)\n          }\n        } else if (bottom > floatingHeight + floating.scrollTop - 20) {\n          const diff = bottom - floatingHeight - floating.scrollTop + 20\n\n          floating.scrollTop += diff\n\n          if (activeIndex != selectedIndex && activeIndex != null) {\n            floating.scrollTop -= increaseHeight(floating, diff) ?? 0\n          }\n        }\n      }\n    }\n  }, [\n    open,\n    controlledScrolling,\n    prevActiveIndex,\n    activeIndex,\n    selectedIndex,\n    floatingRef,\n    increaseHeight,\n  ])\n\n  // Sync the height and the scrollTop values and device whether to use fallback\n  // positioning.\n  React.useLayoutEffect(() => {\n    const floating = refs.floating.current\n    const reference = refs.reference.current\n\n    if (open && floating && reference && floating.offsetHeight < floating.scrollHeight) {\n      const referenceRect = reference.getBoundingClientRect()\n\n      if (middlewareType === 'fallback') {\n        const item = listItemsRef.current[selectedIndex]\n        if (item) {\n          floating.scrollTop = item.offsetTop - floating.clientHeight + referenceRect.height\n        }\n        return\n      }\n\n      floating.scrollTop = middlewareData.size?.y\n\n      const closeToBottom =\n        (visualViewport?.height ?? 0) + getVisualOffsetTop() - referenceRect.bottom <\n        FALLBACK_THRESHOLD\n      const closeToTop = referenceRect.top < FALLBACK_THRESHOLD\n\n      if (floating.offsetHeight < MIN_HEIGHT || closeToTop || closeToBottom) {\n        setMiddlewareType('fallback')\n      }\n    }\n  }, [\n    open,\n    increaseHeight,\n    selectedIndex,\n    middlewareType,\n    refs.floating,\n    refs.reference,\n    // Always re-run this effect when the position has been computed so the\n    // .scrollTop change works with fresh sizing.\n    middlewareData,\n  ])\n\n  React.useLayoutEffect(() => {\n    if (open && selectedIndex != null) {\n      requestAnimationFrame(() => {\n        listItemsRef.current[selectedIndex]?.focus({ preventScroll: true })\n      })\n    }\n  }, [listItemsRef, selectedIndex, open])\n\n  // Wait for scroll position to settle before showing arrows to prevent\n  // interference with pointer events.\n  React.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, setActiveIndex])\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  return (\n    <SelectProvider\n      scope={__scopeSelect}\n      {...(selectContext as Required<typeof selectContext>)}\n      increaseHeight={increaseHeight}\n      floatingRef={floatingRef}\n      setValueAtIndex={(index, value) => {\n        listContentRef.current[index] = value\n      }}\n      interactions={{\n        ...interactions,\n        getReferenceProps() {\n          return interactions.getReferenceProps({\n            ref: reference,\n            className: 'SelectTrigger',\n            onKeyDown(event) {\n              if (event.key === 'Enter' || (event.key === ' ' && !context.dataRef.current.typing)) {\n                event.preventDefault()\n                setOpen(true)\n              }\n            },\n          })\n        },\n        getFloatingProps(props) {\n          return interactions.getFloatingProps({\n            ref: floating,\n            className: 'Select',\n            ...props,\n            style: {\n              position: strategy,\n              top: y ?? '',\n              left: x ?? '',\n              outline: 0,\n              listStyleType: 'none',\n              scrollbarWidth: 'none',\n              userSelect: 'none',\n              ...props?.style,\n            },\n            onPointerEnter() {\n              setControlledScrolling(false)\n            },\n            onPointerMove() {\n              setControlledScrolling(false)\n            },\n            onKeyDown() {\n              setControlledScrolling(true)\n            },\n            onScroll(event) {\n              setScrollTop(event.currentTarget.scrollTop)\n            },\n          })\n        },\n      }}\n      floatingContext={context}\n      activeIndex={activeIndex}\n      canScrollDown={!!showDownArrow}\n      canScrollUp={!!showUpArrow}\n      controlledScrolling\n      dataRef={context.dataRef}\n      listRef={listItemsRef}\n    >\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"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/SelectScrollButton.js

@@ -0,0 +1,100 @@
+import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom-interactions";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { SCROLL_ARROW_THRESHOLD, SCROLL_ARROW_VELOCITY } from "./constants";
+import { useSelectContext } from "./context";
+const SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
+const SelectScrollUpButton = React.forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement(SelectScrollButtonImpl, {
+    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,
+    dir: "down",
+    ref: forwardedRef
+  });
+});
+SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
+const SelectScrollButtonImpl = React.memo(React.forwardRef((props, forwardedRef) => {
+  var _a;
+  const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props;
+  const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(componentName, __scopeSelect);
+  const intervalRef = React.useRef();
+  const loopingRef = React.useRef(false);
+  const isVisible = context[dir === "down" ? "canScrollDown" : "canScrollUp"];
+  const { x, y, reference, floating, strategy, update, refs } = useFloating({
+    strategy: "fixed",
+    placement: dir === "up" ? "top" : "bottom",
+    middleware: [offset(({ rects }) => -rects.floating.height)]
+  });
+  const composedRefs = useComposedRefs(forwardedRef, floating);
+  React.useLayoutEffect(() => {
+    if (!floatingRef)
+      return;
+    reference(floatingRef.current);
+  }, [reference, floatingRef == null ? void 0 : floatingRef.current]);
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current || !isVisible) {
+      return;
+    }
+    const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {
+      animationFrame: true
+    });
+    return () => {
+      clearInterval(intervalRef.current);
+      loopingRef.current = false;
+      cleanup();
+    };
+  }, [isVisible, update, refs.floating, refs.reference]);
+  if (!isVisible) {
+    return null;
+  }
+  const handleScrollArrowChange = () => {
+    if (!floatingRef)
+      return;
+    const floating2 = floatingRef.current;
+    const isUp = dir === "up";
+    if (floating2) {
+      const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY;
+      const multi = isUp && floating2.scrollTop <= SCROLL_ARROW_THRESHOLD * 2 || !isUp && floating2.scrollTop >= floating2.scrollHeight - floating2.clientHeight - SCROLL_ARROW_THRESHOLD * 2 ? 2 : 1;
+      floating2.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY);
+      increaseHeight == null ? void 0 : increaseHeight(floating2, multi === 2 ? value * 2 : value);
+      forceUpdate();
+    }
+  };
+  return /* @__PURE__ */ React.createElement(YStack, {
+    ref: composedRefs,
+    componentName,
+    "aria-hidden": true,
+    ...scrollIndicatorProps,
+    zIndex: 1e3,
+    position: strategy,
+    left: x || 0,
+    top: y || 0,
+    width: `calc(${(((_a = floatingRef == null ? void 0 : floatingRef.current) == null ? void 0 : _a.offsetWidth) ?? 0) - 2}px)`,
+    onPointerMove: () => {
+      if (!loopingRef.current) {
+        intervalRef.current = setInterval(handleScrollArrowChange, 1e3 / 60);
+        loopingRef.current = true;
+      }
+    },
+    onPointerLeave: () => {
+      loopingRef.current = false;
+      clearInterval(intervalRef.current);
+    }
+  });
+}));
+export {
+  SelectScrollDownButton,
+  SelectScrollUpButton
+};
+//# sourceMappingURL=SelectScrollButton.js.map

package/dist/esm/SelectScrollButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectScrollButton.tsx"],
+  "sourcesContent": ["import { autoUpdate, offset, useFloating } from '@floating-ui/react-dom-interactions'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { TamaguiElement } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { SCROLL_ARROW_THRESHOLD, SCROLL_ARROW_VELOCITY } from './constants'\nimport { useSelectContext } from './context'\nimport { ScopedProps, SelectScrollButtonImplProps, SelectScrollButtonProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton'\n\nexport const SelectScrollUpButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n    return (\n      <SelectScrollButtonImpl\n        componentName={SCROLL_UP_BUTTON_NAME}\n        {...props}\n        dir=\"up\"\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton'\n\nexport const SelectScrollDownButton = React.forwardRef<TamaguiElement, SelectScrollButtonProps>(\n  (props: ScopedProps<SelectScrollButtonProps>, forwardedRef) => {\n    return (\n      <SelectScrollButtonImpl\n        componentName={SCROLL_DOWN_BUTTON_NAME}\n        {...props}\n        dir=\"down\"\n        ref={forwardedRef}\n      />\n    )\n  }\n)\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME\n\ntype SelectScrollButtonImplElement = TamaguiElement\n\nconst SelectScrollButtonImpl = React.memo(\n  React.forwardRef<SelectScrollButtonImplElement, SelectScrollButtonImplProps>(\n    (props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n      const { __scopeSelect, dir, componentName, ...scrollIndicatorProps } = props\n      const { floatingRef, increaseHeight, forceUpdate, ...context } = useSelectContext(\n        componentName,\n        __scopeSelect\n      )\n      const intervalRef = React.useRef<any>()\n      const loopingRef = React.useRef(false)\n      const isVisible = context[dir === 'down' ? 'canScrollDown' : 'canScrollUp']\n\n      const { x, y, reference, floating, strategy, update, refs } = useFloating({\n        strategy: 'fixed',\n        placement: dir === 'up' ? 'top' : 'bottom',\n        middleware: [offset(({ rects }) => -rects.floating.height)],\n      })\n\n      const composedRefs = useComposedRefs(forwardedRef, floating)\n\n      React.useLayoutEffect(() => {\n        if (!floatingRef) return\n        reference(floatingRef.current)\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [reference, floatingRef?.current])\n\n      React.useEffect(() => {\n        if (!refs.reference.current || !refs.floating.current || !isVisible) {\n          return\n        }\n\n        const cleanup = autoUpdate(refs.reference.current, refs.floating.current, update, {\n          animationFrame: true,\n        })\n\n        return () => {\n          clearInterval(intervalRef.current)\n          loopingRef.current = false\n          cleanup()\n        }\n      }, [isVisible, update, refs.floating, refs.reference])\n\n      if (!isVisible) {\n        return null\n      }\n\n      const handleScrollArrowChange = () => {\n        if (!floatingRef) return\n        const floating = floatingRef.current\n        const isUp = dir === 'up'\n\n        if (floating) {\n          const value = isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY\n          const multi =\n            (isUp && floating.scrollTop <= SCROLL_ARROW_THRESHOLD * 2) ||\n            (!isUp &&\n              floating.scrollTop >=\n                floating.scrollHeight - floating.clientHeight - SCROLL_ARROW_THRESHOLD * 2)\n              ? 2\n              : 1\n\n          floating.scrollTop += multi * (isUp ? -SCROLL_ARROW_VELOCITY : SCROLL_ARROW_VELOCITY)\n\n          increaseHeight?.(floating, multi === 2 ? value * 2 : value)\n          // Ensure derived data (scroll arrows) is fresh\n          forceUpdate()\n        }\n      }\n\n      return (\n        <YStack\n          ref={composedRefs}\n          componentName={componentName}\n          aria-hidden\n          {...scrollIndicatorProps}\n          zIndex={1000}\n          // @ts-expect-error\n          position={strategy}\n          left={x || 0}\n          top={y || 0}\n          width={`calc(${(floatingRef?.current?.offsetWidth ?? 0) - 2}px)`}\n          onPointerMove={() => {\n            if (!loopingRef.current) {\n              intervalRef.current = setInterval(handleScrollArrowChange, 1000 / 60)\n              loopingRef.current = true\n            }\n          }}\n          onPointerLeave={() => {\n            loopingRef.current = false\n            clearInterval(intervalRef.current)\n          }}\n        />\n      )\n    }\n  )\n)\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/SelectScrollButton.native.js

@@ -0,0 +1,7 @@
+const SelectScrollUpButton = (_) => null;
+const SelectScrollDownButton = (_) => null;
+export {
+  SelectScrollDownButton,
+  SelectScrollUpButton
+};
+//# sourceMappingURL=SelectScrollButton.native.js.map

package/dist/esm/SelectScrollButton.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectScrollButton.native.tsx"],
+  "sourcesContent": ["import { ScopedProps, SelectScrollButtonProps } from './types'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const SelectScrollUpButton = (_: ScopedProps<SelectScrollButtonProps>) => null\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport const SelectScrollDownButton = (_: ScopedProps<SelectScrollButtonProps>) => null\n"],
+  "mappings": "AAGO,MAAM,uBAAuB,CAAC,MAA4C;AAG1E,MAAM,yBAAyB,CAAC,MAA4C;",
+  "names": []
+}

package/dist/esm/SelectViewport.js

@@ -0,0 +1,68 @@
+import { FloatingFocusManager } from "@floating-ui/react-dom-interactions";
+import { isWeb } from "@tamagui/core";
+import { styled } from "@tamagui/core";
+import { PortalItem } from "@tamagui/portal";
+import { ThemeableStack } from "@tamagui/stacks";
+import * as React from "react";
+import { VIEWPORT_NAME } from "./constants";
+import { useSelectContext } from "./context";
+import { useSelectBreakpointActive } from "./Select";
+const SelectViewportFrame = styled(ThemeableStack, {
+  name: VIEWPORT_NAME,
+  backgroundColor: "$background",
+  elevate: true,
+  bordered: true,
+  overflow: "scroll",
+  userSelect: "none",
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          borderRadius: tokens.radius[val] ?? val
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$2"
+  }
+});
+const SelectViewport = React.forwardRef((props, forwardedRef) => {
+  var _a;
+  const { __scopeSelect, children, ...viewportProps } = props;
+  const context = useSelectContext(VIEWPORT_NAME, __scopeSelect);
+  const { style, ...floatingProps } = ((_a = context.interactions) == null ? void 0 : _a.getFloatingProps()) ?? {};
+  const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint);
+  if (breakpointActive || !isWeb) {
+    return /* @__PURE__ */ React.createElement(PortalItem, {
+      hostName: `${context.scopeKey}SheetContents`
+    }, children);
+  }
+  if (!context.floatingContext) {
+    return null;
+  }
+  delete style["scrollbarWidth"];
+  delete style["listStyleType"];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`
+    }
+  }), /* @__PURE__ */ React.createElement(FloatingFocusManager, {
+    context: context.floatingContext,
+    preventTabbing: true
+  }, /* @__PURE__ */ React.createElement(SelectViewportFrame, {
+    size: context.size,
+    "data-tamagui-select-viewport": "",
+    role: "presentation",
+    ...viewportProps,
+    ref: forwardedRef,
+    ...floatingProps,
+    ...style
+  }, children)));
+});
+SelectViewport.displayName = VIEWPORT_NAME;
+export {
+  SelectViewport,
+  SelectViewportFrame
+};
+//# sourceMappingURL=SelectViewport.js.map

package/dist/esm/SelectViewport.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/SelectViewport.tsx"],
+  "sourcesContent": ["import { FloatingFocusManager } from '@floating-ui/react-dom-interactions'\nimport { TamaguiElement, isWeb } from '@tamagui/core'\nimport { styled } from '@tamagui/core'\nimport { PortalItem } from '@tamagui/portal'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { VIEWPORT_NAME } from './constants'\nimport { useSelectContext } from './context'\nimport { useSelectBreakpointActive } from './Select'\nimport { ScopedProps, SelectViewportProps } from './types'\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SelectViewportFrame = styled(ThemeableStack, {\n  name: VIEWPORT_NAME,\n  backgroundColor: '$background',\n  elevate: true,\n  bordered: true,\n  overflow: 'scroll',\n  userSelect: 'none',\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          borderRadius: tokens.radius[val] ?? val,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$2',\n  },\n})\n\nexport const SelectViewport = React.forwardRef<TamaguiElement, SelectViewportProps>(\n  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n    const { __scopeSelect, children, ...viewportProps } = props\n    const context = useSelectContext(VIEWPORT_NAME, __scopeSelect)\n    const { style, ...floatingProps } = context.interactions?.getFloatingProps() ?? {}\n    const breakpointActive = useSelectBreakpointActive(context.sheetBreakpoint)\n\n    if (breakpointActive || !isWeb) {\n      return <PortalItem hostName={`${context.scopeKey}SheetContents`}>{children}</PortalItem>\n    }\n\n    if (!context.floatingContext) {\n      return null\n    }\n\n    // TODO\n    delete style['scrollbarWidth']\n    delete style['listStyleType']\n\n    return (\n      <>\n        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `[data-tamagui-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-tamagui-select-viewport]::-webkit-scrollbar{display:none}`,\n          }}\n        />\n        <FloatingFocusManager context={context.floatingContext} preventTabbing>\n          <SelectViewportFrame\n            size={context.size}\n            data-tamagui-select-viewport=\"\"\n            // @ts-ignore\n            role=\"presentation\"\n            {...viewportProps}\n            ref={forwardedRef}\n            {...floatingProps}\n            {...style}\n          >\n            {children}\n          </SelectViewportFrame>\n        </FloatingFocusManager>\n      </>\n    )\n  }\n)\n\nSelectViewport.displayName = VIEWPORT_NAME\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAOO,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACxD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,aAAa;AAC9B,eAAO;AAAA,UACL,cAAc,OAAO,OAAO,QAAQ;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAEM,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AAxC7D;AAyCI,QAAM,EAAE,eAAe,aAAa,kBAAkB;AACtD,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,QAAM,EAAE,UAAU,kBAAkB,eAAQ,iBAAR,mBAAsB,uBAAsB,CAAC;AACjF,QAAM,mBAAmB,0BAA0B,QAAQ,eAAe;AAE1E,MAAI,oBAAoB,CAAC,OAAO;AAC9B,WAAO,oCAAC;AAAA,MAAW,UAAU,GAAG,QAAQ;AAAA,OAA0B,QAAS;AAAA,EAC7E;AAEA,MAAI,CAAC,QAAQ,iBAAiB;AAC5B,WAAO;AAAA,EACT;AAGA,SAAO,MAAM;AACb,SAAO,MAAM;AAEb,SACE,0DAEE,oCAAC;AAAA,IACC,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA,GACF,GACA,oCAAC;AAAA,IAAqB,SAAS,QAAQ;AAAA,IAAiB,gBAAc;AAAA,KACpE,oCAAC;AAAA,IACC,MAAM,QAAQ;AAAA,IACd,gCAA6B;AAAA,IAE7B,MAAK;AAAA,IACJ,GAAG;AAAA,IACJ,KAAK;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,KAEH,QACH,CACF,CACF;AAEJ,CACF;AAEA,eAAe,cAAc;",
+  "names": []
+}