@sproutsocial/seeds-react-modal 1.0.2 → 1.0.3

package/src/v2/ModalV2.tsx

@@ -0,0 +1,306 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { StyledOverlay, StyledContent } from "./ModalV2Styles";
+import {
+  ModalHeader,
+  ModalDescription,
+  ModalTrigger,
+  ModalRail,
+  ModalAction,
+} from "./components";
+import {
+  DEFAULT_MODAL_WIDTH,
+  DEFAULT_MODAL_BG,
+  DEFAULT_MODAL_Z_INDEX,
+  MODAL_SIZE_PRESETS,
+  MODAL_PRIORITY_Z_INDEX,
+} from "../shared/constants";
+import type { TypeModalV2Props } from "./ModalV2Types";
+
+interface DraggableModalContentProps {
+  children: React.ReactNode;
+  computedWidth: any;
+  bg: any;
+  computedZIndex: number;
+  label?: string;
+  dataAttributes: Record<string, string>;
+  draggable?: boolean;
+  rest: any;
+}
+
+const DraggableModalContent: React.FC<DraggableModalContentProps> = ({
+  children,
+  computedWidth,
+  bg,
+  computedZIndex,
+  label,
+  dataAttributes,
+  draggable,
+  rest,
+}) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  const handleMouseDown = React.useCallback(
+    (e: React.MouseEvent) => {
+      if (!draggable) return;
+
+      // Only allow dragging from certain areas (not interactive elements)
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "BUTTON" ||
+        target.tagName === "INPUT" ||
+        target.closest("button")
+      ) {
+        return;
+      }
+
+      e.preventDefault();
+      setIsDragging(true);
+
+      const rect = contentRef.current?.getBoundingClientRect();
+      if (!rect) return;
+
+      // Calculate offset from mouse to current modal position
+      const offsetX = e.clientX - rect.left;
+      const offsetY = e.clientY - rect.top;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        e.preventDefault();
+
+        // Calculate new position based on mouse position minus offset
+        const newX = e.clientX - offsetX;
+        const newY = e.clientY - offsetY;
+
+        // Constrain to viewport bounds (keeping modal fully visible)
+        const modalWidth = rect.width;
+        const modalHeight = rect.height;
+        const maxX = window.innerWidth - modalWidth;
+        const minX = 0;
+        const maxY = window.innerHeight - modalHeight;
+        const minY = 0;
+
+        const constrainedX = Math.max(minX, Math.min(maxX, newX));
+        const constrainedY = Math.max(minY, Math.min(maxY, newY));
+
+        // Convert to offset from center for our transform
+        const centerX = window.innerWidth / 2 - modalWidth / 2;
+        const centerY = window.innerHeight / 2 - modalHeight / 2;
+
+        setPosition({
+          x: constrainedX - centerX,
+          y: constrainedY - centerY,
+        });
+      };
+
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [draggable]
+  );
+
+  return (
+    <StyledContent
+      ref={contentRef}
+      width={computedWidth}
+      bg={bg}
+      zIndex={computedZIndex}
+      aria-label={label}
+      draggable={draggable}
+      isDragging={isDragging}
+      onMouseDown={handleMouseDown}
+      style={
+        draggable
+          ? {
+              transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
+              transition: isDragging ? "none" : undefined,
+            }
+          : undefined
+      }
+      {...dataAttributes}
+      {...rest}
+    >
+      {children}
+    </StyledContent>
+  );
+};
+
+/**
+ * The modal you want - with Radix UI Dialog
+ *
+ * Features:
+ * - Built with Radix UI Dialog for superior accessibility
+ * - Same API as the original Modal component
+ * - Automatic focus management and keyboard navigation
+ * - Portal rendering for proper z-index layering
+ * - Customizable styling through system props
+ * - Optional draggable functionality using react-dnd
+ */
+const Modal = (props: TypeModalV2Props) => {
+  const {
+    children,
+    modalTrigger,
+    draggable = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    "aria-label": label,
+    title,
+    subtitle,
+    description,
+    size,
+    priority,
+    data = {},
+    bg = DEFAULT_MODAL_BG,
+    showOverlay = true,
+    actions,
+    railProps,
+    ...rest
+  } = props;
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      onOpenChange?.(newOpen);
+    },
+    [onOpenChange]
+  );
+
+  // Compute actual width
+  const computedWidth = React.useMemo(() => {
+    if (size) {
+      // Handle preset sizes
+      if (typeof size === "string" && size in MODAL_SIZE_PRESETS) {
+        return MODAL_SIZE_PRESETS[size as keyof typeof MODAL_SIZE_PRESETS];
+      }
+      // Handle custom size values
+      return size;
+    }
+    // Fall back to default width
+    return DEFAULT_MODAL_WIDTH;
+  }, [size]);
+
+  // Compute actual z-index
+  const computedZIndex = React.useMemo(() => {
+    if (priority) {
+      return MODAL_PRIORITY_Z_INDEX[priority];
+    }
+    return DEFAULT_MODAL_Z_INDEX;
+  }, [priority]);
+
+  // Create data attributes object
+  const dataAttributes = React.useMemo(() => {
+    const attrs: Record<string, string> = {};
+    Object.entries(data).forEach(([key, value]) => {
+      attrs[`data-${key}`] = String(value);
+    });
+    attrs["data-qa-modal"] = "";
+    // Only add open attribute if in controlled mode
+    if (open !== undefined) {
+      attrs["data-qa-modal-open"] = String(open);
+    }
+    return attrs;
+  }, [data, open]);
+
+  // Determine if we should auto-render the header from provided props
+  const shouldRenderHeader = Boolean(title || subtitle);
+
+  // Build Dialog.Root props conditionally
+  const dialogRootProps = React.useMemo(() => {
+    const props: any = {};
+
+    // If controlled (open prop provided), use it
+    if (open !== undefined) {
+      props.open = open;
+    }
+    // If uncontrolled with explicit defaultOpen, use it
+    else if (defaultOpen !== undefined) {
+      props.defaultOpen = defaultOpen;
+    }
+    // If completely uncontrolled (neither open nor defaultOpen provided), default to closed
+    else {
+      props.defaultOpen = false;
+    }
+
+    // Always add onOpenChange if provided
+    if (onOpenChange) {
+      props.onOpenChange = handleOpenChange;
+    }
+
+    return props;
+  }, [open, defaultOpen, handleOpenChange, onOpenChange]);
+
+  // Handle trigger - use modalTrigger prop if provided, otherwise look for ModalTrigger children (backward compatibility)
+  const triggers: React.ReactNode[] = [];
+  const content: React.ReactNode[] = [];
+
+  if (modalTrigger) {
+    // New prop-based approach: wrap the provided element with Dialog.Trigger
+    triggers.push(
+      <Dialog.Trigger key="modal-trigger" asChild>
+        {modalTrigger}
+      </Dialog.Trigger>
+    );
+    // All children are content
+    content.push(children);
+  } else {
+    // Legacy approach: separate ModalTrigger children from content children
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child) && child.type === ModalTrigger) {
+        triggers.push(child);
+      } else {
+        content.push(child);
+      }
+    });
+  }
+
+  return (
+    <Dialog.Root {...dialogRootProps}>
+      {/* Render triggers as direct children of Dialog.Root */}
+      {triggers}
+
+      <Dialog.Portal>
+        {showOverlay && <StyledOverlay zIndex={computedZIndex} />}
+        <DraggableModalContent
+          computedWidth={computedWidth}
+          bg={bg}
+          computedZIndex={computedZIndex}
+          label={label}
+          dataAttributes={dataAttributes}
+          draggable={draggable}
+          rest={rest}
+        >
+          {/* Floating actions rail - always show a close by default */}
+          <ModalRail {...railProps}>
+            <ModalAction
+              actionType="close"
+              aria-label="Close"
+              iconName="x-outline"
+            />
+            {actions?.map((action, idx) => (
+              <ModalAction key={idx} {...action} />
+            ))}
+          </ModalRail>
+          {/* Auto-render header when title or subtitle is provided */}
+          {shouldRenderHeader && (
+            <ModalHeader title={title} subtitle={subtitle} />
+          )}
+
+          {/* Auto-render description when provided */}
+          {description && <ModalDescription>{description}</ModalDescription>}
+
+          {/* Main content (everything except triggers) */}
+          {content}
+        </DraggableModalContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default Modal;

package/src/v2/ModalV2Styles.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import styled from "styled-components";
+import { width, zIndex } from "styled-system";
+import * as Dialog from "@radix-ui/react-dialog";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import Box, { type TypeContainerProps } from "@sproutsocial/seeds-react-box";
+import {
+  BODY_PADDING,
+  DEFAULT_OVERLAY_Z_INDEX_OFFSET,
+} from "../shared/constants";
+
+interface StyledOverlayProps extends TypeContainerProps {
+  zIndex?: number;
+}
+
+export const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: ${(props) => props.theme.colors.overlay.background.base};
+  opacity: 0;
+  will-change: opacity;
+  transition: opacity ${(props) => props.theme.duration.medium}
+    ${(props) => props.theme.easing.ease_inout};
+  z-index: ${(props) =>
+    props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};
+
+  ${zIndex}
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+  }
+`;
+
+interface StyledContentProps extends TypeContainerProps {
+  zIndex?: number;
+  isDragging?: boolean;
+  draggable?: boolean;
+}
+
+export const StyledContent = styled(Dialog.Content)<StyledContentProps>`
+  position: fixed;
+  ${(props) =>
+    props.draggable
+      ? `
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      `
+      : `
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      `}
+  display: flex;
+  flex-direction: column;
+  border-radius: ${(props) => props.theme.radii[600]};
+  box-shadow: ${(props) => props.theme.shadows.medium};
+  filter: blur(0);
+  color: ${(props) => props.theme.colors.text.body};
+  outline: none;
+  max-width: calc(100vw - ${BODY_PADDING});
+  max-height: calc(100vh - ${BODY_PADDING});
+  z-index: ${(props) => props.zIndex || 1000};
+
+  /* Draggable styling */
+  ${(props) =>
+    props.draggable &&
+    `
+    cursor: ${props.isDragging ? "grabbing" : "grab"};
+    user-select: none;
+  `}
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: calc(100vh - ${BODY_PADDING});
+  }
+
+  ${width}
+  ${COMMON}
+
+  /* Enhanced Radix Dialog animations */
+  opacity: 0;
+  ${(props) =>
+    !props.draggable
+      ? `
+    transform: translate(-50%, -50%) scale(0.95);
+    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},
+      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
+  `
+      : `
+    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
+  `}
+
+  &[data-state="open"] {
+    opacity: 1;
+    ${(props) =>
+      !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+    ${(props) =>
+      !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}
+  }
+`;
+
+export const Content = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  min-height: 80px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 ${(props) => props.theme.space[300]}
+    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    flex-basis: 100%;
+  }
+`;
+
+export const Header = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[300]};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+`;
+
+export const Footer = styled(Box)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[300]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
+`;
+
+StyledOverlay.displayName = "ModalOverlay";
+StyledContent.displayName = "ModalContent";
+Content.displayName = "ModalContent";
+Header.displayName = "ModalHeader";
+Footer.displayName = "ModalFooter";

