@sproutsocial/seeds-react-modal 1.1.1 → 2.0.1

package/src/v2/MotionConfig.ts

@@ -0,0 +1,185 @@
+import type { Variants } from "motion/react";
+import { MOBILE_BREAKPOINT } from "../shared/constants";
+
+const DURATION_MOBILE: number = 0.6;
+const DURATION_DESKTOP: number = 0.3;
+
+const desktopTransition = {
+  duration: DURATION_DESKTOP,
+  ease: "easeInOut" as const,
+};
+
+const mobileTransition = {
+  duration: DURATION_MOBILE,
+  ease: "easeInOut" as const,
+};
+
+/**
+ * Animation variants for desktop modal (content and overlay).
+ * Content: Fade in with subtle scale effect for a polished entrance.
+ * Overlay: Simple fade to match content timing.
+ * IMPORTANT: Content includes translate(-50%, -50%) to center the modal since
+ * CSS transform is removed to prevent conflicts with Motion.
+ */
+export const desktopModalVariants: Variants = {
+  initial: {
+    opacity: 0,
+    scale: 0.95,
+    x: "-50%",
+    y: "-50%",
+    transition: desktopTransition,
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    x: "-50%",
+    y: "-50%",
+    transition: desktopTransition,
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    x: "-50%",
+    y: "-50%",
+    transition: desktopTransition,
+  },
+};
+
+/**
+ * Animation variants for desktop overlay.
+ * Matches desktop modal transition timing.
+ */
+export const desktopOverlayVariants: Variants = {
+  initial: {
+    opacity: 0,
+    transition: desktopTransition,
+  },
+  animate: {
+    opacity: 1,
+    transition: desktopTransition,
+  },
+  exit: {
+    opacity: 0,
+    transition: desktopTransition,
+  },
+};
+
+/**
+ * Animation variants for mobile drawer (content).
+ * Slides up from bottom with fade for a native-feeling drawer interaction.
+ * Includes horizontal centering (translateX(-50%)) for proper positioning.
+ */
+export const mobileDrawerVariants: Variants = {
+  initial: {
+    opacity: 0,
+    x: "-50%",
+    y: "100%",
+    transition: mobileTransition,
+  },
+  animate: {
+    opacity: 1,
+    x: "-50%",
+    y: 0,
+    transition: mobileTransition,
+  },
+  exit: {
+    opacity: 0,
+    x: "-50%",
+    y: "100%",
+    transition: mobileTransition,
+  },
+};
+
+/**
+ * Animation variants for mobile overlay.
+ * Matches mobile drawer transition timing.
+ */
+export const mobileOverlayVariants: Variants = {
+  initial: {
+    opacity: 0,
+    transition: mobileTransition,
+  },
+  animate: {
+    opacity: 1,
+    transition: mobileTransition,
+  },
+  exit: {
+    opacity: 0,
+    transition: mobileTransition,
+  },
+};
+
+/**
+ * Animation variants for draggable modals.
+ * Only animates opacity, not transforms, since dragging handles positioning.
+ * Uses desktop timing since draggable modals are desktop-only.
+ * NOTE: Centering transforms are handled in StyledContent to work with drag positioning.
+ */
+export const draggableModalVariants: Variants = {
+  initial: {
+    opacity: 0,
+    transition: desktopTransition,
+  },
+  animate: {
+    opacity: 1,
+    transition: desktopTransition,
+  },
+  exit: {
+    opacity: 0,
+    transition: desktopTransition,
+  },
+};
+
+/**
+ * Get the appropriate content variants based on context.
+ */
+export function getContentVariants(
+  isMobile: boolean,
+  isDraggable: boolean
+): Variants {
+  if (isDraggable) {
+    return draggableModalVariants;
+  }
+  return isMobile ? mobileDrawerVariants : desktopModalVariants;
+}
+
+/**
+ * Get the appropriate overlay variants based on context.
+ */
+export function getOverlayVariants(isMobile: boolean): Variants {
+  return isMobile ? mobileOverlayVariants : desktopOverlayVariants;
+}
+
+/**
+ * Hook to detect mobile viewport based on MOBILE_BREAKPOINT (780px).
+ * Returns true if viewport is at or below the mobile breakpoint.
+ */
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;
+  });
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }
+    // Fallback for older browsers
+    else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handler);
+      return () => mediaQuery.removeListener(handler);
+    }
+  }, []);
+
+  return isMobile;
+}
+
+// Need to import React for the hook
+import * as React from "react";

