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

package/dist/{chunk-GBWS62LR.js → chunk-4DTUUM5V.js}

@@ -39,6 +39,7 @@ import {
   useImageEdgeColor,
   useIsTruncated,
   useIsomorphicLayoutEffect,
+  useKeyboardCollisionPadding,
   useLgUp,
   useLocalStorage,
   useMarqueeEngine,
@@ -51,7 +52,7 @@ import {
   useResetOnPageHidden,
   useSuppressCloneFocus,
   useToast
-} from "./chunk-GS4HJA2G.js";
+} from "./chunk-4A736Z6S.js";
 import {
   init_next_navigation,
   usePathname,
@@ -17438,6 +17439,7 @@ function AutocompleteInner(props, ref) {
   };
   const [isOpen, setIsOpen] = useState34(false);
   const [highlightedIndex, setHighlightedIndex] = useState34(-1);
+  const keyboardPadding = useKeyboardCollisionPadding();
   const containerRef = useRef24(null);
   const hiddenTagsPopupRef = useRef24(null);
   const isInvalid = invalid || !!error;
@@ -17744,12 +17746,14 @@ function AutocompleteInner(props, ref) {
         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",
+        collisionPadding: { bottom: keyboardPadding },
         onOpenAutoFocus: (e) => {
           e.preventDefault();
           autoLimitTags.inputRef.current?.focus();
@@ -17759,8 +17763,8 @@ function AutocompleteInner(props, ref) {
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsxs84(ScrollAreaPrimitive.Root, { className: "overflow-hidden", children: [
-          /* @__PURE__ */ jsx110(ScrollAreaPrimitive.Viewport, { className: "max-h-[240px] w-full [&>div]:!block", children: /* @__PURE__ */ jsx110("div", { role: "listbox", children: loading ? /* @__PURE__ */ jsx110("div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: loadingText }) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ jsxs84("div", { className: "flex items-center h-11 md:h-12 px-[var(--spacing-system-mf)] text-h5 text-ods-error min-w-0", children: [
+        children: /* @__PURE__ */ jsxs84(ScrollAreaPrimitive.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx110(ScrollAreaPrimitive.Viewport, { className: "min-h-0 max-h-[240px] w-full [&>div]:!block", children: /* @__PURE__ */ jsx110("div", { role: "listbox", children: loading ? /* @__PURE__ */ jsx110("div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: loadingText }) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ jsxs84("div", { className: "flex items-center h-11 md:h-12 px-[var(--spacing-system-mf)] text-h5 text-ods-error min-w-0", children: [
             "Maximum ",
             maxCreateLength,
             " characters"
@@ -19648,6 +19652,7 @@ function SearchableSelect({
 }) {
   const [isOpen, setIsOpen] = React54.useState(false);
   const [search, setSearch] = React54.useState("");
+  const keyboardPadding = useKeyboardCollisionPadding();
   React54.useEffect(() => {
     if (!isOpen) setSearch("");
   }, [isOpen]);
@@ -19699,8 +19704,10 @@ function SearchableSelect({
       {
         align,
         sideOffset: 6,
+        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",
@@ -19708,7 +19715,7 @@ function SearchableSelect({
           contentClassName
         ),
         children: [
-          /* @__PURE__ */ jsx124("div", { className: "border-b border-ods-border", children: /* @__PURE__ */ jsx124(
+          /* @__PURE__ */ jsx124("div", { className: "shrink-0 border-b border-ods-border", children: /* @__PURE__ */ jsx124(
             Input,
             {
               autoFocus: true,
@@ -19719,7 +19726,7 @@ function SearchableSelect({
               className: "rounded-none border-0"
             }
           ) }),
-          /* @__PURE__ */ jsx124("div", { className: "max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]", role: "listbox", children: isLoading ? /* @__PURE__ */ jsx124("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary", children: loadingText }) : filtered.length === 0 ? /* @__PURE__ */ jsx124("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary", children: emptyText }) : filtered.map((opt) => {
+          /* @__PURE__ */ jsx124("div", { className: "min-h-0 max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]", role: "listbox", children: isLoading ? /* @__PURE__ */ jsx124("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary", children: loadingText }) : filtered.length === 0 ? /* @__PURE__ */ jsx124("div", { className: "px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary", children: emptyText }) : filtered.map((opt) => {
             const isSelected = value === opt.value;
             return /* @__PURE__ */ jsx124(
               "button",
@@ -20546,6 +20553,7 @@ function TagSelectDropdown({
 }) {
   const [isOpen, setIsOpen] = React63.useState(false);
   const [search, setSearch] = React63.useState("");
+  const keyboardPadding = useKeyboardCollisionPadding();
   React63.useEffect(() => {
     if (!isOpen) setSearch("");
   }, [isOpen]);
@@ -20589,15 +20597,17 @@ function TagSelectDropdown({
       {
         align,
         sideOffset: 6,
+        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"
         ),
         children: [
-          /* @__PURE__ */ jsx135("div", { className: "border-b border-ods-border", children: /* @__PURE__ */ jsx135(
+          /* @__PURE__ */ jsx135("div", { className: "shrink-0 border-b border-ods-border", children: /* @__PURE__ */ jsx135(
             Input,
             {
               autoFocus: true,
@@ -20614,7 +20624,7 @@ function TagSelectDropdown({
               className: "rounded-none border-0"
             }
           ) }),
-          /* @__PURE__ */ jsxs105("div", { className: "max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]", role: "listbox", children: [
+          /* @__PURE__ */ jsxs105("div", { className: "min-h-0 max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]", role: "listbox", children: [
             ordered.map((opt) => {
               const isSelected = selectedIds.includes(opt.id);
               return /* @__PURE__ */ jsxs105(
@@ -20855,6 +20865,7 @@ function TagsManager({
 }) {
   const [open, setOpen] = React65.useState(false);
   const [search, setSearch] = React65.useState("");
+  const keyboardPadding = useKeyboardCollisionPadding();
   const [editingId, setEditingId] = React65.useState(null);
   const [editingName, setEditingName] = React65.useState("");
   const editInputRef = React65.useRef(null);
@@ -21005,6 +21016,7 @@ 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",
@@ -21012,6 +21024,7 @@ function TagsManager({
         ),
         sideOffset: 4,
         align: "start",
+        collisionPadding: { bottom: keyboardPadding },
         onOpenAutoFocus: (e) => {
           e.preventDefault();
           inputRef.current?.focus();
@@ -21021,8 +21034,8 @@ function TagsManager({
             e.preventDefault();
           }
         },
-        children: /* @__PURE__ */ jsxs107(ScrollAreaPrimitive2.Root, { className: "overflow-hidden", children: [
-          /* @__PURE__ */ jsx138(ScrollAreaPrimitive2.Viewport, { className: "max-h-60 w-full", children: /* @__PURE__ */ jsxs107("div", { role: "listbox", children: [
+        children: /* @__PURE__ */ jsxs107(ScrollAreaPrimitive2.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx138(ScrollAreaPrimitive2.Viewport, { className: "min-h-0 max-h-60 w-full", children: /* @__PURE__ */ jsxs107("div", { role: "listbox", children: [
             filtered.map((tag) => {
               const isSelected = selectedIds.includes(tag.id);
               const isEditing = editingId === tag.id;
@@ -46008,6 +46021,7 @@ function SearchInput({
   const debouncedValue = useDebounce(currentValue, debounceMs);
   const [isOpen, setIsOpen] = React132.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React132.useState(-1);
+  const keyboardPadding = useKeyboardCollisionPadding();
   const containerRef = React132.useRef(null);
   const currentPlaceholder = filterChips.length > 0 ? "Add filter..." : placeholder;
   const {
@@ -46267,6 +46281,7 @@ 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",
@@ -46275,6 +46290,7 @@ function SearchInput({
           ),
           sideOffset: 4,
           align: "start",
+          collisionPadding: { bottom: keyboardPadding },
           onOpenAutoFocus: (e) => {
             e.preventDefault();
             inputRef.current?.focus();
@@ -46284,8 +46300,8 @@ function SearchInput({
               e.preventDefault();
             }
           },
-          children: /* @__PURE__ */ jsxs281(ScrollAreaPrimitive3.Root, { className: "overflow-hidden", children: [
-            /* @__PURE__ */ jsx357(ScrollAreaPrimitive3.Viewport, { className: "max-h-[320px] w-full", children: /* @__PURE__ */ jsx357("div", { role: "listbox", children: renderDropdownContent() }) }),
+          children: /* @__PURE__ */ jsxs281(ScrollAreaPrimitive3.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsx357(ScrollAreaPrimitive3.Viewport, { className: "min-h-0 max-h-[320px] w-full", children: /* @__PURE__ */ jsx357("div", { role: "listbox", children: renderDropdownContent() }) }),
             /* @__PURE__ */ jsx357(ScrollAreaPrimitive3.Scrollbar, { className: "hidden", orientation: "vertical", children: /* @__PURE__ */ jsx357(ScrollAreaPrimitive3.Thumb, {}) })
           ] })
         }
@@ -47478,19 +47494,23 @@ import * as PopoverPrimitive7 from "@radix-ui/react-popover";
 import { jsx as jsx363 } from "react/jsx-runtime";
 var Popover2 = PopoverPrimitive7.Root;
 var PopoverTrigger = PopoverPrimitive7.Trigger;
-var PopoverContent = React137.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx363(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx363(
-  PopoverPrimitive7.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
+var PopoverContent = React137.forwardRef(({ className, align = "center", sideOffset = 4, collisionPadding, ...props }, ref) => {
+  const keyboardPadding = useKeyboardCollisionPadding();
+  return /* @__PURE__ */ jsx363(PopoverPrimitive7.Portal, { children: /* @__PURE__ */ jsx363(
+    PopoverPrimitive7.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      collisionPadding: collisionPadding ?? { bottom: keyboardPadding },
+      className: cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
 PopoverContent.displayName = PopoverPrimitive7.Content.displayName;
 
 // src/components/ui/color-preset-select.tsx
@@ -62088,4 +62108,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-GBWS62LR.js.map
+//# sourceMappingURL=chunk-4DTUUM5V.js.map