@bsky.app/sift 0.1.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+}

package/README.md

@@ -0,0 +1,135 @@
+# @bsky.app/sift
+
+A headless autocomplete UI library for React Native (including web). Uses
+`@floating-ui/react-native` for popover positioning and handles keyboard
+navigation on web.
+
+## Installation
+
+```sh
+pnpm add @bsky.app/sift
+```
+
+Peer dependencies: `react`, `react-native`, `expo`, `@floating-ui/react-native`.
+
+## Basic example
+
+```tsx
+import {useState} from 'react'
+import {View, Text, TextInput} from 'react-native'
+import {useSift, Sift} from '@bsky.app/sift'
+
+const items = [
+  {key: '1', label: 'Alice'},
+  {key: '2', label: 'Bob'},
+  {key: '3', label: 'Charlie'},
+]
+
+function Autocomplete() {
+  const [query, setQuery] = useState('')
+  const sift = useSift({offset: 4})
+
+  const filtered = items.filter(item =>
+    item.label.toLowerCase().includes(query.toLowerCase()),
+  )
+
+  return (
+    <View>
+      <TextInput
+        {...sift.targetProps}
+        value={query}
+        onChangeText={setQuery}
+        placeholder="Search..."
+      />
+
+      {query.length > 0 && (
+        <Sift
+          sift={sift}
+          data={filtered}
+          onSelect={item => setQuery(item.label)}
+          onDismiss={() => setQuery('')}
+          render={({active, item}) => (
+            <View style={active && {backgroundColor: '#eee'}}>
+              <Text>{item.label}</Text>
+            </View>
+          )}
+        />
+      )}
+    </View>
+  )
+}
+```
+
+Items must have a `key: string` property, used internally for list rendering.
+
+## `useSift` options
+
+### `offset`
+
+Gap in pixels between the reference element and the floating popover. Defaults
+to `0`.
+
+```tsx
+const sift = useSift({offset: 8})
+```
+
+### `placement`
+
+Controls where the popover appears relative to the reference element. Accepts
+any `@floating-ui/react-native` placement value (`'bottom'`, `'top'`,
+`'bottom-start'`, etc.). Defaults to `'bottom'`.
+
+```tsx
+const sift = useSift({placement: 'top'})
+```
+
+## `<Sift>` props
+
+### `onSelect`
+
+Called when the user selects an item, either by pressing it or by pressing
+Enter/Tab while it's highlighted via keyboard.
+
+```tsx
+<Sift
+  onSelect={item => {
+    setQuery(item.label)
+  }}
+/>
+```
+
+### `onDismiss`
+
+Called when the user presses the Escape key (web only). Use this to close the
+popover or clear the query.
+
+```tsx
+<Sift onDismiss={() => setQuery('')} />
+```
+
+### `inverted`
+
+Renders the list bottom-to-top and reverses keyboard navigation to match.
+Useful when the popover opens above the input.
+
+```tsx
+<Sift
+  sift={sift}
+  data={filtered}
+  inverted
+  render={({active, item}) => (
+    <View style={active && {backgroundColor: '#eee'}}>
+      <Text>{item.label}</Text>
+    </View>
+  )}
+/>
+```
+
+## Keyboard navigation (web)
+
+| Key                 | Action                                        |
+| ------------------- | --------------------------------------------- |
+| ArrowDown / ArrowUp | Move through items (reversed when `inverted`) |
+| Home / End          | Jump to first / last item                     |
+| Enter / Tab         | Select the active item                        |
+| Escape              | Calls `onDismiss`                             |

package/build/Sift.d.ts