package/src/v2/ModalV2Types.ts

@@ -0,0 +1,158 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import type {
+  TypeBoxProps,
+  TypeContainerProps,
+} from "@sproutsocial/seeds-react-box";
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+import type { TypeIconName } from "@sproutsocial/seeds-react-icon";
+
+export interface TypeModalV2TriggerProps extends TypeButtonProps {
+  /** The content to display inside the trigger button */
+  children: React.ReactNode;
+  /** Custom click handler - will be called before the modal opens */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Use asChild to render a custom trigger element */
+  asChild?: boolean;
+}
+
+export interface TypeModalV2CloseButtonProps
+  extends Omit<TypeButtonProps, "children" | "size"> {
+  children?: React.ReactNode;
+  /** Custom click handler - will be called before the modal closes */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Use asChild to render a custom close element */
+  asChild?: boolean;
+  /** aria-label for modal close button */
+  closeButtonLabel?: string;
+  /** Size of the close button in pixels */
+  size?: number;
+  /** Position type - absolute (outside modal) or relative (inside modal) */
+  position?: "absolute" | "relative";
+  /** Which side to position the button on (for absolute positioning) */
+  side?: "right" | "left";
+  /** Offset from the modal edge in pixels (for absolute positioning) */
+  offset?: number;
+}
+
+export interface TypeModalV2HeaderProps extends TypeBoxProps {
+  title?: string;
+  subtitle?: string;
+
+  /** Passing children will override the default modal header */
+  children?: React.ReactNode;
+
+  /** If you're rendering a custom header, you can use this prop to add a bottom border */
+  bordered?: boolean;
+
+  /** Additional props for the Dialog.Title when title is provided */
+  titleProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof Dialog.Title>,
+    "asChild" | "children"
+  >;
+
+  /** Additional props for the Dialog.Description when subtitle is provided */
+  subtitleProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof Dialog.Description>,
+    "asChild" | "children"
+  >;
+
+  /** Opt-in inline close inside header; default is floating rail */
+  showInlineClose?: boolean;
+}
+
+export interface TypeModalV2FooterProps extends TypeBoxProps {
+  bg?: string;
+  children: React.ReactNode;
+}
+
+export interface TypeModalV2ContentProps extends TypeBoxProps {
+  children?: React.ReactNode;
+}
+
+export interface TypeModalV2DescriptionProps extends TypeBoxProps {
+  children: React.ReactNode;
+  /** Additional props for the Dialog.Description */
+  descriptionProps?: Omit<
+    React.ComponentPropsWithoutRef<typeof Dialog.Description>,
+    "asChild" | "children"
+  >;
+}
+
+export interface TypeModalV2Props
+  extends TypeContainerProps,
+    Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> {
+  /** Controls whether the modal is open (controlled mode) */
+  open?: boolean;
+
+  /** Default open state for uncontrolled mode */
+  defaultOpen?: boolean;
+
+  /** body content of the modal */
+  children: React.ReactNode;
+
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+
+  /** The element that will trigger the modal when clicked.
+   *  Can be any React element like a button, link, or custom component. */
+  modalTrigger?: React.ReactElement<any>;
+
+  /** Enable draggable functionality using react-dnd */
+  draggable?: boolean;
+
+  /** Simplified API: Modal title (creates ModalHeader automatically) */
+  title?: string;
+
+  /** Simplified API: Modal subtitle (creates ModalHeader automatically) */
+  subtitle?: string;
+
+  /** Simplified API: Modal description (automatically wrapped in Dialog.Description) */
+  description?: string;
+
+  /** Modal size preset or custom width */
+  size?: "small" | "medium" | "large" | "full" | string | number;
+
+  /** Priority level that maps to z-index presets */
+  priority?: "low" | "medium" | "high";
+
+  /**
+   * Custom attributes to be added to the modals container
+   * Each key will be prepended with "data-" when rendered in the DOM
+   */
+  data?: Record<string, string | boolean | number>;
+
+  /** Whether to show the background overlay (defaults to true) */
+  showOverlay?: boolean;
+
+  /** Optional quick actions to render on a modal side rail */
+  actions?: TypeModalActionProps[];
+
+  /** Optional props to customize the side rail position/size */
+  railProps?: Partial<TypeModalRailProps>;
+}
+
+export type TypeModalRailProps = {
+  side?: "right" | "left"; // default: "right"
+  offset?: number; // px from card edge; default: 12
+  gap?: number; // space between buttons; default: 12
+  size?: number; // button square size; default: 44
+  collapseAt?: number; // px viewport width to pull rail inside; default: 640
+  children?: React.ReactNode;
+};
+
+type ModalActionBase = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "onClick"
+> & {
+  /** Icon name from the Seeds icon set */
+  iconName?: TypeIconName;
+  /** Optional click handler; ignored for type "close" */
+  onClick?: () => void;
+  /** Accessible name for the action button */
+  "aria-label": string;
+};
+
+export type TypeModalActionProps =
+  | (ModalActionBase & { actionType: "close" }) // uses Dialog.Close
+  | (ModalActionBase & { actionType?: "button" }); // regular button action

package/src/v2/components/ModalClose.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+
+export interface ModalCloseProps {
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent) => void;
+  asChild?: boolean;
+}
+
+/**
+ * A component that closes the modal when clicked.
+ * Uses asChild pattern like Radix primitives.
+ */
+export const ModalClose = (props: ModalCloseProps) => {
+  const { children, onClick, asChild = false, ...rest } = props;
+
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.(e);
+    // Dialog.Close automatically handles closing
+  };
+
+  return (
+    <Dialog.Close asChild={asChild} onClick={handleClick} {...rest}>
+      {children}
+    </Dialog.Close>
+  );
+};
+
+ModalClose.displayName = "ModalClose";