@sproutsocial/seeds-react-modal 1.0.5 → 1.1.0

package/src/v2/ModalV2.stories.tsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
-import { Text } from "@sproutsocial/seeds-react-text";
+import Text from "@sproutsocial/seeds-react-text";
+import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { Modal, ModalHeader, ModalFooter, ModalContent, ModalClose } from "./";
 
 const meta: Meta<typeof Modal> = {
@@ -280,3 +281,273 @@ export const ControlledState: Story = {
     );
   },
 };
+
+export const DraggableWithFormInteraction: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      firstName: "",
+      lastName: "",
+      email: "",
+      company: "",
+    });
+
+    const [submittedData, setSubmittedData] = useState<typeof formData | null>(
+      null
+    );
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      setSubmittedData(formData);
+    };
+
+    const handleInputChange = (field: keyof typeof formData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
+    return (
+      <Box p={500}>
+        <Box mb={400}>
+          <Text fontSize={500} fontWeight="bold">
+            Test Draggable Modal with Form Interaction
+          </Text>
+          <Text fontSize={200} color="text.subtle" mt={200}>
+            Open the draggable modal, move it to the side, then try interacting
+            with the form below. You should be able to fill out the form while
+            the modal is open and moved aside.
+          </Text>
+        </Box>
+
+        <Box
+          p={500}
+          bg="neutral.100"
+          borderRadius="8px"
+          border="2px solid"
+          borderColor="neutral.400"
+        >
+          <Text fontSize={400} fontWeight="bold" mb={300}>
+            Contact Form
+          </Text>
+          <form onSubmit={handleSubmit}>
+            <Box display="flex" flexDirection="column" gap={300}>
+              <FormField
+                label="First Name"
+                error={null}
+                helperText={null}
+                id=""
+                qa={{}}
+                required={false}
+              >
+                {(props) => (
+                  <input
+                    {...props}
+                    type="text"
+                    value={formData.firstName}
+                    onChange={(e) =>
+                      handleInputChange("firstName", e.target.value)
+                    }
+                    style={{
+                      padding: "8px 12px",
+                      borderRadius: "4px",
+                      border: "1px solid #ccc",
+                      width: "100%",
+                      fontSize: "14px",
+                    }}
+                  />
+                )}
+              </FormField>
+
+              <FormField
+                label="Last Name"
+                error={null}
+                helperText={null}
+                id=""
+                qa={{}}
+                required={false}
+              >
+                {(props) => (
+                  <input
+                    {...props}
+                    type="text"
+                    value={formData.lastName}
+                    onChange={(e) =>
+                      handleInputChange("lastName", e.target.value)
+                    }
+                    style={{
+                      padding: "8px 12px",
+                      borderRadius: "4px",
+                      border: "1px solid #ccc",
+                      width: "100%",
+                      fontSize: "14px",
+                    }}
+                  />
+                )}
+              </FormField>
+
+              <FormField
+                label="Email"
+                error={null}
+                helperText={null}
+                id=""
+                qa={{}}
+                required={false}
+              >
+                {(props) => (
+                  <input
+                    {...props}
+                    type="email"
+                    value={formData.email}
+                    onChange={(e) => handleInputChange("email", e.target.value)}
+                    style={{
+                      padding: "8px 12px",
+                      borderRadius: "4px",
+                      border: "1px solid #ccc",
+                      width: "100%",
+                      fontSize: "14px",
+                    }}
+                  />
+                )}
+              </FormField>
+
+              <FormField
+                label="Company"
+                error={null}
+                helperText={null}
+                id=""
+                qa={{}}
+                required={false}
+              >
+                {(props) => (
+                  <input
+                    {...props}
+                    type="text"
+                    value={formData.company}
+                    onChange={(e) =>
+                      handleInputChange("company", e.target.value)
+                    }
+                    style={{
+                      padding: "8px 12px",
+                      borderRadius: "4px",
+                      border: "1px solid #ccc",
+                      width: "100%",
+                      fontSize: "14px",
+                    }}
+                  />
+                )}
+              </FormField>
+
+              <Box display="flex" gap={300} mt={200}>
+                <Button type="submit" appearance="primary">
+                  Submit Form
+                </Button>
+
+                <Modal
+                  aria-label="Reference Modal"
+                  size="medium"
+                  draggable={true}
+                  showOverlay={true}
+                  modalTrigger={
+                    <Button appearance="secondary">Open Reference Modal</Button>
+                  }
+                >
+                  <ModalContent>
+                    <ModalHeader
+                      title="Reference Information"
+                      subtitle="Drag this modal by the header to move it around"
+                    />
+                    <Box p={300}>
+                      <Text fontSize={400} fontWeight="bold" mb={200}>
+                        Instructions for filling out the form:
+                      </Text>
+                      <Box as="ul" pl={400}>
+                        <li>
+                          <Text mb={100}>
+                            First Name: Enter your given name
+                          </Text>
+                        </li>
+                        <li>
+                          <Text mb={100}>
+                            Last Name: Enter your family name
+                          </Text>
+                        </li>
+                        <li>
+                          <Text mb={100}>
+                            Email: Use your work email address
+                          </Text>
+                        </li>
+                        <li>
+                          <Text mb={100}>
+                            Company: Enter your organization name
+                          </Text>
+                        </li>
+                      </Box>
+
+                      <Box
+                        mt={400}
+                        p={300}
+                        bg="blue.200"
+                        borderRadius="6px"
+                        border="1px solid"
+                        borderColor="blue.400"
+                      >
+                        <Text fontWeight="bold" mb={100}>
+                          Try this:
+                        </Text>
+                        <Text fontSize={100}>
+                          1. Grab this modal by the header (you'll see a grab
+                          cursor)
+                          <br />
+                          2. Drag it to the side of the screen
+                          <br />
+                          3. Click on the form inputs in the background
+                          <br />
+                          4. Notice you can interact with the form while the
+                          modal is open!
+                        </Text>
+                      </Box>
+                    </Box>
+                    <ModalFooter>
+                      <Box display="flex" justifyContent="flex-end">
+                        <ModalClose asChild>
+                          <Button appearance="primary">Got it!</Button>
+                        </ModalClose>
+                      </Box>
+                    </ModalFooter>
+                  </ModalContent>
+                </Modal>
+              </Box>
+            </Box>
+          </form>
+
+          {submittedData && (
+            <Box
+              mt={400}
+              p={400}
+              bg="green.200"
+              borderRadius="6px"
+              border="2px solid"
+              borderColor="green.500"
+            >
+              <Text fontSize={400} fontWeight="bold" mb={200}>
+                Form Submitted!
+              </Text>
+              <Box as="ul" pl={400}>
+                <li>
+                  <Text>First Name: {submittedData.firstName}</Text>
+                </li>
+                <li>
+                  <Text>Last Name: {submittedData.lastName}</Text>
+                </li>
+                <li>
+                  <Text>Email: {submittedData.email}</Text>
+                </li>
+                <li>
+                  <Text>Company: {submittedData.company}</Text>
+                </li>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    );
+  },
+};

package/src/v2/ModalV2.tsx

@@ -26,8 +26,25 @@ interface DraggableModalContentProps {
   dataAttributes: Record<string, string>;
   draggable?: boolean;
   rest: any;
+  railProps?: Partial<TypeModalV2Props["railProps"]>;
 }
 
+// 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;
+}
+
+const DragContext = React.createContext<DragContextValue | null>(null);
+
+export const useDragContext = () => {
+  const context = React.useContext(DragContext);
+  return context;
+};
+
 const DraggableModalContent: React.FC<DraggableModalContentProps> = ({
   children,
   computedWidth,
@@ -37,16 +54,26 @@ const DraggableModalContent: React.FC<DraggableModalContentProps> = ({
   dataAttributes,
   draggable,
   rest,
+  railProps,
 }) => {
   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(
+  // Calculate rail dimensions for boundary constraints
+  const railSize = railProps?.size ?? 44;
+  const railOffset = railProps?.offset ?? 12;
+  const railSide = railProps?.side ?? "right";
+
+  // Total extra space needed on the side with the rail
+  // (only when viewport is wider than 400px breakpoint)
+  const railExtraSpace = railSize + railOffset;
+
+  const handleHeaderMouseDown = React.useCallback(
     (e: React.MouseEvent) => {
       if (!draggable) return;
 
-      // Only allow dragging from certain areas (not interactive elements)
+      // Only allow dragging from header (not interactive elements)
       const target = e.target as HTMLElement;
       if (
         target.tagName === "BUTTON" ||
@@ -73,13 +100,33 @@ const DraggableModalContent: React.FC<DraggableModalContentProps> = ({
         const newX = e.clientX - offsetX;
         const newY = e.clientY - offsetY;
 
-        // Constrain to viewport bounds (keeping modal fully visible)
+        // Determine if rail is on the side (viewport > 400px) or above (viewport <= 400px)
+        const isRailOnSide = window.innerWidth > 400;
+
+        // Constrain to viewport bounds (keeping modal AND rail 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;
+
+        // 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 side of the modal
+          if (railSide === "right") {
+            // Rail is on the right, so reduce maxX to prevent rail from going off-screen
+            maxX = window.innerWidth - modalWidth - railExtraSpace;
+          } else {
+            // Rail is on the left, so increase minX to prevent rail from going off-screen
+            minX = railExtraSpace;
+          }
+        } else {
+          // Rail is positioned above the modal (viewport <= 400px)
+          // Account for rail height + offset at the top
+          minY = railSize + railOffset;
+        }
 
         const constrainedX = Math.max(minX, Math.min(maxX, newX));
         const constrainedY = Math.max(minY, Math.min(maxY, newY));
@@ -103,32 +150,58 @@ const DraggableModalContent: React.FC<DraggableModalContentProps> = ({
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
     },
+    [draggable, railSide, railExtraSpace]
+  );
+
+  const dragContextValue = React.useMemo<DragContextValue>(
+    () => ({
+      position,
+      isDragging,
+      onHeaderMouseDown: handleHeaderMouseDown,
+      contentRef,
+      draggable: draggable ?? false,
+    }),
+    [position, isDragging, handleHeaderMouseDown, draggable]
+  );
+
+  // Prevent modal from closing on outside interaction when draggable
+  const handleInteractOutside = React.useCallback(
+    (e: Event) => {
+      if (draggable) {
+        e.preventDefault();
+      }
+    },
     [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>
+    <DragContext.Provider value={draggable ? dragContextValue : null}>
+      <StyledContent
+        ref={contentRef}
+        width={computedWidth}
+        bg={bg}
+        zIndex={computedZIndex}
+        aria-label={label}
+        draggable={draggable}
+        isDragging={isDragging}
+        railSize={railSize}
+        railOffset={railOffset}
+        railSide={railSide}
+        onInteractOutside={handleInteractOutside}
+        style={
+          draggable
+            ? {
+                transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
+                transition: isDragging ? "none" : undefined,
+              }
+            : undefined
+        }
+        {...dataAttributes}
+        {...rest}
+      >
+        {children}
+      </StyledContent>
+    </DragContext.Provider>
   );
 };
 
@@ -233,8 +306,14 @@ const Modal = (props: TypeModalV2Props) => {
       props.onOpenChange = handleOpenChange;
     }
 
+    // When draggable, prevent modal from closing on outside interaction
+    // This allows users to interact with background content
+    if (draggable) {
+      props.modal = false;
+    }
+
     return props;
-  }, [open, defaultOpen, handleOpenChange, onOpenChange]);
+  }, [open, defaultOpen, handleOpenChange, onOpenChange, draggable]);
 
   // Handle trigger - use modalTrigger prop if provided, otherwise look for ModalTrigger children (backward compatibility)
   const triggers: React.ReactNode[] = [];
@@ -266,7 +345,9 @@ const Modal = (props: TypeModalV2Props) => {
       {triggers}
 
       <Dialog.Portal>
-        {showOverlay && <StyledOverlay zIndex={computedZIndex} />}
+        {showOverlay && (
+          <StyledOverlay zIndex={computedZIndex} allowInteraction={draggable} />
+        )}
         <DraggableModalContent
           computedWidth={computedWidth}
           bg={bg}
@@ -275,6 +356,7 @@ const Modal = (props: TypeModalV2Props) => {
           dataAttributes={dataAttributes}
           draggable={draggable}
           rest={rest}
+          railProps={railProps}
         >
           {/* Floating actions rail - always show a close by default */}
           <ModalRail {...railProps}>

package/src/v2/ModalV2Styles.tsx

@@ -11,6 +11,7 @@ import {
 
 interface StyledOverlayProps extends TypeContainerProps {
   zIndex?: number;
+  allowInteraction?: boolean;
 }
 
 export const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`
@@ -27,6 +28,13 @@ export const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`
   z-index: ${(props) =>
     props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};
 
+  /* Allow clicking through overlay when modal is draggable */
+  ${(props) =>
+    props.allowInteraction &&
+    `
+    pointer-events: none;
+  `}
+
   ${zIndex}
 
   &[data-state="open"] {
@@ -41,6 +49,9 @@ interface StyledContentProps extends TypeContainerProps {
   zIndex?: number;
   isDragging?: boolean;
   draggable?: boolean;
+  railSize?: number;
+  railOffset?: number;
+  railSide?: "right" | "left";
 }
 
 export const StyledContent = styled(Dialog.Content)<StyledContentProps>`
@@ -64,17 +75,23 @@ export const StyledContent = styled(Dialog.Content)<StyledContentProps>`
   filter: blur(0);
   color: ${(props) => props.theme.colors.text.body};
   outline: none;
-  max-width: calc(100vw - ${BODY_PADDING});
+  max-width: ${(props) => {
+    // Calculate extra space needed for the rail when it's on the side (viewport > 400px)
+    const railSize = props.railSize ?? 44;
+    const railOffset = props.railOffset ?? 12;
+    const railExtraSpace = railSize + railOffset;
+
+    // Account for rail space when positioned on the side
+    // At viewport <= 400px, rail is above modal, so no horizontal space needed
+    return `calc(100vw - ${BODY_PADDING} - ${railExtraSpace}px)`;
+  }};
   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;
-  `}
+  /* When viewport is <= 400px, rail is above modal, so restore full width */
+  @media (max-width: 400px) {
+    max-width: calc(100vw - ${BODY_PADDING});
+  }
 
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     height: calc(100vh - ${BODY_PADDING});
@@ -120,7 +137,12 @@ export const Content = styled(Box)`
   }
 `;
 
-export const Header = styled(Box)`
+interface HeaderProps {
+  draggable?: boolean;
+  isDragging?: boolean;
+}
+
+export const Header = styled(Box)<HeaderProps>`
   font-family: ${(props) => props.theme.fontFamily};
   padding: ${(props) => props.theme.space[400]}
     ${(props) => props.theme.space[300]};
@@ -128,6 +150,14 @@ export const Header = styled(Box)`
   align-items: center;
   justify-content: space-between;
   flex: 0 0 auto;
+
+  /* Draggable cursor styling */
+  ${(props) =>
+    props.draggable &&
+    `
+    cursor: ${props.isDragging ? "grabbing" : "grab"};
+    user-select: none;
+  `}
 `;
 
 export const Footer = styled(Box)`

package/src/v2/ModalV2Types.ts

@@ -42,9 +42,6 @@ export interface TypeModalV2HeaderProps extends TypeBoxProps {
   /** 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>,
@@ -137,7 +134,6 @@ export type TypeModalRailProps = {
   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;
 };
 

package/src/v2/components/ModalHeader.tsx

@@ -5,21 +5,29 @@ import Text from "@sproutsocial/seeds-react-text";
 import { Header } from "../ModalV2Styles";
 import { ModalCloseButton } from "./ModalCloseButton";
 import type { TypeModalV2HeaderProps } from "../ModalV2Types";
+import { useDragContext } from "../ModalV2";
 
 export const ModalHeader = (props: TypeModalV2HeaderProps) => {
   const {
     title,
     subtitle,
     children,
-    bordered,
     titleProps = {},
     subtitleProps = {},
     showInlineClose,
     ...rest
   } = props;
 
+  const dragContext = useDragContext();
+  const isDraggable = dragContext?.draggable ?? false;
+
   return (
-    <Header {...rest}>
+    <Header
+      {...rest}
+      onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}
+      draggable={isDraggable}
+      isDragging={dragContext?.isDragging}
+    >
       {children ? (
         children
       ) : (

package/src/v2/components/ModalRail.tsx

@@ -2,7 +2,7 @@
 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"; // adjust import if path differs
+import Icon from "@sproutsocial/seeds-react-icon";
 import type { TypeModalRailProps, TypeModalActionProps } from "../ModalV2Types";
 
 // --- styled wrappers ---
@@ -11,7 +11,6 @@ const Rail = styled.div<{
   offset: number;
   gap: number;
   size: number;
-  collapseAt: number;
 }>`
   position: absolute;
   top: ${(p) => p.offset}px;
@@ -19,14 +18,19 @@ const Rail = styled.div<{
     p.side === "right"
       ? `right: calc(-1 * (${p.size}px + ${p.offset}px));`
       : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}
-  display: grid;
-  grid-auto-flow: row;
+  display: flex;
+  flex-direction: column;
   gap: ${(p) => p.gap}px;
   z-index: 1;
 
-  @media (max-width: ${(p) => p.collapseAt}px) {
-    ${(p) =>
-      p.side === "right" ? `right: ${p.offset}px;` : `left: ${p.offset}px;`}
+  @media (max-width: 400px) {
+    /* Move rail above the modal on the right side */
+    top: auto;
+    bottom: calc(100% + ${(p) => p.offset}px);
+    right: ${(p) => p.offset}px;
+    left: auto;
+    /* Change to horizontal layout with reversed order */
+    flex-direction: row-reverse;
   }
 `;
 
@@ -68,7 +72,6 @@ export const ModalRail: React.FC<TypeModalRailProps> = ({
   offset = 12,
   gap = 12,
   size = 44,
-  collapseAt = 640,
   children,
 }) => {
   return (
@@ -78,7 +81,6 @@ export const ModalRail: React.FC<TypeModalRailProps> = ({
       offset={offset}
       gap={gap}
       size={size}
-      collapseAt={collapseAt}
       aria-label="Modal quick actions"
     >
       {React.Children.map(children, (child) =>