@@ -0,0 +1,18 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type UseSiftReturn } from './useSift';
+export * from './useSift';
+export declare function Sift<Item extends {
+    key: string;
+}>({ sift, data, render, style, onSelect, onDismiss, inverted, }: {
+    sift: UseSiftReturn;
+    data: Item[];
+    render: (props: {
+        active: boolean;
+        item: Item;
+    }) => React.ReactElement;
+    style?: StyleProp<ViewStyle>;
+    onSelect?: (item: Item) => void;
+    onDismiss?: () => void;
+    inverted?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Sift.d.ts.map

package/build/Sift.d.ts.map

@@ -0,0 +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"}

package/build/Sift.js

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from 'react';
+import { View, FlatList, Pressable, } from 'react-native';
+import { useKeyboardHandling } from './useKeyboardHandling';
+export * from './useSift';
+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;
+    useEffect(() => {
+        setActiveIndex(0);
+        updateRef.current();
+    }, [data.length]);
+    const next = () => {
+        if (data.length === 0)
+            return;
+        setActiveIndex(i => (i + 1) % data.length);
+    };
+    const prev = () => {
+        if (data.length === 0)
+            return;
+        setActiveIndex(i => (i - 1 + data.length) % data.length);
+    };
+    const first = () => {
+        if (data.length === 0)
+            return;
+        setActiveIndex(0);
+    };
+    const last = () => {
+        if (data.length === 0)
+            return;
+        setActiveIndex(data.length - 1);
+    };
+    useKeyboardHandling({
+        sift,
+        onArrowDown: inverted ? prev : next,
+        onArrowUp: inverted ? next : prev,
+        onHome: inverted ? last : first,
+        onEnd: inverted ? first : last,
+        onSelect: () => {
+            onSelect?.(data[activeIndexRef.current]);
+        },
+        onDismiss,
+    });
+    return (<View collapsable={false} ref={sift.internal.refs.setFloating} 
+    // @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>)}/>
+    </View>);
+}
+//# sourceMappingURL=Sift.js.map

package/build/Sift.js.map

@@ -0,0 +1 @@
+{"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} 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"]}

package/build/index.d.ts

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

package/build/index.d.ts.map

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

package/build/index.js

@@ -0,0 +1,3 @@
+export * from './useSift';
+export * from './Sift';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA","sourcesContent":["export * from './useSift'\nexport * from './Sift'\n"]}

package/build/useKeyboardHandling.d.ts

@@ -0,0 +1,11 @@
+import { type UseSiftReturn } from './useSift';
+export declare function useKeyboardHandling(_props: {
+    sift: UseSiftReturn;
+    onArrowDown: () => void;
+    onArrowUp: () => void;
+    onHome: () => void;
+    onEnd: () => void;
+    onSelect: () => void;
+    onDismiss?: () => void;
+}): void;
+//# sourceMappingURL=useKeyboardHandling.d.ts.map

package/build/useKeyboardHandling.d.ts.map

@@ -0,0 +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"}

package/build/useKeyboardHandling.js

@@ -0,0 +1,2 @@
+export function useKeyboardHandling(_props) { }
+//# sourceMappingURL=useKeyboardHandling.js.map

package/build/useKeyboardHandling.js.map

@@ -0,0 +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"]}

package/build/useKeyboardHandling.web.d.ts

@@ -0,0 +1,11 @@
+import { type UseSiftReturn } from './useSift';
+export declare function useKeyboardHandling(props: {
+    sift: UseSiftReturn;
+    onArrowDown: () => void;
+    onArrowUp: () => void;
+    onHome: () => void;
+    onEnd: () => void;
+    onSelect: () => void;
+    onDismiss?: () => void;
+}): void;
+//# sourceMappingURL=useKeyboardHandling.web.d.ts.map

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

@@ -0,0 +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"}

