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

package/src/components/Dialog.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { paperMixin } from "../styles";
 import { cls } from "../util";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type DialogProps = {
     open?: boolean;
@@ -24,21 +25,22 @@ export type DialogProps = {
      * If `true`, the dialog will not focus the first focusable element when opened.
      */
     disableInitialFocus?: boolean;
+    portalContainer?: HTMLElement | null;
 };
 
 const widthClasses = {
-    xs: "max-w-xs min-w-xs w-xs",
-    sm: "max-w-sm min-w-sm w-sm",
-    md: "max-w-md min-w-md w-md",
-    lg: "max-w-lg min-w-lg w-lg",
-    xl: "max-w-xl min-w-xl w-xl",
-    "2xl": "max-w-2xl min-w-2xl w-2xl",
-    "3xl": "max-w-3xl min-w-3xl w-3xl",
-    "4xl": "max-w-4xl min-w-4xl w-4xl",
-    "5xl": "max-w-5xl min-w-5xl w-5xl",
-    "6xl": "max-w-6xl min-w-6xl w-6xl",
-    "7xl": "max-w-7xl min-w-7xl w-7xl",
-    full: "max-w-full min-w-full w-full"
+    xs: "max-w-xs w-xs",
+    sm: "max-w-sm w-sm",
+    md: "max-w-md w-md",
+    lg: "max-w-lg w-lg",
+    xl: "max-w-xl w-xl",
+    "2xl": "max-w-2xl w-2xl",
+    "3xl": "max-w-3xl w-3xl",
+    "4xl": "max-w-4xl w-4xl",
+    "5xl": "max-w-5xl w-5xl",
+    "6xl": "max-w-6xl w-6xl",
+    "7xl": "max-w-7xl w-7xl",
+    full: "max-w-full w-full"
 };
 
 export const Dialog = ({
@@ -57,15 +59,22 @@ export const Dialog = ({
                            onEscapeKeyDown,
                            onPointerDownOutside,
                            onInteractOutside,
-                           disableInitialFocus = true
+                           disableInitialFocus = true,
+                           portalContainer
                        }: DialogProps) => {
     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(() => {
         if (!open) {
             const timeout = setTimeout(() => {
                 setDisplayed(false);
-            }, 150);
+            }, 100);
             return () => clearTimeout(timeout);
         } else {
             setDisplayed(true);
@@ -78,12 +87,12 @@ export const Dialog = ({
         <DialogPrimitive.Root open={displayed || open}
                               modal={modal}
                               onOpenChange={onOpenChange}>
-            <DialogPrimitive.Portal>
+            <DialogPrimitive.Portal container={finalContainer}>
 
                 <div className={cls("fixed inset-0 z-30", containerClassName)}>
 
                     <DialogPrimitive.Overlay
-                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ",
+                        className={cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}

package/src/components/DialogActions.tsx

@@ -19,7 +19,7 @@ export function DialogActions({
             defaultBorderMixin,
             "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
             position,
-            "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60",
+            "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60",
             translucent ? "backdrop-blur-sm" : "",
             className)}>
         {children}

package/src/components/ExpandablePanel.tsx

@@ -95,7 +95,7 @@ export function ExpandablePanel({
                     <div
                         className={cls(
                             "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                            "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40",
+                            "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40",
                             invisible ? "border-b px-2" : "p-4",
                             open ? "py-6" : "py-4",
                             "transition-all duration-200",

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>
     )