@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/src/components/SearchableSelect.tsx

@@ -0,0 +1,335 @@
+"use client";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cls } from "../util";
+import { CheckIcon, KeyboardArrowDownIcon } from "../icons";
+import { Separator } from "./Separator";
+import {
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled
+} from "../styles";
+import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+export interface SearchableSelectProps {
+    /** Currently selected value. Can be one of the items or a custom string. */
+    value?: string;
+    /** Callback when the value changes (from selection or custom input). */
+    onValueChange?: (value: string) => void;
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    /** Label above the field. */
+    label?: React.ReactNode | string;
+    /** Size variant. */
+    size?: "smallest" | "small" | "medium" | "large";
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Whether to show an error state. */
+    error?: boolean;
+    /** Whether to use the invisible (borderless) style. */
+    invisible?: boolean;
+    /** CSS class for the trigger button. */
+    className?: string;
+    /** CSS class for the trigger input area. */
+    inputClassName?: string;
+    /** Render the selected value in a custom way in the trigger. */
+    renderValue?: (value: string) => React.ReactNode;
+    /** Whether the popover should trap focus. */
+    modalPopover?: boolean;
+    /** If true, allow accepting the typed text as the value even if it doesn't match an item. */
+    allowCustomValues?: boolean;
+    /** Portal container element. */
+    portalContainer?: HTMLElement | null;
+    /** If true, auto-open the popover on mount so the user can start typing immediately. */
+    autoFocus?: boolean;
+    /** The option items — use SearchableSelectItem. */
+    children: React.ReactNode;
+}
+
+export interface SearchableSelectItemProps {
+    value: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export const SearchableSelect = React.forwardRef<
+    HTMLButtonElement,
+    SearchableSelectProps
+>(
+    (
+        {
+            value,
+            onValueChange,
+            placeholder = "Select...",
+            label,
+            size = "large",
+            disabled,
+            error,
+            invisible,
+            className,
+            inputClassName,
+            renderValue,
+            modalPopover = false,
+            allowCustomValues = true,
+            portalContainer,
+            autoFocus,
+            children,
+        },
+        ref
+    ) => {
+        const [isMounted, setIsMounted] = useState(false);
+        const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+        const [search, setSearch] = useState("");
+        const inputRef = useRef<HTMLInputElement>(null);
+
+        const contextContainer = usePortalContainer();
+        const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
+        useEffect(() => {
+            setIsMounted(true);
+        }, []);
+
+        // Auto-open popover on mount when autoFocus is true
+        useEffect(() => {
+            if (autoFocus && isMounted) {
+                onPopoverOpenChange(true);
+            }
+        }, [autoFocus, isMounted]);
+
+        // Collect all item values + labels from children
+        const itemsMap = React.useMemo(() => {
+            const map = new Map<string, React.ReactNode>();
+            React.Children.forEach(children, (child) => {
+                if (React.isValidElement<SearchableSelectItemProps>(child) && child.props.value != null) {
+                    map.set(String(child.props.value), child.props.children ?? child.props.value);
+                }
+            });
+            return map;
+        }, [children]);
+
+        const onPopoverOpenChange = (open: boolean) => {
+            setIsPopoverOpen(open);
+            if (open) {
+                // Pre-fill search with current value for easy editing
+                setSearch(value ?? "");
+                // Focus the input after popover opens
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }
+        };
+
+        const handleSelect = (selectedValue: string) => {
+            onValueChange?.(selectedValue);
+            setIsPopoverOpen(false);
+            setSearch("");
+        };
+
+        const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === "Enter" && allowCustomValues) {
+                const trimmed = search.trim();
+                if (trimmed) {
+                    // If cmdk found no match, accept custom value
+                    // If there are matches, cmdk will handle selecting the highlighted one
+                    // We check if the current search is NOT one of the items
+                    const isExistingItem = itemsMap.has(trimmed);
+                    if (!isExistingItem) {
+                        e.preventDefault();
+                        handleSelect(trimmed);
+                    }
+                }
+            } else if (e.key === "Escape") {
+                setIsPopoverOpen(false);
+            }
+        };
+
+        // Resolve display label for the trigger
+        const displayLabel = React.useMemo(() => {
+            if (!value) return null;
+            if (renderValue) return renderValue(value);
+            const itemLabel = itemsMap.get(value);
+            if (itemLabel) return itemLabel;
+            return <span className="text-sm">{value}</span>;
+        }, [value, renderValue, itemsMap]);
+
+        useInjectStyles("SearchableSelect", `
+[cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+}`);
+
+        return (
+            <div>
+                {label && (
+                    typeof label === "string"
+                        ? <div className={cls("text-sm font-medium ml-3.5 mb-1",
+                            error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300",
+                        )}>{label}</div>
+                        : label
+                )}
+
+                <PopoverPrimitive.Root
+                    open={isMounted && isPopoverOpen}
+                    onOpenChange={onPopoverOpenChange}
+                    modal={modalPopover}
+                >
+                    <PopoverPrimitive.Trigger asChild>
+                        <button
+                            ref={ref}
+                            disabled={disabled}
+                            onClick={() => !disabled && onPopoverOpenChange(!isPopoverOpen)}
+                            className={cls(
+                                {
+                                    "min-h-[28px]": size === "smallest",
+                                    "min-h-[32px]": size === "small",
+                                    "min-h-[44px]": size === "medium",
+                                    "min-h-[64px]": size === "large",
+                                },
+                                {
+                                    "py-0.5": size === "smallest",
+                                    "py-1": size === "small",
+                                    "py-2": size === "medium" || size === "large",
+                                },
+                                {
+                                    "px-2": size === "small" || size === "smallest",
+                                    "px-4": size === "medium" || size === "large",
+                                },
+                                "select-none rounded-md text-sm w-full text-start",
+                                "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,
+                                inputClassName
+                            )}
+                        >
+                            <div className="flex items-center justify-between w-full gap-1">
+                                <div className="flex-grow min-w-0 truncate">
+                                    {displayLabel ?? (
+                                        <span className="text-sm text-surface-accent-500 dark:text-surface-accent-400">
+                                            {placeholder}
+                                        </span>
+                                    )}
+                                </div>
+                                <div className={cls("flex-shrink-0 flex items-center")}>
+                                    <KeyboardArrowDownIcon
+                                        size={size === "large" ? "medium" : "small"}
+                                        className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
+                                    />
+                                </div>
+                            </div>
+                        </button>
+                    </PopoverPrimitive.Trigger>
+                    <PopoverPrimitive.Portal container={finalContainer}>
+                        <PopoverPrimitive.Content
+                            className={cls(
+                                "z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg",
+                                defaultBorderMixin
+                            )}
+                            align="start"
+                            sideOffset={4}
+                            style={{ width: "var(--radix-popover-trigger-width)", minWidth: 180 }}
+                            onEscapeKeyDown={() => onPopoverOpenChange(false)}
+                        >
+                            <CommandPrimitive shouldFilter={true}>
+                                <div className="flex flex-row items-center">
+                                    <CommandPrimitive.Input
+                                        ref={inputRef}
+                                        value={search}
+                                        onValueChange={setSearch}
+                                        className={cls(
+                                            focusedDisabled,
+                                            "bg-transparent outline-none flex-1 h-full w-full text-surface-accent-900 dark:text-white",
+                                            {
+                                                "m-2 text-xs": size === "smallest" || size === "small",
+                                                "m-3 text-sm": size === "medium" || size === "large",
+                                            },
+                                        )}
+                                        placeholder="Search..."
+                                        onKeyDown={handleInputKeyDown}
+                                    />
+                                </div>
+                                <Separator orientation="horizontal" className="my-0" />
+                                <CommandPrimitive.List>
+                                    {allowCustomValues && search.trim() && !itemsMap.has(search.trim()) ? (
+                                        <CommandPrimitive.Empty
+                                            className="px-3 py-2 text-xs cursor-pointer text-primary hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800"
+                                            onClick={() => handleSelect(search.trim())}
+                                        >
+                                            Use &ldquo;{search.trim()}&rdquo;
+                                        </CommandPrimitive.Empty>
+                                    ) : (
+                                        <CommandPrimitive.Empty className="px-3 py-2 text-xs text-text-secondary dark:text-text-secondary-dark">
+                                            No results found.
+                                        </CommandPrimitive.Empty>
+                                    )}
+                                    <CommandPrimitive.Group>
+                                        {React.Children.map(children, (child) => {
+                                            if (!React.isValidElement<SearchableSelectItemProps>(child)) return child;
+                                            const itemValue = child.props.value;
+                                            const isSelected = String(value) === String(itemValue);
+                                            return (
+                                                <CommandPrimitive.Item
+                                                    key={String(itemValue)}
+                                                    value={String(itemValue)}
+                                                    onMouseDown={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                    }}
+                                                    onSelect={() => handleSelect(String(itemValue))}
+                                                    className={cls(
+                                                        "flex flex-row items-center gap-1.5",
+                                                        isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "",
+                                                        "cursor-pointer",
+                                                        "m-0.5",
+                                                        "ring-offset-transparent",
+                                                        "p-1.5 rounded",
+                                                        "aria-[selected=true]:outline-none",
+                                                        "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900",
+                                                        "text-surface-accent-700 dark:text-surface-accent-300",
+                                                        child.props.className
+                                                    )}
+                                                >
+                                                    <div className={cls(
+                                                        "w-4 h-4 flex items-center justify-center flex-shrink-0",
+                                                        isSelected ? "text-primary" : "text-transparent",
+                                                    )}>
+                                                        {isSelected && <CheckIcon size={14} />}
+                                                    </div>
+                                                    {child.props.children ?? child.props.value}
+                                                </CommandPrimitive.Item>
+                                            );
+                                        })}
+                                    </CommandPrimitive.Group>
+                                </CommandPrimitive.List>
+                            </CommandPrimitive>
+                        </PopoverPrimitive.Content>
+                    </PopoverPrimitive.Portal>
+                </PopoverPrimitive.Root>
+            </div>
+        );
+    }
+);
+
+SearchableSelect.displayName = "SearchableSelect";
+
+// ─── Item ───────────────────────────────────────────────────────────────────
+
+/**
+ * A single option inside a SearchableSelect.
+ * The `value` prop is the string value that gets selected.
+ * The `children` is what's displayed in the dropdown.
+ * This component is not rendered directly — SearchableSelect reads its props.
+ */
+export function SearchableSelectItem(_props: SearchableSelectItemProps) {
+    // Rendered by SearchableSelect, not by React
+    return null;
+}