package/build/useKeyboardHandling.web.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+export function useKeyboardHandling(props) {
+    const callbacksRef = useRef(props);
+    callbacksRef.current = props;
+    useEffect(() => {
+        const reference = props.sift.internal.elements.reference;
+        if (!reference)
+            return;
+        function onKeyDown(e) {
+            if (!callbacksRef.current.sift.internal.elements.floating)
+                return;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    callbacksRef.current.onArrowDown();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    callbacksRef.current.onArrowUp();
+                    break;
+                case 'Enter':
+                case 'Tab':
+                    e.preventDefault();
+                    callbacksRef.current.onSelect();
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    callbacksRef.current.onHome();
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    callbacksRef.current.onEnd();
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    callbacksRef.current.onDismiss?.();
+                    break;
+            }
+        }
+        reference.addEventListener('keydown', onKeyDown);
+        return () => {
+            reference.removeEventListener('keydown', onKeyDown);
+        };
+    }, [props.sift.internal.elements.reference]);
+}
+//# sourceMappingURL=useKeyboardHandling.web.js.map

package/build/useKeyboardHandling.web.js.map

@@ -0,0 +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"]}

package/build/useSift.d.ts

@@ -0,0 +1,17 @@
+import { type Placement } from '@floating-ui/react-native';
+export type UseSiftReturn = ReturnType<typeof useSift>;
+export declare function useSift({ offset: offsetValue, placement, }: {
+    offset?: number;
+    placement?: Placement;
+}): {
+    id: string;
+    internal: import("@floating-ui/react-native").UseFloatingReturn;
+    targetProps: {
+        ref: (node: any) => void;
+        role: "combobox";
+        'aria-controls': string;
+        'aria-expanded': boolean;
+        'aria-autocomplete': "list";
+    };
+};
+//# sourceMappingURL=useSift.d.ts.map

package/build/useSift.d.ts.map

@@ -0,0 +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"}

package/build/useSift.js

@@ -0,0 +1,21 @@
+import { useId } from 'react';
+import { useFloating, shift, offset, } from '@floating-ui/react-native';
+export function useSift({ offset: offsetValue = 0, placement, }) {
+    const id = useId();
+    const floating = useFloating({
+        middleware: [shift(), offset(offsetValue)],
+        placement,
+    });
+    return {
+        id,
+        internal: floating,
+        targetProps: {
+            ref: floating.refs.setReference,
+            role: 'combobox',
+            'aria-controls': id,
+            'aria-expanded': !!floating.elements.floating,
+            'aria-autocomplete': 'list',
+        },
+    };
+}
+//# sourceMappingURL=useSift.js.map

package/build/useSift.js.map

@@ -0,0 +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"]}

package/expo-module.config.json

@@ -0,0 +1,5 @@
+{
+  "platforms": ["apple", "android", "web"],
+  "apple": {},
+  "android": {}
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@bsky.app/sift",
+  "version": "0.1.0",
+  "description": "My new module",
+  "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"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.1",
+    "expo": "^55.0.8",
+    "expo-module-scripts": "^55.0.2",
+    "react-native": "0.82.1",
+    "vitest": "^3.1.1"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/Sift.tsx

@@ -0,0 +1,97 @@
+import {useEffect, useRef, useState} from 'react'
+import {
+  View,
+  FlatList,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import {type UseSiftReturn} from './useSift'
+import {useKeyboardHandling} from './useKeyboardHandling'
+
+export * from './useSift'
+
+export function Sift<Item extends {key: string}>({
+  sift,
+  data,
+  render,
+  style,
+  onSelect,
+  onDismiss,
+  inverted,
+}: {
+  sift: UseSiftReturn
+  data: Item[]
+  render: (props: {active: boolean; item: Item}) => React.ReactElement
+  style?: StyleProp<ViewStyle>
+  onSelect?: (item: Item) => void
+  onDismiss?: () => void
+  inverted?: boolean
+}) {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const activeIndexRef = useRef(activeIndex)
+  activeIndexRef.current = activeIndex
+  const updateRef = useRef(sift.internal.update)
+  updateRef.current = sift.internal.update
+
+  useEffect(() => {
+    setActiveIndex(0)
+    updateRef.current()
+  }, [data.length])
+
+  const next = () => {
+    if (data.length === 0) return
+    setActiveIndex(i => (i + 1) % data.length)
+  }
+  const prev = () => {
+    if (data.length === 0) return
+    setActiveIndex(i => (i - 1 + data.length) % data.length)
+  }
+  const first = () => {
+    if (data.length === 0) return
+    setActiveIndex(0)
+  }
+  const last = () => {
+    if (data.length === 0) return
+    setActiveIndex(data.length - 1)
+  }
+
+  useKeyboardHandling({
+    sift,
+    onArrowDown: inverted ? prev : next,
+    onArrowUp: inverted ? next : prev,
+    onHome: inverted ? last : first,
+    onEnd: inverted ? first : last,
+    onSelect: () => {
+      onSelect?.(data[activeIndexRef.current])
+    },
+    onDismiss,
+  })
+
+  return (
+    <View
+      collapsable={false}
+      ref={sift.internal.refs.setFloating}
+      // @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>
+        )}
+      />
+    </View>
+  )
+}

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './useSift'
+export * from './Sift'

