@sproutsocial/seeds-react-modal 1.0.2 → 1.0.4

package/dist/v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/v2/index.ts","../../src/v2/ModalV2.tsx","../../src/v2/ModalV2Styles.tsx","../../src/shared/constants.ts","../../src/v2/components/ModalHeader.tsx","../../src/v2/components/ModalCloseButton.tsx","../../src/v2/components/ModalFooter.tsx","../../src/v2/components/ModalContent.tsx","../../src/v2/components/ModalDescription.tsx","../../src/v2/components/ModalTrigger.tsx","../../src/v2/components/ModalClose.tsx","../../src/v2/components/ModalRail.tsx"],"sourcesContent":["// Modal - Explicit named exports for optimal tree shaking\nexport { default as Modal } from \"./ModalV2\";\nexport {\n  ModalHeader,\n  ModalFooter,\n  ModalContent,\n  ModalDescription,\n  ModalCloseButton,\n  ModalTrigger,\n  ModalClose,\n  ModalRail,\n  ModalAction,\n} from \"./components\";\n\n// Explicit type exports\nexport type {\n  TypeModalV2Props,\n  TypeModalV2TriggerProps,\n  TypeModalV2HeaderProps,\n  TypeModalV2FooterProps,\n  TypeModalV2ContentProps,\n  TypeModalV2DescriptionProps,\n  TypeModalV2CloseButtonProps,\n  TypeModalRailProps,\n  TypeModalActionProps,\n} from \"./ModalV2Types\";\n\n// Explicit constant exports\nexport {\n  DEFAULT_MODAL_Z_INDEX,\n  DEFAULT_OVERLAY_Z_INDEX_OFFSET,\n  DEFAULT_MODAL_WIDTH,\n  DEFAULT_MODAL_BG,\n  BODY_PADDING,\n  MODAL_SIZE_PRESETS,\n  MODAL_PRIORITY_Z_INDEX,\n} from \"../shared/constants\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { StyledOverlay, StyledContent } from \"./ModalV2Styles\";\nimport {\n  ModalHeader,\n  ModalDescription,\n  ModalTrigger,\n  ModalRail,\n  ModalAction,\n} from \"./components\";\nimport {\n  DEFAULT_MODAL_WIDTH,\n  DEFAULT_MODAL_BG,\n  DEFAULT_MODAL_Z_INDEX,\n  MODAL_SIZE_PRESETS,\n  MODAL_PRIORITY_Z_INDEX,\n} from \"../shared/constants\";\nimport type { TypeModalV2Props } from \"./ModalV2Types\";\n\ninterface DraggableModalContentProps {\n  children: React.ReactNode;\n  computedWidth: any;\n  bg: any;\n  computedZIndex: number;\n  label?: string;\n  dataAttributes: Record<string, string>;\n  draggable?: boolean;\n  rest: any;\n}\n\nconst DraggableModalContent: React.FC<DraggableModalContentProps> = ({\n  children,\n  computedWidth,\n  bg,\n  computedZIndex,\n  label,\n  dataAttributes,\n  draggable,\n  rest,\n}) => {\n  const [position, setPosition] = React.useState({ x: 0, y: 0 });\n  const [isDragging, setIsDragging] = React.useState(false);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n\n  const handleMouseDown = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (!draggable) return;\n\n      // Only allow dragging from certain areas (not interactive elements)\n      const target = e.target as HTMLElement;\n      if (\n        target.tagName === \"BUTTON\" ||\n        target.tagName === \"INPUT\" ||\n        target.closest(\"button\")\n      ) {\n        return;\n      }\n\n      e.preventDefault();\n      setIsDragging(true);\n\n      const rect = contentRef.current?.getBoundingClientRect();\n      if (!rect) return;\n\n      // Calculate offset from mouse to current modal position\n      const offsetX = e.clientX - rect.left;\n      const offsetY = e.clientY - rect.top;\n\n      const handleMouseMove = (e: MouseEvent) => {\n        e.preventDefault();\n\n        // Calculate new position based on mouse position minus offset\n        const newX = e.clientX - offsetX;\n        const newY = e.clientY - offsetY;\n\n        // Constrain to viewport bounds (keeping modal fully visible)\n        const modalWidth = rect.width;\n        const modalHeight = rect.height;\n        const maxX = window.innerWidth - modalWidth;\n        const minX = 0;\n        const maxY = window.innerHeight - modalHeight;\n        const minY = 0;\n\n        const constrainedX = Math.max(minX, Math.min(maxX, newX));\n        const constrainedY = Math.max(minY, Math.min(maxY, newY));\n\n        // Convert to offset from center for our transform\n        const centerX = window.innerWidth / 2 - modalWidth / 2;\n        const centerY = window.innerHeight / 2 - modalHeight / 2;\n\n        setPosition({\n          x: constrainedX - centerX,\n          y: constrainedY - centerY,\n        });\n      };\n\n      const handleMouseUp = () => {\n        setIsDragging(false);\n        document.removeEventListener(\"mousemove\", handleMouseMove);\n        document.removeEventListener(\"mouseup\", handleMouseUp);\n      };\n\n      document.addEventListener(\"mousemove\", handleMouseMove);\n      document.addEventListener(\"mouseup\", handleMouseUp);\n    },\n    [draggable]\n  );\n\n  return (\n    <StyledContent\n      ref={contentRef}\n      width={computedWidth}\n      bg={bg}\n      zIndex={computedZIndex}\n      aria-label={label}\n      draggable={draggable}\n      isDragging={isDragging}\n      onMouseDown={handleMouseDown}\n      style={\n        draggable\n          ? {\n              transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,\n              transition: isDragging ? \"none\" : undefined,\n            }\n          : undefined\n      }\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </StyledContent>\n  );\n};\n\n/**\n * The modal you want - with Radix UI Dialog\n *\n * Features:\n * - Built with Radix UI Dialog for superior accessibility\n * - Same API as the original Modal component\n * - Automatic focus management and keyboard navigation\n * - Portal rendering for proper z-index layering\n * - Customizable styling through system props\n * - Optional draggable functionality using react-dnd\n */\nconst Modal = (props: TypeModalV2Props) => {\n  const {\n    children,\n    modalTrigger,\n    draggable = false,\n    open,\n    defaultOpen,\n    onOpenChange,\n    \"aria-label\": label,\n    title,\n    subtitle,\n    description,\n    size,\n    priority,\n    data = {},\n    bg = DEFAULT_MODAL_BG,\n    showOverlay = true,\n    actions,\n    railProps,\n    ...rest\n  } = props;\n\n  const handleOpenChange = React.useCallback(\n    (newOpen: boolean) => {\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange]\n  );\n\n  // Compute actual width\n  const computedWidth = React.useMemo(() => {\n    if (size) {\n      // Handle preset sizes\n      if (typeof size === \"string\" && size in MODAL_SIZE_PRESETS) {\n        return MODAL_SIZE_PRESETS[size as keyof typeof MODAL_SIZE_PRESETS];\n      }\n      // Handle custom size values\n      return size;\n    }\n    // Fall back to default width\n    return DEFAULT_MODAL_WIDTH;\n  }, [size]);\n\n  // Compute actual z-index\n  const computedZIndex = React.useMemo(() => {\n    if (priority) {\n      return MODAL_PRIORITY_Z_INDEX[priority];\n    }\n    return DEFAULT_MODAL_Z_INDEX;\n  }, [priority]);\n\n  // Create data attributes object\n  const dataAttributes = React.useMemo(() => {\n    const attrs: Record<string, string> = {};\n    Object.entries(data).forEach(([key, value]) => {\n      attrs[`data-${key}`] = String(value);\n    });\n    attrs[\"data-qa-modal\"] = \"\";\n    // Only add open attribute if in controlled mode\n    if (open !== undefined) {\n      attrs[\"data-qa-modal-open\"] = String(open);\n    }\n    return attrs;\n  }, [data, open]);\n\n  // Determine if we should auto-render the header from provided props\n  const shouldRenderHeader = Boolean(title || subtitle);\n\n  // Build Dialog.Root props conditionally\n  const dialogRootProps = React.useMemo(() => {\n    const props: any = {};\n\n    // If controlled (open prop provided), use it\n    if (open !== undefined) {\n      props.open = open;\n    }\n    // If uncontrolled with explicit defaultOpen, use it\n    else if (defaultOpen !== undefined) {\n      props.defaultOpen = defaultOpen;\n    }\n    // If completely uncontrolled (neither open nor defaultOpen provided), default to closed\n    else {\n      props.defaultOpen = false;\n    }\n\n    // Always add onOpenChange if provided\n    if (onOpenChange) {\n      props.onOpenChange = handleOpenChange;\n    }\n\n    return props;\n  }, [open, defaultOpen, handleOpenChange, onOpenChange]);\n\n  // Handle trigger - use modalTrigger prop if provided, otherwise look for ModalTrigger children (backward compatibility)\n  const triggers: React.ReactNode[] = [];\n  const content: React.ReactNode[] = [];\n\n  if (modalTrigger) {\n    // New prop-based approach: wrap the provided element with Dialog.Trigger\n    triggers.push(\n      <Dialog.Trigger key=\"modal-trigger\" asChild>\n        {modalTrigger}\n      </Dialog.Trigger>\n    );\n    // All children are content\n    content.push(children);\n  } else {\n    // Legacy approach: separate ModalTrigger children from content children\n    React.Children.forEach(children, (child) => {\n      if (React.isValidElement(child) && child.type === ModalTrigger) {\n        triggers.push(child);\n      } else {\n        content.push(child);\n      }\n    });\n  }\n\n  return (\n    <Dialog.Root {...dialogRootProps}>\n      {/* Render triggers as direct children of Dialog.Root */}\n      {triggers}\n\n      <Dialog.Portal>\n        {showOverlay && <StyledOverlay zIndex={computedZIndex} />}\n        <DraggableModalContent\n          computedWidth={computedWidth}\n          bg={bg}\n          computedZIndex={computedZIndex}\n          label={label}\n          dataAttributes={dataAttributes}\n          draggable={draggable}\n          rest={rest}\n        >\n          {/* Floating actions rail - always show a close by default */}\n          <ModalRail {...railProps}>\n            <ModalAction\n              actionType=\"close\"\n              aria-label=\"Close\"\n              iconName=\"x-outline\"\n            />\n            {actions?.map((action, idx) => (\n              <ModalAction key={idx} {...action} />\n            ))}\n          </ModalRail>\n          {/* Auto-render header when title or subtitle is provided */}\n          {shouldRenderHeader && (\n            <ModalHeader title={title} subtitle={subtitle} />\n          )}\n\n          {/* Auto-render description when provided */}\n          {description && <ModalDescription>{description}</ModalDescription>}\n\n          {/* Main content (everything except triggers) */}\n          {content}\n        </DraggableModalContent>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport default Modal;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport {\n  BODY_PADDING,\n  DEFAULT_OVERLAY_Z_INDEX_OFFSET,\n} from \"../shared/constants\";\n\ninterface StyledOverlayProps extends TypeContainerProps {\n  zIndex?: number;\n}\n\nexport const StyledOverlay = styled(Dialog.Overlay)<StyledOverlayProps>`\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  right: 0px;\n  bottom: 0px;\n  background-color: ${(props) => props.theme.colors.overlay.background.base};\n  opacity: 0;\n  will-change: opacity;\n  transition: opacity ${(props) => props.theme.duration.medium}\n    ${(props) => props.theme.easing.ease_inout};\n  z-index: ${(props) =>\n    props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};\n\n  ${zIndex}\n\n  &[data-state=\"open\"] {\n    opacity: 1;\n  }\n  &[data-state=\"closed\"] {\n    opacity: 0;\n  }\n`;\n\ninterface StyledContentProps extends TypeContainerProps {\n  zIndex?: number;\n  isDragging?: boolean;\n  draggable?: boolean;\n}\n\nexport const StyledContent = styled(Dialog.Content)<StyledContentProps>`\n  position: fixed;\n  ${(props) =>\n    props.draggable\n      ? `\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      `\n      : `\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      `}\n  display: flex;\n  flex-direction: column;\n  border-radius: ${(props) => props.theme.radii[600]};\n  box-shadow: ${(props) => props.theme.shadows.medium};\n  filter: blur(0);\n  color: ${(props) => props.theme.colors.text.body};\n  outline: none;\n  max-width: calc(100vw - ${BODY_PADDING});\n  max-height: calc(100vh - ${BODY_PADDING});\n  z-index: ${(props) => props.zIndex || 1000};\n\n  /* Draggable styling */\n  ${(props) =>\n    props.draggable &&\n    `\n    cursor: ${props.isDragging ? \"grabbing\" : \"grab\"};\n    user-select: none;\n  `}\n\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    height: calc(100vh - ${BODY_PADDING});\n  }\n\n  ${width}\n  ${COMMON}\n\n  /* Enhanced Radix Dialog animations */\n  opacity: 0;\n  ${(props) =>\n    !props.draggable\n      ? `\n    transform: translate(-50%, -50%) scale(0.95);\n    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},\n      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};\n  `\n      : `\n    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};\n  `}\n\n  &[data-state=\"open\"] {\n    opacity: 1;\n    ${(props) =>\n      !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}\n  }\n  &[data-state=\"closed\"] {\n    opacity: 0;\n    ${(props) =>\n      !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}\n  }\n`;\n\nexport const Content = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  min-height: 80px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n  padding: 0 ${(props) => props.theme.space[300]}\n    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    flex-basis: 100%;\n  }\n`;\n\nexport const Header = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[300]};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[300]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: ${(props) => props.theme.space[100]};\n`;\n\nStyledOverlay.displayName = \"ModalOverlay\";\nStyledContent.displayName = \"ModalContent\";\nContent.displayName = \"ModalContent\";\nHeader.displayName = \"ModalHeader\";\nFooter.displayName = \"ModalFooter\";\n","// Shared constants for both Modal versions\n\n// Default z-index values\nexport const DEFAULT_MODAL_Z_INDEX = 6;\nexport const DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;\n\n// Default styling values\nexport const DEFAULT_MODAL_WIDTH = \"600px\";\nexport const DEFAULT_MODAL_BG = \"container.background.base\";\nexport const DEFAULT_CLOSE_BUTTON_LABEL = \"Close dialog\";\n\n// Max space allowed between the modal and the edge of the browser\nexport const BODY_PADDING = \"64px\";\n\n// Size presets for simplified API\nexport const MODAL_SIZE_PRESETS = {\n  small: \"400px\",\n  medium: \"600px\",\n  large: \"800px\",\n  full: \"90vw\",\n} as const;\n\n// Priority level z-index mappings\nexport const MODAL_PRIORITY_Z_INDEX = {\n  low: 100,\n  medium: 1000,\n  high: 2000,\n} as const;\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Header } from \"../ModalV2Styles\";\nimport { ModalCloseButton } from \"./ModalCloseButton\";\nimport type { TypeModalV2HeaderProps } from \"../ModalV2Types\";\n\nexport const ModalHeader = (props: TypeModalV2HeaderProps) => {\n  const {\n    title,\n    subtitle,\n    children,\n    bordered,\n    titleProps = {},\n    subtitleProps = {},\n    showInlineClose,\n    ...rest\n  } = props;\n\n  return (\n    <Header {...rest}>\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Dialog.Title asChild {...titleProps}>\n                <Text.Headline>{title}</Text.Headline>\n              </Dialog.Title>\n            )}\n            {subtitle && (\n              <Dialog.Description asChild {...subtitleProps}>\n                <Text as=\"div\" fontSize={200}>\n                  {subtitle}\n                </Text>\n              </Dialog.Description>\n            )}\n          </Box>\n          {showInlineClose && (\n            <Box display=\"flex\" alignItems=\"center\" justifyContent=\"flex-end\">\n              <ModalCloseButton position=\"relative\" offset={0} />\n            </Box>\n          )}\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nModalHeader.displayName = \"ModalHeader\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeModalV2CloseButtonProps } from \"../ModalV2Types\";\n\nconst CloseButtonWrapper = styled.button<{\n  size?: number;\n  position?: \"absolute\" | \"relative\";\n  side?: \"right\" | \"left\";\n  offset?: number;\n}>`\n  width: ${(p) => p.size || 44}px;\n  height: ${(p) => p.size || 44}px;\n  display: inline-grid;\n  place-items: center;\n  border-radius: 8px;\n  border: none;\n  background: rgba(22, 32, 32, 0.56);\n  color: #ffffff;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.2s ease;\n\n  ${(p) =>\n    p.position === \"absolute\" &&\n    `\n    position: absolute;\n    top: 0px;\n    ${p.side || \"right\"}: ${p.offset || -48}px;\n    z-index: 1;\n  `}\n\n  &:hover {\n    background: rgba(22, 32, 32, 0.7);\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\nexport const ModalCloseButton = (props: TypeModalV2CloseButtonProps) => {\n  const {\n    children,\n    onClick,\n    asChild,\n    closeButtonLabel = \"Close modal\",\n    size = 44,\n    position = \"absolute\",\n    side = \"right\",\n    offset = -48,\n    ...rest\n  } = props;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  if (asChild) {\n    return (\n      <Dialog.Close asChild>\n        {React.cloneElement(children as React.ReactElement, {\n          onClick: handleClick,\n          ...rest,\n        })}\n      </Dialog.Close>\n    );\n  }\n\n  return (\n    <Dialog.Close asChild>\n      <CloseButtonWrapper\n        onClick={handleClick}\n        size={size}\n        position={position}\n        side={side}\n        offset={offset}\n        aria-label={closeButtonLabel}\n        title={closeButtonLabel}\n        {...rest}\n      >\n        {children || <Icon name=\"x-outline\" size=\"small\" />}\n      </CloseButtonWrapper>\n    </Dialog.Close>\n  );\n};\n\nModalCloseButton.displayName = \"ModalCloseButton\";\n","import * as React from \"react\";\nimport { Footer } from \"../ModalV2Styles\";\nimport { DEFAULT_MODAL_BG } from \"../../shared/constants\";\nimport type { TypeModalV2FooterProps } from \"../ModalV2Types\";\n\nexport const ModalFooter = (props: TypeModalV2FooterProps) => {\n  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;\n  return (\n    <Footer\n      bg={bg}\n      borderTop={500}\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children}\n    </Footer>\n  );\n};\n\nModalFooter.displayName = \"ModalFooter\";\n","import * as React from \"react\";\nimport { Content } from \"../ModalV2Styles\";\nimport type { TypeModalV2ContentProps } from \"../ModalV2Types\";\n\nexport const ModalContent = React.forwardRef<\n  HTMLDivElement,\n  TypeModalV2ContentProps\n>(({ children, ...rest }, ref) => {\n  return (\n    <Content data-qa-modal ref={ref} {...rest}>\n      {children}\n    </Content>\n  );\n});\n\nModalContent.displayName = \"ModalContent\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeModalV2DescriptionProps } from \"../ModalV2Types\";\n\nexport const ModalDescription = React.forwardRef<\n  HTMLDivElement,\n  TypeModalV2DescriptionProps\n>(({ children, descriptionProps = {}, ...rest }, ref) => {\n  return (\n    <Dialog.Description asChild {...descriptionProps}>\n      <Box ref={ref} {...rest}>\n        {children}\n      </Box>\n    </Dialog.Description>\n  );\n});\n\nModalDescription.displayName = \"ModalDescription\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type { TypeModalV2TriggerProps } from \"../ModalV2Types\";\n\n/**\n * A trigger button that opens the modal when clicked.\n * Must be used inside a Modal component's Dialog.Root context.\n * Uses Seeds Button by default but supports asChild for custom elements.\n */\nexport const ModalTrigger = (props: TypeModalV2TriggerProps) => {\n  const { children, onClick, asChild, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    // Dialog.Trigger automatically handles modal opening\n  };\n\n  if (asChild) {\n    return (\n      <Dialog.Trigger asChild>\n        {React.cloneElement(children as React.ReactElement, {\n          onClick: handleClick,\n          ...rest,\n        })}\n      </Dialog.Trigger>\n    );\n  }\n\n  return (\n    <Dialog.Trigger asChild>\n      <Button onClick={handleClick} {...rest}>\n        {children}\n      </Button>\n    </Dialog.Trigger>\n  );\n};\n\nModalTrigger.displayName = \"ModalTrigger\";\n","import * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\n\nexport interface ModalCloseProps {\n  children: React.ReactNode;\n  onClick?: (e: React.MouseEvent) => void;\n  asChild?: boolean;\n}\n\n/**\n * A component that closes the modal when clicked.\n * Uses asChild pattern like Radix primitives.\n */\nexport const ModalClose = (props: ModalCloseProps) => {\n  const { children, onClick, asChild = false, ...rest } = props;\n\n  const handleClick = (e: React.MouseEvent) => {\n    onClick?.(e);\n    // Dialog.Close automatically handles closing\n  };\n\n  return (\n    <Dialog.Close asChild={asChild} onClick={handleClick} {...rest}>\n      {children}\n    </Dialog.Close>\n  );\n};\n\nModalClose.displayName = \"ModalClose\";\n","// components/ModalRail.tsx\nimport * as React from \"react\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport styled from \"styled-components\";\nimport Icon from \"@sproutsocial/seeds-react-icon\"; // adjust import if path differs\nimport type { TypeModalRailProps, TypeModalActionProps } from \"../ModalV2Types\";\n\n// --- styled wrappers ---\nconst Rail = styled.div<{\n  side: \"right\" | \"left\";\n  offset: number;\n  gap: number;\n  size: number;\n  collapseAt: number;\n}>`\n  position: absolute;\n  top: ${(p) => p.offset}px;\n  ${(p) =>\n    p.side === \"right\"\n      ? `right: calc(-1 * (${p.size}px + ${p.offset}px));`\n      : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}\n  display: grid;\n  grid-auto-flow: row;\n  gap: ${(p) => p.gap}px;\n  z-index: 1;\n\n  @media (max-width: ${(p) => p.collapseAt}px) {\n    ${(p) =>\n      p.side === \"right\" ? `right: ${p.offset}px;` : `left: ${p.offset}px;`}\n  }\n`;\n\nconst RailBtn = styled.button<{ size: number }>`\n  width: ${(p) => p.size}px;\n  height: ${(p) => p.size}px;\n  display: inline-grid;\n  place-items: center;\n  border-radius: 8px;\n  border: none;\n  background: rgba(22, 32, 32, 0.56);\n  color: #ffffff;\n  cursor: pointer;\n  outline: none;\n  transition: all 0.2s ease;\n\n  &:hover {\n    background: rgba(22, 32, 32, 0.7);\n    transform: translateY(-1px);\n  }\n\n  &:active {\n    transform: translateY(0);\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n\n// --- components ---\nexport const ModalRail: React.FC<TypeModalRailProps> = ({\n  side = \"right\",\n  offset = 12,\n  gap = 12,\n  size = 44,\n  collapseAt = 640,\n  children,\n}) => {\n  return (\n    <Rail\n      data-slot=\"modal-rail\"\n      side={side}\n      offset={offset}\n      gap={gap}\n      size={size}\n      collapseAt={collapseAt}\n      aria-label=\"Modal quick actions\"\n    >\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(child as any, { size })\n          : child\n      )}\n    </Rail>\n  );\n};\n\nexport const ModalAction: React.FC<\n  TypeModalActionProps & { size?: number }\n> = ({\n  \"aria-label\": ariaLabel,\n  iconName,\n  disabled,\n  size = 44,\n  actionType,\n  onClick,\n  ...rest\n}) => {\n  const Btn = (\n    <RailBtn\n      size={size}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      disabled={disabled}\n      {...rest}\n    >\n      {iconName ? <Icon name={iconName} size=\"small\" /> : ariaLabel}\n    </RailBtn>\n  );\n\n  return actionType === \"close\" ? (\n    <Dialog.Close asChild>{Btn}</Dialog.Close>\n  ) : (\n    React.cloneElement(Btn, { onClick })\n  );\n};\n"],"mappings":"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","names":["React","Dialog","styled","Content","Box","React","Dialog","import_seeds_react_box","React","Dialog","import_styled_components","styled","Icon","import_jsx_runtime","Box","Text","React","import_jsx_runtime","React","import_jsx_runtime","Content","React","Dialog","import_seeds_react_box","import_jsx_runtime","Box","React","Dialog","import_jsx_runtime","Button","React","Dialog","import_jsx_runtime","React","Dialog","import_styled_components","import_seeds_react_icon","import_jsx_runtime","styled","Icon","import_jsx_runtime","e","props"]}