package/src/components/Select.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useState } from "react";
+import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useMemo, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
     defaultBorderMixin,
@@ -12,6 +12,7 @@ import {
 import { CheckIcon, KeyboardArrowDownIcon } from "../icons";
 import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type SelectValue = string | number | boolean;
 
@@ -35,40 +36,42 @@ export type SelectProps<T extends SelectValue = string> = {
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    inputRef?: React.RefObject<HTMLButtonElement>,
+    inputRef?: React.RefObject<HTMLButtonElement | null>,
     padding?: boolean,
     invisible?: boolean,
     children?: React.ReactNode;
     dataType?: "string" | "number" | "boolean";
+    portalContainer?: HTMLElement | null; // Explicitly added to props type if missing
 };
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(({
-                                                                   inputRef,
-                                                                   open,
-                                                                   name,
-                                                                   fullWidth = false,
-                                                                   id,
-                                                                   onOpenChange,
-                                                                   value,
-                                                                   onChange,
-                                                                   onValueChange,
-                                                                   className,
-                                                                   inputClassName,
-                                                                   viewportClassName,
-                                                                   placeholder,
-                                                                   renderValue,
-                                                                   label,
-                                                                   size = "large",
-                                                                   error,
-                                                                   disabled,
-                                                                   padding = true,
-                                                                   position = "item-aligned",
-                                                                   endAdornment,
-                                                                   invisible,
-                                                                   children,
-                                                                   dataType = "string",
-                                                                   ...props
-                                                               }, ref) => {
+    inputRef,
+    open,
+    name,
+    fullWidth = false,
+    id,
+    onOpenChange,
+    value,
+    onChange,
+    onValueChange,
+    className,
+    inputClassName,
+    viewportClassName,
+    placeholder,
+    renderValue,
+    label,
+    size = "large",
+    error,
+    disabled,
+    padding = true,
+    position = "item-aligned",
+    endAdornment,
+    invisible,
+    children,
+    dataType = "string",
+    portalContainer: manualContainer, // Rename to avoid confusion
+    ...props
+}, ref) => {
 
     const [openInternal, setOpenInternal] = useState(open ?? false);
 
@@ -76,8 +79,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
         setOpenInternal(open ?? false);
     }, [open]);
 
