@sproutsocial/seeds-react-modal 2.4.9 → 2.5.1

package/dist/v1/index.js

@@ -214,11 +214,27 @@ var Modal = (props) => {
   } = props;
   const isCloseable = Boolean(onClose);
   const appElement = appElementSelector && document ? document.querySelector(appElementSelector) : void 0;
+  const handleContentRef = React2.useCallback(
+    (contentEl) => {
+      if (!contentEl) return;
+      const portal = contentEl.parentElement?.parentElement;
+      if (portal) {
+        portal.style.pointerEvents = "auto";
+        portal.addEventListener("pointerdown", (e) => {
+          if (document.body.style.pointerEvents === "none") {
+            e.stopPropagation();
+          }
+        });
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Container,
     {
       appElement,
       ariaHideApp: !!appElement,
+      contentRef: handleContentRef,
       isOpen,
       contentLabel: label,
       onRequestClose: onClose || (() => {

package/dist/v1/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/v1/index.ts","../../src/v1/Modal.tsx","../../src/v1/styles.tsx"],"sourcesContent":["// V1 Modal - Explicit exports for optimal tree shaking\nimport Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports\nexport type {\n  TypeModalProps,\n  TypeModalHeaderProps,\n  TypeModalFooterProps,\n  TypeModalContentProps,\n  TypeModalCloseButtonProps,\n} from \"./ModalTypes\";\n","import * as React from \"react\";\nimport { useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, Content, Header, Footer, Body } from \"./styles\";\nimport type {\n  TypeModalProps,\n  TypeModalCloseButtonProps,\n  TypeModalContentProps,\n  TypeModalFooterProps,\n  TypeModalHeaderProps,\n} from \"./ModalTypes\";\n\ntype TypeModalContext = Partial<{\n  onClose: () => void;\n  closeButtonLabel: string;\n  label: string;\n}>;\n\nconst ModalContext = React.createContext<TypeModalContext>({});\n\nconst ModalHeader = (props: TypeModalHeaderProps) => {\n  const { title, subtitle, children, bordered, ...rest } = props;\n  return (\n    <Header bordered={title || subtitle || bordered} {...rest}>\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Text as=\"h1\" fontSize={400} fontWeight=\"semibold\">\n                {title}\n              </Text>\n            )}\n            {subtitle && (\n              <Text as=\"div\" fontSize={200}>\n                {subtitle}\n              </Text>\n            )}\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\" justify-content=\"flex-end\">\n            <ModalCloseButton ml={400} />\n          </Box>\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nconst ModalCloseButton = (props: TypeModalCloseButtonProps) => {\n  const { onClose, closeButtonLabel } = useContext(ModalContext);\n  if (!onClose) return null;\n  return (\n    <Button onClick={onClose} {...props}>\n      <Icon name=\"x-outline\" ariaLabel={closeButtonLabel} />\n    </Button>\n  );\n};\n\nconst ModalFooter = ({\n  bg = \"container.background.base\",\n  ...rest\n}: TypeModalFooterProps) => (\n  <Footer\n    bg={bg}\n    borderTop={500}\n    borderColor=\"container.border.base\"\n    {...rest}\n  />\n);\n\nconst ModalContent = React.forwardRef(\n  ({ children, ...rest }: TypeModalContentProps, ref) => {\n    const { label } = useContext(ModalContext);\n    return (\n      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>\n        {children}\n      </Content>\n    );\n  }\n);\n\n/**\n * The modal you want\n */\nconst Modal = (props: TypeModalProps) => {\n  const {\n    appElementSelector,\n    children,\n    isOpen,\n    label,\n    onClose,\n    closeButtonLabel,\n    width = \"800px\",\n    zIndex = 6,\n    data = {},\n    ...rest\n  } = props;\n\n  const isCloseable = Boolean(onClose);\n  const appElement =\n    appElementSelector && document\n      ? (document.querySelector(appElementSelector) as HTMLElement)\n      : undefined;\n\n  return (\n    <Container\n      appElement={appElement}\n      ariaHideApp={!!appElement}\n      isOpen={isOpen}\n      contentLabel={label}\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      onRequestClose={onClose || (() => {})}\n      shouldFocusAfterRender={true}\n      shouldCloseOnOverlayClick={isCloseable}\n      shouldCloseOnEsc={isCloseable}\n      shouldReturnFocusAfterClose={true}\n      closeTimeoutMS={200}\n      role=\"dialog\"\n      width={width}\n      zIndex={zIndex}\n      data={{\n        \"qa-modal\": \"\",\n        \"qa-modal-isopen\": isOpen,\n        ...data,\n      }}\n      {...rest}\n    >\n      <React.Fragment>\n        <Body />\n\n        <ModalContext.Provider\n          value={{\n            onClose,\n            closeButtonLabel,\n            label,\n          }}\n        >\n          {children}\n        </ModalContext.Provider>\n      </React.Fragment>\n    </Container>\n  );\n};\n\nModalHeader.displayName = \"Modal.Header\";\nModalFooter.displayName = \"Modal.Footer\";\nModalContent.displayName = \"Modal.Content\";\nModalCloseButton.displayName = \"Modal.CloseButton\";\n\nModal.Header = ModalHeader;\nModal.Footer = ModalFooter;\nModal.Content = ModalContent;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import React from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport ReactModal from \"react-modal\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\n\n// This is the max space allowed between the modal and the edge of the browser\nconst BODY_PADDING = \"64px\";\n\nconst ReactModalAdapter = ({\n  className = \"\",\n  ...props\n}: { className?: string } & Omit<\n  ReactModal.Props,\n  \"portalClassName\" | \"className\" | \"overlayClassName\"\n>) => {\n  // We want to create *__Content and *__Overlay class names on the subcomponents.\n  // Because `className` could be a space-separated list of class names, we make\n  // sure that we append `__Content` and `__Overlay` to every class name.\n  const contentClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Content`)\n    .join(\" \");\n\n  const overlayClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Overlay`)\n    .join(\" \");\n\n  return (\n    <ReactModal\n      portalClassName={className}\n      className={contentClassName}\n      overlayClassName={overlayClassName}\n      {...props}\n    />\n  );\n};\n\nexport const Body = createGlobalStyle`\n  .ReactModal__Body--open {\n    overflow: hidden;\n  }\n`;\n\nexport const Container = styled(ReactModalAdapter)<TypeContainerProps>`\n  &__Overlay {\n    position: fixed;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\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\n    ${zIndex}\n\n    &.ReactModal__Overlay--after-open {\n      opacity: 1;\n    }\n    &.ReactModal__Overlay--before-close {\n      opacity: 0;\n    }\n  }\n\n  &__Content {\n    display: flex;\n    flex-direction: column;\n    background: ${(props) => props.theme.colors.container.background.base};\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\n    outline: none;\n    max-width: calc(100vw - ${BODY_PADDING});\n    max-height: calc(100vh - ${BODY_PADDING});\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      /**\n       * This prevents the modal from being very short in IE11. Better too big\n       * than too small.\n       */\n      height: calc(100vh - ${BODY_PADDING});\n    }\n\n    ${width}\n\n    ${COMMON}\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: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    /* 'flex-basis: auto' breaks overflow in IE11 */\n    flex-basis: 100%;\n  }\n`;\n\nexport const HeaderContainer = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n`;\n\nexport const Header = styled(HeaderContainer)<{ bordered?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n  border-bottom-width: ${(props) => props.theme.borderWidths[500]};\n  border-bottom-color: ${(props) =>\n    props.bordered ? props.theme.colors.container.border.base : \"transparent\"};\n  border-bottom-style: solid;\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[450]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n`;\n\nContainer.displayName = \"ModalContainer\";\nContent.displayName = \"Content\";\nHeader.displayName = \"Modal.Header\";\nFooter.displayName = \"Modal.Footer\";\n"],"mappings":"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","names":["React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex"]}
+{"version":3,"sources":["../../src/v1/index.ts","../../src/v1/Modal.tsx","../../src/v1/styles.tsx"],"sourcesContent":["// V1 Modal - Explicit exports for optimal tree shaking\nimport Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports\nexport type {\n  TypeModalProps,\n  TypeModalHeaderProps,\n  TypeModalFooterProps,\n  TypeModalContentProps,\n  TypeModalCloseButtonProps,\n} from \"./ModalTypes\";\n","import * as React from \"react\";\nimport { useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, Content, Header, Footer, Body } from \"./styles\";\nimport type {\n  TypeModalProps,\n  TypeModalCloseButtonProps,\n  TypeModalContentProps,\n  TypeModalFooterProps,\n  TypeModalHeaderProps,\n} from \"./ModalTypes\";\n\ntype TypeModalContext = Partial<{\n  onClose: () => void;\n  closeButtonLabel: string;\n  label: string;\n}>;\n\nconst ModalContext = React.createContext<TypeModalContext>({});\n\nconst ModalHeader = (props: TypeModalHeaderProps) => {\n  const { title, subtitle, children, bordered, ...rest } = props;\n  return (\n    <Header bordered={title || subtitle || bordered} {...rest}>\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Text as=\"h1\" fontSize={400} fontWeight=\"semibold\">\n                {title}\n              </Text>\n            )}\n            {subtitle && (\n              <Text as=\"div\" fontSize={200}>\n                {subtitle}\n              </Text>\n            )}\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\" justify-content=\"flex-end\">\n            <ModalCloseButton ml={400} />\n          </Box>\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nconst ModalCloseButton = (props: TypeModalCloseButtonProps) => {\n  const { onClose, closeButtonLabel } = useContext(ModalContext);\n  if (!onClose) return null;\n  return (\n    <Button onClick={onClose} {...props}>\n      <Icon name=\"x-outline\" ariaLabel={closeButtonLabel} />\n    </Button>\n  );\n};\n\nconst ModalFooter = ({\n  bg = \"container.background.base\",\n  ...rest\n}: TypeModalFooterProps) => (\n  <Footer\n    bg={bg}\n    borderTop={500}\n    borderColor=\"container.border.base\"\n    {...rest}\n  />\n);\n\nconst ModalContent = React.forwardRef(\n  ({ children, ...rest }: TypeModalContentProps, ref) => {\n    const { label } = useContext(ModalContext);\n    return (\n      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>\n        {children}\n      </Content>\n    );\n  }\n);\n\n/**\n * The modal you want\n */\nconst Modal = (props: TypeModalProps) => {\n  const {\n    appElementSelector,\n    children,\n    isOpen,\n    label,\n    onClose,\n    closeButtonLabel,\n    width = \"800px\",\n    zIndex = 6,\n    data = {},\n    ...rest\n  } = props;\n\n  const isCloseable = Boolean(onClose);\n  const appElement =\n    appElementSelector && document\n      ? (document.querySelector(appElementSelector) as HTMLElement)\n      : undefined;\n\n  /**\n   * When a Radix Dialog (Modal V2) is open it sets `pointer-events: none` on\n   * `document.body` and listens for `pointerdown` on the document to detect\n   * \"outside\" clicks. react-modal portals its overlay to body, so:\n   *   1. The overlay inherits `pointer-events: none` → unclickable\n   *   2. Clicks on the overlay bubble to document → Radix dismisses Modal V2\n   *\n   * We use `contentRef` to reach the portal DOM and fix both issues.\n   */\n  const handleContentRef = React.useCallback(\n    (contentEl: HTMLElement | null) => {\n      if (!contentEl) return;\n      // DOM structure: body > portal > overlay > content\n      const portal = contentEl.parentElement?.parentElement;\n      if (portal) {\n        portal.style.pointerEvents = \"auto\";\n        portal.addEventListener(\"pointerdown\", (e) => {\n          // Only stop propagation when Radix Dialog has disabled body pointer events.\n          // This avoids interfering with document-level listeners (analytics, other\n          // click-outside patterns) when no Modal V2 is open.\n          if (document.body.style.pointerEvents === \"none\") {\n            e.stopPropagation();\n          }\n        });\n      }\n    },\n    []\n  );\n\n  return (\n    <Container\n      appElement={appElement}\n      ariaHideApp={!!appElement}\n      contentRef={handleContentRef}\n      isOpen={isOpen}\n      contentLabel={label}\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      onRequestClose={onClose || (() => {})}\n      shouldFocusAfterRender={true}\n      shouldCloseOnOverlayClick={isCloseable}\n      shouldCloseOnEsc={isCloseable}\n      shouldReturnFocusAfterClose={true}\n      closeTimeoutMS={200}\n      role=\"dialog\"\n      width={width}\n      zIndex={zIndex}\n      data={{\n        \"qa-modal\": \"\",\n        \"qa-modal-isopen\": isOpen,\n        ...data,\n      }}\n      {...rest}\n    >\n      <React.Fragment>\n        <Body />\n\n        <ModalContext.Provider\n          value={{\n            onClose,\n            closeButtonLabel,\n            label,\n          }}\n        >\n          {children}\n        </ModalContext.Provider>\n      </React.Fragment>\n    </Container>\n  );\n};\n\nModalHeader.displayName = \"Modal.Header\";\nModalFooter.displayName = \"Modal.Footer\";\nModalContent.displayName = \"Modal.Content\";\nModalCloseButton.displayName = \"Modal.CloseButton\";\n\nModal.Header = ModalHeader;\nModal.Footer = ModalFooter;\nModal.Content = ModalContent;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import React from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport ReactModal from \"react-modal\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\n\n// This is the max space allowed between the modal and the edge of the browser\nconst BODY_PADDING = \"64px\";\n\nconst ReactModalAdapter = ({\n  className = \"\",\n  ...props\n}: { className?: string } & Omit<\n  ReactModal.Props,\n  \"portalClassName\" | \"className\" | \"overlayClassName\"\n>) => {\n  // We want to create *__Content and *__Overlay class names on the subcomponents.\n  // Because `className` could be a space-separated list of class names, we make\n  // sure that we append `__Content` and `__Overlay` to every class name.\n  const contentClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Content`)\n    .join(\" \");\n\n  const overlayClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Overlay`)\n    .join(\" \");\n\n  return (\n    <ReactModal\n      portalClassName={className}\n      className={contentClassName}\n      overlayClassName={overlayClassName}\n      {...props}\n    />\n  );\n};\n\nexport const Body = createGlobalStyle`\n  .ReactModal__Body--open {\n    overflow: hidden;\n  }\n`;\n\nexport const Container = styled(ReactModalAdapter)<TypeContainerProps>`\n  &__Overlay {\n    position: fixed;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\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\n    ${zIndex}\n\n    &.ReactModal__Overlay--after-open {\n      opacity: 1;\n    }\n    &.ReactModal__Overlay--before-close {\n      opacity: 0;\n    }\n  }\n\n  &__Content {\n    display: flex;\n    flex-direction: column;\n    background: ${(props) => props.theme.colors.container.background.base};\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\n    outline: none;\n    max-width: calc(100vw - ${BODY_PADDING});\n    max-height: calc(100vh - ${BODY_PADDING});\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      /**\n       * This prevents the modal from being very short in IE11. Better too big\n       * than too small.\n       */\n      height: calc(100vh - ${BODY_PADDING});\n    }\n\n    ${width}\n\n    ${COMMON}\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: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    /* 'flex-basis: auto' breaks overflow in IE11 */\n    flex-basis: 100%;\n  }\n`;\n\nexport const HeaderContainer = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n`;\n\nexport const Header = styled(HeaderContainer)<{ bordered?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n  border-bottom-width: ${(props) => props.theme.borderWidths[500]};\n  border-bottom-color: ${(props) =>\n    props.bordered ? props.theme.colors.container.border.base : \"transparent\"};\n  border-bottom-style: solid;\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[450]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n`;\n\nContainer.displayName = \"ModalContainer\";\nContent.displayName = \"Content\";\nHeader.displayName = \"Modal.Header\";\nFooter.displayName = \"Modal.Footer\";\n"],"mappings":"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","names":["React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex"]}

package/dist/v2/index.d.mts

@@ -1,84 +1,11 @@
-export { M as Modal, g as ModalAction, d as ModalBody, e as ModalCloseWrapper, p as ModalCloseWrapperProps, i as ModalCustomFooter, h as ModalCustomHeader, a as ModalDescription, c as ModalFooter, b as ModalHeader, f as ModalRail, o as TypeModalActionProps, l as TypeModalBodyProps, m as TypeModalDescriptionProps, k as TypeModalFooterProps, j as TypeModalHeaderProps, T as TypeModalProps, n as TypeModalRailProps, q as useModalExternalTrigger, u as useModalTriggerProps } from '../ModalAction-BHG3Zbd9.mjs';
-import * as React from 'react';
-import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+export { l as Modal, M as ModalAction, a as ModalBody, b as ModalCloseWrapper, c as ModalCloseWrapperProps, d as ModalCustomFooter, e as ModalCustomHeader, f as ModalDescription, g as ModalExternalTrigger, h as ModalExternalTriggerProps, i as ModalFooter, j as ModalHeader, k as ModalRail, T as TypeModalActionProps, n as TypeModalBodyProps, o as TypeModalDescriptionProps, p as TypeModalFooterProps, q as TypeModalHeaderProps, r as TypeModalProps, m as TypeModalRailProps, u as useModalExternalTrigger, s as useModalTriggerProps } from '../ModalExternalTrigger-BnbJk9zY.mjs';
 import 'react/jsx-runtime';
+import 'react';
 import 'styled-components';
 import '@sproutsocial/seeds-react-box';
 import '@radix-ui/react-dialog';
 import '@sproutsocial/seeds-react-icon';
-
-/**
- * Props for ModalExternalTrigger component.
- */
-interface ModalExternalTriggerProps extends Omit<TypeButtonProps, "onClick"> {
-    /** Callback when button is clicked to trigger modal open */
-    onTrigger: () => void;
-    /** Whether the modal is currently open (for ARIA expanded state) */
-    isOpen: boolean;
-    /** Optional modal ID for aria-controls attribute */
-    modalId?: string;
-    /** Optional onClick handler (called before onTrigger) */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-/**
- * A Button component pre-configured for triggering modals from outside the Modal component tree.
- *
- * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.
- * Use this component ONLY as a last resort when architectural constraints prevent keeping
- * the trigger inside the Modal component tree.
- *
- * This component wraps the Seeds Button with automatic ARIA attributes for modal triggers.
- * However, focus restoration still requires manual handling via onCloseAutoFocus callback
- * due to Radix UI's architectural limitations with external triggers.
- *
- * **Why modalTrigger prop is better:**
- * - Automatic ARIA attributes
- * - Automatic focus restoration (no onCloseAutoFocus needed)
- * - Better touch device support
- * - Follows WAI-ARIA Dialog best practices
- *
- * **When to use ModalExternalTrigger:**
- * - Trigger must live outside Modal component tree (e.g., in a page header)
- * - Using Seeds Button as the trigger
- * - Want automatic ARIA attributes without manual hook usage
- *
- * **Usage pattern with focus restoration:**
- * You must still handle focus restoration manually by passing a ref and implementing
- * onCloseAutoFocus on the Modal component.
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false);
- * const triggerRef = useRef<HTMLButtonElement>(null);
- *
- * return (
- *   <>
- *     <ModalExternalTrigger
- *       ref={triggerRef}
- *       isOpen={isOpen}
- *       onTrigger={() => setIsOpen(true)}
- *       appearance="primary"
- *     >
- *       Open Modal
- *     </ModalExternalTrigger>
- *
- *     <Modal
- *       open={isOpen}
- *       onOpenChange={setIsOpen}
- *       onCloseAutoFocus={(e) => {
- *         e.preventDefault();
- *         triggerRef.current?.focus();
- *       }}
- *     >
- *       <ModalBody>Content</ModalBody>
- *     </Modal>
- *   </>
- * );
- * ```
- *
- * @see useModalExternalTrigger - Hook alternative for non-Button triggers
- */
-declare const ModalExternalTrigger: React.ForwardRefExoticComponent<Omit<ModalExternalTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import '@sproutsocial/seeds-react-button';
 
 declare const DEFAULT_MODAL_WIDTH = "800px";
 declare const DEFAULT_MODAL_BG = "container.background.base";
@@ -90,4 +17,4 @@ declare const MODAL_SIZE_PRESETS: {
     readonly full: "90vw";
 };
 
-export { BODY_PADDING, DEFAULT_MODAL_BG, DEFAULT_MODAL_WIDTH, MODAL_SIZE_PRESETS, ModalExternalTrigger, type ModalExternalTriggerProps };
+export { BODY_PADDING, DEFAULT_MODAL_BG, DEFAULT_MODAL_WIDTH, MODAL_SIZE_PRESETS };

package/dist/v2/index.d.ts

@@ -1,84 +1,11 @@
-export { M as Modal, g as ModalAction, d as ModalBody, e as ModalCloseWrapper, p as ModalCloseWrapperProps, i as ModalCustomFooter, h as ModalCustomHeader, a as ModalDescription, c as ModalFooter, b as ModalHeader, f as ModalRail, o as TypeModalActionProps, l as TypeModalBodyProps, m as TypeModalDescriptionProps, k as TypeModalFooterProps, j as TypeModalHeaderProps, T as TypeModalProps, n as TypeModalRailProps, q as useModalExternalTrigger, u as useModalTriggerProps } from '../ModalAction-BHG3Zbd9.js';
-import * as React from 'react';
-import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+export { l as Modal, M as ModalAction, a as ModalBody, b as ModalCloseWrapper, c as ModalCloseWrapperProps, d as ModalCustomFooter, e as ModalCustomHeader, f as ModalDescription, g as ModalExternalTrigger, h as ModalExternalTriggerProps, i as ModalFooter, j as ModalHeader, k as ModalRail, T as TypeModalActionProps, n as TypeModalBodyProps, o as TypeModalDescriptionProps, p as TypeModalFooterProps, q as TypeModalHeaderProps, r as TypeModalProps, m as TypeModalRailProps, u as useModalExternalTrigger, s as useModalTriggerProps } from '../ModalExternalTrigger-BnbJk9zY.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'styled-components';
 import '@sproutsocial/seeds-react-box';
 import '@radix-ui/react-dialog';
 import '@sproutsocial/seeds-react-icon';
-
-/**
- * Props for ModalExternalTrigger component.
- */
-interface ModalExternalTriggerProps extends Omit<TypeButtonProps, "onClick"> {
-    /** Callback when button is clicked to trigger modal open */
-    onTrigger: () => void;
-    /** Whether the modal is currently open (for ARIA expanded state) */
-    isOpen: boolean;
-    /** Optional modal ID for aria-controls attribute */
-    modalId?: string;
-    /** Optional onClick handler (called before onTrigger) */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-/**
- * A Button component pre-configured for triggering modals from outside the Modal component tree.
- *
- * ⚠️ **NOT RECOMMENDED** - Prefer using modalTrigger prop or ModalTrigger component.
- * Use this component ONLY as a last resort when architectural constraints prevent keeping
- * the trigger inside the Modal component tree.
- *
- * This component wraps the Seeds Button with automatic ARIA attributes for modal triggers.
- * However, focus restoration still requires manual handling via onCloseAutoFocus callback
- * due to Radix UI's architectural limitations with external triggers.
- *
- * **Why modalTrigger prop is better:**
- * - Automatic ARIA attributes
- * - Automatic focus restoration (no onCloseAutoFocus needed)
- * - Better touch device support
- * - Follows WAI-ARIA Dialog best practices
- *
- * **When to use ModalExternalTrigger:**
- * - Trigger must live outside Modal component tree (e.g., in a page header)
- * - Using Seeds Button as the trigger
- * - Want automatic ARIA attributes without manual hook usage
- *
- * **Usage pattern with focus restoration:**
- * You must still handle focus restoration manually by passing a ref and implementing
- * onCloseAutoFocus on the Modal component.
- *
- * @example
- * ```tsx
- * const [isOpen, setIsOpen] = useState(false);
- * const triggerRef = useRef<HTMLButtonElement>(null);
- *
- * return (
- *   <>
- *     <ModalExternalTrigger
- *       ref={triggerRef}
- *       isOpen={isOpen}
- *       onTrigger={() => setIsOpen(true)}
- *       appearance="primary"
- *     >
- *       Open Modal
- *     </ModalExternalTrigger>
- *
- *     <Modal
- *       open={isOpen}
- *       onOpenChange={setIsOpen}
- *       onCloseAutoFocus={(e) => {
- *         e.preventDefault();
- *         triggerRef.current?.focus();
- *       }}
- *     >
- *       <ModalBody>Content</ModalBody>
- *     </Modal>
- *   </>
- * );
- * ```
- *
- * @see useModalExternalTrigger - Hook alternative for non-Button triggers
- */
-declare const ModalExternalTrigger: React.ForwardRefExoticComponent<Omit<ModalExternalTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import '@sproutsocial/seeds-react-button';
 
 declare const DEFAULT_MODAL_WIDTH = "800px";
 declare const DEFAULT_MODAL_BG = "container.background.base";
@@ -90,4 +17,4 @@ declare const MODAL_SIZE_PRESETS: {
     readonly full: "90vw";
 };
 
-export { BODY_PADDING, DEFAULT_MODAL_BG, DEFAULT_MODAL_WIDTH, MODAL_SIZE_PRESETS, ModalExternalTrigger, type ModalExternalTriggerProps };
+export { BODY_PADDING, DEFAULT_MODAL_BG, DEFAULT_MODAL_WIDTH, MODAL_SIZE_PRESETS };

package/dist/v2/index.js

@@ -523,15 +523,22 @@ var ModalCustomFooter = (0, import_styled_components3.default)(import_seeds_reac
 `;
 ModalCustomFooter.displayName = "ModalCustomFooter";
 var ModalFooter = (props) => {
-  const { cancelButton, primaryButton, leftAction, ...rest } = props;
+  const {
+    cancelButton,
+    primaryButton,
+    leftAction,
+    closeOnPrimaryAction = true,
+    ...rest
+  } = props;
   if (!cancelButton && !primaryButton && !leftAction) {
     return null;
   }
+  const wrappedPrimaryButton = primaryButton && closeOnPrimaryAction ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalCloseWrapper, { children: primaryButton }) : primaryButton;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ModalCustomFooter, { "data-slot": "modal-footer", "data-qa-modal-footer": true, ...rest, children: [
     leftAction ? leftAction : null,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box2.default, { display: "flex", gap: 300, marginLeft: "auto", children: [
       cancelButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalCloseWrapper, { children: cancelButton }),
-      primaryButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalCloseWrapper, { children: primaryButton })
+      wrappedPrimaryButton
     ] })
   ] });
 };
@@ -639,7 +646,6 @@ var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"))
 
 // ../seeds-react-mixins/dist/esm/index.js
 var import_styled_components6 = require("styled-components");
-var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
 var visuallyHidden = import_styled_components6.css`
   position: absolute;
   width: 1px;
@@ -651,11 +657,12 @@ var visuallyHidden = import_styled_components6.css`
   border: 0;
 `;
 var focusRing = import_styled_components6.css`
-  box-shadow: 0 0 0 1px ${import_seeds_react_theme.theme.colors.button.primary.background.base},
+  box-shadow: 0 0 0 1px
+      ${({ theme }) => theme.colors.button.primary.background.base},
     0 0px 0px 4px
       color-mix(
         in srgb,
-        ${import_seeds_react_theme.theme.colors.button.primary.background.base},
+        ${({ theme }) => theme.colors.button.primary.background.base},
         transparent 70%
       );
   outline: none;
@@ -665,15 +672,30 @@ var focusRing = import_styled_components6.css`
   }
 `;
 var pill = import_styled_components6.css`
-  min-width: ${import_seeds_react_theme.theme.space[600]};
-  min-height: ${import_seeds_react_theme.theme.space[600]};
-  padding: ${import_seeds_react_theme.theme.space[300]};
-  border-radius: ${import_seeds_react_theme.theme.radii.pill};
+  min-width: ${({ theme }) => theme.space[600]};
+  min-height: ${({ theme }) => theme.space[600]};
+  padding: ${({ theme }) => theme.space[300]};
+  border-radius: ${({ theme }) => theme.radii.pill};
 `;
 var disabled = import_styled_components6.css`
   opacity: 0.4;
   pointer-events: none;
 `;
+var container = import_styled_components6.css`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borders[500]}
+    ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+`;
+var divider = import_styled_components6.css`
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+`;
+var truncate = import_styled_components6.css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
 
 // src/v2/components/ModalAction.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");