package/package.json

@@ -1,12 +1,29 @@
 {
   "name": "@sproutsocial/seeds-react-modal",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Seeds React Modal",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./v1": {
+      "types": "./dist/v1/index.d.ts",
+      "import": "./dist/esm/v1/index.js",
+      "require": "./dist/v1/index.js"
+    },
+    "./v2": {
+      "types": "./dist/v2/index.d.ts",
+      "import": "./dist/esm/v2/index.js",
+      "require": "./dist/v2/index.js"
+    }
+  },
   "scripts": {
     "build": "tsup --dts",
     "build:debug": "tsup --dts --metafile",
@@ -18,30 +35,33 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@sproutsocial/seeds-react-box": "^1.1.3",
+    "@sproutsocial/seeds-react-button": "^1.2.2",
+    "@sproutsocial/seeds-react-icon": "^1.1.3",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.1",
-    "@sproutsocial/seeds-react-button": "^1.2.0",
-    "@sproutsocial/seeds-react-icon": "^1.1.1",
-    "@sproutsocial/seeds-react-text": "^1.3.0",
+    "@sproutsocial/seeds-react-text": "^1.3.2",
+    "@sproutsocial/seeds-react-theme": "^3.0.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-modal": "^3.16.1",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
+    "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-react-form-field": "^1.0.2",
+    "@sproutsocial/seeds-react-input": "^1.4.4",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-tsconfig": "*",
     "@types/react": "^18.0.0",
+    "@types/react-modal": "^3.16.0",
     "@types/styled-components": "^5.1.26",
-    "@sproutsocial/eslint-config-seeds": "*",
+    "@types/styled-system": "^5.1.15",
     "react": "^18.0.0",
     "styled-components": "^5.2.3",
-    "tsup": "^8.0.2",
-    "typescript": "^5.6.2",
-    "@sproutsocial/seeds-tsconfig": "*",
-    "@sproutsocial/seeds-testing": "*",
-    "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-input": "^1.3.1",
-    "@sproutsocial/seeds-react-form-field": "^1.0.0",
-    "@types/react-modal": "^3.16.0",
-    "@types/styled-system": "^5.1.15"
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/Modal.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from "@sproutsocial/seeds-react-button";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { Input } from "@sproutsocial/seeds-react-input";
 import { Text } from "@sproutsocial/seeds-react-text";
-import Modal from "./Modal";
+import Modal from "./v1/Modal";
 
 interface StatefulStoryProps<T> {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/__tests__/v1/Modal.test.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable */
+import React from "react";
+import { COLOR_PURPLE_300 } from "@sproutsocial/seeds-color";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Modal from "../../v1/Modal";
+
+afterEach(() => cleanup());
+
+describe("Modal", () => {
+  it("renders a custom background color", () => {
+    // Use baseElement since it renders in a Portal
+    render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        onClose={() => {}}
+        closeButtonLabel="Close this dialog"
+      >
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+
+    expect(screen.getByRole("dialog")).toHaveStyleRule(
+      "background-color",
+      COLOR_PURPLE_300
+    );
+  });
+
+  it("should close on overlay click and esc", () => {
+    const onClose = jest.fn();
+    render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        onClose={onClose}
+        closeButtonLabel="Close this dialog"
+      >
+        <Modal.Header>
+          <Modal.CloseButton />
+        </Modal.Header>
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+
+    fireEvent.click(screen.getByRole("dialog").parentElement as HTMLElement);
+    expect(onClose).toHaveBeenCalled();
+
+    onClose.mockClear();
+    fireEvent.keyDown(screen.getByText("ajdsfljasdlfjlasdjf"), {
+      key: "Escape",
+      keyCode: 27,
+    });
+    expect(onClose).toHaveBeenCalled();
+
+    onClose.mockClear();
+    fireEvent.click(screen.getByLabelText("Close this dialog"));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should NOT close on overlay click and esc if onClick is not provided", () => {
+    const onClose = jest.fn();
+    const { baseElement, getByText, queryByLabelText } = render(
+      <Modal
+        isOpen={true}
+        label="Label"
+        bg={COLOR_PURPLE_300}
+        closeButtonLabel="Close this dialog"
+      >
+        ajdsfljasdlfjlasdjf
+      </Modal>
+    );
+
+    expect(queryByLabelText("Close this dialog")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("dialog").parentElement as HTMLElement);
+    expect(onClose).not.toHaveBeenCalled();
+
+    onClose.mockClear();
+    fireEvent.keyDown(screen.getByText("ajdsfljasdlfjlasdjf"), {
+      key: "Escape",
+      keyCode: 27,
+    });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  describe("Modal.Header", () => {
+    it("should have an aria-label on the close button", () => {
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          bg={COLOR_PURPLE_300}
+          onClose={() => {}}
+          closeButtonLabel="Close this dialog"
+        >
+          <Modal.Header>
+            <Modal.CloseButton />
+          </Modal.Header>
+          ajdsfljasdlfjlasdjf
+        </Modal>
+      );
+
+      expect(screen.getByLabelText("Close this dialog")).toBeInTheDocument();
+    });
+
+    it("should accept the onClose handler from ModalContext", () => {
+      const onClose = jest.fn();
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          bg={COLOR_PURPLE_300}
+          onClose={onClose}
+          closeButtonLabel="Close this dialog"
+        >
+          <Modal.Header>
+            <Modal.CloseButton />
+          </Modal.Header>
+          ajdsfljasdlfjlasdjf
+        </Modal>
+      );
+
+      fireEvent.click(screen.getByLabelText("Close this dialog"));
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/v1/Modal.typetest.tsx

@@ -0,0 +1,209 @@
+import * as React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Input } from "@sproutsocial/seeds-react-input";
+import { Text } from "@sproutsocial/seeds-react-text";
+import Modal from "../../v1/Modal";
+import FormField from "@sproutsocial/seeds-react-form-field";
+
+const longContent = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+  eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
+  dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
+  amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.`;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function ModalTypeTest() {
+  return (
+    <>
+      <Modal
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header
+            title="Assign Chatbot"
+            subtitle="The chatbot will respond to customers from this profile."
+          />
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1}>
+              Full-Width Button
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={false}
+        closeButtonLabel="n/a"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1} onClick={jest.fn()}>
+              Must click to close
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header title="" subtitle="" bordered>
+            <Box width="100%" bg="purple.400">
+              Custom header
+            </Box>
+          </Modal.Header>
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1}>
+              Full-Width Button
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={false}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header bordered>
+            <Box>
+              <Text as="h1" fontSize={400} fontWeight="semibold">
+                Assign Chatbot
+              </Text>
+              <Text as="div" fontSize={200}>
+                The chatbot will respond to customers from this profile.
+              </Text>
+            </Box>
+            <Box>
+              <button>dummy button 1</button>
+              <button>dummy button 2</button>
+              <Modal.CloseButton />
+            </Box>
+          </Modal.Header>
+          <Modal.Content>{longContent}</Modal.Content>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header />
+          <Modal.Content>{longContent}</Modal.Content>
+          <Modal.Footer>
+            <Button appearance="primary" width={1}>
+              Full-Width Button
+            </Button>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        width="500px"
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header
+            title="Create Share Link"
+            subtitle="Anyone with this link will be able to view its contents."
+          />
+          <Modal.Content>
+            <FormField
+              label="Label"
+              helperText="This is some helpful helper text"
+            >
+              {
+                // is there a reason that the props are not passed to the input?
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                (props) => (
+                  <Input
+                    placeholder="Type the things..."
+                    name="title"
+                    id="title"
+                  />
+                )
+              }
+            </FormField>
+          </Modal.Content>
+          <Modal.Footer>
+            <Box display="flex" justifyContent="flex-end">
+              <Button appearance="primary">Create Link</Button>
+            </Box>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      <Modal
+        bg="container.background.decorative.purple"
+        width="500px"
+        appElementSelector="#root"
+        isOpen={true}
+        onClose={jest.fn()}
+        closeButtonLabel="Close this dialog"
+        label="Example Modal"
+      >
+        <React.Fragment>
+          <Modal.Header
+            title="Create Share Link"
+            subtitle="Anyone with this link will be able to view its contents."
+          />
+          <Modal.Content>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
+            ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua.
+          </Modal.Content>
+          <Modal.Footer>
+            <Box display="flex" justifyContent="flex-end">
+              <Button appearance="primary">Create Link</Button>
+            </Box>
+          </Modal.Footer>
+        </React.Fragment>
+      </Modal>
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <Modal />
+    </>
+  );
+}
+
+export default ModalTypeTest;

package/src/index.ts

@@ -1,5 +1,38 @@
-import Modal from "./Modal";
-
+// Main export - V1 Modal for backwards compatibility
+import Modal from "./v1";
 export default Modal;
 export { Modal };
-export * from "./ModalTypes";
+
+// Explicit type exports from V1 for tree shaking
+export type {
+  TypeModalProps,
+  TypeModalHeaderProps,
+  TypeModalFooterProps,
+  TypeModalContentProps,
+  TypeModalCloseButtonProps,
+} from "./v1";
+
+// V2 Modal exports
+export {
+  Modal as ModalV2,
+  ModalTrigger,
+  ModalDescription,
+  ModalHeader,
+  ModalFooter,
+  ModalContent,
+  ModalCloseButton,
+  ModalClose,
+  ModalRail,
+  ModalAction,
+} from "./v2";
+export type {
+  TypeModalV2Props,
+  TypeModalV2TriggerProps,
+  TypeModalV2CloseButtonProps,
+  TypeModalV2HeaderProps,
+  TypeModalV2FooterProps,
+  TypeModalV2ContentProps,
+  TypeModalV2DescriptionProps,
+  TypeModalRailProps,
+  TypeModalActionProps,
+} from "./v2";

package/src/shared/constants.ts

@@ -0,0 +1,28 @@
+// Shared constants for both Modal versions
+
+// Default z-index values
+export const DEFAULT_MODAL_Z_INDEX = 6;
+export const DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;
+
+// Default styling values
+export const DEFAULT_MODAL_WIDTH = "600px";
+export const DEFAULT_MODAL_BG = "container.background.base";
+export const DEFAULT_CLOSE_BUTTON_LABEL = "Close dialog";
+
+// Max space allowed between the modal and the edge of the browser
+export const BODY_PADDING = "64px";
+
+// Size presets for simplified API
+export const MODAL_SIZE_PRESETS = {
+  small: "400px",
+  medium: "600px",
+  large: "800px",
+  full: "90vw",
+} as const;
+
+// Priority level z-index mappings
+export const MODAL_PRIORITY_Z_INDEX = {
+  low: 100,
+  medium: 1000,
+  high: 2000,
+} as const;