-    const onValueChangeInternal = useCallback((newValue: string) => {
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Resolve final container (Manual Prop > Context Container > Undefined/Body)
+    const finalContainer = (manualContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
 
+    const onValueChangeInternal = useCallback((newValue: string) => {
         let typedValue: SelectValue = newValue;
         if (dataType === "boolean") {
             if (newValue === "true") typedValue = true;
@@ -96,23 +104,22 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             } as unknown as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [onChange, onValueChange, name]);
+    }, [onChange, onValueChange, name, dataType]);
 
     const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
-    // Convert non-string values to strings for Radix UI
     const stringValue = value !== undefined ? String(value) : undefined;
 
-    const selectedChild = React.useMemo(() => {
+    const displayChildren = useMemo(() => {
         if (!hasValue || renderValue) return null;
-        // @ts-ignore
-        const childrenProps: SelectItemProps[] = Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return child.props;
-            }
-        }).filter(Boolean);
 
-        const option = childrenProps.find((o) => String(o.value) === String(value));
-        return option?.children;
+        // Find the child that matches the current value to display its content
+        let found: React.ReactNode = null;
+        Children.forEach(children, (child) => {
+            if (React.isValidElement<SelectItemProps>(child) && String(child.props.value) === String(value)) {
+                found = child.props.children;
+            }
+        });
+        return found;
     }, [children, hasValue, renderValue, value]);
 
     return (
@@ -155,6 +162,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                             "px-3": size === "medium",
                             "px-2": size === "small" || size === "smallest",
                         } : "",
+                        "outline-hidden focus:outline-hidden",
                         "outline-none focus:outline-none",
                         "select-none rounded-md text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
@@ -184,28 +192,30 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                 "min-h-[64px]": size === "large"
                             }
                         )}>