package/src/useKeyboardHandling.ts

@@ -0,0 +1,11 @@
+import {type UseSiftReturn} from './useSift'
+
+export function useKeyboardHandling(_props: {
+  sift: UseSiftReturn
+  onArrowDown: () => void
+  onArrowUp: () => void
+  onHome: () => void
+  onEnd: () => void
+  onSelect: () => void
+  onDismiss?: () => void
+}) {}

package/src/useKeyboardHandling.web.ts

@@ -0,0 +1,59 @@
+import {useEffect, useRef} from 'react'
+
+import {type UseSiftReturn} from './useSift'
+
+export function useKeyboardHandling(props: {
+  sift: UseSiftReturn
+  onArrowDown: () => void
+  onArrowUp: () => void
+  onHome: () => void
+  onEnd: () => void
+  onSelect: () => void
+  onDismiss?: () => void
+}) {
+  const callbacksRef = useRef(props)
+  callbacksRef.current = props
+
+  useEffect(() => {
+    const reference = props.sift.internal.elements.reference
+    if (!reference) return
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (!callbacksRef.current.sift.internal.elements.floating) return
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          callbacksRef.current.onArrowDown()
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          callbacksRef.current.onArrowUp()
+          break
+        case 'Enter':
+        case 'Tab':
+          e.preventDefault()
+          callbacksRef.current.onSelect()
+          break
+        case 'Home':
+          e.preventDefault()
+          callbacksRef.current.onHome()
+          break
+        case 'End':
+          e.preventDefault()
+          callbacksRef.current.onEnd()
+          break
+        case 'Escape':
+          e.preventDefault()
+          callbacksRef.current.onDismiss?.()
+          break
+      }
+    }
+
+    reference.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      reference.removeEventListener('keydown', onKeyDown)
+    }
+  }, [props.sift.internal.elements.reference])
+}

package/src/useSift.ts

@@ -0,0 +1,35 @@
+import {useId} from 'react'
+import {
+  useFloating,
+  shift,
+  offset,
+  type Placement,
+} from '@floating-ui/react-native'
+
+export type UseSiftReturn = ReturnType<typeof useSift>
+
+export function useSift({
+  offset: offsetValue = 0,
+  placement,
+}: {
+  offset?: number
+  placement?: Placement
+}) {
+  const id = useId()
+  const floating = useFloating({
+    middleware: [shift(), offset(offsetValue)],
+    placement,
+  })
+
+  return {
+    id,
+    internal: floating,
+    targetProps: {
+      ref: floating.refs.setReference,
+      role: 'combobox' as const,
+      'aria-controls': id,
+      'aria-expanded': !!floating.elements.floating,
+      'aria-autocomplete': 'list' as const,
+    },
+  }
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}

package/vitest.config.ts

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['src/__tests__/**/*.test.ts'],
+  },
+})