@sproutsocial/seeds-react-modal 1.1.0 → 2.0.0

package/src/v2/ModalV2Types.ts

@@ -1,154 +0,0 @@
-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;
-
-  /** 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
-  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

@@ -1,29 +0,0 @@
-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";

package/src/v2/components/ModalCloseButton.tsx

@@ -1,100 +0,0 @@
-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 { TypeModalV2CloseButtonProps } from "../ModalV2Types";
-
-const CloseButtonWrapper = styled.button<{
-  size?: number;
-  position?: "absolute" | "relative";
-  side?: "right" | "left";
-  offset?: number;
-}>`
-  width: ${(p) => p.size || 44}px;
-  height: ${(p) => p.size || 44}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;
-
-  ${(p) =>
-    p.position === "absolute" &&
-    `
-    position: absolute;
-    top: 0px;
-    ${p.side || "right"}: ${p.offset || -48}px;
-    z-index: 1;
-  `}
-
-  &: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;
-  }
-`;
-
-export const ModalCloseButton = (props: TypeModalV2CloseButtonProps) => {
-  const {
-    children,
-    onClick,
-    asChild,
-    closeButtonLabel = "Close modal",
-    size = 44,
-    position = "absolute",
-    side = "right",
-    offset = -48,
-    ...rest
-  } = props;
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    onClick?.(e);
-    // Dialog.Close automatically handles closing
-  };
-
-  if (asChild) {
-    return (
-      <Dialog.Close asChild>
-        {React.cloneElement(children as React.ReactElement, {
-          onClick: handleClick,
-          ...rest,
-        })}
-      </Dialog.Close>
-    );
-  }
-
-  return (
-    <Dialog.Close asChild>
-      <CloseButtonWrapper
-        onClick={handleClick}
-        size={size}
-        position={position}
-        side={side}
-        offset={offset}
-        aria-label={closeButtonLabel}
-        title={closeButtonLabel}
-        {...rest}
-      >
-        {children || <Icon name="x-outline" size="small" />}
-      </CloseButtonWrapper>
-    </Dialog.Close>
-  );
-};
-
-ModalCloseButton.displayName = "ModalCloseButton";

package/src/v2/components/ModalTrigger.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-import Button from "@sproutsocial/seeds-react-button";
-import type { TypeModalV2TriggerProps } from "../ModalV2Types";
-
-/**
- * A trigger button that opens the modal when clicked.
- * Must be used inside a Modal component's Dialog.Root context.
- * Uses Seeds Button by default but supports asChild for custom elements.
- */
-export const ModalTrigger = (props: TypeModalV2TriggerProps) => {
-  const { children, onClick, asChild, ...rest } = props;
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    onClick?.(e);
-    // Dialog.Trigger automatically handles modal opening
-  };
-
-  if (asChild) {
-    return (
-      <Dialog.Trigger asChild>
-        {React.cloneElement(children as React.ReactElement, {
-          onClick: handleClick,
-          ...rest,
-        })}
-      </Dialog.Trigger>
-    );
-  }
-
-  return (
-    <Dialog.Trigger asChild>
-      <Button onClick={handleClick} {...rest}>
-        {children}
-      </Button>
-    </Dialog.Trigger>
-  );
-};
-
-ModalTrigger.displayName = "ModalTrigger";