@mhome/ui 0.1.0

package/src/components/dialog.jsx

@@ -0,0 +1,584 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { cn, spacingToPx, useIsDarkMode } from "../lib/utils";
+import { getBackground } from "../common/adaptive-theme-provider";
+import { useRecoilValue, backgroundTypeState } from "../global-state";
+
+const Dialog = ({
+  open,
+  onClose,
+  children,
+  variant,
+  maxWidth,
+  fullWidth,
+  fullScreen = false,
+  PaperProps,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const dialogId = React.useId();
+  const actualMode = useIsDarkMode();
+  const backgroundType = useRecoilValue(backgroundTypeState);
+
+  // All hooks must be called before any early returns
+  // This ensures hooks are called in the same order on every render
+  // Merge sx styles from PaperProps if provided
+  const paperSxStyles = React.useMemo(() => {
+    if (!PaperProps?.sx) return {};
+    const sxObj =
+      typeof PaperProps.sx === "function"
+        ? PaperProps.sx({}) // Empty theme object for compatibility
+        : PaperProps.sx;
+    return sxObj;
+  }, [PaperProps?.sx]);
+
+  if (!open) return null;
+
+  const maxWidthClass =
+    {
+      xs: "max-w-xs",
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+    }[maxWidth] || "max-w-lg";
+
+  // Get pops variant styles from theme
+  const popsStyles =
+    variant === "pops"
+      ? {
+          minWidth: "300px",
+          maxWidth: "800px",
+        }
+      : {};
+
+  // Drawer variant styles
+  const drawerStyles =
+    variant === "drawer"
+      ? {
+          margin: 0,
+          maxHeight: "100vh",
+          height: "100vh",
+          borderRadius: "16px 0 0 16px",
+        }
+      : {};
+
+  // For drawer variant, use background gradient if available, otherwise use standard background
+  const paperBg =
+    variant === "drawer"
+      ? getBackground(backgroundType, actualMode === "dark")
+      : null;
+  const isGradient =
+    paperBg &&
+    typeof paperBg === "string" &&
+    (paperBg.startsWith("linear-gradient") ||
+      paperBg.startsWith("radial-gradient") ||
+      paperBg.startsWith("conic-gradient"));
+
+  const borderRadius =
+    variant === "pops"
+      ? "16px"
+      : variant === "drawer"
+      ? "16px 0 0 16px"
+      : "8px";
+
+  // Handle PaperProps (MUI compatibility)
+  const paperPropsStyle = PaperProps?.style || {};
+  const paperPropsClassName = PaperProps?.className || "";
+
+  // Determine container alignment based on variant
+  const containerClass =
+    variant === "drawer"
+      ? "flex items-stretch justify-end"
+      : fullScreen
+      ? "flex items-stretch"
+      : "flex items-center justify-center";
+
+  // Get z-index from CSS variable or use default
+  const zIndex =
+    variant === "drawer"
+      ? parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            "--z-index-drawer"
+          ) || "1300",
+          10
+        )
+      : parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            "--z-index-modal"
+          ) || "1300",
+          10
+        );
+
+  // Render dialog content using Portal to body to avoid parent container constraints
+  const dialogContent = (
+    <>
+      {/* Backdrop - more opaque for better separation */}
+      <div
+        className={cn(
+          "fixed inset-0",
+          actualMode === "dark" ? "bg-black/80" : "bg-black/60"
+        )}
+        style={{
+          zIndex: zIndex - 1,
+          pointerEvents: "auto",
+        }}
+        onClick={(e) => {
+          if (onClose) onClose(e, "backdropClick");
+        }}
+      />
+      {/* Dialog content - fully opaque, above backdrop */}
+      <div
+        className={cn("fixed inset-0", containerClass)}
+        style={{
+          zIndex: zIndex,
+          pointerEvents: "none",
+        }}
+        {...props}
+      >
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={ariaLabelledBy || `${dialogId}-title`}
+          aria-describedby={ariaDescribedBy || `${dialogId}-description`}
+          className={cn(
+            "relative shadow-2xl",
+            fullScreen || variant === "drawer"
+              ? "h-full w-full"
+              : "w-full max-w-[calc(100%-32px)]",
+            fullScreen || variant === "drawer" ? "" : "mx-4",
+            !fullScreen && variant !== "drawer" && maxWidthClass,
+            fullWidth && !fullScreen && variant !== "drawer" && "max-w-full",
+            variant === "drawer" && !isGradient && "bg-background",
+            !isGradient && variant !== "drawer" && "bg-card",
+            paperPropsClassName
+          )}
+          style={{
+            // Use background for gradients, className for solid colors
+            ...(isGradient ? { background: paperBg } : {}),
+            borderRadius: fullScreen ? 0 : borderRadius,
+            position: "relative",
+            opacity: 1,
+            pointerEvents: "auto",
+            touchAction: "none",
+            ...popsStyles,
+            ...drawerStyles,
+            ...paperSxStyles,
+            ...paperPropsStyle,
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+
+  // Use Portal to render dialog to body, ensuring it's not constrained by parent containers
+  return typeof document !== "undefined"
+    ? createPortal(dialogContent, document.body)
+    : null;
+};
+
+const DialogContent = React.forwardRef(
+  ({ className, children, style, sx, ...props }, ref) => {
+    const actualMode = useIsDarkMode();
+    const backgroundType = useRecoilValue(backgroundTypeState);
+    const bgColor = getBackground(backgroundType, actualMode === "dark");
+    const isGradient =
+      bgColor &&
+      typeof bgColor === "string" &&
+      (bgColor.startsWith("linear-gradient") ||
+        bgColor.startsWith("radial-gradient") ||
+        bgColor.startsWith("conic-gradient"));
+
+    // Convert sx prop to style if provided, handling MUI spacing
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx; // Empty theme object for compatibility
+
+      // Convert MUI spacing properties to CSS
+      const converted = { ...sxObj };
+
+      // Padding shortcuts
+      if (converted.p !== undefined) {
+        converted.padding = spacingToPx(converted.p);
+        delete converted.p;
+      }
+      if (converted.px !== undefined) {
+        converted.paddingLeft = spacingToPx(converted.px);
+        converted.paddingRight = spacingToPx(converted.px);
+        delete converted.px;
+      }
+      if (converted.py !== undefined) {
+        converted.paddingTop = spacingToPx(converted.py);
+        converted.paddingBottom = spacingToPx(converted.py);
+        delete converted.py;
+      }
+      if (converted.pt !== undefined) {
+        converted.paddingTop = spacingToPx(converted.pt);
+        delete converted.pt;
+      }
+      if (converted.pb !== undefined) {
+        converted.paddingBottom = spacingToPx(converted.pb);
+        delete converted.pb;
+      }
+      if (converted.pl !== undefined) {
+        converted.paddingLeft = spacingToPx(converted.pl);
+        delete converted.pl;
+      }
+      if (converted.pr !== undefined) {
+        converted.paddingRight = spacingToPx(converted.pr);
+        delete converted.pr;
+      }
+
+      // Margin shortcuts
+      if (converted.m !== undefined) {
+        converted.margin = spacingToPx(converted.m);
+        delete converted.m;
+      }
+      if (converted.mx !== undefined) {
+        converted.marginLeft = spacingToPx(converted.mx);
+        converted.marginRight = spacingToPx(converted.mx);
+        delete converted.mx;
+      }
+      if (converted.my !== undefined) {
+        converted.marginTop = spacingToPx(converted.my);
+        converted.marginBottom = spacingToPx(converted.my);
+        delete converted.my;
+      }
+      if (converted.mt !== undefined) {
+        converted.marginTop = spacingToPx(converted.mt);
+        delete converted.mt;
+      }
+      if (converted.mb !== undefined) {
+        converted.marginBottom = spacingToPx(converted.mb);
+        delete converted.mb;
+      }
+      if (converted.ml !== undefined) {
+        converted.marginLeft = spacingToPx(converted.ml);
+        delete converted.ml;
+      }
+      if (converted.mr !== undefined) {
+        converted.marginRight = spacingToPx(converted.mr);
+        delete converted.mr;
+      }
+
+      // Gap
+      if (converted.gap !== undefined) {
+        converted.gap = spacingToPx(converted.gap);
+      }
+
+      return converted;
+    }, [sx]);
+
+    // Extract padding from style to allow override
+    const {
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      backgroundColor,
+      ...restStyle
+    } = style || {};
+
+    const hasPaddingInStyle =
+      padding !== undefined ||
+      paddingTop !== undefined ||
+      paddingBottom !== undefined ||
+      paddingLeft !== undefined ||
+      paddingRight !== undefined;
+
+    // Default padding class, but allow override
+    const defaultPaddingClass = hasPaddingInStyle ? "" : "p-6";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "text-left rounded-b-[inherit]",
+          defaultPaddingClass,
+          "p-6",
+          className
+        )}
+        style={{
+          // Only set background if explicitly provided, otherwise inherit from parent
+          ...(backgroundColor !== undefined
+            ? backgroundColor.startsWith("linear-gradient") ||
+              backgroundColor.startsWith("radial-gradient") ||
+              backgroundColor.startsWith("conic-gradient")
+              ? { background: backgroundColor }
+              : { backgroundColor }
+            : {}),
+          padding: padding,
+          paddingTop: paddingTop,
+          paddingBottom: paddingBottom,
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight,
+          opacity: 1,
+          pointerEvents: "auto",
+          ...sxStyles,
+          ...restStyle,
+        }}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+DialogContent.displayName = "DialogContent";
+
+const DialogHeader = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 pb-6",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef(
+  ({ className, style, sx, ...props }, ref) => {
+    const actualMode = useIsDarkMode();
+    const backgroundType = useRecoilValue(backgroundTypeState);
+    const bgColor = getBackground(backgroundType, actualMode === "dark");
+    const isGradient =
+      bgColor &&
+      typeof bgColor === "string" &&
+      (bgColor.startsWith("linear-gradient") ||
+        bgColor.startsWith("radial-gradient") ||
+        bgColor.startsWith("conic-gradient"));
+
+    // Convert sx prop to style if provided, handling MUI spacing
+    const sxStyles = React.useMemo(() => {
+      if (!sx) return {};
+      const sxObj = typeof sx === "function" ? sx({}) : sx; // Empty theme object for compatibility
+
+      // Convert MUI spacing properties to CSS
+      const converted = { ...sxObj };
+
+      // Padding shortcuts
+      if (converted.p !== undefined) {
+        converted.padding = spacingToPx(converted.p);
+        delete converted.p;
+      }
+      if (converted.px !== undefined) {
+        converted.paddingLeft = spacingToPx(converted.px);
+        converted.paddingRight = spacingToPx(converted.px);
+        delete converted.px;
+      }
+      if (converted.py !== undefined) {
+        converted.paddingTop = spacingToPx(converted.py);
+        converted.paddingBottom = spacingToPx(converted.py);
+        delete converted.py;
+      }
+      if (converted.pt !== undefined) {
+        converted.paddingTop = spacingToPx(converted.pt);
+        delete converted.pt;
+      }
+      if (converted.pb !== undefined) {
+        converted.paddingBottom = spacingToPx(converted.pb);
+        delete converted.pb;
+      }
+      if (converted.pl !== undefined) {
+        converted.paddingLeft = spacingToPx(converted.pl);
+        delete converted.pl;
+      }
+      if (converted.pr !== undefined) {
+        converted.paddingRight = spacingToPx(converted.pr);
+        delete converted.pr;
+      }
+
+      // Margin shortcuts
+      if (converted.m !== undefined) {
+        converted.margin = spacingToPx(converted.m);
+        delete converted.m;
+      }
+      if (converted.mx !== undefined) {
+        converted.marginLeft = spacingToPx(converted.mx);
+        converted.marginRight = spacingToPx(converted.mx);
+        delete converted.mx;
+      }
+      if (converted.my !== undefined) {
+        converted.marginTop = spacingToPx(converted.my);
+        converted.marginBottom = spacingToPx(converted.my);
+        delete converted.my;
+      }
+      if (converted.mt !== undefined) {
+        converted.marginTop = spacingToPx(converted.mt);
+        delete converted.mt;
+      }
+      if (converted.mb !== undefined) {
+        converted.marginBottom = spacingToPx(converted.mb);
+        delete converted.mb;
+      }
+      if (converted.ml !== undefined) {
+        converted.marginLeft = spacingToPx(converted.ml);
+        delete converted.ml;
+      }
+      if (converted.mr !== undefined) {
+        converted.marginRight = spacingToPx(converted.mr);
+        delete converted.mr;
+      }
+
+      // Gap
+      if (converted.gap !== undefined) {
+        converted.gap = spacingToPx(converted.gap);
+      }
+
+      return converted;
+    }, [sx]);
+
+    // Extract padding from style to allow override
+    const {
+      padding,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      backgroundColor,
+      ...restStyle
+    } = style || {};
+
+    // Check if padding is explicitly set (if padding is set, individual paddings should be undefined)
+    // If no padding is set at all, use defaults
+    const hasAnyPadding =
+      padding !== undefined ||
+      paddingTop !== undefined ||
+      paddingBottom !== undefined ||
+      paddingLeft !== undefined ||
+      paddingRight !== undefined;
+
+    return (
+      <h2
+        ref={ref}
+        className={cn(
+          "rounded-t-[inherit]",
+          "text-lg font-semibold leading-none tracking-tight",
+          "text-foreground",
+          // DialogTitle is typically used inside DialogHeader which has padding
+          // Only add padding if explicitly needed (when used standalone)
+          // For normal use, padding is handled by DialogHeader
+          className
+        )}
+        style={{
+          // Only set background if explicitly provided, otherwise inherit from parent
+          ...(backgroundColor !== undefined
+            ? backgroundColor.startsWith("linear-gradient") ||
+              backgroundColor.startsWith("radial-gradient") ||
+              backgroundColor.startsWith("conic-gradient")
+              ? { background: backgroundColor }
+              : { backgroundColor }
+            : {}),
+          // Allow padding override via style prop
+          padding: padding,
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight,
+          paddingTop: paddingTop,
+          paddingBottom: paddingBottom,
+          ...sxStyles,
+          ...restStyle,
+        }}
+        {...props}
+      />
+    );
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = React.forwardRef(
+  ({ className, id, ...props }, ref) => (
+    <p
+      ref={ref}
+      id={id}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+);
+DialogDescription.displayName = "DialogDescription";
+
+const DialogActions = ({ className, style, ...props }) => {
+  const actualMode = useIsDarkMode();
+
+  // Extract padding and gap from style to allow override
+  const {
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap,
+    backgroundColor,
+    ...restStyle
+  } = style || {};
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-end rounded-b-[inherit]",
+        className
+      )}
+      style={{
+        // Only set background if explicitly provided, otherwise inherit from parent
+        backgroundColor: backgroundColor,
+        // If padding is set, let it control all sides; otherwise use individual defaults
+        padding: padding,
+        paddingLeft:
+          paddingLeft !== undefined
+            ? paddingLeft
+            : padding !== undefined
+            ? undefined
+            : "1rem",
+        paddingRight:
+          paddingRight !== undefined
+            ? paddingRight
+            : padding !== undefined
+            ? undefined
+            : "1rem",
+        paddingTop:
+          paddingTop !== undefined
+            ? paddingTop
+            : padding !== undefined
+            ? undefined
+            : "0.5rem",
+        paddingBottom:
+          paddingBottom !== undefined
+            ? paddingBottom
+            : padding !== undefined
+            ? undefined
+            : "1rem",
+        gap: gap !== undefined ? gap : "0.5rem",
+        opacity: 1,
+        ...restStyle,
+      }}
+      {...props}
+    />
+  );
+};
+DialogActions.displayName = "DialogActions";
+
+export {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogActions,
+};