@bsky.app/sift 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @bsky.app/sift
+
+## 0.1.2
+
+### Patch Changes
+
+- [`255ae92`](https://github.com/bluesky-social/toolbox/commit/255ae923d552c12b6ad36dedde37a9bf44d02866) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Bump sift/tapper for publish
+
+## 0.1.1
+
+### Patch Changes
+
+- [`06c8141`](https://github.com/bluesky-social/toolbox/commit/06c81411f8420240c8c794d41398df034c514fda) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Bump packages

package/build/Sift.d.ts

@@ -1,4 +1,4 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, type PressableProps } from 'react-native';
 import { type UseSiftReturn } from './useSift';
 export * from './useSift';
 export declare function Sift<Item extends {
@@ -8,6 +8,11 @@ export declare function Sift<Item extends {
     data: Item[];
     render: (props: {
         active: boolean;
+        props: {
+            role: string;
+            'aria-selected': boolean;
+            onPress: () => void;
+        };
         item: Item;
     }) => React.ReactElement;
     style?: StyleProp<ViewStyle>;
@@ -15,4 +20,15 @@ export declare function Sift<Item extends {
     onDismiss?: () => void;
     inverted?: boolean;
 }): import("react").JSX.Element;
+/**
+ * A Pressable wrapper for items rendered in Sift. It applies the necessary
+ * accessibility props for each item.
+ */
+export declare function SiftItem({ children, role, style, ...props }: Omit<PressableProps, 'role' | 'style'> & {
+    role?: string;
+    style?: StyleProp<ViewStyle> | ((state: {
+        pressed: boolean;
+        hovered: boolean;
+    }) => StyleProp<ViewStyle>) | undefined;
+}): import("react").JSX.Element;
 //# sourceMappingURL=Sift.d.ts.map

package/build/Sift.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sift.d.ts","sourceRoot":"","sources":["../src/Sift.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,WAAW,CAAA;AAG5C,cAAc,WAAW,CAAA;AAEzB,wBAAgB,IAAI,CAAC,IAAI,SAAS;IAAC,GAAG,EAAE,MAAM,CAAA;CAAC,EAAE,EAC/C,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,aAAa,CAAA;IACnB,IAAI,EAAE,IAAI,EAAE,CAAA;IACZ,MAAM,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,IAAI,CAAA;KAAC,KAAK,KAAK,CAAC,YAAY,CAAA;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAmEA"}
+{"version":3,"file":"Sift.d.ts","sourceRoot":"","sources":["../src/Sift.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,cAAc,EAEpB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,WAAW,CAAA;AAG5C,cAAc,WAAW,CAAA;AAEzB,wBAAgB,IAAI,CAAC,IAAI,SAAS;IAAC,GAAG,EAAE,MAAM,CAAA;CAAC,EAAE,EAC/C,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,aAAa,CAAA;IACnB,IAAI,EAAE,IAAI,EAAE,CAAA;IACZ,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,MAAM,EAAE,OAAO,CAAA;QACf,KAAK,EAAE;YACL,IAAI,EAAE,MAAM,CAAA;YACZ,eAAe,EAAE,OAAO,CAAA;YACxB,OAAO,EAAE,MAAM,IAAI,CAAA;SACpB,CAAA;QACD,IAAI,EAAE,IAAI,CAAA;KACX,KAAK,KAAK,CAAC,YAAY,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAmEA;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EACF,SAAS,CAAC,SAAS,CAAC,GACpB,CAAC,CAAC,KAAK,EAAE;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,KAAK,SAAS,CAAC,SAAS,CAAC,CAAC,GACvE,SAAS,CAAA;CACd,+BASA"}

package/build/Sift.js

@@ -6,8 +6,8 @@ export function Sift({ sift, data, render, style, onSelect, onDismiss, inverted,
     const [activeIndex, setActiveIndex] = useState(0);
     const activeIndexRef = useRef(activeIndex);
     activeIndexRef.current = activeIndex;
-    const updateRef = useRef(sift.internal.update);
-    updateRef.current = sift.internal.update;
+    const updateRef = useRef(sift.updatePosition);
+    updateRef.current = sift.updatePosition;
     useEffect(() => {
         setActiveIndex(0);
         updateRef.current();
@@ -43,15 +43,27 @@ export function Sift({ sift, data, render, style, onSelect, onDismiss, inverted,
         },
         onDismiss,
     });
-    return (<View collapsable={false} ref={sift.internal.refs.setFloating} 
+    return (<View collapsable={false} ref={sift.refs.setPopover} 
     // @ts-ignore
-    role="listbox" id={sift.id} style={[sift.internal.floatingStyles, style]}>
-      <FlatList data={data} inverted={inverted} keyExtractor={item => item.key} renderItem={items => (<Pressable role="option" aria-selected={items.index === activeIndex} onPress={() => onSelect?.(items.item)}>
-            {render({
-                active: items.index === activeIndex,
-                item: items.item,
-            })}
-          </Pressable>)}/>
+    role="listbox" id={sift.id} style={[style, sift.popoverStyles]}>
+      <FlatList data={data} inverted={inverted} keyExtractor={item => item.key} renderItem={items => render({
+            active: items.index === activeIndex,
+            props: {
+                role: 'option',
+                'aria-selected': items.index === activeIndex,
+                onPress: () => onSelect?.(items.item),
+            },
+            item: items.item,
+        })}/>
     </View>);
 }
+/**
+ * A Pressable wrapper for items rendered in Sift. It applies the necessary
+ * accessibility props for each item.
+ */
+export function SiftItem({ children, role, style, ...props }) {
+    return (<Pressable role={role} style={style} {...props}>
+      {children}
+    </Pressable>);
+}
 //# sourceMappingURL=Sift.js.map

package/build/Sift.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sift.js","sourceRoot":"","sources":["../src/Sift.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AACjD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,SAAS,GAGV,MAAM,cAAc,CAAA;AAErB,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AAEzD,cAAc,WAAW,CAAA;AAEzB,MAAM,UAAU,IAAI,CAA6B,EAC/C,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GAST;IACC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;IAC1C,cAAc,CAAC,OAAO,GAAG,WAAW,CAAA;IACpC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC9C,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,CAAC,CAAC,CAAA;QACjB,SAAS,CAAC,OAAO,EAAE,CAAA;IACrB,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;IAEjB,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC7B,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IAC5C,CAAC,CAAA;IACD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC7B,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IAC1D,CAAC,CAAA;IACD,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC7B,cAAc,CAAC,CAAC,CAAC,CAAA;IACnB,CAAC,CAAA;IACD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAM;QAC7B,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IACjC,CAAC,CAAA;IAED,mBAAmB,CAAC;QAClB,IAAI;QACJ,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;QACnC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;QACjC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;QAC/B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;QAC9B,QAAQ,EAAE,GAAG,EAAE;YACb,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;QAC1C,CAAC;QACD,SAAS;KACV,CAAC,CAAA;IAEF,OAAO,CACL,CAAC,IAAI,CACH,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;IACpC,aAAa;IACb,IAAI,CAAC,SAAS,CACd,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CACZ,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAC7C;MAAA,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAC/B,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CACnB,CAAC,SAAS,CACR,IAAI,CAAC,QAAQ,CACb,aAAa,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,WAAW,CAAC,CAC3C,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CACtC;YAAA,CAAC,MAAM,CAAC;gBACN,MAAM,EAAE,KAAK,CAAC,KAAK,KAAK,WAAW;gBACnC,IAAI,EAAE,KAAK,CAAC,IAAI;aACjB,CAAC,CACJ;UAAA,EAAE,SAAS,CAAC,CACb,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC","sourcesContent":["import {useEffect, useRef, useState} from 'react'\nimport {\n  View,\n  FlatList,\n  Pressable,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native'\nimport {type UseSiftReturn} from './useSift'\nimport {useKeyboardHandling} from './useKeyboardHandling'\n\nexport * from './useSift'\n\nexport function Sift<Item extends {key: string}>({\n  sift,\n  data,\n  render,\n  style,\n  onSelect,\n  onDismiss,\n  inverted,\n}: {\n  sift: UseSiftReturn\n  data: Item[]\n  render: (props: {active: boolean; item: Item}) => React.ReactElement\n  style?: StyleProp<ViewStyle>\n  onSelect?: (item: Item) => void\n  onDismiss?: () => void\n  inverted?: boolean\n}) {\n  const [activeIndex, setActiveIndex] = useState(0)\n  const activeIndexRef = useRef(activeIndex)\n  activeIndexRef.current = activeIndex\n  const updateRef = useRef(sift.internal.update)\n  updateRef.current = sift.internal.update\n\n  useEffect(() => {\n    setActiveIndex(0)\n    updateRef.current()\n  }, [data.length])\n\n  const next = () => {\n    if (data.length === 0) return\n    setActiveIndex(i => (i + 1) % data.length)\n  }\n  const prev = () => {\n    if (data.length === 0) return\n    setActiveIndex(i => (i - 1 + data.length) % data.length)\n  }\n  const first = () => {\n    if (data.length === 0) return\n    setActiveIndex(0)\n  }\n  const last = () => {\n    if (data.length === 0) return\n    setActiveIndex(data.length - 1)\n  }\n\n  useKeyboardHandling({\n    sift,\n    onArrowDown: inverted ? prev : next,\n    onArrowUp: inverted ? next : prev,\n    onHome: inverted ? last : first,\n    onEnd: inverted ? first : last,\n    onSelect: () => {\n      onSelect?.(data[activeIndexRef.current])\n    },\n    onDismiss,\n  })\n\n  return (\n    <View\n      collapsable={false}\n      ref={sift.internal.refs.setFloating}\n      // @ts-ignore\n      role=\"listbox\"\n      id={sift.id}\n      style={[sift.internal.floatingStyles, style]}>\n      <FlatList\n        data={data}\n        inverted={inverted}\n        keyExtractor={item => item.key}\n        renderItem={items => (\n          <Pressable\n            role=\"option\"\n            aria-selected={items.index === activeIndex}\n            onPress={() => onSelect?.(items.item)}>\n            {render({\n              active: items.index === activeIndex,\n              item: items.item,\n            })}\n          </Pressable>\n        )}\n      />\n    </View>\n  )\n}\n"]}
+{"version":3,"file":"Sift.js","sourceRoot":"","sources":["../src/Sift.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useRef, useState} from 'react'\nimport {\n  View,\n  FlatList,\n  Pressable,\n  type StyleProp,\n  type ViewStyle,\n  type PressableProps,\n  type Role,\n} from 'react-native'\nimport {type UseSiftReturn} from './useSift'\nimport {useKeyboardHandling} from './useKeyboardHandling'\n\nexport * from './useSift'\n\nexport function Sift<Item extends {key: string}>({\n  sift,\n  data,\n  render,\n  style,\n  onSelect,\n  onDismiss,\n  inverted,\n}: {\n  sift: UseSiftReturn\n  data: Item[]\n  render: (props: {\n    active: boolean\n    props: {\n      role: string\n      'aria-selected': boolean\n      onPress: () => void\n    }\n    item: Item\n  }) => React.ReactElement\n  style?: StyleProp<ViewStyle>\n  onSelect?: (item: Item) => void\n  onDismiss?: () => void\n  inverted?: boolean\n}) {\n  const [activeIndex, setActiveIndex] = useState(0)\n  const activeIndexRef = useRef(activeIndex)\n  activeIndexRef.current = activeIndex\n  const updateRef = useRef(sift.updatePosition)\n  updateRef.current = sift.updatePosition\n\n  useEffect(() => {\n    setActiveIndex(0)\n    updateRef.current()\n  }, [data.length])\n\n  const next = () => {\n    if (data.length === 0) return\n    setActiveIndex(i => (i + 1) % data.length)\n  }\n  const prev = () => {\n    if (data.length === 0) return\n    setActiveIndex(i => (i - 1 + data.length) % data.length)\n  }\n  const first = () => {\n    if (data.length === 0) return\n    setActiveIndex(0)\n  }\n  const last = () => {\n    if (data.length === 0) return\n    setActiveIndex(data.length - 1)\n  }\n\n  useKeyboardHandling({\n    sift,\n    onArrowDown: inverted ? prev : next,\n    onArrowUp: inverted ? next : prev,\n    onHome: inverted ? last : first,\n    onEnd: inverted ? first : last,\n    onSelect: () => {\n      onSelect?.(data[activeIndexRef.current])\n    },\n    onDismiss,\n  })\n\n  return (\n    <View\n      collapsable={false}\n      ref={sift.refs.setPopover}\n      // @ts-ignore\n      role=\"listbox\"\n      id={sift.id}\n      style={[style, sift.popoverStyles]}>\n      <FlatList\n        data={data}\n        inverted={inverted}\n        keyExtractor={item => item.key}\n        renderItem={items =>\n          render({\n            active: items.index === activeIndex,\n            props: {\n              role: 'option',\n              'aria-selected': items.index === activeIndex,\n              onPress: () => onSelect?.(items.item),\n            },\n            item: items.item,\n          })\n        }\n      />\n    </View>\n  )\n}\n\n/**\n * A Pressable wrapper for items rendered in Sift. It applies the necessary\n * accessibility props for each item.\n */\nexport function SiftItem({\n  children,\n  role,\n  style,\n  ...props\n}: Omit<PressableProps, 'role' | 'style'> & {\n  role?: string\n  style?:\n    | StyleProp<ViewStyle>\n    | ((state: {pressed: boolean; hovered: boolean}) => StyleProp<ViewStyle>)\n    | undefined\n}) {\n  return (\n    <Pressable\n      role={role as Role}\n      style={style as PressableProps['style']}\n      {...props}>\n      {children}\n    </Pressable>\n  )\n}\n"]}

package/build/computeStyles.d.ts

@@ -0,0 +1,12 @@
+import { type ViewStyle } from 'react-native';
+import { type Placement } from './useSift';
+export declare function computeStyles({ anchor, input, popover, }: {
+    anchor: any;
+    input: any;
+    popover: any | null;
+}, options: {
+    offset: number;
+    placement: Placement;
+    dynamicWidth?: boolean;
+}): Promise<ViewStyle>;
+//# sourceMappingURL=computeStyles.d.ts.map

package/build/computeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeStyles.d.ts","sourceRoot":"","sources":["../src/computeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,WAAW,CAAA;AAcxC,wBAAsB,aAAa,CACjC,EACE,MAAM,EACN,KAAK,EACL,OAAO,GACR,EAAE;IACD,MAAM,EAAE,GAAG,CAAA;IACX,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,EAAE,GAAG,GAAG,IAAI,CAAA;CACpB,EACD,OAAO,EAAE;IACP,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GACA,OAAO,CAAC,SAAS,CAAC,CAuCpB"}

package/build/computeStyles.js

@@ -0,0 +1,44 @@
+function measureInWindow(node) {
+    return new Promise(resolve => {
+        node.measureInWindow((x, y, width, height) => {
+            resolve({ x, y, width, height });
+        });
+    });
+}
+export async function computeStyles({ anchor, input, popover, }, options) {
+    const anchorRect = await measureInWindow(anchor);
+    const inputRect = await measureInWindow(input);
+    const popoverRect = popover ? await measureInWindow(popover) : null;
+    const popoverWidth = popoverRect?.width ?? 0;
+    const popoverHeight = popoverRect?.height ?? 0;
+    const [side, align] = options.placement.split('-');
+    let top;
+    if (side === 'top') {
+        top = anchorRect.y - options.offset - popoverHeight;
+    }
+    else {
+        top = anchorRect.y + anchorRect.height + options.offset;
+    }
+    let left;
+    if (align === 'start') {
+        left = anchorRect.x;
+    }
+    else if (align === 'end') {
+        left = anchorRect.x + anchorRect.width - popoverWidth;
+    }
+    else {
+        left = anchorRect.x + (anchorRect.width - popoverWidth) / 2;
+    }
+    let maxWidth;
+    if (options.dynamicWidth === false) {
+        left = inputRect.x;
+        maxWidth = inputRect.width;
+    }
+    return {
+        position: 'absolute',
+        top,
+        left,
+        maxWidth,
+    };
+}
+//# sourceMappingURL=computeStyles.js.map

package/build/computeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeStyles.js","sourceRoot":"","sources":["../src/computeStyles.ts"],"names":[],"mappings":"AAGA,SAAS,eAAe,CACtB,IAAS;IAET,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,CAAC,eAAe,CAClB,CAAC,CAAS,EAAE,CAAS,EAAE,KAAa,EAAE,MAAc,EAAE,EAAE;YACtD,OAAO,CAAC,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAC,CAAC,CAAA;QAChC,CAAC,CACF,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,EACE,MAAM,EACN,KAAK,EACL,OAAO,GAKR,EACD,OAIC;IAED,MAAM,UAAU,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,CAAA;IAChD,MAAM,SAAS,GAAG,MAAM,eAAe,CAAC,KAAK,CAAC,CAAA;IAC9C,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACnE,MAAM,YAAY,GAAG,WAAW,EAAE,KAAK,IAAI,CAAC,CAAA;IAC5C,MAAM,aAAa,GAAG,WAAW,EAAE,MAAM,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAGhD,CAAA;IAED,IAAI,GAAW,CAAA;IACf,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,GAAG,GAAG,UAAU,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,GAAG,aAAa,CAAA;IACrD,CAAC;SAAM,CAAC;QACN,GAAG,GAAG,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACzD,CAAC;IAED,IAAI,IAAY,CAAA;IAChB,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;QACtB,IAAI,GAAG,UAAU,CAAC,CAAC,CAAA;IACrB,CAAC;SAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QAC3B,IAAI,GAAG,UAAU,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,GAAG,YAAY,CAAA;IACvD,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,UAAU,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAA;IAC7D,CAAC;IAED,IAAI,QAA4B,CAAA;IAChC,IAAI,OAAO,CAAC,YAAY,KAAK,KAAK,EAAE,CAAC;QACnC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAA;QAClB,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAA;IAC5B,CAAC;IAED,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG;QACH,IAAI;QACJ,QAAQ;KACT,CAAA;AACH,CAAC","sourcesContent":["import {type ViewStyle} from 'react-native'\nimport {type Placement} from './useSift'\n\nfunction measureInWindow(\n  node: any,\n): Promise<{x: number; y: number; width: number; height: number}> {\n  return new Promise(resolve => {\n    node.measureInWindow(\n      (x: number, y: number, width: number, height: number) => {\n        resolve({x, y, width, height})\n      },\n    )\n  })\n}\n\nexport async function computeStyles(\n  {\n    anchor,\n    input,\n    popover,\n  }: {\n    anchor: any\n    input: any\n    popover: any | null\n  },\n  options: {\n    offset: number\n    placement: Placement\n    dynamicWidth?: boolean\n  },\n): Promise<ViewStyle> {\n  const anchorRect = await measureInWindow(anchor)\n  const inputRect = await measureInWindow(input)\n  const popoverRect = popover ? await measureInWindow(popover) : null\n  const popoverWidth = popoverRect?.width ?? 0\n  const popoverHeight = popoverRect?.height ?? 0\n  const [side, align] = options.placement.split('-') as [\n    string,\n    string | undefined,\n  ]\n\n  let top: number\n  if (side === 'top') {\n    top = anchorRect.y - options.offset - popoverHeight\n  } else {\n    top = anchorRect.y + anchorRect.height + options.offset\n  }\n\n  let left: number\n  if (align === 'start') {\n    left = anchorRect.x\n  } else if (align === 'end') {\n    left = anchorRect.x + anchorRect.width - popoverWidth\n  } else {\n    left = anchorRect.x + (anchorRect.width - popoverWidth) / 2\n  }\n\n  let maxWidth: number | undefined\n  if (options.dynamicWidth === false) {\n    left = inputRect.x\n    maxWidth = inputRect.width\n  }\n\n  return {\n    position: 'absolute',\n    top,\n    left,\n    maxWidth,\n  }\n}\n"]}

package/build/computeStyles.web.d.ts

@@ -0,0 +1,12 @@
+import { type ViewStyle } from 'react-native';
+import { type Placement } from './useSift';
+export declare function computeStyles({ anchor, input, popover, }: {
+    anchor: HTMLElement;
+    input: HTMLElement;
+    popover: HTMLElement | null;
+}, options: {
+    offset: number;
+    placement: Placement;
+    dynamicWidth?: boolean;
+}): ViewStyle;
+//# sourceMappingURL=computeStyles.web.d.ts.map

package/build/computeStyles.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeStyles.web.d.ts","sourceRoot":"","sources":["../src/computeStyles.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,WAAW,CAAA;AAExC,wBAAgB,aAAa,CAC3B,EACE,MAAM,EACN,KAAK,EACL,OAAO,GACR,EAAE;IACD,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE,WAAW,CAAA;IAClB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAC5B,EACD,OAAO,EAAE;IACP,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,GACA,SAAS,CAyCX"}

package/build/computeStyles.web.js

@@ -0,0 +1,39 @@
+export function computeStyles({ anchor, input, popover, }, options) {
+    const anchorRect = anchor.getBoundingClientRect();
+    const inputRect = input.getBoundingClientRect();
+    const popoverRect = popover?.getBoundingClientRect();
+    const popoverWidth = popoverRect?.width ?? 0;
+    const popoverHeight = popoverRect?.height ?? 0;
+    const [side, align] = options.placement.split('-');
+    let top;
+    if (side === 'top') {
+        top = anchorRect.top - options.offset - popoverHeight + window.scrollY;
+    }
+    else {
+        top = anchorRect.bottom + options.offset + window.scrollY;
+    }
+    let left;
+    if (align === 'start') {
+        left = anchorRect.left;
+    }
+    else if (align === 'end') {
+        left = anchorRect.right - popoverWidth;
+    }
+    else {
+        left = anchorRect.left + (anchorRect.width - popoverWidth) / 2;
+    }
+    left += window.scrollX;
+    let maxWidth;
+    if (options.dynamicWidth === false) {
+        left = inputRect.left + window.scrollX;
+        maxWidth = inputRect.width;
+    }
+    return {
+        // @ts-ignore
+        position: 'fixed',
+        top,
+        left,
+        maxWidth,
+    };
+}
+//# sourceMappingURL=computeStyles.web.js.map

package/build/computeStyles.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"computeStyles.web.js","sourceRoot":"","sources":["../src/computeStyles.web.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,aAAa,CAC3B,EACE,MAAM,EACN,KAAK,EACL,OAAO,GAKR,EACD,OAIC;IAED,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAA;IACjD,MAAM,SAAS,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAA;IAC/C,MAAM,WAAW,GAAG,OAAO,EAAE,qBAAqB,EAAE,CAAA;IACpD,MAAM,YAAY,GAAG,WAAW,EAAE,KAAK,IAAI,CAAC,CAAA;IAC5C,MAAM,aAAa,GAAG,WAAW,EAAE,MAAM,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAGhD,CAAA;IAED,IAAI,GAAW,CAAA;IACf,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC,OAAO,CAAA;IACxE,CAAC;SAAM,CAAC;QACN,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAA;IAC3D,CAAC;IAED,IAAI,IAAY,CAAA;IAChB,IAAI,KAAK,KAAK,OAAO,EAAE,CAAC;QACtB,IAAI,GAAG,UAAU,CAAC,IAAI,CAAA;IACxB,CAAC;SAAM,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QAC3B,IAAI,GAAG,UAAU,CAAC,KAAK,GAAG,YAAY,CAAA;IACxC,CAAC;SAAM,CAAC;QACN,IAAI,GAAG,UAAU,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,CAAA;IAChE,CAAC;IACD,IAAI,IAAI,MAAM,CAAC,OAAO,CAAA;IAEtB,IAAI,QAA4B,CAAA;IAChC,IAAI,OAAO,CAAC,YAAY,KAAK,KAAK,EAAE,CAAC;QACnC,IAAI,GAAG,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAA;QACtC,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAA;IAC5B,CAAC;IAED,OAAO;QACL,aAAa;QACb,QAAQ,EAAE,OAAO;QACjB,GAAG;QACH,IAAI;QACJ,QAAQ;KACT,CAAA;AACH,CAAC","sourcesContent":["import {type ViewStyle} from 'react-native'\nimport {type Placement} from './useSift'\n\nexport function computeStyles(\n  {\n    anchor,\n    input,\n    popover,\n  }: {\n    anchor: HTMLElement\n    input: HTMLElement\n    popover: HTMLElement | null\n  },\n  options: {\n    offset: number\n    placement: Placement\n    dynamicWidth?: boolean\n  },\n): ViewStyle {\n  const anchorRect = anchor.getBoundingClientRect()\n  const inputRect = input.getBoundingClientRect()\n  const popoverRect = popover?.getBoundingClientRect()\n  const popoverWidth = popoverRect?.width ?? 0\n  const popoverHeight = popoverRect?.height ?? 0\n  const [side, align] = options.placement.split('-') as [\n    string,\n    string | undefined,\n  ]\n\n  let top: number\n  if (side === 'top') {\n    top = anchorRect.top - options.offset - popoverHeight + window.scrollY\n  } else {\n    top = anchorRect.bottom + options.offset + window.scrollY\n  }\n\n  let left: number\n  if (align === 'start') {\n    left = anchorRect.left\n  } else if (align === 'end') {\n    left = anchorRect.right - popoverWidth\n  } else {\n    left = anchorRect.left + (anchorRect.width - popoverWidth) / 2\n  }\n  left += window.scrollX\n\n  let maxWidth: number | undefined\n  if (options.dynamicWidth === false) {\n    left = inputRect.left + window.scrollX\n    maxWidth = inputRect.width\n  }\n\n  return {\n    // @ts-ignore\n    position: 'fixed',\n    top,\n    left,\n    maxWidth,\n  }\n}\n"]}

package/build/useKeyboardHandling.d.ts

@@ -1,5 +1,6 @@
 import { type UseSiftReturn } from './useSift';
 export declare function useKeyboardHandling(_props: {
+    enabled?: boolean;
     sift: UseSiftReturn;
     onArrowDown: () => void;
     onArrowUp: () => void;

package/build/useKeyboardHandling.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardHandling.d.ts","sourceRoot":"","sources":["../src/useKeyboardHandling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,WAAW,CAAA;AAE5C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE;IAC1C,IAAI,EAAE,aAAa,CAAA;IACnB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,QAAI"}
+{"version":3,"file":"useKeyboardHandling.d.ts","sourceRoot":"","sources":["../src/useKeyboardHandling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,WAAW,CAAA;AAE5C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,aAAa,CAAA;IACnB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,QAAI"}

package/build/useKeyboardHandling.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardHandling.js","sourceRoot":"","sources":["../src/useKeyboardHandling.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,mBAAmB,CAAC,MAQnC,IAAG,CAAC","sourcesContent":["import {type UseSiftReturn} from './useSift'\n\nexport function useKeyboardHandling(_props: {\n  sift: UseSiftReturn\n  onArrowDown: () => void\n  onArrowUp: () => void\n  onHome: () => void\n  onEnd: () => void\n  onSelect: () => void\n  onDismiss?: () => void\n}) {}\n"]}
+{"version":3,"file":"useKeyboardHandling.js","sourceRoot":"","sources":["../src/useKeyboardHandling.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,mBAAmB,CAAC,MASnC,IAAG,CAAC","sourcesContent":["import {type UseSiftReturn} from './useSift'\n\nexport function useKeyboardHandling(_props: {\n  enabled?: boolean\n  sift: UseSiftReturn\n  onArrowDown: () => void\n  onArrowUp: () => void\n  onHome: () => void\n  onEnd: () => void\n  onSelect: () => void\n  onDismiss?: () => void\n}) {}\n"]}

package/build/useKeyboardHandling.web.d.ts

@@ -1,5 +1,6 @@
 import { type UseSiftReturn } from './useSift';
 export declare function useKeyboardHandling(props: {
+    enabled?: boolean;
     sift: UseSiftReturn;
     onArrowDown: () => void;
     onArrowUp: () => void;

package/build/useKeyboardHandling.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardHandling.web.d.ts","sourceRoot":"","sources":["../src/useKeyboardHandling.web.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,WAAW,CAAA;AAE5C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,IAAI,EAAE,aAAa,CAAA;IACnB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,QA8CA"}
+{"version":3,"file":"useKeyboardHandling.web.d.ts","sourceRoot":"","sources":["../src/useKeyboardHandling.web.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,WAAW,CAAA;AAE5C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,aAAa,CAAA;IACnB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,QAkDA"}

package/build/useKeyboardHandling.web.js

@@ -3,11 +3,11 @@ export function useKeyboardHandling(props) {
     const callbacksRef = useRef(props);
     callbacksRef.current = props;
     useEffect(() => {
-        const reference = props.sift.internal.elements.reference;
-        if (!reference)
+        const input = props.sift.elements.input;
+        if (!input)
             return;
         function onKeyDown(e) {
-            if (!callbacksRef.current.sift.internal.elements.floating)
+            if (!callbacksRef.current.sift.isActive())
                 return;
             switch (e.key) {
                 case 'ArrowDown':
@@ -37,10 +37,14 @@ export function useKeyboardHandling(props) {
                     break;
             }
         }
-        reference.addEventListener('keydown', onKeyDown);
+        if ('addEventListener' in input) {
+            input.addEventListener('keydown', onKeyDown);
+        }
         return () => {
-            reference.removeEventListener('keydown', onKeyDown);
+            if ('removeEventListener' in input) {
+                input.removeEventListener('keydown', onKeyDown);
+            }
         };
-    }, [props.sift.internal.elements.reference]);
+    }, [props.sift.elements.input]);
 }
 //# sourceMappingURL=useKeyboardHandling.web.js.map

package/build/useKeyboardHandling.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardHandling.web.js","sourceRoot":"","sources":["../src/useKeyboardHandling.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAA;AAIvC,MAAM,UAAU,mBAAmB,CAAC,KAQnC;IACC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAA;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAA;QACxD,IAAI,CAAC,SAAS;YAAE,OAAM;QAEtB,SAAS,SAAS,CAAC,CAAgB;YACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ;gBAAE,OAAM;YAEjE,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,WAAW;oBACd,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA;oBAClC,MAAK;gBACP,KAAK,SAAS;oBACZ,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,CAAA;oBAChC,MAAK;gBACP,KAAK,OAAO,CAAC;gBACb,KAAK,KAAK;oBACR,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA;oBAC/B,MAAK;gBACP,KAAK,MAAM;oBACT,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,CAAA;oBAC7B,MAAK;gBACP,KAAK,KAAK;oBACR,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;oBAC5B,MAAK;gBACP,KAAK,QAAQ;oBACX,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAA;oBAClC,MAAK;YACT,CAAC;QACH,CAAC;QAED,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAEhD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QACrD,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;AAC9C,CAAC","sourcesContent":["import {useEffect, useRef} from 'react'\n\nimport {type UseSiftReturn} from './useSift'\n\nexport function useKeyboardHandling(props: {\n  sift: UseSiftReturn\n  onArrowDown: () => void\n  onArrowUp: () => void\n  onHome: () => void\n  onEnd: () => void\n  onSelect: () => void\n  onDismiss?: () => void\n}) {\n  const callbacksRef = useRef(props)\n  callbacksRef.current = props\n\n  useEffect(() => {\n    const reference = props.sift.internal.elements.reference\n    if (!reference) return\n\n    function onKeyDown(e: KeyboardEvent) {\n      if (!callbacksRef.current.sift.internal.elements.floating) return\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          callbacksRef.current.onArrowDown()\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          callbacksRef.current.onArrowUp()\n          break\n        case 'Enter':\n        case 'Tab':\n          e.preventDefault()\n          callbacksRef.current.onSelect()\n          break\n        case 'Home':\n          e.preventDefault()\n          callbacksRef.current.onHome()\n          break\n        case 'End':\n          e.preventDefault()\n          callbacksRef.current.onEnd()\n          break\n        case 'Escape':\n          e.preventDefault()\n          callbacksRef.current.onDismiss?.()\n          break\n      }\n    }\n\n    reference.addEventListener('keydown', onKeyDown)\n\n    return () => {\n      reference.removeEventListener('keydown', onKeyDown)\n    }\n  }, [props.sift.internal.elements.reference])\n}\n"]}
+{"version":3,"file":"useKeyboardHandling.web.js","sourceRoot":"","sources":["../src/useKeyboardHandling.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAC,MAAM,OAAO,CAAA;AAIvC,MAAM,UAAU,mBAAmB,CAAC,KASnC;IACC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAA;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA;QACvC,IAAI,CAAC,KAAK;YAAE,OAAM;QAElB,SAAS,SAAS,CAAC,CAAgB;YACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAAE,OAAM;YAEjD,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACd,KAAK,WAAW;oBACd,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,WAAW,EAAE,CAAA;oBAClC,MAAK;gBACP,KAAK,SAAS;oBACZ,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,CAAA;oBAChC,MAAK;gBACP,KAAK,OAAO,CAAC;gBACb,KAAK,KAAK;oBACR,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAA;oBAC/B,MAAK;gBACP,KAAK,MAAM;oBACT,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,MAAM,EAAE,CAAA;oBAC7B,MAAK;gBACP,KAAK,KAAK;oBACR,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;oBAC5B,MAAK;gBACP,KAAK,QAAQ;oBACX,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAA;oBAClC,MAAK;YACT,CAAC;QACH,CAAC;QAED,IAAI,kBAAkB,IAAI,KAAK,EAAE,CAAC;YAChC,KAAK,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;QAC9C,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,qBAAqB,IAAI,KAAK,EAAE,CAAC;gBACnC,KAAK,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;YACjD,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;AACjC,CAAC","sourcesContent":["import {useEffect, useRef} from 'react'\n\nimport {type UseSiftReturn} from './useSift'\n\nexport function useKeyboardHandling(props: {\n  enabled?: boolean\n  sift: UseSiftReturn\n  onArrowDown: () => void\n  onArrowUp: () => void\n  onHome: () => void\n  onEnd: () => void\n  onSelect: () => void\n  onDismiss?: () => void\n}) {\n  const callbacksRef = useRef(props)\n  callbacksRef.current = props\n\n  useEffect(() => {\n    const input = props.sift.elements.input\n    if (!input) return\n\n    function onKeyDown(e: KeyboardEvent) {\n      if (!callbacksRef.current.sift.isActive()) return\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          callbacksRef.current.onArrowDown()\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          callbacksRef.current.onArrowUp()\n          break\n        case 'Enter':\n        case 'Tab':\n          e.preventDefault()\n          callbacksRef.current.onSelect()\n          break\n        case 'Home':\n          e.preventDefault()\n          callbacksRef.current.onHome()\n          break\n        case 'End':\n          e.preventDefault()\n          callbacksRef.current.onEnd()\n          break\n        case 'Escape':\n          e.preventDefault()\n          callbacksRef.current.onDismiss?.()\n          break\n      }\n    }\n\n    if ('addEventListener' in input) {\n      input.addEventListener('keydown', onKeyDown)\n    }\n\n    return () => {\n      if ('removeEventListener' in input) {\n        input.removeEventListener('keydown', onKeyDown)\n      }\n    }\n  }, [props.sift.elements.input])\n}\n"]}

package/build/useSift.d.ts

@@ -1,11 +1,23 @@
-import { type Placement } from '@floating-ui/react-native';
+import { type ViewStyle } from 'react-native';
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type UseSiftReturn = ReturnType<typeof useSift>;
-export declare function useSift({ offset: offsetValue, placement, }: {
+export declare function useSift({ offset: offsetValue, placement, dynamicWidth, }?: {
     offset?: number;
     placement?: Placement;
+    dynamicWidth?: boolean;
 }): {
     id: string;
-    internal: import("@floating-ui/react-native").UseFloatingReturn;
+    refs: {
+        setPopover: (node: any) => void;
+        setAnchor: (node: any) => void;
+    };
+    elements: {
+        input: any;
+        popover: any;
+    };
+    isActive(): boolean;
+    popoverStyles: ViewStyle;
+    updatePosition(): void;
     targetProps: {
         ref: (node: any) => void;
         role: "combobox";

package/build/useSift.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSift.d.ts","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,2BAA2B,CAAA;AAElC,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAA;AAEtD,wBAAgB,OAAO,CAAC,EACtB,MAAM,EAAE,WAAe,EACvB,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;;;;;;;;;;EAkBA"}
+{"version":3,"file":"useSift.d.ts","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAG3C,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,CAAA;AAEhB,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAA;AAEtD,wBAAgB,OAAO,CAAC,EACtB,MAAM,EAAE,WAAe,EACvB,SAAoB,EACpB,YAAoB,GACrB,GAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;CAClB;;;2BA+CK,GAAG;0BASH,GAAG;;;;;;;;;;oBAf8B,GAAG;;;;;;EAgD9C"}

package/build/useSift.js

@@ -1,19 +1,77 @@
-import { useId } from 'react';
-import { useFloating, shift, offset, } from '@floating-ui/react-native';
-export function useSift({ offset: offsetValue = 0, placement, }) {
+import { useCallback, useId, useRef, useState } from 'react';
+import { computeStyles } from './computeStyles';
+export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamicWidth = false, } = {}) {
     const id = useId();
-    const floating = useFloating({
-        middleware: [shift(), offset(offsetValue)],
+    /*
+     * These are reactive values and need to remain in state
+     */
+    const [input, setInput] = useState(null);
+    const [popover, setPopover] = useState(null);
+    const [popoverStyles, setPopoverStyles] = useState({});
+    /*
+     * These are non-reactive values that we want to persist across renders
+     * without causing re-renders when they change, so we store them in refs.
+     */
+    const inputRef = useRef(null);
+    const popoverRef = useRef(null);
+    const anchorRef = useRef(null);
+    const options = useRef({
+        offset: offsetValue,
         placement,
+        dynamicWidth,
     });
+    options.current = {
+        offset: offsetValue,
+        placement,
+        dynamicWidth,
+    };
+    const update = useCallback(async (anchorNode) => {
+        if (!anchorNode || !inputRef.current)
+            return;
+        const styles = await computeStyles({
+            anchor: anchorNode,
+            input: inputRef.current,
+            popover: popoverRef.current,
+        }, options.current);
+        setPopoverStyles(styles);
+    }, []);
+    const handleSetInput = useCallback((node) => {
+        inputRef.current = node;
+        setInput(node);
+    }, []);
+    const handleSetPopover = useCallback((node) => {
+        popoverRef.current = node;
+        setPopover(node);
+        update(anchorRef.current);
+    }, [update]);
+    const handleSetAnchor = useCallback((node) => {
+        if (!node || node === anchorRef.current)
+            return;
+        anchorRef.current = node;
+        update(node);
+    }, [update]);
     return {
         id,
-        internal: floating,
+        refs: {
+            setPopover: handleSetPopover,
+            setAnchor: handleSetAnchor,
+        },
+        elements: {
+            input,
+            popover,
+        },
+        isActive() {
+            return !!popover;
+        },
+        popoverStyles,
+        updatePosition() {
+            update(anchorRef.current);
+        },
         targetProps: {
-            ref: floating.refs.setReference,
+            ref: handleSetInput,
             role: 'combobox',
             'aria-controls': id,
-            'aria-expanded': !!floating.elements.floating,
+            'aria-expanded': !!popover,
             'aria-autocomplete': 'list',
         },
     };

package/build/useSift.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSift.js","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,OAAO,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,KAAK,EACL,MAAM,GAEP,MAAM,2BAA2B,CAAA;AAIlC,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,EAAE,WAAW,GAAG,CAAC,EACvB,SAAS,GAIV;IACC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAClB,MAAM,QAAQ,GAAG,WAAW,CAAC;QAC3B,UAAU,EAAE,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;QAC1C,SAAS;KACV,CAAC,CAAA;IAEF,OAAO;QACL,EAAE;QACF,QAAQ,EAAE,QAAQ;QAClB,WAAW,EAAE;YACX,GAAG,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY;YAC/B,IAAI,EAAE,UAAmB;YACzB,eAAe,EAAE,EAAE;YACnB,eAAe,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ;YAC7C,mBAAmB,EAAE,MAAe;SACrC;KACF,CAAA;AACH,CAAC","sourcesContent":["import {useId} from 'react'\nimport {\n  useFloating,\n  shift,\n  offset,\n  type Placement,\n} from '@floating-ui/react-native'\n\nexport type UseSiftReturn = ReturnType<typeof useSift>\n\nexport function useSift({\n  offset: offsetValue = 0,\n  placement,\n}: {\n  offset?: number\n  placement?: Placement\n}) {\n  const id = useId()\n  const floating = useFloating({\n    middleware: [shift(), offset(offsetValue)],\n    placement,\n  })\n\n  return {\n    id,\n    internal: floating,\n    targetProps: {\n      ref: floating.refs.setReference,\n      role: 'combobox' as const,\n      'aria-controls': id,\n      'aria-expanded': !!floating.elements.floating,\n      'aria-autocomplete': 'list' as const,\n    },\n  }\n}\n"]}
+{"version":3,"file":"useSift.js","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"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","sourcesContent":["import {useCallback, useId, useRef, useState} from 'react'\nimport {type ViewStyle} from 'react-native'\nimport {computeStyles} from './computeStyles'\n\nexport type Placement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n\nexport type UseSiftReturn = ReturnType<typeof useSift>\n\nexport function useSift({\n  offset: offsetValue = 0,\n  placement = 'bottom',\n  dynamicWidth = false,\n}: {\n  offset?: number\n  placement?: Placement\n  dynamicWidth?: boolean\n} = {}) {\n  const id = useId()\n\n  /*\n   * These are reactive values and need to remain in state\n   */\n  const [input, setInput] = useState<any>(null)\n  const [popover, setPopover] = useState<any>(null)\n  const [popoverStyles, setPopoverStyles] = useState<ViewStyle>({})\n\n  /*\n   * These are non-reactive values that we want to persist across renders\n   * without causing re-renders when they change, so we store them in refs.\n   */\n  const inputRef = useRef<any>(null)\n  const popoverRef = useRef<any>(null)\n  const anchorRef = useRef<any>(null)\n  const options = useRef({\n    offset: offsetValue,\n    placement,\n    dynamicWidth,\n  })\n  options.current = {\n    offset: offsetValue,\n    placement,\n    dynamicWidth,\n  }\n\n  const update = useCallback(async (anchorNode: any) => {\n    if (!anchorNode || !inputRef.current) return\n    const styles = await computeStyles(\n      {\n        anchor: anchorNode,\n        input: inputRef.current,\n        popover: popoverRef.current,\n      },\n      options.current,\n    )\n    setPopoverStyles(styles)\n  }, [])\n\n  const handleSetInput = useCallback((node: any) => {\n    inputRef.current = node\n    setInput(node)\n  }, [])\n\n  const handleSetPopover = useCallback(\n    (node: any) => {\n      popoverRef.current = node\n      setPopover(node)\n      update(anchorRef.current)\n    },\n    [update],\n  )\n\n  const handleSetAnchor = useCallback(\n    (node: any) => {\n      if (!node || node === anchorRef.current) return\n      anchorRef.current = node\n      update(node)\n    },\n    [update],\n  )\n\n  return {\n    id,\n    refs: {\n      setPopover: handleSetPopover,\n      setAnchor: handleSetAnchor,\n    },\n    elements: {\n      input,\n      popover,\n    },\n    isActive() {\n      return !!popover\n    },\n    popoverStyles,\n    updatePosition() {\n      update(anchorRef.current)\n    },\n    targetProps: {\n      ref: handleSetInput,\n      role: 'combobox' as const,\n      'aria-controls': id,\n      'aria-expanded': !!popover,\n      'aria-autocomplete': 'list' as const,\n    },\n  }\n}\n"]}

package/package.json

@@ -1,36 +1,20 @@
 {
   "name": "@bsky.app/sift",
-  "version": "0.1.0",
-  "description": "My new module",
+  "version": "0.1.2",
+  "license": "MIT",
+  "description": "A little React Native library for building autocompletes.",
+  "repository": "https://github.com/bluesky-social/toolbox",
+  "author": "Eric Bailey <git@esb.lol> (https://github.com/estrattonbailey)",
+  "homepage": "https://github.com/bluesky-social/toolbox/tree/main/packages/sift",
   "main": "build/index.js",
   "types": "build/index.d.ts",
-  "scripts": {
-    "build": "expo-module build",
-    "clean": "expo-module clean",
-    "lint": "expo-module lint",
-    "test": "vitest run",
-    "prepare": "expo-module prepare",
-    "prepublishOnly": "expo-module prepublishOnly",
-    "expo-module": "expo-module",
-    "open:ios": "xed example/ios",
-    "open:android": "open -a \"Android Studio\" example/android"
-  },
   "keywords": [
     "react-native",
     "expo",
     "sift",
     "Tapper"
   ],
-  "repository": "https://github.com/estrattonbailey/sift",
-  "bugs": {
-    "url": "https://github.com/estrattonbailey/sift/issues"
-  },
-  "author": "Bluesky Social PBLLC <git@esb.lol> (https://github.com/estrattonbailey)",
-  "license": "MIT",
-  "homepage": "https://github.com/estrattonbailey/sift#readme",
-  "dependencies": {
-    "@floating-ui/react-native": "^0.10.9"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@types/react": "~19.1.1",
     "expo": "^55.0.8",
@@ -42,5 +26,14 @@
     "expo": "*",
     "react": "*",
     "react-native": "*"
+  },
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "vitest run",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android"
   }
-}
+}

package/src/Sift.tsx

@@ -5,6 +5,8 @@ import {
   Pressable,
   type StyleProp,
   type ViewStyle,
+  type PressableProps,
+  type Role,
 } from 'react-native'
 import {type UseSiftReturn} from './useSift'
 import {useKeyboardHandling} from './useKeyboardHandling'
@@ -22,7 +24,15 @@ export function Sift<Item extends {key: string}>({
 }: {
   sift: UseSiftReturn
   data: Item[]
-  render: (props: {active: boolean; item: Item}) => React.ReactElement
+  render: (props: {
+    active: boolean
+    props: {
+      role: string
+      'aria-selected': boolean
+      onPress: () => void
+    }
+    item: Item
+  }) => React.ReactElement
   style?: StyleProp<ViewStyle>
   onSelect?: (item: Item) => void
   onDismiss?: () => void
@@ -31,8 +41,8 @@ export function Sift<Item extends {key: string}>({
   const [activeIndex, setActiveIndex] = useState(0)
   const activeIndexRef = useRef(activeIndex)
   activeIndexRef.current = activeIndex
-  const updateRef = useRef(sift.internal.update)
-  updateRef.current = sift.internal.update
+  const updateRef = useRef(sift.updatePosition)
+  updateRef.current = sift.updatePosition
 
   useEffect(() => {
     setActiveIndex(0)
@@ -71,27 +81,53 @@ export function Sift<Item extends {key: string}>({
   return (
     <View
       collapsable={false}
-      ref={sift.internal.refs.setFloating}
+      ref={sift.refs.setPopover}
       // @ts-ignore
       role="listbox"
       id={sift.id}
-      style={[sift.internal.floatingStyles, style]}>
+      style={[style, sift.popoverStyles]}>
       <FlatList
         data={data}
         inverted={inverted}
         keyExtractor={item => item.key}
-        renderItem={items => (
-          <Pressable
-            role="option"
-            aria-selected={items.index === activeIndex}
-            onPress={() => onSelect?.(items.item)}>
-            {render({
-              active: items.index === activeIndex,
-              item: items.item,
-            })}
-          </Pressable>
-        )}
+        renderItem={items =>
+          render({
+            active: items.index === activeIndex,
+            props: {
+              role: 'option',
+              'aria-selected': items.index === activeIndex,
+              onPress: () => onSelect?.(items.item),
+            },
+            item: items.item,
+          })
+        }
       />
     </View>
   )
 }
+
+/**
+ * A Pressable wrapper for items rendered in Sift. It applies the necessary
+ * accessibility props for each item.
+ */
+export function SiftItem({
+  children,
+  role,
+  style,
+  ...props
+}: Omit<PressableProps, 'role' | 'style'> & {
+  role?: string
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: {pressed: boolean; hovered: boolean}) => StyleProp<ViewStyle>)
+    | undefined
+}) {
+  return (
+    <Pressable
+      role={role as Role}
+      style={style as PressableProps['style']}
+      {...props}>
+      {children}
+    </Pressable>
+  )
+}

package/src/computeStyles.ts

@@ -0,0 +1,70 @@
+import {type ViewStyle} from 'react-native'
+import {type Placement} from './useSift'
+
+function measureInWindow(
+  node: any,
+): Promise<{x: number; y: number; width: number; height: number}> {
+  return new Promise(resolve => {
+    node.measureInWindow(
+      (x: number, y: number, width: number, height: number) => {
+        resolve({x, y, width, height})
+      },
+    )
+  })
+}
+
+export async function computeStyles(
+  {
+    anchor,
+    input,
+    popover,
+  }: {
+    anchor: any
+    input: any
+    popover: any | null
+  },
+  options: {
+    offset: number
+    placement: Placement
+    dynamicWidth?: boolean
+  },
+): Promise<ViewStyle> {
+  const anchorRect = await measureInWindow(anchor)
+  const inputRect = await measureInWindow(input)
+  const popoverRect = popover ? await measureInWindow(popover) : null
+  const popoverWidth = popoverRect?.width ?? 0
+  const popoverHeight = popoverRect?.height ?? 0
+  const [side, align] = options.placement.split('-') as [
+    string,
+    string | undefined,
+  ]
+
+  let top: number
+  if (side === 'top') {
+    top = anchorRect.y - options.offset - popoverHeight
+  } else {
+    top = anchorRect.y + anchorRect.height + options.offset
+  }
+
+  let left: number
+  if (align === 'start') {
+    left = anchorRect.x
+  } else if (align === 'end') {
+    left = anchorRect.x + anchorRect.width - popoverWidth
+  } else {
+    left = anchorRect.x + (anchorRect.width - popoverWidth) / 2
+  }
+
+  let maxWidth: number | undefined
+  if (options.dynamicWidth === false) {
+    left = inputRect.x
+    maxWidth = inputRect.width
+  }
+
+  return {
+    position: 'absolute',
+    top,
+    left,
+    maxWidth,
+  }
+}

package/src/computeStyles.web.ts

@@ -0,0 +1,60 @@
+import {type ViewStyle} from 'react-native'
+import {type Placement} from './useSift'
+
+export function computeStyles(
+  {
+    anchor,
+    input,
+    popover,
+  }: {
+    anchor: HTMLElement
+    input: HTMLElement
+    popover: HTMLElement | null
+  },
+  options: {
+    offset: number
+    placement: Placement
+    dynamicWidth?: boolean
+  },
+): ViewStyle {
+  const anchorRect = anchor.getBoundingClientRect()
+  const inputRect = input.getBoundingClientRect()
+  const popoverRect = popover?.getBoundingClientRect()
+  const popoverWidth = popoverRect?.width ?? 0
+  const popoverHeight = popoverRect?.height ?? 0
+  const [side, align] = options.placement.split('-') as [
+    string,
+    string | undefined,
+  ]
+
+  let top: number
+  if (side === 'top') {
+    top = anchorRect.top - options.offset - popoverHeight + window.scrollY
+  } else {
+    top = anchorRect.bottom + options.offset + window.scrollY
+  }
+
+  let left: number
+  if (align === 'start') {
+    left = anchorRect.left
+  } else if (align === 'end') {
+    left = anchorRect.right - popoverWidth
+  } else {
+    left = anchorRect.left + (anchorRect.width - popoverWidth) / 2
+  }
+  left += window.scrollX
+
+  let maxWidth: number | undefined
+  if (options.dynamicWidth === false) {
+    left = inputRect.left + window.scrollX
+    maxWidth = inputRect.width
+  }
+
+  return {
+    // @ts-ignore
+    position: 'fixed',
+    top,
+    left,
+    maxWidth,
+  }
+}

package/src/useKeyboardHandling.ts

@@ -1,6 +1,7 @@
 import {type UseSiftReturn} from './useSift'
 
 export function useKeyboardHandling(_props: {
+  enabled?: boolean
   sift: UseSiftReturn
   onArrowDown: () => void
   onArrowUp: () => void

package/src/useKeyboardHandling.web.ts

@@ -3,6 +3,7 @@ import {useEffect, useRef} from 'react'
 import {type UseSiftReturn} from './useSift'
 
 export function useKeyboardHandling(props: {
+  enabled?: boolean
   sift: UseSiftReturn
   onArrowDown: () => void
   onArrowUp: () => void
@@ -15,11 +16,11 @@ export function useKeyboardHandling(props: {
   callbacksRef.current = props
 
   useEffect(() => {
-    const reference = props.sift.internal.elements.reference
-    if (!reference) return
+    const input = props.sift.elements.input
+    if (!input) return
 
     function onKeyDown(e: KeyboardEvent) {
-      if (!callbacksRef.current.sift.internal.elements.floating) return
+      if (!callbacksRef.current.sift.isActive()) return
 
       switch (e.key) {
         case 'ArrowDown':
@@ -50,10 +51,14 @@ export function useKeyboardHandling(props: {
       }
     }
 
-    reference.addEventListener('keydown', onKeyDown)
+    if ('addEventListener' in input) {
+      input.addEventListener('keydown', onKeyDown)
+    }
 
     return () => {
-      reference.removeEventListener('keydown', onKeyDown)
+      if ('removeEventListener' in input) {
+        input.removeEventListener('keydown', onKeyDown)
+      }
     }
-  }, [props.sift.internal.elements.reference])
+  }, [props.sift.elements.input])
 }

package/src/useSift.ts

@@ -1,34 +1,111 @@
-import {useId} from 'react'
-import {
-  useFloating,
-  shift,
-  offset,
-  type Placement,
-} from '@floating-ui/react-native'
+import {useCallback, useId, useRef, useState} from 'react'
+import {type ViewStyle} from 'react-native'
+import {computeStyles} from './computeStyles'
+
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
 
 export type UseSiftReturn = ReturnType<typeof useSift>
 
 export function useSift({
   offset: offsetValue = 0,
-  placement,
+  placement = 'bottom',
+  dynamicWidth = false,
 }: {
   offset?: number
   placement?: Placement
-}) {
+  dynamicWidth?: boolean
+} = {}) {
   const id = useId()
-  const floating = useFloating({
-    middleware: [shift(), offset(offsetValue)],
+
+  /*
+   * These are reactive values and need to remain in state
+   */
+  const [input, setInput] = useState<any>(null)
+  const [popover, setPopover] = useState<any>(null)
+  const [popoverStyles, setPopoverStyles] = useState<ViewStyle>({})
+
+  /*
+   * These are non-reactive values that we want to persist across renders
+   * without causing re-renders when they change, so we store them in refs.
+   */
+  const inputRef = useRef<any>(null)
+  const popoverRef = useRef<any>(null)
+  const anchorRef = useRef<any>(null)
+  const options = useRef({
+    offset: offsetValue,
     placement,
+    dynamicWidth,
   })
+  options.current = {
+    offset: offsetValue,
+    placement,
+    dynamicWidth,
+  }
+
+  const update = useCallback(async (anchorNode: any) => {
+    if (!anchorNode || !inputRef.current) return
+    const styles = await computeStyles(
+      {
+        anchor: anchorNode,
+        input: inputRef.current,
+        popover: popoverRef.current,
+      },
+      options.current,
+    )
+    setPopoverStyles(styles)
+  }, [])
+
+  const handleSetInput = useCallback((node: any) => {
+    inputRef.current = node
+    setInput(node)
+  }, [])
+
+  const handleSetPopover = useCallback(
+    (node: any) => {
+      popoverRef.current = node
+      setPopover(node)
+      update(anchorRef.current)
+    },
+    [update],
+  )
+
+  const handleSetAnchor = useCallback(
+    (node: any) => {
+      if (!node || node === anchorRef.current) return
+      anchorRef.current = node
+      update(node)
+    },
+    [update],
+  )
 
   return {
     id,
-    internal: floating,
+    refs: {
+      setPopover: handleSetPopover,
+      setAnchor: handleSetAnchor,
+    },
+    elements: {
+      input,
+      popover,
+    },
+    isActive() {
+      return !!popover
+    },
+    popoverStyles,
+    updatePosition() {
+      update(anchorRef.current)
+    },
     targetProps: {
-      ref: floating.refs.setReference,
+      ref: handleSetInput,
       role: 'combobox' as const,
       'aria-controls': id,
-      'aria-expanded': !!floating.elements.floating,
+      'aria-expanded': !!popover,
       'aria-autocomplete': 'list' as const,
     },
   }