@bsky.app/sift 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @bsky.app/sift
 
+## 0.2.8
+
+### Patch Changes
+
+- [`ff2c77b`](https://github.com/bluesky-social/toolbox/commit/ff2c77b752cc3e312f06f8d440cb3a46d7483715) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Support `insets` on `useSift`
+
+## 0.2.7
+
+### Patch Changes
+
+- [`8f1f49c`](https://github.com/bluesky-social/toolbox/commit/8f1f49cdff0b5060ed0d7cafb56b77eb994bc758) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Position using `bottom` for top placements
+
+- [`f9f7c41`](https://github.com/bluesky-social/toolbox/commit/f9f7c41b38ad8e33611effdedefc53271b666db4) Thanks [@estrattonbailey](https://github.com/estrattonbailey)! - Update tapper/sift docs
+
 ## 0.2.6
 
 ### Patch Changes

package/README.md

@@ -1,8 +1,7 @@
 # @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.
+A headless autocomplete UI library for React Native (including web). Handles
+popover positioning, keyboard navigation, and accessibility.
 
 ## Installation
 
@@ -10,14 +9,14 @@ navigation on web.
 pnpm add @bsky.app/sift
 ```
 
-Peer dependencies: `react`, `react-native`, `expo`, `@floating-ui/react-native`.
+Peer dependencies: `react`, `react-native`, `expo`.
 
 ## Basic example
 
 ```tsx
 import {useState} from 'react'
 import {View, Text, TextInput} from 'react-native'
-import {useSift, Sift} from '@bsky.app/sift'
+import {useSift, Sift, SiftItem} from '@bsky.app/sift'
 
 const items = [
   {key: '1', label: 'Alice'},
@@ -48,10 +47,10 @@ function Autocomplete() {
           data={filtered}
           onSelect={item => setQuery(item.label)}
           onDismiss={() => setQuery('')}
-          render={({active, item}) => (
-            <View style={active && {backgroundColor: '#eee'}}>
+          render={({active, props, item}) => (
+            <SiftItem {...props} style={active && {backgroundColor: '#eee'}}>
               <Text>{item.label}</Text>
-            </View>
+            </SiftItem>
           )}
         />
       )}
@@ -66,8 +65,7 @@ Items must have a `key: string` property, used internally for list rendering.
 
 ### `offset`
 
-Gap in pixels between the reference element and the floating popover. Defaults
-to `0`.
+Gap in pixels between the anchor element and the popover. Defaults to `0`.
 
 ```tsx
 const sift = useSift({offset: 8})
@@ -75,54 +73,91 @@ 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'`.
+Controls where the popover appears relative to the anchor. Accepts `'top'`,
+`'top-start'`, `'top-end'`, `'bottom'`, `'bottom-start'`, or `'bottom-end'`.
+Defaults to `'bottom'`.
 
 ```tsx
 const sift = useSift({placement: 'top'})
 ```
 
+### `dynamicWidth`
+
+When `true` (default), the popover width follows the anchor. When `false`, the
+popover snaps to the input's left edge and is constrained to the input's width
+via `maxWidth`.
+
+```tsx
+const sift = useSift({dynamicWidth: false})
+```
+
+## `useSift` return value
+
+| Property           | Description                                                  |
+| ------------------ | ------------------------------------------------------------ |
+| `targetProps`      | Spread onto the input (`ref`, ARIA attributes)               |
+| `refs.setAnchor`   | Ref callback for the anchor element (optional)               |
+| `refs.setPopover`  | Ref callback for the popover (set automatically by `<Sift>`) |
+| `popoverStyles`    | Computed position styles applied to the popover              |
+| `updatePosition`   | Re-measure and update popover position                       |
+| `elements.input`   | The input element (for keyboard handling)                    |
+| `elements.popover` | The popover element                                          |
+| `isActive()`       | Returns `true` when the popover is mounted                   |
+
+If `refs.setAnchor` is not called, the input element is used as the anchor.
+
 ## `<Sift>` props
 
-### `onSelect`
+### `render`
 
-Called when the user selects an item, either by pressing it or by pressing
-Enter/Tab while it's highlighted via keyboard.
+Render function for each item. Receives `active` (keyboard-highlighted),
+`props` (accessibility attributes + `onPress`), and `item`.
+
+Use `<SiftItem>` to wrap your item content — it's a `Pressable` that applies
+the accessibility props correctly.
 
 ```tsx
 <Sift
-  onSelect={item => {
-    setQuery(item.label)
-  }}
+  render={({active, props, item}) => (
+    <SiftItem {...props} style={active && {backgroundColor: '#eee'}}>
+      <Text>{item.label}</Text>
+    </SiftItem>
+  )}
 />
 ```
 
-### `onDismiss`
+### `onSelect`
 
-Called when the user presses the Escape key (web only). Use this to close the
-popover or clear the query.
+Called when the user selects an item, either by pressing it or by pressing
+Enter/Tab while it's highlighted via keyboard.
 
-```tsx
-<Sift onDismiss={() => setQuery('')} />
-```
+### `onDismiss`
+
+Called when the user presses the Escape key (web only).
 
 ### `inverted`
 
 Renders the list bottom-to-top and reverses keyboard navigation to match.
 Useful when the popover opens above the input.
 
+### `style`
+
+Style applied to the popover wrapper `View`.
+
+## `<SiftItem>`
+
+A `Pressable` wrapper for autocomplete items. Accepts all `Pressable` props
+plus a `style` that can be a function receiving `{pressed, hovered}` state.
+
 ```tsx
-<Sift
-  sift={sift}
-  data={filtered}
-  inverted
-  render={({active, item}) => (
-    <View style={active && {backgroundColor: '#eee'}}>
-      <Text>{item.label}</Text>
-    </View>
-  )}
-/>
+<SiftItem
+  {...props}
+  style={s => [
+    {padding: 8},
+    (active || s.hovered) && {backgroundColor: '#eee'},
+  ]}>
+  <Text>{item.label}</Text>
+</SiftItem>
 ```
 
 ## Keyboard navigation (web)

package/build/computeStyles.d.ts

@@ -8,5 +8,9 @@ export declare function computeStyles({ anchor, input, popover, }: {
     offset: number;
     placement: Placement;
     dynamicWidth?: boolean;
+    insets?: {
+        top: number;
+        bottom: number;
+    };
 }): 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,GAAG,IAAI,CAAC,CA6C3B"}
+{"version":3,"file":"computeStyles.d.ts","sourceRoot":"","sources":["../src/computeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAC,MAAM,cAAc,CAAA;AACvD,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;IACtB,MAAM,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;CACvC,GACA,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAwD3B"}

package/build/computeStyles.js

@@ -1,3 +1,4 @@
+import { Dimensions } from 'react-native';
 function measureInWindow(node) {
     return new Promise(resolve => {
         node.measureInWindow((x, y, width, height) => {
@@ -16,14 +17,22 @@ export async function computeStyles({ anchor, input, popover, }, options) {
     if (popoverRect && !popoverRect.width && !popoverRect.height)
         return null;
     const popoverWidth = popoverRect?.width ?? 0;
-    const popoverHeight = popoverRect?.height ?? 0;
     const [side, align] = options.placement.split('-');
-    let top;
+    const insetTop = options.insets?.top ?? 0;
+    const insetBottom = options.insets?.bottom ?? 0;
+    let top = 'auto';
+    let bottom = 'auto';
+    let maxHeight;
     if (side === 'top') {
-        top = anchorRect.y - options.offset - popoverHeight;
+        bottom = Dimensions.get('window').height - anchorRect.y + options.offset;
+        maxHeight = anchorRect.y - options.offset - insetTop;
     }
     else {
         top = anchorRect.y + anchorRect.height + options.offset;
+        maxHeight =
+            Dimensions.get('window').height -
+                insetBottom -
+                (anchorRect.y + anchorRect.height + options.offset);
     }
     let left;
     if (align === 'start') {
@@ -37,14 +46,16 @@ export async function computeStyles({ anchor, input, popover, }, options) {
     }
     let maxWidth;
     if (options.dynamicWidth === false) {
-        left = inputRect.x;
-        maxWidth = inputRect.width;
+        left = anchorRect.x;
+        maxWidth = anchorRect.width;
     }
     return {
         position: 'absolute',
         top,
+        bottom,
         left,
         maxWidth,
+        maxHeight,
     };
 }
 //# sourceMappingURL=computeStyles.js.map

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;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"]}
+{"version":3,"file":"computeStyles.js","sourceRoot":"","sources":["../src/computeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import {Dimensions, 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    insets?: {top: number; bottom: number}\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 [side, align] = options.placement.split('-') as [\n    string,\n    string | undefined,\n  ]\n\n  const insetTop = options.insets?.top ?? 0\n  const insetBottom = options.insets?.bottom ?? 0\n\n  let top: number | 'auto' = 'auto'\n  let bottom: number | 'auto' = 'auto'\n  let maxHeight: number | undefined\n  if (side === 'top') {\n    bottom = Dimensions.get('window').height - anchorRect.y + options.offset\n    maxHeight = anchorRect.y - options.offset - insetTop\n  } else {\n    top = anchorRect.y + anchorRect.height + options.offset\n    maxHeight =\n      Dimensions.get('window').height -\n      insetBottom -\n      (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 = anchorRect.x\n    maxWidth = anchorRect.width\n  }\n\n  return {\n    position: 'absolute',\n    top,\n    bottom,\n    left,\n    maxWidth,\n    maxHeight,\n  }\n}\n"]}

package/build/computeStyles.web.d.ts

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

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

@@ -1 +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"}
+{"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;IACtB,MAAM,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;CACvC,GACA,SAAS,GAAG,IAAI,CAwDlB"}

package/build/computeStyles.web.js

@@ -2,15 +2,27 @@ export function computeStyles({ anchor, input, popover, }, options) {
     const anchorRect = anchor.getBoundingClientRect();
     const inputRect = input.getBoundingClientRect();
     const popoverRect = popover?.getBoundingClientRect();
+    // 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('-');
-    let top;
+    const insetTop = options.insets?.top ?? 0;
+    const insetBottom = options.insets?.bottom ?? 0;
+    let top = 'auto';
+    let bottom = 'auto';
+    let maxHeight;
     if (side === 'top') {
-        top = anchorRect.top - options.offset - popoverHeight + window.scrollY;
+        bottom = window.innerHeight - anchorRect.top + options.offset;
+        maxHeight = anchorRect.top - options.offset - insetTop;
     }
     else {
         top = anchorRect.bottom + options.offset + window.scrollY;
+        maxHeight =
+            window.innerHeight - insetBottom - anchorRect.bottom - options.offset;
     }
     let left;
     if (align === 'start') {
@@ -25,15 +37,17 @@ export function computeStyles({ anchor, input, popover, }, options) {
     left += window.scrollX;
     let maxWidth;
     if (options.dynamicWidth === false) {
-        left = inputRect.left + window.scrollX;
-        maxWidth = inputRect.width;
+        left = anchorRect.left + window.scrollX;
+        maxWidth = anchorRect.width;
     }
     return {
         // @ts-ignore
         position: 'fixed',
         top,
+        bottom,
         left,
         maxWidth,
+        maxHeight,
     };
 }
 //# sourceMappingURL=computeStyles.web.js.map

package/build/computeStyles.web.js.map

@@ -1 +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"]}
+{"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,OAKC;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;IAEpD,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,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAGhD,CAAA;IAED,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAA;IACzC,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAA;IAE/C,IAAI,GAAG,GAAoB,MAAM,CAAA;IACjC,IAAI,MAAM,GAAoB,MAAM,CAAA;IACpC,IAAI,SAA6B,CAAA;IACjC,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,CAAA;QAC7D,SAAS,GAAG,UAAU,CAAC,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAA;IACxD,CAAC;SAAM,CAAC;QACN,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC,OAAO,CAAA;QACzD,SAAS;YACP,MAAM,CAAC,WAAW,GAAG,WAAW,GAAG,UAAU,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACzE,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,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAA;QACvC,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAA;IAC7B,CAAC;IAED,OAAO;QACL,aAAa;QACb,QAAQ,EAAE,OAAO;QACjB,GAAG;QACH,MAAM;QACN,IAAI;QACJ,QAAQ;QACR,SAAS;KACV,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    insets?: {top: number; bottom: number}\n  },\n): ViewStyle | null {\n  const anchorRect = anchor.getBoundingClientRect()\n  const inputRect = input.getBoundingClientRect()\n  const popoverRect = popover?.getBoundingClientRect()\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 [side, align] = options.placement.split('-') as [\n    string,\n    string | undefined,\n  ]\n\n  const insetTop = options.insets?.top ?? 0\n  const insetBottom = options.insets?.bottom ?? 0\n\n  let top: number | 'auto' = 'auto'\n  let bottom: number | 'auto' = 'auto'\n  let maxHeight: number | undefined\n  if (side === 'top') {\n    bottom = window.innerHeight - anchorRect.top + options.offset\n    maxHeight = anchorRect.top - options.offset - insetTop\n  } else {\n    top = anchorRect.bottom + options.offset + window.scrollY\n    maxHeight =\n      window.innerHeight - insetBottom - anchorRect.bottom - options.offset\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 = anchorRect.left + window.scrollX\n    maxWidth = anchorRect.width\n  }\n\n  return {\n    // @ts-ignore\n    position: 'fixed',\n    top,\n    bottom,\n    left,\n    maxWidth,\n    maxHeight,\n  }\n}\n"]}

package/build/useSift.d.ts

@@ -1,10 +1,14 @@
 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, dynamicWidth, }?: {
+export declare function useSift({ offset: offsetValue, placement, dynamicWidth, insets, }?: {
     offset?: number;
     placement?: Placement;
     dynamicWidth?: boolean;
+    insets?: {
+        top: number;
+        bottom: number;
+    };
 }): {
     id: string;
     refs: {

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;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;;;;;;EAiD9C"}
+{"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,EACpB,MAAM,GACP,GAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAA;CAClC;;;2BAmDK,GAAG;0BAaH,GAAG;;;;;;;;;;oBAnB8B,GAAG;;;;;;EAiD9C"}

package/build/useSift.js

@@ -1,7 +1,7 @@
 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, } = {}) {
+export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamicWidth = false, insets, } = {}) {
     const id = useId();
     /*
      * These are reactive values and need to remain in state
@@ -20,11 +20,13 @@ export function useSift({ offset: offsetValue = 0, placement = 'bottom', dynamic
         offset: offsetValue,
         placement,
         dynamicWidth,
+        insets,
     });
     options.current = {
         offset: offsetValue,
         placement,
         dynamicWidth,
+        insets,
     };
     const update = useCallback(async () => {
         if (!inputRef.current || !popoverRef.current)

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\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: update,\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  insets,\n}: {\n  offset?: number\n  placement?: Placement\n  dynamicWidth?: boolean\n  insets?: {top: number; bottom: number}\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    insets,\n  })\n  options.current = {\n    offset: offsetValue,\n    placement,\n    dynamicWidth,\n    insets,\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: update,\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.2.6",
+  "version": "0.2.8",
   "license": "MIT",
   "description": "A little React Native library for building autocompletes.",
   "repository": "https://github.com/bluesky-social/toolbox",

package/src/computeStyles.ts

@@ -1,4 +1,4 @@
-import {type ViewStyle} from 'react-native'
+import {Dimensions, type ViewStyle} from 'react-native'
 import {type Placement} from './useSift'
 
 function measureInWindow(
@@ -27,6 +27,7 @@ export async function computeStyles(
     offset: number
     placement: Placement
     dynamicWidth?: boolean
+    insets?: {top: number; bottom: number}
   },
 ): Promise<ViewStyle | null> {
   const anchorRect = await measureInWindow(anchor)
@@ -39,17 +40,26 @@ export async function computeStyles(
   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 [
     string,
     string | undefined,
   ]
 
-  let top: number
+  const insetTop = options.insets?.top ?? 0
+  const insetBottom = options.insets?.bottom ?? 0
+
+  let top: number | 'auto' = 'auto'
+  let bottom: number | 'auto' = 'auto'
+  let maxHeight: number | undefined
   if (side === 'top') {
-    top = anchorRect.y - options.offset - popoverHeight
+    bottom = Dimensions.get('window').height - anchorRect.y + options.offset
+    maxHeight = anchorRect.y - options.offset - insetTop
   } else {
     top = anchorRect.y + anchorRect.height + options.offset
+    maxHeight =
+      Dimensions.get('window').height -
+      insetBottom -
+      (anchorRect.y + anchorRect.height + options.offset)
   }
 
   let left: number
@@ -63,14 +73,16 @@ export async function computeStyles(
 
   let maxWidth: number | undefined
   if (options.dynamicWidth === false) {
-    left = inputRect.x
-    maxWidth = inputRect.width
+    left = anchorRect.x
+    maxWidth = anchorRect.width
   }
 
   return {
     position: 'absolute',
     top,
+    bottom,
     left,
     maxWidth,
+    maxHeight,
   }
 }

package/src/computeStyles.web.ts

@@ -15,23 +15,37 @@ export function computeStyles(
     offset: number
     placement: Placement
     dynamicWidth?: boolean
+    insets?: {top: number; bottom: number}
   },
-): ViewStyle {
+): ViewStyle | null {
   const anchorRect = anchor.getBoundingClientRect()
   const inputRect = input.getBoundingClientRect()
   const popoverRect = popover?.getBoundingClientRect()
+
+  // 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 [
     string,
     string | undefined,
   ]
 
-  let top: number
+  const insetTop = options.insets?.top ?? 0
+  const insetBottom = options.insets?.bottom ?? 0
+
+  let top: number | 'auto' = 'auto'
+  let bottom: number | 'auto' = 'auto'
+  let maxHeight: number | undefined
   if (side === 'top') {
-    top = anchorRect.top - options.offset - popoverHeight + window.scrollY
+    bottom = window.innerHeight - anchorRect.top + options.offset
+    maxHeight = anchorRect.top - options.offset - insetTop
   } else {
     top = anchorRect.bottom + options.offset + window.scrollY
+    maxHeight =
+      window.innerHeight - insetBottom - anchorRect.bottom - options.offset
   }
 
   let left: number
@@ -46,15 +60,17 @@ export function computeStyles(
 
   let maxWidth: number | undefined
   if (options.dynamicWidth === false) {
-    left = inputRect.left + window.scrollX
-    maxWidth = inputRect.width
+    left = anchorRect.left + window.scrollX
+    maxWidth = anchorRect.width
   }
 
   return {
     // @ts-ignore
     position: 'fixed',
     top,
+    bottom,
     left,
     maxWidth,
+    maxHeight,
   }
 }

package/src/useSift.ts

@@ -18,10 +18,12 @@ export function useSift({
   offset: offsetValue = 0,
   placement = 'bottom',
   dynamicWidth = false,
+  insets,
 }: {
   offset?: number
   placement?: Placement
   dynamicWidth?: boolean
+  insets?: {top: number; bottom: number}
 } = {}) {
   const id = useId()
 
@@ -45,11 +47,13 @@ export function useSift({
     offset: offsetValue,
     placement,
     dynamicWidth,
+    insets,
   })
   options.current = {
     offset: offsetValue,
     placement,
     dynamicWidth,
+    insets,
   }
 
   const update = useCallback(async () => {