@flamingo-stack/openframe-frontend-core 0.0.755 → 0.0.756

package/src/components/context-menu.tsx

@@ -5,6 +5,7 @@ import { Check, ChevronRight, Circle } from 'lucide-react';
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from 'react';
 
 import { cn } from '../utils/cn';
+import { usePortalContainer } from './ui/portal-container';
 
 const ContextMenu = ContextMenuPrimitive.Root;
 
@@ -12,7 +13,10 @@ const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
+function ContextMenuPortal({ container, ...props }: ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Portal>) {
+  const active = usePortalContainer();
+  return <ContextMenuPrimitive.Portal container={container ?? active ?? undefined} {...props} />;
+}
 
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 
@@ -57,18 +61,21 @@ ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 const ContextMenuContent = forwardRef<
   ElementRef<typeof ContextMenuPrimitive.Content>,
   ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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}
-    />
-  </ContextMenuPrimitive.Portal>
-));
+>(({ className, ...props }, ref) => {
+  const container = usePortalContainer();
+  return (
+    <ContextMenuPrimitive.Portal container={container ?? undefined}>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+});
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = forwardRef<

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../navigation/app-layout-context';
 import { HeaderButton } from '../../navigation/header-button';
 import { OVERLAY_BACKDROP_CLASS } from '../../ui/drawer';
+import { usePortalContainer } from '../../ui/portal-container';
 import { useOptionalTimeTracker } from './time-tracker-context';
 import { TimeTrackerPanel } from './time-tracker-panel';
 import { useTrackerClock } from './use-tracker-clock';
@@ -39,6 +40,7 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
     accumulatedMs: ctx?.accumulatedMs,
   });
   const layoutContainer = useAppLayoutDrawerContainer();
+  const portalContainer = usePortalContainer();
   const coordination = useAppLayoutDrawerCoordination();
 
   const isOpen = ctx?.isOpen ?? false;
@@ -129,7 +131,7 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
           )}
         />
       </PopoverPrimitive.Portal>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
           align="end"
           sideOffset={8}

package/src/components/popover.tsx

@@ -5,6 +5,7 @@ import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'reac
 
 import { useKeyboardCollisionPadding } from '../hooks/ui/use-keyboard-collision-padding';
 import { cn } from '../utils/cn';
+import { usePortalContainer } from './ui/portal-container';
 
 const Popover = PopoverPrimitive.Root;
 
@@ -18,8 +19,9 @@ const PopoverContent = forwardRef<
   // box — is positioned against a collision viewport that does not know the
   // software keyboard exists. See useKeyboardCollisionPadding.
   const keyboardPadding = useKeyboardCollisionPadding();
+  const container = usePortalContainer();
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={container ?? undefined}>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}

package/src/components/ui/date-picker.tsx

@@ -9,6 +9,7 @@ import { cn } from '../../utils/cn';
 import { formatDateWithTimezone, VIEWER_TIMEZONE } from '../../utils/format';
 import { Button } from './button';
 import { FieldWrapper } from './field-wrapper';
+import { usePortalContainer } from './portal-container';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
 import type { SortDirection } from './sort-column-item';
 