package/src/v2/components/ModalAction.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import styled from "styled-components";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import type { TypeModalActionProps } from "../ModalTypes";
+import { RAIL_BUTTON_SIZE } from "../../shared/constants";
+
+/**
+ * Action button component for the modal's floating rail.
+ *
+ * These buttons appear in the vertical rail next to the modal (horizontal on mobile)
+ * and provide quick access to common actions. Supports two action types:
+ * - "close": Automatically closes the modal when clicked
+ * - "button" (default): Custom action with your own onClick handler
+ *
+ * @example
+ * // Close button (built-in functionality)
+ * <ModalAction
+ *   actionType="close"
+ *   aria-label="Close"
+ *   iconName="x-outline"
+ * />
+ *
+ * @example
+ * // Custom action button
+ * <ModalAction
+ *   aria-label="Expand to fullscreen"
+ *   iconName="arrows-pointing-out"
+ *   onClick={() => console.log('expand')}
+ * />
+ */
+const RailButton = styled.button`
+  width: ${RAIL_BUTTON_SIZE}px;
+  height: ${(props) => props.theme.space[500]};
+  display: inline-grid;
+  place-items: center;
+  border-radius: ${(props) => props.theme.radii.outer};
+  border: none;
+  background: ${(props) => props.theme.colors.button.overlay.background.base};
+  color: ${(props) => props.theme.colors.button.overlay.text.base};
+  cursor: pointer;
+  outline: none;
+  transition: all ${(props) => props.theme.duration.fast}
+    ${(props) => props.theme.easing.ease_inout};
+
+  &:hover {
+    background: ${(props) =>
+      props.theme.colors.button.overlay.background.hover};
+  }
+
+  &:hover,
+  &:active {
+    transform: none;
+  }
+
+  &:focus-visible {
+    ${focusRing}
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const ModalAction: React.FC<TypeModalActionProps> = ({
+  "aria-label": ariaLabel,
+  iconName,
+  disabled,
+  actionType,
+  onClick,
+  ...rest
+}) => {
+  const button = (
+    <RailButton
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      disabled={disabled}
+      onClick={onClick}
+      {...rest}
+    >
+      {iconName && <Icon name={iconName} size="small" aria-label={ariaLabel} />}
+    </RailButton>
+  );
+
+  if (actionType === "close") {
+    return <Dialog.Close asChild>{button}</Dialog.Close>;
+  }
+
+  return button;
+};
+
+ModalAction.displayName = "ModalAction";

package/src/v2/components/ModalBody.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import {
+  COMMON,
+  FLEXBOX,
+  BORDER,
+  LAYOUT,
+} from "@sproutsocial/seeds-react-system-props";
+import type { TypeModalBodyProps } from "../ModalTypes";
+
+/**
+ * Modal body component for the main content area.
+ *
+ * This component provides the scrollable content area of the modal with proper spacing
+ * and overflow handling. It automatically takes up available space between the header
+ * and footer, with vertical scrolling enabled when content exceeds available height.
+ *
+ * @example
+ * <ModalBody>
+ *   <Text>Your modal content goes here.</Text>
+ *   <FormField label="Name" />
+ * </ModalBody>
+ */
+const StyledModalBody = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: ${(props) => `0 ${props.theme.space[400]}`};
+  ${(props) => props.theme.typography[300]}
+  color: ${(props) => props.theme.colors.text.body};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    flex-basis: 100%;
+  }
+
+  ${COMMON}
+  ${FLEXBOX}
+  ${BORDER}
+  ${LAYOUT}
+`;
+
+StyledModalBody.displayName = "ModalBody";
+
+export const ModalBody = React.forwardRef<HTMLDivElement, TypeModalBodyProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <StyledModalBody data-qa-modal-body ref={ref} {...rest}>
+        {children}
+      </StyledModalBody>
+    );
+  }
+);
+
+ModalBody.displayName = "ModalBody";

package/src/v2/components/ModalCloseWrapper.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+
+/**
+ * Props for ModalCloseWrapper component.
+ */
+export interface ModalCloseWrapperProps {
+  /** The element to wrap with close functionality */
+  children: React.ReactNode;
+  /** Optional click handler called before closing the modal */
+  onClick?: (e: React.MouseEvent) => void;
+  /** Whether to merge props into the child element (default: true) */
+  asChild?: boolean;
+}
+
+/**
+ * A wrapper component that closes the modal when its child is clicked.
+ * Uses asChild pattern like Radix primitives - by default asChild is true.
+ */
+export const ModalCloseWrapper = (props: ModalCloseWrapperProps) => {
+  const { children, onClick, asChild = true, ...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>
+  );
+};
+
+ModalCloseWrapper.displayName = "ModalCloseWrapper";

