@firecms/ui 3.0.1 → 3.1.0-canary.24c8270

package/src/components/FileUpload.tsx

@@ -28,22 +28,22 @@ export type FileUploadProps = {
     title?: React.ReactNode;
     uploadDescription?: React.ReactNode;
     preventDropOnDocument?: boolean;
-    size?: "medium" | "large";
+    size?: "small" | "medium" | "large";
 };
 
 export function FileUpload({
-                               accept,
-                               onFilesAdded,
-                               onFilesRejected,
-                               maxSize,
-                               disabled,
-                               maxFiles,
-                               title,
-                               uploadDescription,
-                               children,
-                               preventDropOnDocument = true,
-                               size
-                           }: React.PropsWithChildren<FileUploadProps>) {
+    accept,
+    onFilesAdded,
+    onFilesRejected,
+    maxSize,
+    disabled,
+    maxFiles,
+    title,
+    uploadDescription,
+    children,
+    preventDropOnDocument = true,
+    size
+}: React.PropsWithChildren<FileUploadProps>) {
 
     const {
         getRootProps,
@@ -52,15 +52,15 @@ export function FileUpload({
         isDragAccept,
         isDragReject
     } = useDropzone({
-            accept,
-            noDragEventsBubbling: true,
-            maxSize,
-            onDrop: onFilesAdded,
-            onDropRejected: onFilesRejected,
-            disabled,
-            maxFiles,
-            preventDropOnDocument
-        }
+        accept,
+        noDragEventsBubbling: true,
+        maxSize,
+        onDrop: onFilesAdded,
+        onDropRejected: onFilesRejected,
+        disabled,
+        maxFiles,
+        preventDropOnDocument
+    }
     );
     return <div
         {...getRootProps()}
@@ -71,6 +71,7 @@ export function FileUpload({
             {
                 "h-44": size === "large",
                 "h-28": size === "medium",
+                "h-16": size === "small",
                 "cursor-pointer": !disabled,
                 [fieldBackgroundHoverMixin]: !isDragActive,
                 "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
@@ -89,8 +90,8 @@ export function FileUpload({
         <div
             className="flex-grow h-28 box-border flex flex-col items-center justify-center text-center">
             <Typography align={"center"}
-                        variant={"label"}
-                        className={"flex flex-row gap-2 justify-center"}>
+                variant={"label"}
+                className={"flex flex-row gap-2 justify-center"}>
                 {uploadDescription}
             </Typography>
         </div>

package/src/components/IconButton.tsx

@@ -14,7 +14,7 @@ export type IconButtonProps<C extends React.ElementType> =
     onClick?: React.MouseEventHandler<any>
 }
 
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {
@@ -40,7 +40,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-950 dark:bg-opacity-50 dark:bg-surface-950/50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component
@@ -50,6 +50,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
             className={cls(
                 disabled ? "opacity-50 pointer-events-none" : "cursor-pointer",
                 toggled ? "outline outline-2 outline-primary" : "",
+                "text-inherit dark:text-inherit",
                 colorClasses,
                 bgClasses,
                 baseClasses,

package/src/components/Menu.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { focusedDisabled, paperMixin } from "../styles";
 import { cls } from "../util";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type MenuProps = {
     children: React.ReactNode;
@@ -33,28 +34,36 @@ const Menu = React.forwardRef<
        onOpenChange,
        portalContainer,
        sideOffset = 4,
-                                    className
-   }, ref) => (
-    <DropdownMenu.Root
-        open={open}
-        defaultOpen={defaultOpen}
-        onOpenChange={onOpenChange}>
-        <DropdownMenu.Trigger
-            ref={ref}
-            asChild>
-            {trigger}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal container={portalContainer}>
-            <DropdownMenu.Content
-                side={side}
-                sideOffset={sideOffset}
-                align={align}
-                className={cls(paperMixin, focusedDisabled, "py-2 z-30", className)}>
-                {children}
-            </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-))
+       className
+   }, ref) => {
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
+    return (
+        <DropdownMenu.Root
+            open={open}
+            defaultOpen={defaultOpen}
+            onOpenChange={onOpenChange}>
+            <DropdownMenu.Trigger
+                ref={ref}
+                asChild>
+                {trigger}
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal container={finalContainer}>
+                <DropdownMenu.Content
+                    side={side}
+                    sideOffset={sideOffset}
+                    align={align}
+                    className={cls(paperMixin, focusedDisabled, "py-2 z-30", className)}>
+                    {children}
+                </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+    );
+})
 Menu.displayName = "Menu"
 
 export { Menu }
@@ -62,20 +71,24 @@ export { Menu }
 export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
+    disabled?: boolean;
     onClick?: (event: React.MouseEvent) => void;
     className?: string;
 };
 
 export const MenuItem = React.memo(({
-                             children,
-                             dense = false, // Default value is false if not provided
-                             onClick,
-                             className
-                         }: MenuItemProps) => {
+                                        children,
+                                        dense = false, // Default value is false if not provided
+                                        disabled = false,
+                                        onClick,
+                                        className
+                                    }: MenuItemProps) => {
     // Dynamically adjusting the class based on the "dense" prop
     const classNames = cls(
-        onClick && "cursor-pointer",
-        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4",
+        onClick && !disabled && "cursor-pointer",
+        disabled && "opacity-50 cursor-not-allowed",
+        "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4",
+        !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900",
         dense ? "px-4 py-1.5" : "px-4 py-2",
         className
     );
@@ -83,7 +96,8 @@ export const MenuItem = React.memo(({
     return (
         <DropdownMenu.Item
             className={classNames}
-            onClick={onClick}>
+            disabled={disabled}
+            onClick={disabled ? undefined : onClick}>
             {children}
         </DropdownMenu.Item>
     );

package/src/components/Menubar.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { cls } from "../util";
 import { CheckIcon, ChevronRightIcon } from "../icons";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export function Menubar({
                             children,
@@ -44,7 +45,7 @@ export function MenubarTrigger({
     return (
         <MenubarPrimitive.Trigger
             onSelect={onSelect}
-            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
+            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800",
                 className)}>
             {children}
         </MenubarPrimitive.Trigger>
@@ -53,9 +54,19 @@ export function MenubarTrigger({
 
 export function MenubarPortal({
                                   children,
-                              }: { children: React.ReactNode }) {
+                                  portalContainer,
+                              }: {
+    children: React.ReactNode;
+    portalContainer?: HTMLElement | null;
+}) {
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     return (
-        <MenubarPrimitive.Portal>
+        <MenubarPrimitive.Portal container={finalContainer}>
             {children}
         </MenubarPrimitive.Portal>
     )

package/src/components/MultiSelect.tsx

@@ -1,7 +1,7 @@
 "use client";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as React from "react";
-import { ChangeEvent, Children, useEffect } from "react";
+import { ChangeEvent, Children, useEffect, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { cls } from "../util";
 import { CheckIcon, CloseIcon, KeyboardArrowDownIcon } from "../icons";
@@ -17,6 +17,7 @@ import {
     focusedDisabled
 } from "../styles";
 import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type MultiSelectValue = string | number | boolean;
 
@@ -54,11 +55,12 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     multiple?: boolean,
     includeSelectAll?: boolean,
     includeClear?: boolean,
-    inputRef?: React.RefObject<HTMLButtonElement>,
+    inputRef?: React.RefObject<HTMLButtonElement | null>,
     padding?: boolean,
     invisible?: boolean,
     children: React.ReactNode;
     renderValues?: (values: T[]) => React.ReactNode;
+    portalContainer?: HTMLElement | null;
 }
 
 // Use generic type for the forwarded ref
@@ -81,16 +83,29 @@ export const MultiSelect = React.forwardRef<
             includeSelectAll = true,
             useChips = true,
             className,
+            inputClassName,
+            inputRef,
             children,
             renderValues,
             open,
             onOpenChange,
+            portalContainer,
         },
         ref
     ) => {
-        // Properly type the state variables to match the generic props
-        const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
-        const [selectedValues, setSelectedValues] = React.useState<any[]>(value ?? []);
+        const [isMounted, setIsMounted] = useState(false);
+        const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
+        const [selectedValues, setSelectedValues] = useState<any[]>(value ?? []);
+
+        // Get the portal container from context
+        const contextContainer = usePortalContainer();
+
+        // Prioritize manual prop, fallback to context container
+        const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
+        useEffect(() => {
+            setIsMounted(true);
+        }, []);
 
         const onPopoverOpenChange = (open: boolean) => {
             setIsPopoverOpen(open);
@@ -103,20 +118,18 @@ export const MultiSelect = React.forwardRef<
 
         const allValues = React.useMemo(() => children
             ?
-            // @ts-ignore
             Children.map(children, (child) => {
-                if (React.isValidElement(child)) {
+                if (React.isValidElement<MultiSelectItemProps>(child)) {
                     return child.props.value;
                 }
                 return null;
-            }).filter(Boolean) as any[]
+            })?.filter(Boolean) ?? []
             : [], [children]);
 
         const optionsMap = React.useMemo(() => {
             const map = new Map<string, React.ReactNode>();
             Children.forEach(children, (child) => {
-                if (React.isValidElement(child)) {
-                    // @ts-ignore
+                if (React.isValidElement<MultiSelectItemProps>(child)) {
                     map.set(String(child.props.value), child.props.children);
                 }
             });
@@ -195,13 +208,13 @@ export const MultiSelect = React.forwardRef<
                 {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
 
                 <PopoverPrimitive.Root
-                    open={isPopoverOpen}
+                    open={isMounted && isPopoverOpen}
                     onOpenChange={onPopoverOpenChange}
                     modal={modalPopover}
                 >
                     <PopoverPrimitive.Trigger asChild>
                         <button
-                            ref={ref}
+                            ref={inputRef ?? ref}
                             onClick={handleTogglePopover}
                             className={cls(
                                 {
@@ -219,10 +232,12 @@ export const MultiSelect = React.forwardRef<
                                     "px-4": size === "medium" || size === "large",
                                 },
                                 "select-none rounded-md text-sm",
+                                "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                                 "relative flex items-center",
-                                className
+                                className,
+                                inputClassName
                             )}
                         >
                             {selectedValues.length > 0 ? (
@@ -264,73 +279,75 @@ export const MultiSelect = React.forwardRef<
                                         />}
                                         <div className={cls("px-2 h-full flex items-center")}>
                                             <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                                   className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                                className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
                                         </div>
                                     </div>
                                 </div>
                             ) : (
                                 <div className="flex items-center justify-between w-full mx-auto">
                                     <span className="text-sm">
-                                      {placeholder}
+                                        {placeholder}
                                     </span>
                                     <div className={cls("px-2 h-full flex items-center")}>
                                         <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                               className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
+                                            className={cls("transition", isPopoverOpen ? "rotate-180" : "")} />
                                     </div>
                                 </div>
                             )}
                         </button>
                     </PopoverPrimitive.Trigger>
-                    <PopoverPrimitive.Content
-                        className={cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin)}
-                        align="start"
-                        sideOffset={8}
-                        onEscapeKeyDown={() => onPopoverOpenChange(false)}
-                    >
-                        <CommandPrimitive>
-                            <div className={"flex flex-row items-center"}>
-                                <CommandPrimitive.Input
-                                    className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ")}
-                                    placeholder="Search..."
-                                    onKeyDown={handleInputKeyDown}
-                                />
-                                {selectedValues.length > 0 && (
-                                    <div
-                                        onClick={handleClear}
-                                        className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark">
-                                        Clear
-                                    </div>
-                                )}
-                            </div>
-                            <Separator orientation={"horizontal"} className={"my-0"}/>
-                            <CommandPrimitive.List>
-                                <CommandPrimitive.Empty className={"px-4 py-2"}>
-                                    No results found.
-                                </CommandPrimitive.Empty>
-                                <CommandPrimitive.Group>
-                                    {includeSelectAll && <CommandPrimitive.Item
-                                        key="all"
-                                        onSelect={toggleAll}
-                                        className={
-                                            cls(
-                                                "flex flex-row items-center gap-1.5",
-                                                "cursor-pointer",
-                                                "m-1",
-                                                "ring-offset-transparent",
-                                                "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-                                                "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
-                                                "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
-                                            )
-                                        }
-                                    >
-                                        <InnerCheckBox checked={selectedValues.length === allValues.length}/>
-                                        <span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
-                                    </CommandPrimitive.Item>}
-                                    {children}
-                                </CommandPrimitive.Group>
-                            </CommandPrimitive.List>
-                        </CommandPrimitive>
-                    </PopoverPrimitive.Content>
+                    <PopoverPrimitive.Portal container={finalContainer}>
+                        <PopoverPrimitive.Content
+                            className={cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin)}
+                            align="start"
+                            sideOffset={8}
+                            onEscapeKeyDown={() => onPopoverOpenChange(false)}
+                        >
+                            <CommandPrimitive>
+                                <div className={"flex flex-row items-center"}>
+                                    <CommandPrimitive.Input
+                                        className={cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow text-surface-accent-900 dark:text-white")}
+                                        placeholder="Search..."
+                                        onKeyDown={handleInputKeyDown}
+                                    />
+                                    {selectedValues.length > 0 && (
+                                        <div
+                                            onClick={handleClear}
+                                            className="text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark">
+                                            Clear
+                                        </div>
+                                    )}
+                                </div>
+                                <Separator orientation={"horizontal"} className={"my-0"} />
+                                <CommandPrimitive.List>
+                                    <CommandPrimitive.Empty className={"px-4 py-2 text-sm text-text-secondary dark:text-text-secondary-dark"}>
+                                        No results found.
+                                    </CommandPrimitive.Empty>
+                                    <CommandPrimitive.Group>
+                                        {includeSelectAll && <CommandPrimitive.Item
+                                            key="all"
+                                            onSelect={toggleAll}
+                                            className={
+                                                cls(
+                                                    "flex flex-row items-center gap-1.5",
+                                                    "cursor-pointer",
+                                                    "m-1",
+                                                    "ring-offset-transparent",
+                                                    "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
+                                                    "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+                                                    "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"
+                                                )
+                                            }
+                                        >
+                                            <InnerCheckBox checked={selectedValues.length === allValues.length} />
+                                            <span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
+                                        </CommandPrimitive.Item>}
+                                        {children}
+                                    </CommandPrimitive.Group>
+                                </CommandPrimitive.List>
+                            </CommandPrimitive>
+                        </PopoverPrimitive.Content>
+                    </PopoverPrimitive.Portal>
                 </PopoverPrimitive.Root>
             </MultiSelectContext.Provider>
         );
@@ -346,10 +363,10 @@ export interface MultiSelectItemProps<T extends MultiSelectValue = string> {
 }
 
 export const MultiSelectItem = React.memo(function MultiSelectItem<T extends MultiSelectValue = string>({
-                                                                         children,
-                                                                         value,
-                                                                         className
-                                                                     }: MultiSelectItemProps<T>) {
+    children,
+    value,
+    className
+}: MultiSelectItemProps<T>) {
     const context = React.useContext(MultiSelectContext);
     if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
     const {
@@ -373,13 +390,14 @@ export const MultiSelectItem = React.memo(function MultiSelectItem<T extends Mul
             "cursor-pointer",
             "m-1",
             "ring-offset-transparent",
-            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2",
             "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
             "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+            "text-surface-accent-700 dark:text-surface-accent-300",
             className
         )}
     >
-        <InnerCheckBox checked={isSelected}/>
+        <InnerCheckBox checked={isSelected} />
         {children}
     </CommandPrimitive.Item>;
 });
@@ -398,8 +416,7 @@ const InnerCheckBox = React.memo(function InnerCheckBox({ checked }: { checked:
                 (checked) ? "text-surface-accent-100 dark:text-surface-accent-900" : "",
                 (checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200")
             )}>
-            {checked && <CheckIcon size={16} className={"absolute"}/>}
+            {checked && <CheckIcon size={16} className={"absolute"} />}
         </div>
     </div>
 });
-

package/src/components/Popover.tsx

@@ -5,6 +5,7 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { paperMixin } from "../styles";
 import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";
@@ -49,16 +50,24 @@ export function Popover({
 
     useInjectStyles("Popover", popoverStyles);
 
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     if (!enabled)
         return <>{trigger}</>;
 
     return <PopoverPrimitive.Root open={open}
                                   onOpenChange={onOpenChange}
                                   modal={modal}>
+
         <PopoverPrimitive.Trigger asChild>
             {trigger}
         </PopoverPrimitive.Trigger>
-        <PopoverPrimitive.Portal container={portalContainer}>
+
+        <PopoverPrimitive.Portal container={finalContainer}>
             <PopoverPrimitive.Content
                 className={cls(paperMixin,
                     "PopoverContent z-40", className)}
@@ -79,7 +88,7 @@ export function Popover({
 }
 
 const popoverStyles = `
-
+/* ... (styles remain unchanged) ... */
 .PopoverContent {
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -98,7 +107,6 @@ const popoverStyles = `
   animation-name: slideRightAndFade;
 }
 
-
 @keyframes slideUpAndFade {
   from {
     opacity: 0;