@@ -677,6 +678,7 @@ export function DatePicker(props: DatePickerProps) {
   } = props;
 
   const [open, setOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const isInvalid = invalid || !!error;
 
   const displayValue = useMemo(() => {
@@ -730,7 +732,7 @@ export function DatePicker(props: DatePickerProps) {
         </button>
       </Popover.Trigger>
 
-      <Popover.Portal>
+      <Popover.Portal container={portalContainer ?? undefined}>
         <Popover.Content
           className={cn(
             'z-[9999]',
@@ -809,6 +811,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
     invalid = false,
   } = props;
   const [open, setOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const isInvalid = invalid || !!error;
 
   const displayValue = value ? formatDate(value) : '';
@@ -913,7 +916,7 @@ export function DatePickerInput(props: DatePickerInputProps) {
           </button>
         </Popover.Trigger>
 
-        <Popover.Portal>
+        <Popover.Portal container={portalContainer ?? undefined}>
           <Popover.Content
             className={cn(
               'z-[9999]',
@@ -1057,6 +1060,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
     invalid = false,
   } = props;
   const [open, setOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const isInvalid = invalid || !!error;
 
   const displayValue = value ? formatDate(value) : '';
@@ -1139,7 +1143,7 @@ export function DatePickerInputSimple(props: DatePickerInputSimpleProps) {
           </button>
         </Popover.Trigger>
 
-        <Popover.Portal>
+        <Popover.Portal container={portalContainer ?? undefined}>
           <Popover.Content
             className={cn(
               'z-[9999]',
@@ -1350,6 +1354,7 @@ export function DateFilterMenu({
   'aria-label': ariaLabel = 'Open date filter',
 }: DateFilterMenuProps) {
   const [open, setOpen] = useState(false);
+  const portalContainer = usePortalContainer();
 
   // Drafted selection — initialized from props each time the menu opens.
   const [draftSort, setDraftSort] = useState<SortDirection>(sort);
@@ -1412,7 +1417,7 @@ export function DateFilterMenu({
         )}
       </Popover.Trigger>
 
-      <Popover.Portal>
+      <Popover.Portal container={portalContainer ?? undefined}>
         <Popover.Content
           className={cn(
             'z-[9999] w-80 max-w-[calc(100vw-2rem)]',

package/src/components/ui/dropdown-menu.tsx

@@ -13,7 +13,10 @@ const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+function DropdownMenuPortal({ container, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>) {
+  const active = usePortalContainer();
+  return <DropdownMenuPrimitive.Portal container={container ?? active ?? undefined} {...props} />;
+}
 
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 

package/src/components/ui/menubar.tsx

@@ -5,12 +5,16 @@ import { Check, ChevronRight, Circle } from 'lucide-react';
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from 'react';
 
 import { cn } from '../../utils/cn';
+import { usePortalContainer } from './portal-container';
 
 const MenubarMenu = MenubarPrimitive.Menu;
 
 const MenubarGroup = MenubarPrimitive.Group;
 
-const MenubarPortal = MenubarPrimitive.Portal;
+function MenubarPortal({ container, ...props }: ComponentPropsWithoutRef<typeof MenubarPrimitive.Portal>) {
+  const active = usePortalContainer();
+  return <MenubarPrimitive.Portal container={container ?? active ?? undefined} {...props} />;
+}
 
 const MenubarSub = MenubarPrimitive.Sub;
 
@@ -82,21 +86,24 @@ MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 const MenubarContent = forwardRef<
   ElementRef<typeof MenubarPrimitive.Content>,
   ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
-  <MenubarPrimitive.Portal>
-    <MenubarPrimitive.Content
-      ref={ref}
-      align={align}
-      alignOffset={alignOffset}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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}
-    />
-  </MenubarPrimitive.Portal>
-));
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => {
+  const container = usePortalContainer();
+  return (
+    <MenubarPrimitive.Portal container={container ?? undefined}>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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}
+      />
+    </MenubarPrimitive.Portal>
+  );
+});
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = forwardRef<

package/src/components/ui/modal-v2.tsx

@@ -5,6 +5,7 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { ViewportBreakpoints } from '../../hooks/ui/use-content-breakpoint';
 import { cn } from '../../utils/cn';
 import { XmarkIcon } from '../icons-v2-generated';
+import { CollisionBoundaryContext, PortalContainerContext } from './portal-container';
 
 // Duration of the open/close animation in ms — keep in sync with the
 // `duration-200` utilities applied to the backdrop and panel below.
@@ -66,8 +67,9 @@ interface ModalTwoColumnProps {
 // TOP one may contain focus, or they fight each other.
 const modalStack: symbol[] = [];
 
-// Radix popups (Select/DropdownMenu/Popover content) PORTAL to <body>, so a
-// dropdown opened from inside the modal focuses nodes OUTSIDE the panel.
+// Radix popups (Select/DropdownMenu/Popover content) PORTAL out of the panel —
+// to <body> or the modal's own portal host — so a dropdown opened from inside
+// the modal focuses nodes OUTSIDE the panel.
 // Focus landing there is NOT an escape — yanking it back (containFocus /
 // reasserts / Tab trap) fights Radix's own item-focus management and strands
 // stale `data-highlighted` on items it never got to blur-clean (observed:
@@ -82,6 +84,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
   ({ isOpen, onClose, children, className, size = 'default' }, ref) => {
     // Keep the modal mounted while the exit animation plays.
     const [isMounted, setIsMounted] = useState(isOpen);
+    const [portalHost, setPortalHost] = useState<HTMLDivElement | null>(null);
     const panelRef = useRef<HTMLDivElement | null>(null);
     const restoreFocusRef = useRef<HTMLElement | null>(null);
     const stackIdRef = useRef<symbol>(Symbol('modal'));
@@ -307,9 +310,20 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
             aria-modal="true"
           >
             <ModalContext.Provider value={{ onClose }}>
-              <ViewportBreakpoints>{children}</ViewportBreakpoints>
+              {/* Menus and tooltips opened inside portal into this layer, so they
+                  stack over the panel instead of under the `z-[1300]` overlay. The
+                  boundary resets too: a modal follows the window, not the surface
+                  it was opened from. */}
+              <PortalContainerContext.Provider value={portalHost}>
+                <CollisionBoundaryContext.Provider value={null}>
+                  <ViewportBreakpoints>{children}</ViewportBreakpoints>
+                </CollisionBoundaryContext.Provider>
+              </PortalContainerContext.Provider>
             </ModalContext.Provider>
           </div>
+          {/* Outside the panel: its open/close zoom is a transform, which would
+              anchor the menus' `position: fixed` to the panel. */}
+          <div ref={setPortalHost} className="contents" />
         </div>
       </RemoveScroll>
     );

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

@@ -8,6 +8,7 @@ import { CheckIcon, SearchIcon } from '../icons-v2-generated';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { FieldWrapper } from './field-wrapper';
 import { Input } from './input';
+import { usePortalContainer } from './portal-container';
 
 export interface SearchableSelectOption {
   value: string;
@@ -112,6 +113,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState('');
   const keyboardPadding = useKeyboardCollisionPadding();
+  const portalContainer = usePortalContainer();
 
   // Clear the query on close, while rendering rather than from an effect: the
   // popover closes and reopens without unmounting, so an effect left the
@@ -189,7 +191,7 @@ export function SearchableSelect(allProps: SearchableSelectProps) {
       ) : (
         triggerElement
       )}
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}

package/src/components/ui/select.tsx

@@ -7,6 +7,7 @@ import { cn } from '../../utils/cn';
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon';
 import { CheckIcon } from '../icons-v2-generated/signs-and-symbols/check-icon';
 import { FieldWrapper } from './field-wrapper';
+import { usePortalContainer } from './portal-container';
 
 const Select = SelectPrimitive.Root;
 
@@ -114,30 +115,33 @@ SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNam
 const SelectContent = forwardRef<
   ComponentRef<typeof SelectPrimitive.Content>,
   ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-[9999] max-h-96 overflow-hidden rounded-[4px] border border-ods-border bg-ods-card text-ods-text-primary',
-        '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',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
-      )}
-      position={position}
-      style={{
-        width: 'var(--radix-select-trigger-width)',
-        minWidth: 'var(--radix-select-trigger-width)',
-      }}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport className="w-full">{children}</SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
+>(({ className, children, position = 'popper', ...props }, ref) => {
+  const container = usePortalContainer();
+  return (
+    <SelectPrimitive.Portal container={container ?? undefined}>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-[9999] max-h-96 overflow-hidden rounded-[4px] border border-ods-border bg-ods-card text-ods-text-primary',
+          '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',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        style={{
+          width: 'var(--radix-select-trigger-width)',
+          minWidth: 'var(--radix-select-trigger-width)',
+        }}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport className="w-full">{children}</SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = forwardRef<

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

@@ -7,6 +7,7 @@ import { cn } from '../../utils/cn';
 import { CheckIcon, PlusIcon, SearchIcon, TrashIcon } from '../icons-v2-generated';
 import { Button } from './button';
 import { Input } from './input';
+import { usePortalContainer } from './portal-container';
 
 export interface TagSelectOption {
   id: string;
@@ -61,6 +62,7 @@ export function TagSelectDropdown({
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState('');
   const keyboardPadding = useKeyboardCollisionPadding();
+  const portalContainer = usePortalContainer();
 
   // Clear the query on close, while rendering rather than from an effect: the
   // popover closes and reopens without unmounting, so an effect left the
@@ -110,7 +112,7 @@ export function TagSelectDropdown({
           {triggerLabel}
         </Button>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}