-                            <SelectPrimitive.Value
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                }}
-                                placeholder={placeholder}
-                                className={"w-full"}>
-                                {hasValue && value !== undefined && renderValue ? renderValue(value) : placeholder}
-                                {/*{hasValue && !renderValue && value}*/}
-                                {hasValue && !renderValue && selectedChild}
+                        <SelectPrimitive.Value
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            placeholder={placeholder}
+                            className={"w-full"}>
 
-                            </SelectPrimitive.Value>
-                        </div>
+                            {hasValue && value !== undefined && renderValue
+                                ? renderValue(value)
+                                : (displayChildren || placeholder)
+                            }
+
+                        </SelectPrimitive.Value>
+                    </div>
 
-                        <SelectPrimitive.Icon asChild>
-                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                   className={cls("transition", open ? "rotate-180" : "", {
-                                                       "px-2": size === "large",
-                                                       "px-1": size === "medium" || size === "small",
-                                                   })}/>
-                        </SelectPrimitive.Icon>
-                 </SelectPrimitive.Trigger>
+                    <SelectPrimitive.Icon asChild>
+                        <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                            className={cls("transition", open ? "rotate-180" : "", {
+                                "px-2": size === "large",
+                                "px-1": size === "medium" || size === "small",
+                            })} />
+                    </SelectPrimitive.Icon>
+                </SelectPrimitive.Trigger>
 
                 {endAdornment && (
                     <div
@@ -218,11 +228,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     </div>
                 )}
             </div>
