@flamingo-stack/openframe-frontend-core 0.0.535-1762.4618.1 → 0.0.535

package/src/components/ui/autocomplete.tsx

@@ -27,6 +27,7 @@ import { Loader2 } from "lucide-react"
 import { cn } from "../../utils/cn"
 import { TruncateText } from "./truncate-text"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding"
 import { FieldWrapper } from "./field-wrapper"
 import { HiddenTagsPopup } from "./hidden-tags-popup"
 import { Tag } from "./tag"
@@ -190,6 +191,7 @@ function AutocompleteInner<T = string>(
 
   const [isOpen, setIsOpen] = useState(false)
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const keyboardPadding = useKeyboardCollisionPadding()
   const containerRef = useRef<HTMLDivElement>(null)
   const hiddenTagsPopupRef = useRef<HTMLDivElement>(null)
 
@@ -561,12 +563,17 @@ function AutocompleteInner<T = string>(
         className={cn(
           "z-50 w-[var(--radix-popover-trigger-width)] mt-1",
           "bg-ods-card border border-ods-border rounded-[4px]",
+          "flex flex-col overflow-hidden max-h-[var(--radix-popper-available-height)]",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           dropdownClassName
         )}
         sideOffset={4}
         align="start"
+        // The anchor is the text field that raises the software keyboard, so
+        // this list is always positioned with the keyboard up — see
+        // useKeyboardCollisionPadding.
+        collisionPadding={{ bottom: keyboardPadding }}
         onOpenAutoFocus={(e) => {
           e.preventDefault()
           autoLimitTags.inputRef.current?.focus()
@@ -578,8 +585,8 @@ function AutocompleteInner<T = string>(
           }
         }}
       >
-        <ScrollAreaPrimitive.Root className="overflow-hidden">
-          <ScrollAreaPrimitive.Viewport className="max-h-[240px] w-full [&>div]:!block">
+        <ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+          <ScrollAreaPrimitive.Viewport className="min-h-0 max-h-[240px] w-full [&>div]:!block">
             <div role="listbox">
               {loading ? (
                 <div className="px-3 py-2 text-ods-text-secondary text-h6">

package/src/components/ui/search-input.tsx

@@ -6,6 +6,7 @@ import * as React from "react"
 import { cn } from "../../utils/cn"
 import { useDebounce } from "../../hooks/ui/use-debounce"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding"
 import { SearchIcon } from "../icons-v2-generated"
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon"
 import { Tag } from "./tag"
@@ -168,6 +169,7 @@ export function SearchInput({
   // ---- Popover state ----
   const [isOpen, setIsOpen] = React.useState(false)
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1)
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   const containerRef = React.useRef<HTMLDivElement>(null)
 
@@ -499,6 +501,7 @@ export function SearchInput({
           className={cn(
             "z-50 w-[var(--radix-popover-trigger-width)] mt-1",
             "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden shadow-lg",
+            "flex flex-col max-h-[var(--radix-popper-available-height)]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -507,6 +510,10 @@ export function SearchInput({
           )}
           sideOffset={4}
           align="start"
+          // The anchor is the search field that raises the software keyboard,
+          // so these suggestions are always positioned with the keyboard up —
+          // see useKeyboardCollisionPadding.
+          collisionPadding={{ bottom: keyboardPadding }}
           onOpenAutoFocus={(e) => {
             e.preventDefault()
             inputRef.current?.focus()
@@ -517,8 +524,8 @@ export function SearchInput({
             }
           }}
         >
-          <ScrollAreaPrimitive.Root className="overflow-hidden">
-            <ScrollAreaPrimitive.Viewport className="max-h-[320px] w-full">
+          <ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+            <ScrollAreaPrimitive.Viewport className="min-h-0 max-h-[320px] w-full">
               <div role="listbox">
                 {renderDropdownContent()}
               </div>

package/src/components/ui/searchable-select.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { CheckIcon, SearchIcon } from '../icons-v2-generated'
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon'
 import { cn } from '../../utils/cn'
+import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding'
 import { Input } from './input'
 
 export interface SearchableSelectOption {
@@ -67,6 +68,7 @@ export function SearchableSelect({
 }: SearchableSelectProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   React.useEffect(() => {
     if (!isOpen) setSearch('')
@@ -119,8 +121,13 @@ export function SearchableSelect({
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}
+          // The search field below raises the software keyboard the moment this
+          // opens — see useKeyboardCollisionPadding for why neither the collision
+          // viewport nor the available height knows about it otherwise.
+          collisionPadding={{ bottom: keyboardPadding }}
           className={cn(
             'z-50 min-w-[var(--radix-popover-trigger-width)] bg-ods-card border border-ods-border rounded-md shadow-lg overflow-hidden',
+            'flex flex-col max-h-[var(--radix-popper-available-height)]',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
@@ -128,7 +135,7 @@ export function SearchableSelect({
             contentClassName,
           )}
         >
-          <div className="border-b border-ods-border">
+          <div className="shrink-0 border-b border-ods-border">
             <Input
               autoFocus
               value={search}
@@ -138,7 +145,7 @@ export function SearchableSelect({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div className="min-h-0 max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
             {isLoading ? (
               <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
                 {loadingText}

package/src/components/ui/tag-select-dropdown.tsx

@@ -3,6 +3,7 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
 import { cn } from '../../utils/cn'
+import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding'
 import { CheckIcon, PlusIcon, SearchIcon, TrashIcon } from '../icons-v2-generated'
 import { Button } from './button'
 import { Input } from './input'
@@ -59,6 +60,7 @@ export function TagSelectDropdown({
 }: TagSelectDropdownProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   React.useEffect(() => {
     if (!isOpen) setSearch('')
@@ -110,15 +112,19 @@ export function TagSelectDropdown({
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}
+          // The search field below raises the software keyboard the moment this
+          // opens — see useKeyboardCollisionPadding.
+          collisionPadding={{ bottom: keyboardPadding }}
           className={cn(
             'z-50 w-72 bg-ods-card border border-ods-border rounded-[6px] shadow-lg overflow-hidden',
+            'flex flex-col max-h-[var(--radix-popper-available-height)]',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
             'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
           )}
         >
-          <div className="border-b border-ods-border">
+          <div className="shrink-0 border-b border-ods-border">
             <Input
               autoFocus
               value={search}
@@ -134,7 +140,7 @@ export function TagSelectDropdown({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div className="min-h-0 max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
             {ordered.map(opt => {
               const isSelected = selectedIds.includes(opt.id)
               return (

package/src/components/ui/tags-manager.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../utils/cn";
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding";
 import {
 	CheckIcon,
 	PencilIcon,
@@ -70,6 +71,7 @@ export function TagsManager({
 }: TagsManagerProps) {
 	const [open, setOpen] = React.useState(false);
 	const [search, setSearch] = React.useState("");
+	const keyboardPadding = useKeyboardCollisionPadding();
 	const [editingId, setEditingId] = React.useState<string | null>(null);
 	const [editingName, setEditingName] = React.useState("");
 	const editInputRef = React.useRef<HTMLInputElement>(null);
@@ -242,6 +244,7 @@ export function TagsManager({
 						className={cn(
 							"z-50 w-[var(--radix-popover-trigger-width)] mt-1",
 							"bg-ods-card border border-ods-border rounded",
+							"flex flex-col overflow-hidden max-h-[var(--radix-popper-available-height)]",
 							"data-[state=open]:animate-in data-[state=closed]:animate-out",
 							"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 							"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -249,6 +252,10 @@ export function TagsManager({
 						)}
 						sideOffset={4}
 						align="start"
+						// The anchor is the tag field that raises the software keyboard, so
+						// this list is always positioned with the keyboard up — see
+						// useKeyboardCollisionPadding.
+						collisionPadding={{ bottom: keyboardPadding }}
 						onOpenAutoFocus={(e) => {
 							e.preventDefault();
 							inputRef.current?.focus();
@@ -259,8 +266,8 @@ export function TagsManager({
 							}
 						}}
 					>
-						<ScrollAreaPrimitive.Root className="overflow-hidden">
-							<ScrollAreaPrimitive.Viewport className="max-h-60 w-full">
+						<ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+							<ScrollAreaPrimitive.Viewport className="min-h-0 max-h-60 w-full">
 								<div role="listbox">
 									{filtered.map((tag) => {
 										const isSelected = selectedIds.includes(tag.id);

package/src/hooks/ui/index.ts

@@ -8,6 +8,7 @@ export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'
 export * from './use-is-truncated'
 export * from './use-isomorphic-layout-effect'
+export * from './use-keyboard-collision-padding'
 export * from './use-local-storage'
 export * from './use-marquee-engine'
 export * from './use-media-query'

package/src/hooks/ui/use-keyboard-collision-padding.ts

@@ -0,0 +1,101 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+/**
+ * Extra `collisionPadding.bottom` (px) a Radix popper needs to clear the
+ * software keyboard. 0 on desktop and anywhere the keyboard is down.
+ *
+ * Radix positions every popper with floating-ui at `strategy: 'fixed'`, and
+ * floating-ui takes its collision viewport from `window.visualViewport`.
+ * Neither mobile shell shrinks the box a keyboard opens into: iOS runs
+ * Capacitor's Keyboard plugin at `resize: 'none'`, which leaves the WKWebView
+ * frame alone, and Android's window is edge-to-edge, where the IME is only a
+ * WindowInsets type. So `flip`/`shift`/`size` all believe the screen still
+ * reaches the bottom, and a dropdown whose own search field just raised the
+ * keyboard is placed straight behind it — worst inside modals, which sit near
+ * the bottom of the screen by design.
+ *
+ * The shell publishes the keyboard height as `--of-keyboard-inset` on <html>
+ * (openframe-frontend's `keyboard-inset.ts`; unset everywhere else, hence the
+ * 0 default). Handing the part floating-ui does not already know about back as
+ * collision padding is what makes the top of the keyboard the bottom edge of
+ * the screen.
+ *
+ * ```tsx
+ * const keyboardPadding = useKeyboardCollisionPadding()
+ * <PopoverPrimitive.Content collisionPadding={{ bottom: keyboardPadding }} />
+ * ```
+ *
+ * Pair it with `max-h-[var(--radix-popper-available-height)]` on the content:
+ * padding alone flips a dropdown above its trigger, but a list taller than what
+ * is left above the keyboard would then spill back over it.
+ */
+
+const KEYBOARD_INSET_VAR = '--of-keyboard-inset'
+
+function measure(): number {
+  if (typeof document === 'undefined') return 0
+  const inset = Number.parseFloat(
+    getComputedStyle(document.documentElement).getPropertyValue(KEYBOARD_INSET_VAR),
+  )
+  // Also catches the NaN of an unset variable.
+  if (!(inset > 0)) return 0
+  // How far floating-ui's own viewport bottom sits below the top of the
+  // keyboard. iOS reports the keyboard on the visual viewport and Android does
+  // not; measuring the difference rather than branching on the platform keeps
+  // both correct and can never reserve the same keyboard twice.
+  const layoutHeight = document.documentElement.clientHeight
+  const viewport = window.visualViewport
+  const viewportBottom = viewport ? viewport.offsetTop + viewport.height : layoutHeight
+  return Math.max(0, Math.round(viewportBottom - (layoutHeight - inset)))
+}
+
+// One document-wide subscription for every popper on the page: the keyboard is
+// a single global, and each open dropdown re-reading it would mean another
+// MutationObserver plus a forced style resolve per keystroke-driven re-render.
+const listeners = new Set<() => void>()
+let padding = 0
+let teardown: (() => void) | null = null
+
+function sync(): void {
+  const next = measure()
+  if (next === padding) return
+  padding = next
+  for (const notify of listeners) notify()
+}
+
+function subscribe(onStoreChange: () => void): () => void {
+  listeners.add(onStoreChange)
+  if (listeners.size === 1) {
+    padding = measure()
+    // Two independent signals. The inset lands on <html>'s inline style, so the
+    // attribute is the only notification for it; the visual viewport moves on
+    // its own schedule (iOS reports the keyboard there, and a pinch-zoom shifts
+    // it with no keyboard involved at all) and changes what is left to reserve.
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] })
+    const viewport = window.visualViewport
+    viewport?.addEventListener('resize', sync)
+    viewport?.addEventListener('scroll', sync)
+    teardown = () => {
+      observer.disconnect()
+      viewport?.removeEventListener('resize', sync)
+      viewport?.removeEventListener('scroll', sync)
+    }
+  }
+  return () => {
+    listeners.delete(onStoreChange)
+    if (listeners.size > 0) return
+    teardown?.()
+    teardown = null
+  }
+}
+
+export function useKeyboardCollisionPadding(): number {
+  return useSyncExternalStore(
+    subscribe,
+    () => padding,
+    () => 0,
+  )
+}