@sproutsocial/seeds-react-modal 1.1.1 → 2.0.1

package/src/v2/components/ModalFooter.tsx

@@ -1,19 +1,100 @@
 import * as React from "react";
-import { Footer } from "../ModalV2Styles";
-import { DEFAULT_MODAL_BG } from "../../shared/constants";
-import type { TypeModalV2FooterProps } from "../ModalV2Types";
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import {
+  COMMON,
+  FLEXBOX,
+  BORDER,
+  LAYOUT,
+} from "@sproutsocial/seeds-react-system-props";
+import { MOBILE_BREAKPOINT } from "../../shared/constants";
+import type { TypeModalFooterProps } from "../ModalTypes";
+import { ModalCloseWrapper } from "./ModalCloseWrapper";
 
-export const ModalFooter = (props: TypeModalV2FooterProps) => {
-  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;
+/**
+ * Base styled footer component for custom modal footers.
+ *
+ * Use this component when you need complete control over the footer layout
+ * and don't want to use the slot-based ModalFooter component.
+ *
+ * @example
+ * <ModalCustomFooter>
+ *   <YourCustomFooterContent />
+ * </ModalCustomFooter>
+ */
+export const ModalCustomFooter = styled(Box)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  background-color: ${(props) => props.theme.colors.container.background.base};
+  padding: ${(props) => props.theme.space[400]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[800]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[800]};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
+
+  /* Flat bottom corners to blend with device edge on mobile */
+  @media (max-width: ${MOBILE_BREAKPOINT}) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  ${COMMON}
+  ${FLEXBOX}
+  ${BORDER}
+  ${LAYOUT}
+`;
+
+ModalCustomFooter.displayName = "ModalCustomFooter";
+
+/**
+ * Modal footer component for action buttons.
+ *
+ * This component only supports slot-based rendering with button props.
+ * For custom footer layouts, use ModalCustomFooter instead.
+ *
+ * Provides automatic button wrapping and layout management. Supports three button positions:
+ * - primaryButton: Main action button on the right (auto-closes modal)
+ * - cancelButton: Secondary action on the right (auto-closes modal)
+ * - leftAction: Optional action on the left (no auto-close, for destructive actions)
+ *
+ * @example
+ * <ModalFooter
+ *   cancelButton={<Button>Cancel</Button>}
+ *   primaryButton={<Button appearance="primary">Save</Button>}
+ * />
+ *
+ * @example
+ * // With left action
+ * <ModalFooter
+ *   leftAction={<Button appearance="destructive">Delete</Button>}
+ *   cancelButton={<Button>Cancel</Button>}
+ *   primaryButton={<Button appearance="primary">Save</Button>}
+ * />
+ */
+export const ModalFooter = (props: TypeModalFooterProps) => {
+  const { cancelButton, primaryButton, leftAction, ...rest } = props;
+
+  // If no simplified props provided, return empty footer
+  if (!cancelButton && !primaryButton && !leftAction) {
+    return null;
+  }
+
+  // Build simplified API layout
   return (
-    <Footer
-      bg={bg}
-      borderTop={500}
-      borderColor="container.border.base"
-      {...rest}
-    >
-      {children}
-    </Footer>
+    <ModalCustomFooter {...rest}>
+      {/* Left action (e.g., Delete button) */}
+      {leftAction ? leftAction : null}
+
+      {/* Right-aligned button group (Cancel + Primary) */}
+      <Box display="flex" gap={300} marginLeft="auto">
+        {cancelButton && <ModalCloseWrapper>{cancelButton}</ModalCloseWrapper>}
+        {primaryButton && (
+          <ModalCloseWrapper>{primaryButton}</ModalCloseWrapper>
+        )}
+      </Box>
+    </ModalCustomFooter>
   );
 };
 

package/src/v2/components/ModalHeader.tsx

@@ -1,20 +1,74 @@
 import * as React from "react";
 import * as Dialog from "@radix-ui/react-dialog";
+import styled from "styled-components";
 import Box from "@sproutsocial/seeds-react-box";
 import Text from "@sproutsocial/seeds-react-text";
-import { Header } from "../ModalV2Styles";
-import { ModalCloseButton } from "./ModalCloseButton";
-import type { TypeModalV2HeaderProps } from "../ModalV2Types";
-import { useDragContext } from "../ModalV2";
+import {
+  COMMON,
+  FLEXBOX,
+  BORDER,
+  LAYOUT,
+} from "@sproutsocial/seeds-react-system-props";
+import type { TypeModalHeaderProps } from "../ModalTypes";
+import { useDragContext } from "./ModalContent";
 
-export const ModalHeader = (props: TypeModalV2HeaderProps) => {
+interface HeaderProps {
+  draggable?: boolean;
+  isDragging?: boolean;
+}
+
+/**
+ * Base styled header component for custom modal headers.
+ *
+ * Use this component when you need complete control over the header layout
+ * and don't want to use the slot-based ModalHeader component.
+ *
+ * @example
+ * <ModalCustomHeader>
+ *   <YourCustomHeaderContent />
+ * </ModalCustomHeader>
+ */
+export const ModalCustomHeader = styled(Box).withConfig({
+  shouldForwardProp: (prop) => !["draggable", "isDragging"].includes(prop),
+})<HeaderProps>`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]};
+  display: flex;
+  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;
+  `}
+
+  ${COMMON}
+  ${FLEXBOX}
+  ${BORDER}
+  ${LAYOUT}
+`;
+
+ModalCustomHeader.displayName = "ModalCustomHeader";
+
+/**
+ * Modal header component with title and subtitle slots.
+ *
+ * This component only supports slot-based rendering via title and subtitle props.
+ * For custom header layouts, use ModalCustomHeader instead.
+ *
+ * @example
+ * <ModalHeader title="Delete Item" subtitle="This action cannot be undone" />
+ */
+export const ModalHeader = (props: TypeModalHeaderProps) => {
   const {
     title,
     subtitle,
-    children,
     titleProps = {},
     subtitleProps = {},
-    showInlineClose,
     ...rest
   } = props;
 
@@ -22,38 +76,27 @@ export const ModalHeader = (props: TypeModalV2HeaderProps) => {
   const isDraggable = dragContext?.draggable ?? false;
 
   return (
-    <Header
+    <ModalCustomHeader
       {...rest}
       onMouseDown={isDraggable ? dragContext?.onHeaderMouseDown : undefined}
       draggable={isDraggable}
       isDragging={dragContext?.isDragging}
     >
-      {children ? (
-        children
-      ) : (
-        <React.Fragment>
-          <Box>
-            {title && (
-              <Dialog.Title asChild {...titleProps}>
-                <Text.Headline>{title}</Text.Headline>
-              </Dialog.Title>
-            )}
-            {subtitle && (
-              <Dialog.Description asChild {...subtitleProps}>
-                <Text as="div" fontSize={200}>
-                  {subtitle}
-                </Text>
-              </Dialog.Description>
-            )}
-          </Box>
-          {showInlineClose && (
-            <Box display="flex" alignItems="center" justifyContent="flex-end">
-              <ModalCloseButton position="relative" offset={0} />
-            </Box>
-          )}
-        </React.Fragment>
-      )}
-    </Header>
+      <Box>
+        {title && (
+          <Dialog.Title asChild {...titleProps}>
+            <Text.Headline>{title}</Text.Headline>
+          </Dialog.Title>
+        )}
+        {subtitle && (
+          <Dialog.Description asChild {...subtitleProps}>
+            <Text as="div" fontSize={200}>
+              {subtitle}
+            </Text>
+          </Dialog.Description>
+        )}
+      </Box>
+    </ModalCustomHeader>
   );
 };
 

package/src/v2/components/ModalOverlay.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+import { motion } from "motion/react";
+import {
+  COMMON,
+  BORDER,
+  LAYOUT,
+  POSITION,
+  type TypeSystemCommonProps,
+  type TypeSystemBorderProps,
+  type TypeSystemLayoutProps,
+  type TypeSystemPositionProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+interface StyledOverlayProps
+  extends TypeSystemCommonProps,
+    TypeSystemBorderProps,
+    TypeSystemLayoutProps,
+    TypeSystemPositionProps {
+  allowInteraction?: boolean;
+}
+
+// Styled motion.div for the overlay wrapper
+export const StyledMotionOverlay = styled(motion.div)`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+`;
+
+export const StyledOverlay = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["allowInteraction"].includes(prop),
+})<StyledOverlayProps>`
+  width: 100%;
+  height: 100%;
+  background-color: ${(props) => props.theme.colors.overlay.background.base};
+
+  /* Allow clicking through overlay when modal is draggable */
+  ${(props) =>
+    props.allowInteraction &&
+    `
+    pointer-events: none;
+  `}
+
+  ${COMMON}
+  ${BORDER}
+  ${LAYOUT}
+  ${POSITION}
+`;
+
+StyledOverlay.displayName = "ModalOverlay";