-            <SelectPrimitive.Portal>
+
+            {/* Pass the calculated finalContainer */}
+            <SelectPrimitive.Portal container={finalContainer}>
                 <SelectPrimitive.Content position={position}
-                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
+                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
-                                              style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
+                        style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
@@ -233,6 +245,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
 
 Select.displayName = "Select";
 
+// ... (SelectItem and SelectGroup remain unchanged)
 export type SelectItemProps<T extends SelectValue = string> = {
     value: T,
     children?: React.ReactNode,
@@ -241,11 +254,11 @@ export type SelectItemProps<T extends SelectValue = string> = {
 };
 
 export const SelectItem = React.memo(function SelectItem<T extends SelectValue = string>({
-                                                               value,
-                                                               children,
-                                                               disabled,
-                                                               className
-                                                           }: SelectItemProps<T>) {
+    value,
+    children,
+    disabled,
+    className
+}: SelectItemProps<T>) {
     // Convert value to string for Radix UI
     const stringValue = String(value);
 
@@ -267,7 +280,7 @@ export const SelectItem = React.memo(function SelectItem<T extends SelectValue =
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
         <div
             className="absolute left-1 data-[state=checked]:block hidden">
-            <CheckIcon size={16}/>
+            <CheckIcon size={16} />
         </div>
     </SelectPrimitive.Item>;
 });
@@ -279,10 +292,10 @@ export type SelectGroupProps = {
 };
 
 export const SelectGroup = React.memo(function SelectGroup({
-                                label,
-                                children,
-                                className
-                            }: SelectGroupProps) {
+    label,
+    children,
+    className
+}: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
             className={cls(

package/src/components/Separator.tsx

@@ -15,12 +15,12 @@ export function Separator({
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                className={cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <SeparatorPrimitive.Root
-                className={cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />

package/src/components/Sheet.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 interface SheetProps {
     children: React.ReactNode;
@@ -18,6 +19,7 @@ interface SheetProps {
     style?: React.CSSProperties;
     overlayClassName?: string;
     overlayStyle?: React.CSSProperties;
+    portalContainer?: HTMLElement | null;
 }
 
 export const Sheet: React.FC<SheetProps> = ({
@@ -33,10 +35,17 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 style,
                                                 overlayClassName,
                                                 overlayStyle,
+                                                portalContainer,
                                                 ...props
                                             }) => {
     const [displayed, setDisplayed] = useState(false);
 
+    // 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(() => {
         const timeout = setTimeout(() => {
             setDisplayed(open);
@@ -62,7 +71,7 @@ export const Sheet: React.FC<SheetProps> = ({
         <DialogPrimitive.Root open={displayed || open}
                               modal={modal}
                               onOpenChange={onOpenChange}>
-            <DialogPrimitive.Portal>
+            <DialogPrimitive.Portal container={finalContainer}>
                 <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
@@ -70,8 +79,8 @@ export const Sheet: React.FC<SheetProps> = ({
                     className={cls(
                         "outline-none",
                         "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
-                        "bg-black bg-opacity-50",
-                        "dark:bg-surface-900 dark:bg-opacity-60",
+                        "bg-black bg-opacity-50 bg-black/50",
+                        "dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60",
                         displayed && open ? "opacity-100" : "opacity-0",
                         overlayClassName
                     )}