@bsky.app/sift 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @bsky.app/sift
 
+## 0.2.5
+
+### Patch Changes
+
+- [`585e3f0`](https://github.com/bluesky-social/toolbox/commit/585e3f0fd73f986ab4f49d29551f182d296eeaad) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - onMouseDown and keyboardShouldPersistTaps for better outside click and selection handling
+
+## 0.2.4
+
+### Patch Changes
+
+- [`1bf70bb`](https://github.com/bluesky-social/toolbox/commit/1bf70bb78e5d396cfd1ccf1db0002d7db4faa816) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Remove `prepare` script
+
 ## 0.2.3
 
 ### Patch Changes

package/build/Sift.d.ts

@@ -19,7 +19,7 @@ export declare function Sift<Item extends {
     onSelect?: (item: Item) => void;
     onDismiss?: () => void;
     inverted?: boolean;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * A Pressable wrapper for items rendered in Sift. It applies the necessary
  * accessibility props for each item.
@@ -30,5 +30,5 @@ export declare function SiftItem({ children, role, style, ...props }: Omit<Press
         pressed: boolean;
         hovered: boolean;
     }) => StyleProp<ViewStyle>) | undefined;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").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,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,+BAoEA;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"}
+{"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,2CAyEA;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,2CASA"}

package/build/Sift.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { View, FlatList, Pressable, } from 'react-native';
 import { useKeyboardHandling } from './useKeyboardHandling';
@@ -44,25 +45,25 @@ export function Sift({ sift, data, render, style, onSelect, onDismiss, inverted,
         onDismiss,
     });
     const hasStyles = sift.popoverStyles.top != null;
-    return (<View collapsable={false} ref={sift.refs.setPopover} role={"listbox"} id={sift.id} style={[style, sift.popoverStyles, !hasStyles && { opacity: 0 }]}>
-      <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>);
+    return (_jsx(View, { collapsable: false, ref: sift.refs.setPopover, role: 'listbox', id: sift.id, style: [style, sift.popoverStyles, !hasStyles && { opacity: 0 }], 
+        // @ts-ignore web only
+        onMouseDown: e => {
+            e.preventDefault();
+        }, children: _jsx(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,
+            }), keyboardShouldPersistTaps: "handled" }) }));
 }
 /**
  * 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>);
+    return (_jsx(Pressable, { role: role, style: style, ...props, children: children }));
 }
 //# sourceMappingURL=Sift.js.map

package/build/Sift.js.map

@@ -1 +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  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  const hasStyles = sift.popoverStyles.top != null\n\n  return (\n    <View\n      collapsable={false}\n      ref={sift.refs.setPopover}\n      role={\"listbox\" as any}\n      id={sift.id}\n      style={[style, sift.popoverStyles, !hasStyles && {opacity: 0}]}>\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"]}
+{"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  const hasStyles = sift.popoverStyles.top != null\n\n  return (\n    <View\n      collapsable={false}\n      ref={sift.refs.setPopover}\n      role={'listbox' as any}\n      id={sift.id}\n      style={[style, sift.popoverStyles, !hasStyles && {opacity: 0}]}\n      // @ts-ignore web only\n      onMouseDown={e => {\n        e.preventDefault()\n      }}>\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        keyboardShouldPersistTaps=\"handled\"\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsky.app/sift",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "description": "A little React Native library for building autocompletes.",
   "repository": "https://github.com/bluesky-social/toolbox",
@@ -28,7 +28,7 @@
     "react-native": "*"
   },
   "scripts": {
-    "build": "expo-module build",
+    "build": "expo-module clean && expo-module build",
     "clean": "expo-module clean",
     "lint": "expo-module lint",
     "test": "vitest run",

package/src/Sift.tsx

@@ -84,9 +84,13 @@ export function Sift<Item extends {key: string}>({
     <View
       collapsable={false}
       ref={sift.refs.setPopover}
-      role={"listbox" as any}
+      role={'listbox' as any}
       id={sift.id}
-      style={[style, sift.popoverStyles, !hasStyles && {opacity: 0}]}>
+      style={[style, sift.popoverStyles, !hasStyles && {opacity: 0}]}
+      // @ts-ignore web only
+      onMouseDown={e => {
+        e.preventDefault()
+      }}>
       <FlatList
         data={data}
         inverted={inverted}
@@ -102,6 +106,7 @@ export function Sift<Item extends {key: string}>({
             item: items.item,
           })
         }
+        keyboardShouldPersistTaps="handled"
       />
     </View>
   )

package/tsconfig.json

@@ -2,7 +2,8 @@
 {
   "extends": "expo-module-scripts/tsconfig.base",
   "compilerOptions": {
-    "outDir": "./build"
+    "outDir": "./build",
+    "jsx": "react-jsx"
   },
   "include": ["./src"],
   "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]