package/src/v2/components/ModalRail.tsx

@@ -1,123 +1,59 @@
-// components/ModalRail.tsx
 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 type { TypeModalRailProps, TypeModalActionProps } from "../ModalV2Types";
-
-// --- styled wrappers ---
-const Rail = styled.div<{
-  side: "right" | "left";
-  offset: number;
-  gap: number;
-  size: number;
-}>`
+import type { TypeModalRailProps } from "../ModalTypes";
+import {
+  MOBILE_BREAKPOINT,
+  RAIL_BUTTON_SIZE,
+  RAIL_OFFSET,
+  RAIL_GAP,
+} from "../../shared/constants";
+
+/**
+ * Container for floating action buttons displayed alongside the modal.
+ *
+ * The rail provides a vertical column of action buttons positioned to the right of the modal
+ * on desktop, and switches to a horizontal row positioned above the modal on mobile devices.
+ * Always includes a close button by default, with support for additional custom actions.
+ *
+ * Actions are rendered through the Modal's `actions` prop or by directly including
+ * ModalAction components as children.
+ *
+ * @example
+ * <ModalRail>
+ *   <ModalAction actionType="close" aria-label="Close" iconName="x-outline" />
+ *   <ModalAction aria-label="Expand" iconName="arrows-pointing-out" onClick={handleExpand} />
+ * </ModalRail>
+ */
+const Rail = styled.div`
   position: absolute;
