@bsky.app/sift 0.1.2 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @bsky.app/sift
 
+## 0.2.1
+
+### Patch Changes
+
+- [`27b4748`](https://github.com/bluesky-social/toolbox/commit/27b4748ea3c9b2ed45b7979f0431b6eed2b908d3) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Misc fixes
+
+- [`58e33f1`](https://github.com/bluesky-social/toolbox/commit/58e33f149c70db7583b65c8edb1bebc3c3075c63) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Fall back to input ref if anchor ref is not set
+
+## 0.2.0
+
+### Minor Changes
+
+- [`f215a99`](https://github.com/bluesky-social/toolbox/commit/f215a99913fec45d8842da22f7c02737c14301ef) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Bump minor, packages are mostly stable
+
+### Patch Changes
+
+- [`9f03ab7`](https://github.com/bluesky-social/toolbox/commit/9f03ab7450eea3e9722940c5d45fce5dbe1f3f3d) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Delay showing popover until styles are computed
+
 ## 0.1.2
 
 ### Patch Changes

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

package/build/Sift.js

@@ -43,9 +43,8 @@ export function Sift({ sift, data, render, style, onSelect, onDismiss, inverted,
         },
         onDismiss,
     });
-    return (<View collapsable={false} ref={sift.refs.setPopover} 
-    // @ts-ignore
-    role="listbox" id={sift.id} style={[style, sift.popoverStyles]}>
+    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: {

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  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"]}
+{"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"]}

package/build/computeStyles.d.ts

@@ -8,5 +8,5 @@ export declare function computeStyles({ anchor, input, popover, }: {
     offset: number;
     placement: Placement;
     dynamicWidth?: boolean;
-}): Promise<ViewStyle>;
+}): Promise<ViewStyle | null>;
 //# sourceMappingURL=computeStyles.d.ts.map

package/build/computeStyles.d.ts.map

@@ -1 +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"}
+{"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,GAAG,IAAI,CAAC,CA6C3B"}

package/build/computeStyles.js

@@ -9,6 +9,12 @@ 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;
+    // If any measurement failed (view not in hierarchy yet), return null
+    // so the caller keeps the previous styles.
+    if (!anchorRect.width || !inputRect.width)
+        return null;
+    if (popoverRect && !popoverRect.width && !popoverRect.height)
+        return null;
     const popoverWidth = popoverRect?.width ?? 0;
     const popoverHeight = popoverRect?.height ?? 0;
     const [side, align] = options.placement.split('-');

package/build/computeStyles.js.map

@@ -1 +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"]}
+{"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;IAEnE,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IACtD,IAAI,WAAW,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAEzE,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 | null> {\n  const anchorRect = await measureInWindow(anchor)\n  const inputRect = await measureInWindow(input)\n  const popoverRect = popover ? await measureInWindow(popover) : null\n\n  // If any measurement failed (view not in hierarchy yet), return null\n  // so the caller keeps the previous styles.\n  if (!anchorRect.width || !inputRect.width) return null\n  if (popoverRect && !popoverRect.width && !popoverRect.height) return null\n\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/useSift.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"useSift.d.ts","sourceRoot":"","sources":["../src/useSift.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AAK3C,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;;;2BAiDK,GAAG;0BAaH,GAAG;;;;;;;;;;oBAnB8B,GAAG;;;;;;EAmD9C"}

package/build/useSift.js

@@ -1,5 +1,6 @@
 import { useCallback, useId, useRef, useState } from 'react';
 import { computeStyles } from './computeStyles';
+const DEFAULT_POPOVER_STYLES = { position: 'absolute' };
 export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamicWidth = false, } = {}) {
     const id = useId();
     /*
@@ -7,7 +8,7 @@ export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamic
      */
     const [input, setInput] = useState(null);
     const [popover, setPopover] = useState(null);
-    const [popoverStyles, setPopoverStyles] = useState({});
+    const [popoverStyles, setPopoverStyles] = useState(DEFAULT_POPOVER_STYLES);
     /*
      * 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.
@@ -25,15 +26,16 @@ export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamic
         placement,
         dynamicWidth,
     };
-    const update = useCallback(async (anchorNode) => {
-        if (!anchorNode || !inputRef.current)
+    const update = useCallback(async () => {
+        if (!inputRef.current || !popoverRef.current)
             return;
         const styles = await computeStyles({
-            anchor: anchorNode,
+            anchor: anchorRef.current || inputRef.current,
             input: inputRef.current,
             popover: popoverRef.current,
         }, options.current);
-        setPopoverStyles(styles);
+        if (styles)
+            setPopoverStyles(styles);
     }, []);
     const handleSetInput = useCallback((node) => {
         inputRef.current = node;
@@ -42,13 +44,17 @@ export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamic
     const handleSetPopover = useCallback((node) => {
         popoverRef.current = node;
         setPopover(node);
-        update(anchorRef.current);
+        if (node) {
+            update();
+        }
+        else {
+            setPopoverStyles(DEFAULT_POPOVER_STYLES);
+        }
     }, [update]);
     const handleSetAnchor = useCallback((node) => {
-        if (!node || node === anchorRef.current)
-            return;
         anchorRef.current = node;
-        update(node);
+        if (node)
+            update();
     }, [update]);
     return {
         id,
@@ -65,7 +71,7 @@ export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamic
         },
         popoverStyles,
         updatePosition() {
-            update(anchorRef.current);
+            update();
         },
         targetProps: {
             ref: handleSetInput,

package/build/useSift.js.map

@@ -1 +1 @@
-{"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"]}
+{"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\nconst DEFAULT_POPOVER_STYLES: ViewStyle = {position: 'absolute'}\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    DEFAULT_POPOVER_STYLES,\n  )\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 () => {\n    if (!inputRef.current || !popoverRef.current) return\n    const styles = await computeStyles(\n      {\n        anchor: anchorRef.current || inputRef.current,\n        input: inputRef.current,\n        popover: popoverRef.current,\n      },\n      options.current,\n    )\n    if (styles) 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      if (node) {\n        update()\n      } else {\n        setPopoverStyles(DEFAULT_POPOVER_STYLES)\n      }\n    },\n    [update],\n  )\n\n  const handleSetAnchor = useCallback(\n    (node: any) => {\n      anchorRef.current = node\n      if (node) update()\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()\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,6 +1,6 @@
 {
   "name": "@bsky.app/sift",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "license": "MIT",
   "description": "A little React Native library for building autocompletes.",
   "repository": "https://github.com/bluesky-social/toolbox",

package/src/Sift.tsx

@@ -78,14 +78,15 @@ export function Sift<Item extends {key: string}>({
     onDismiss,
   })
 
+  const hasStyles = sift.popoverStyles.top != null
+
   return (
     <View
       collapsable={false}
       ref={sift.refs.setPopover}
-      // @ts-ignore
-      role="listbox"
+      role={"listbox" as any}
       id={sift.id}
-      style={[style, sift.popoverStyles]}>
+      style={[style, sift.popoverStyles, !hasStyles && {opacity: 0}]}>
       <FlatList
         data={data}
         inverted={inverted}

package/src/computeStyles.ts

@@ -28,10 +28,16 @@ export async function computeStyles(
     placement: Placement
     dynamicWidth?: boolean
   },
-): Promise<ViewStyle> {
+): Promise<ViewStyle | null> {
   const anchorRect = await measureInWindow(anchor)
   const inputRect = await measureInWindow(input)
   const popoverRect = popover ? await measureInWindow(popover) : null
+
+  // If any measurement failed (view not in hierarchy yet), return null
+  // so the caller keeps the previous styles.
+  if (!anchorRect.width || !inputRect.width) return null
+  if (popoverRect && !popoverRect.width && !popoverRect.height) return null
+
   const popoverWidth = popoverRect?.width ?? 0
   const popoverHeight = popoverRect?.height ?? 0
   const [side, align] = options.placement.split('-') as [

package/src/useSift.ts

@@ -2,6 +2,8 @@ import {useCallback, useId, useRef, useState} from 'react'
 import {type ViewStyle} from 'react-native'
 import {computeStyles} from './computeStyles'
 
+const DEFAULT_POPOVER_STYLES: ViewStyle = {position: 'absolute'}
+
 export type Placement =
   | 'top'
   | 'top-start'
@@ -28,7 +30,9 @@ export function useSift({
    */
   const [input, setInput] = useState<any>(null)
   const [popover, setPopover] = useState<any>(null)
-  const [popoverStyles, setPopoverStyles] = useState<ViewStyle>({})
+  const [popoverStyles, setPopoverStyles] = useState<ViewStyle>(
+    DEFAULT_POPOVER_STYLES,
+  )
 
   /*
    * These are non-reactive values that we want to persist across renders
@@ -48,17 +52,17 @@ export function useSift({
     dynamicWidth,
   }
 
-  const update = useCallback(async (anchorNode: any) => {
-    if (!anchorNode || !inputRef.current) return
+  const update = useCallback(async () => {
+    if (!inputRef.current || !popoverRef.current) return
     const styles = await computeStyles(
       {
-        anchor: anchorNode,
+        anchor: anchorRef.current || inputRef.current,
         input: inputRef.current,
         popover: popoverRef.current,
       },
       options.current,
     )
-    setPopoverStyles(styles)
+    if (styles) setPopoverStyles(styles)
   }, [])
 
   const handleSetInput = useCallback((node: any) => {
@@ -70,16 +74,19 @@ export function useSift({
     (node: any) => {
       popoverRef.current = node
       setPopover(node)
-      update(anchorRef.current)
+      if (node) {
+        update()
+      } else {
+        setPopoverStyles(DEFAULT_POPOVER_STYLES)
+      }
     },
     [update],
   )
 
   const handleSetAnchor = useCallback(
     (node: any) => {
-      if (!node || node === anchorRef.current) return
       anchorRef.current = node
-      update(node)
+      if (node) update()
     },
     [update],
   )
@@ -99,7 +106,7 @@ export function useSift({
     },
     popoverStyles,
     updatePosition() {
-      update(anchorRef.current)
+      update()
     },
     targetProps: {
       ref: handleSetInput,