package/src/v2/components/ModalContent.tsx

@@ -1,16 +1,293 @@
 import * as React from "react";
-import { Content } from "../ModalV2Styles";
-import type { TypeModalV2ContentProps } from "../ModalV2Types";
+import * as Dialog from "@radix-ui/react-dialog";
+import { motion } from "motion/react";
+import styled from "styled-components";
+import {
+  BODY_PADDING,
+  DEFAULT_MODAL_WIDTH,
+  MOBILE_BREAKPOINT,
+  RAIL_EXTRA_SPACE,
+  RAIL_BUTTON_SIZE,
+  RAIL_OFFSET,
+} from "../../shared/constants";
+import {
+  COMMON,
+  FLEXBOX,
+  BORDER,
+  LAYOUT,
+  type TypeSystemCommonProps,
+  type TypeSystemBorderProps,
+  type TypeSystemLayoutProps,
+  type TypeSystemFlexboxProps,
+} from "@sproutsocial/seeds-react-system-props";
+import { getContentVariants, useIsMobile } from "../MotionConfig";
+
+interface StyledContentProps
+  extends TypeSystemCommonProps,
+    TypeSystemFlexboxProps,
+    TypeSystemBorderProps,
+    TypeSystemLayoutProps {
+  isDragging?: boolean;
+  draggable?: boolean;
+}
+
+// Styled motion.div wrapper that handles positioning
+const StyledMotionWrapper = styled(motion.div)`
+  position: fixed;
+  top: ${(props: { $isMobile: boolean }) => (props.$isMobile ? "auto" : "50%")};
+  left: 50%;
+  bottom: ${(props: { $isMobile: boolean }) => (props.$isMobile ? 0 : "auto")};
+`;
+
+export const StyledContent = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["isDragging", "draggable"].includes(prop),
+})<StyledContentProps>`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${(props) => props.theme.radii[800]};
+  box-shadow: ${(props) => props.theme.shadows.high};
+  filter: blur(0);
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  color: ${(props) => props.theme.colors.text.body};
+  outline: none;
+  width: ${DEFAULT_MODAL_WIDTH};
+  max-width: ${(props) => {
+    // Account for rail space when positioned on the side (viewport > ${MOBILE_BREAKPOINT})
+    // At viewport <= ${MOBILE_BREAKPOINT}, rail is above modal, so no horizontal space needed
+    return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;
+  }};
+  max-height: calc(100vh - ${BODY_PADDING});
+
+  /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */
+  @media (max-width: ${MOBILE_BREAKPOINT}) {
+    /* Full viewport width - edge to edge */
+    width: 100vw;
+    max-width: 100vw;
+    min-width: 100vw;
+
+    /* Height hugs content, with increased max-height to get closer to top */
+    /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */
+    height: auto;
+    max-height: calc(95vh - 84px);
+
+    /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */
+    border-top-left-radius: ${(props) => props.theme.radii[800]};
+    border-top-right-radius: ${(props) => props.theme.radii[800]};
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    /* Mobile shadow - appears to cast upward (high-reverse) */
+    box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);
+  }
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: calc(100vh - ${BODY_PADDING});
+  }
+
+  ${COMMON}
+  ${FLEXBOX}
+  ${BORDER}
+  ${LAYOUT}
+`;
+
+StyledContent.displayName = "ModalContent";
+
+// Context to share drag state between modal content and header
+interface DragContextValue {
+  position: { x: number; y: number };
+  isDragging: boolean;
+  onHeaderMouseDown: (e: React.MouseEvent) => void;
+  contentRef: React.RefObject<HTMLDivElement>;
+  draggable: boolean;
+}
+
+export const DragContext = React.createContext<DragContextValue | null>(null);
+
+export const useDragContext = () => {
+  const context = React.useContext(DragContext);
+  return context;
+};
+
+interface ModalContentProps {
+  children: React.ReactNode;
+  label?: string;
+  dataAttributes: Record<string, string>;
+  draggable?: boolean;
+  rest: any;
+}
+
+/**
+ * Static modal content component for non-draggable modals.
+ * This is a lightweight version that doesn't include any drag logic.
+ */
+export const StaticModalContent: React.FC<ModalContentProps> = ({
+  children,
+  label,
+  dataAttributes,
+  rest,
+}) => {
+  const isMobile = useIsMobile();
+  const contentVariants = getContentVariants(isMobile, false);
 
-export const ModalContent = React.forwardRef<
-  HTMLDivElement,
-  TypeModalV2ContentProps
->(({ children, ...rest }, ref) => {
   return (
-    <Content data-qa-modal ref={ref} {...rest}>
-      {children}
-    </Content>
+    <DragContext.Provider value={null}>
+      <Dialog.Content asChild aria-label={label}>
+        <StyledMotionWrapper
+          $isMobile={isMobile}
+          variants={contentVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+        >
+          <StyledContent draggable={false} {...dataAttributes} {...rest}>
+            {children}
+          </StyledContent>
+        </StyledMotionWrapper>
+      </Dialog.Content>
+    </DragContext.Provider>
   );
-});
+};
+
+/**
+ * Draggable modal content component with full drag-and-drop functionality.
+ * Only rendered when draggable={true} to avoid unnecessary overhead.
+ */
+export const DraggableModalContent: React.FC<ModalContentProps> = ({
+  children,
+  label,
+  dataAttributes,
+  rest,
+}) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const isMobile = useIsMobile();
+
+  const handleHeaderMouseDown = React.useCallback((e: React.MouseEvent) => {
+    // Only allow dragging from header (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;
 
-ModalContent.displayName = "ModalContent";
+    // 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;
+
+      // Determine if rail is on the side (viewport > 780px) or above (viewport <= 780px)
+      const isRailOnSide = window.innerWidth > 780;
+
+      // Constrain to viewport bounds (keeping modal AND rail fully visible)
+      const modalWidth = rect.width;
+      const modalHeight = rect.height;
+
+      // Adjust boundaries to account for rail position
+      let maxX = window.innerWidth - modalWidth;
+      let minX = 0;
+      let maxY = window.innerHeight - modalHeight;
+      let minY = 0;
+
+      if (isRailOnSide) {
+        // Rail is positioned on the right side of the modal
+        // Reduce maxX to prevent rail from going off-screen
+        maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;
+      } else {
+        // Rail is positioned above the modal (viewport <= 780px)
+        // Account for rail height + offset at the top
+        minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;
+      }
+
+      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);
+  }, []);
+
+  const dragContextValue = React.useMemo<DragContextValue>(
+    () => ({
+      position,
+      isDragging,
+      onHeaderMouseDown: handleHeaderMouseDown,
+      contentRef,
+      draggable: true,
+    }),
+    [position, isDragging, handleHeaderMouseDown]
+  );
+
+  // Prevent modal from closing on outside interaction when draggable
+  const handleInteractOutside = React.useCallback((e: Event) => {
+    e.preventDefault();
+  }, []);
+
+  // Get appropriate animation variants based on context
+  const contentVariants = getContentVariants(isMobile, true);
+
+  return (
+    <DragContext.Provider value={dragContextValue}>
+      <Dialog.Content
+        asChild
+        aria-label={label}
+        onInteractOutside={handleInteractOutside}
+      >
+        <StyledMotionWrapper
+          $isMobile={isMobile}
+          variants={contentVariants}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          style={{
+            // Apply drag offset transforms
+            // For draggable modals, variants only handle opacity, so we apply transforms here
+            // Combined with top: 50%, left: 50%, these create the centering + drag offset
+            x: `calc(-50% + ${position.x}px)`,
+            y: `calc(-50% + ${position.y}px)`,
+          }}
+        >
+          <StyledContent
+            ref={contentRef}
+            draggable={true}
+            isDragging={isDragging}
+            {...dataAttributes}
+            {...rest}
+          >
+            {children}
+          </StyledContent>
+        </StyledMotionWrapper>
+      </Dialog.Content>
+    </DragContext.Provider>
+  );
+};

package/src/v2/components/ModalDescription.tsx

@@ -1,11 +1,23 @@
 import * as React from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import Box from "@sproutsocial/seeds-react-box";
-import type { TypeModalV2DescriptionProps } from "../ModalV2Types";
+import type { TypeModalDescriptionProps } from "../ModalTypes";
 
+/**
+ * Modal description component that wraps content with accessible Dialog.Description.
+ *
+ * This component automatically connects description text to the modal dialog via ARIA attributes,
+ * ensuring screen readers announce the description when the modal opens. Use this for additional
+ * context beyond the title that helps users understand the modal's purpose.
+ *
+ * @example
+ * <ModalDescription>
+ *   Deleting this item will permanently remove it from your account.
+ * </ModalDescription>
+ */
 export const ModalDescription = React.forwardRef<
   HTMLDivElement,
-  TypeModalV2DescriptionProps
+  TypeModalDescriptionProps
 >(({ children, descriptionProps = {}, ...rest }, ref) => {
   return (
     <Dialog.Description asChild {...descriptionProps}>