-  top: ${(p) => p.offset}px;
-  ${(p) =>
-    p.side === "right"
-      ? `right: calc(-1 * (${p.size}px + ${p.offset}px));`
-      : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}
+  top: ${RAIL_OFFSET}px;
+  right: calc(-1 * (${RAIL_BUTTON_SIZE}px + ${RAIL_OFFSET}px));
   display: flex;
   flex-direction: column;
-  gap: ${(p) => p.gap}px;
+  gap: ${RAIL_GAP}px;
   z-index: 1;
 
-  @media (max-width: 400px) {
+  @media (max-width: ${MOBILE_BREAKPOINT}) {
     /* Move rail above the modal on the right side */
     top: auto;
-    bottom: calc(100% + ${(p) => p.offset}px);
-    right: ${(p) => p.offset}px;
+    bottom: calc(100% + ${RAIL_OFFSET}px);
+    right: ${RAIL_OFFSET}px;
     left: auto;
     /* Change to horizontal layout with reversed order */
     flex-direction: row-reverse;
   }
 `;
 
-const RailBtn = styled.button<{ size: number }>`
-  width: ${(p) => p.size}px;
-  height: ${(p) => p.size}px;
-  display: inline-grid;
-  place-items: center;
-  border-radius: 8px;
-  border: none;
-  background: rgba(22, 32, 32, 0.56);
-  color: #ffffff;
-  cursor: pointer;
-  outline: none;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(22, 32, 32, 0.7);
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-// --- components ---
-export const ModalRail: React.FC<TypeModalRailProps> = ({
-  side = "right",
-  offset = 12,
-  gap = 12,
-  size = 44,
-  children,
-}) => {
+export const ModalRail: React.FC<TypeModalRailProps> = ({ children }) => {
   return (
     <Rail
       data-slot="modal-rail"
-      side={side}
-      offset={offset}
-      gap={gap}
-      size={size}
+      data-qa-modal-rail
       aria-label="Modal quick actions"
     >
-      {React.Children.map(children, (child) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as any, { size })
-          : child
-      )}
+      {children}
     </Rail>
   );
 };
 
-export const ModalAction: React.FC<
-  TypeModalActionProps & { size?: number }
-> = ({
-  "aria-label": ariaLabel,
-  iconName,
-  disabled,
-  size = 44,
-  actionType,
-  onClick,
-  ...rest
-}) => {
-  const Btn = (
-    <RailBtn
-      size={size}
-      aria-label={ariaLabel}
-      title={ariaLabel}
-      disabled={disabled}
-      {...rest}
-    >
-      {iconName ? <Icon name={iconName} size="small" /> : ariaLabel}
-    </RailBtn>
-  );
-
-  return actionType === "close" ? (
-    <Dialog.Close asChild>{Btn}</Dialog.Close>
-  ) : (
-    React.cloneElement(Btn, { onClick })
-  );
-};
+ModalRail.displayName = "ModalRail";

package/src/v2/components/index.ts

@@ -1,8 +1,12 @@
-export { ModalHeader } from "./ModalHeader";
-export { ModalFooter } from "./ModalFooter";
-export { ModalContent } from "./ModalContent";
+// Public API exports
+export { ModalHeader, ModalCustomHeader } from "./ModalHeader";
+export { ModalFooter, ModalCustomFooter } from "./ModalFooter";
+export { ModalBody } from "./ModalBody";
 export { ModalDescription } from "./ModalDescription";
-export { ModalCloseButton } from "./ModalCloseButton";
-export { ModalTrigger } from "./ModalTrigger";
-export { ModalClose } from "./ModalClose";
-export { ModalRail, ModalAction } from "./ModalRail";
+export { ModalCloseWrapper } from "./ModalCloseWrapper";
+export { ModalRail } from "./ModalRail";
+export { ModalAction } from "./ModalAction";
+
+// Internal exports for Modal usage only - not re-exported to public API
+export { StyledOverlay, StyledMotionOverlay } from "./ModalOverlay";
+export { DraggableModalContent, StaticModalContent } from "./ModalContent";

package/src/v2/index.ts

@@ -1,37 +1,34 @@
 // Modal - Explicit named exports for optimal tree shaking
-export { default as Modal, useDragContext } from "./ModalV2";
+export { default as Modal } from "./Modal";
 export {
   ModalHeader,
   ModalFooter,
-  ModalContent,
+  ModalBody,
   ModalDescription,
-  ModalCloseButton,
-  ModalTrigger,
-  ModalClose,
+  ModalCloseWrapper,
   ModalRail,
   ModalAction,
+  ModalCustomHeader,
+  ModalCustomFooter,
 } from "./components";
 
 // Explicit type exports
 export type {
-  TypeModalV2Props,
-  TypeModalV2TriggerProps,
-  TypeModalV2HeaderProps,
-  TypeModalV2FooterProps,
-  TypeModalV2ContentProps,
-  TypeModalV2DescriptionProps,
-  TypeModalV2CloseButtonProps,
+  TypeModalProps,
+  TypeModalHeaderProps,
+  TypeModalFooterProps,
+  TypeModalBodyProps,
+  TypeModalDescriptionProps,
   TypeModalRailProps,
   TypeModalActionProps,
-} from "./ModalV2Types";
+} from "./ModalTypes";
+
+export type { ModalCloseWrapperProps } from "./components/ModalCloseWrapper";
 
 // Explicit constant exports
 export {
-  DEFAULT_MODAL_Z_INDEX,
-  DEFAULT_OVERLAY_Z_INDEX_OFFSET,
   DEFAULT_MODAL_WIDTH,
   DEFAULT_MODAL_BG,
   BODY_PADDING,
   MODAL_SIZE_PRESETS,
-  MODAL_PRIORITY_Z_INDEX,
 } from "../shared/constants";