@sproutsocial/seeds-react-modal 2.4.8 → 2.5.0

package/.turbo/turbo-build.log

@@ -3,39 +3,39 @@ $ tsup --dts
 CLI Building entry: {"index":"src/index.ts","v1/index":"src/v1/index.ts","v2/index":"src/v2/index.ts"}
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-modal/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-modal/tsup.config.ts
 CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
+CJS dist/index.js        41.30 KB
+CJS dist/v1/index.js     10.31 KB
+CJS dist/v2/index.js     32.84 KB
+CJS dist/index.js.map    81.32 KB
+CJS dist/v1/index.js.map 14.56 KB
+CJS dist/v2/index.js.map 66.44 KB
+CJS ⚡️ Build success in 57ms
 ESM dist/esm/v1/index.js           165.00 B
-ESM dist/esm/index.js              583.00 B
 ESM dist/esm/v2/index.js           746.00 B
-ESM dist/esm/chunk-IYDY4OPB.js     7.12 KB
-ESM dist/esm/chunk-ZY6VJ7XT.js     27.01 KB
-ESM dist/esm/v1/index.js.map       71.00 B
-ESM dist/esm/index.js.map          1.05 KB
+ESM dist/esm/index.js              733.00 B
+ESM dist/esm/chunk-72GBDCA2.js     7.57 KB
+ESM dist/esm/chunk-62MRZAJV.js     27.81 KB
 ESM dist/esm/v2/index.js.map       71.00 B
-ESM dist/esm/chunk-IYDY4OPB.js.map 12.85 KB
-ESM dist/esm/chunk-ZY6VJ7XT.js.map 63.72 KB
-ESM ⚡️ Build success in 223ms
-CJS dist/v1/index.js     9.86 KB
-CJS dist/v2/index.js     32.13 KB
-CJS dist/index.js        39.21 KB
-CJS dist/v1/index.js.map 13.03 KB
-CJS dist/v2/index.js.map 64.79 KB
-CJS dist/index.js.map    77.51 KB
-CJS ⚡️ Build success in 263ms
+ESM dist/esm/v1/index.js.map       71.00 B
+ESM dist/esm/index.js.map          1.16 KB
+ESM dist/esm/chunk-72GBDCA2.js.map 14.38 KB
+ESM dist/esm/chunk-62MRZAJV.js.map 65.36 KB
+ESM ⚡️ Build success in 58ms
 DTS Build start
-DTS ⚡️ Build success in 18205ms
-DTS dist/index.d.ts                 975.00 B
-DTS dist/v1/index.d.ts              413.00 B
-DTS dist/v2/index.d.ts              3.72 KB
-DTS dist/Modal-ki8oiGbC.d.ts        2.52 KB
-DTS dist/ModalAction-BHG3Zbd9.d.ts  20.46 KB
-DTS dist/index.d.mts                978.00 B
-DTS dist/v1/index.d.mts             415.00 B
-DTS dist/v2/index.d.mts             3.72 KB
-DTS dist/Modal-ki8oiGbC.d.mts       2.52 KB
-DTS dist/ModalAction-BHG3Zbd9.d.mts 20.46 KB
-Done in 21.54s.
+DTS ⚡️ Build success in 4510ms
+DTS dist/index.d.ts                          1.07 KB
+DTS dist/v1/index.d.ts                       413.00 B
+DTS dist/v2/index.d.ts                       1.16 KB
+DTS dist/Modal-DTeKLfEI.d.ts                 2.52 KB
+DTS dist/ModalExternalTrigger-BnbJk9zY.d.ts  23.41 KB
+DTS dist/index.d.mts                         1.08 KB
+DTS dist/v1/index.d.mts                      415.00 B
+DTS dist/v2/index.d.mts                      1.16 KB
+DTS dist/Modal-DTeKLfEI.d.mts                2.52 KB
+DTS dist/ModalExternalTrigger-BnbJk9zY.d.mts 23.41 KB
+Done in 5.41s.

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @sproutsocial/seeds-react-modal
 
+## 2.5.0
+
+### Minor Changes
+
+- badefd7: Add `closeOnPrimaryAction` prop to ModalFooter to support async primary actions without auto-closing. Document all Modal V2 close event handlers (`onEscapeKeyDown`, `onInteractOutside`, `closeButtonProps.onClick`, etc.) and convenience props (`disableEscapeKeyClose`, `disableOutsideClickClose`) on the reference site and PropTable.
+
+## 2.4.13
+
+### Patch Changes
+
+- 62285b4: Title: Export useModalTriggerProps, useModalExternalTrigger, and ModalExternalTrigger from top-level package; add controlled modal and accessible trigger documentation
+
+  Description:
+
+  Exports `useModalTriggerProps`, `useModalExternalTrigger`, `ModalExternalTrigger`, and `ModalExternalTriggerProps` from the main `seeds-react-modal` package entry point so consumers can import them from `@sproutsocial/racine` without reaching into the `/v2` subpath.
+
+  Updates reference site and Storybook documentation to cover:
+
+  - Uncontrolled vs controlled modal patterns with clear recommendations
+  - `useModalExternalTrigger`, `ModalExternalTrigger`, and `useModalTriggerProps` usage for controlled modals
+  - Accessible triggers for Modal V1 using `useModalTriggerProps` as a stopgap before migration
+  - Nested Modal V2 stacking with `zIndex` prop
+  - Fixes "can not" → "can't" in destructive confirmation example (issue #1973)
+
+- Updated dependencies [7d54d67]
+  - @sproutsocial/seeds-react-button@1.4.0
+
+## 2.4.12
+
+### Patch Changes
+
+- Updated dependencies [17d4f12]
+  - @sproutsocial/seeds-react-theme@3.6.0
+  - @sproutsocial/seeds-react-box@1.1.14
+  - @sproutsocial/seeds-react-icon@2.2.5
+  - @sproutsocial/seeds-react-button@1.3.20
+
+## 2.4.11
+
+### Patch Changes
+
+- 2689788: Fix Toast and Modal V1 being unclickable when Modal V2 is open
+
+  When a Radix Dialog (Modal V2) is open, it sets `pointer-events: none` on `document.body`
+  and listens for `pointerdown` on the document to detect outside clicks. This breaks non-Radix
+  overlays that portal to body (Toast, Modal V1) — making them unclickable and causing Modal V2
+  to dismiss when interacting with them.
+
+  **Toast**: Wrap `ToastRoot` in Radix `DismissableLayerBranch` with `pointer-events: auto`.
+  This registers the toast container as a branch of the dismissable layer system, preventing
+  Modal V2 from closing on toast interaction.
+
+  **Modal V1**: Use react-modal's `contentRef` to set `pointer-events: auto` on the portal node
+  and stop `pointerdown` propagation. `DismissableLayerBranch` can't be used here because
+  react-modal portals to `document.body`, and Modal V2's `transform` creates a containing block
+  that would break V1's `position: fixed` overlay if portaled inside V2.
+
+## 2.4.10
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-button@1.3.19
+
+## 2.4.9
+
+### Patch Changes
+
+- 6f71236: fix(menu): add `type="button"` to MenuItem to prevent form auto-submit inside Modal V2
+  fix(modal): prevent Escape key from closing modal when a V1 Popout is open
+
 ## 2.4.8
 
 ### Patch Changes

package/dist/{Modal-ki8oiGbC.d.mts → Modal-DTeKLfEI.d.mts}

@@ -66,4 +66,4 @@ declare const Modal: {
     };
 };
 
-export { Modal as M, type TypeModalProps as T, type TypeModalHeaderProps as a, type TypeModalFooterProps as b, type TypeModalContentProps as c, type TypeModalCloseButtonProps as d };
+export { Modal as M, type TypeModalCloseButtonProps as T, type TypeModalContentProps as a, type TypeModalFooterProps as b, type TypeModalHeaderProps as c, type TypeModalProps as d };

package/dist/{Modal-ki8oiGbC.d.ts → Modal-DTeKLfEI.d.ts}

@@ -66,4 +66,4 @@ declare const Modal: {
     };
 };
 
-export { Modal as M, type TypeModalProps as T, type TypeModalHeaderProps as a, type TypeModalFooterProps as b, type TypeModalContentProps as c, type TypeModalCloseButtonProps as d };
+export { Modal as M, type TypeModalCloseButtonProps as T, type TypeModalContentProps as a, type TypeModalFooterProps as b, type TypeModalHeaderProps as c, type TypeModalProps as d };

package/dist/{ModalAction-BHG3Zbd9.d.mts → ModalExternalTrigger-BnbJk9zY.d.mts}

@@ -2,9 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as styled_components from 'styled-components';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
-import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
+import { TypeBoxProps, TypeContainerProps } from '@sproutsocial/seeds-react-box';
 import * as Dialog from '@radix-ui/react-dialog';
 import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
 
 /**
  * Props for ModalHeader component.
@@ -57,7 +58,15 @@ interface TypeModalDescriptionProps extends TypeBoxProps {
  * Note: This component only supports slots (button props).
  * For custom footers, use ModalCustomFooter instead.
  */
-type TypeModalFooterProps = TypeBoxProps & ({
+type TypeModalFooterProps = TypeBoxProps & {
+    /**
+     * Whether clicking the primary button automatically closes the modal.
+     * Set to `false` when the primary action is async (e.g., saving data)
+     * and the modal should stay open until the operation completes.
+     * @default true
+     */
+    closeOnPrimaryAction?: boolean;
+} & ({
     /** Primary action button - automatically wrapped in ModalCloseWrapper */
     primaryButton: React.ReactNode;
     /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper */
@@ -561,4 +570,77 @@ declare const ModalRail: React.FC<TypeModalRailProps>;
 
 declare const ModalAction: React.FC<TypeModalActionProps>;
 
-export { Modal as M, type TypeModalProps as T, ModalDescription as a, ModalHeader as b, ModalFooter as c, ModalBody as d, ModalCloseWrapper as e, ModalRail as f, ModalAction as g, ModalCustomHeader as h, ModalCustomFooter as i, type TypeModalHeaderProps as j, type TypeModalFooterProps as k, type TypeModalBodyProps as l, type TypeModalDescriptionProps as m, type TypeModalRailProps as n, type TypeModalActionProps as o, type ModalCloseWrapperProps as p, useModalExternalTrigger as q, useModalTriggerProps as u };
+/**
+ * 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>>;
+
+export { ModalAction as M, type TypeModalActionProps as T, ModalBody as a, ModalCloseWrapper as b, type ModalCloseWrapperProps as c, ModalCustomFooter as d, ModalCustomHeader as e, ModalDescription as f, ModalExternalTrigger as g, type ModalExternalTriggerProps as h, ModalFooter as i, ModalHeader as j, ModalRail as k, Modal as l, type TypeModalRailProps as m, type TypeModalBodyProps as n, type TypeModalDescriptionProps as o, type TypeModalFooterProps as p, type TypeModalHeaderProps as q, type TypeModalProps as r, useModalTriggerProps as s, useModalExternalTrigger as u };

package/dist/{ModalAction-BHG3Zbd9.d.ts → ModalExternalTrigger-BnbJk9zY.d.ts}

@@ -2,9 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as styled_components from 'styled-components';
 import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
-import { TypeContainerProps, TypeBoxProps } from '@sproutsocial/seeds-react-box';
+import { TypeBoxProps, TypeContainerProps } from '@sproutsocial/seeds-react-box';
 import * as Dialog from '@radix-ui/react-dialog';
 import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
 
 /**
  * Props for ModalHeader component.
@@ -57,7 +58,15 @@ interface TypeModalDescriptionProps extends TypeBoxProps {
  * Note: This component only supports slots (button props).
  * For custom footers, use ModalCustomFooter instead.
  */
-type TypeModalFooterProps = TypeBoxProps & ({
+type TypeModalFooterProps = TypeBoxProps & {
+    /**
+     * Whether clicking the primary button automatically closes the modal.
+     * Set to `false` when the primary action is async (e.g., saving data)
+     * and the modal should stay open until the operation completes.
+     * @default true
+     */
+    closeOnPrimaryAction?: boolean;
+} & ({
     /** Primary action button - automatically wrapped in ModalCloseWrapper */
     primaryButton: React.ReactNode;
     /** Cancel/secondary button - automatically wrapped in ModalCloseWrapper */
@@ -561,4 +570,77 @@ declare const ModalRail: React.FC<TypeModalRailProps>;
 
 declare const ModalAction: React.FC<TypeModalActionProps>;
 
-export { Modal as M, type TypeModalProps as T, ModalDescription as a, ModalHeader as b, ModalFooter as c, ModalBody as d, ModalCloseWrapper as e, ModalRail as f, ModalAction as g, ModalCustomHeader as h, ModalCustomFooter as i, type TypeModalHeaderProps as j, type TypeModalFooterProps as k, type TypeModalBodyProps as l, type TypeModalDescriptionProps as m, type TypeModalRailProps as n, type TypeModalActionProps as o, type ModalCloseWrapperProps as p, useModalExternalTrigger as q, useModalTriggerProps as u };
+/**
+ * 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>>;
+
+export { ModalAction as M, type TypeModalActionProps as T, ModalBody as a, ModalCloseWrapper as b, type ModalCloseWrapperProps as c, ModalCustomFooter as d, ModalCustomHeader as e, ModalDescription as f, ModalExternalTrigger as g, type ModalExternalTriggerProps as h, ModalFooter as i, ModalHeader as j, ModalRail as k, Modal as l, type TypeModalRailProps as m, type TypeModalBodyProps as n, type TypeModalDescriptionProps as o, type TypeModalFooterProps as p, type TypeModalHeaderProps as q, type TypeModalProps as r, useModalTriggerProps as s, useModalExternalTrigger as u };

package/dist/esm/{chunk-ZY6VJ7XT.js → chunk-62MRZAJV.js}

@@ -486,15 +486,22 @@ var ModalCustomFooter = styled3(Box2)`
 `;
 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__ */ jsx4(ModalCloseWrapper, { children: primaryButton }) : primaryButton;
   return /* @__PURE__ */ jsxs2(ModalCustomFooter, { "data-slot": "modal-footer", "data-qa-modal-footer": true, ...rest, children: [
     leftAction ? leftAction : null,
     /* @__PURE__ */ jsxs2(Box2, { display: "flex", gap: 300, marginLeft: "auto", children: [
       cancelButton && /* @__PURE__ */ jsx4(ModalCloseWrapper, { children: cancelButton }),
-      primaryButton && /* @__PURE__ */ jsx4(ModalCloseWrapper, { children: primaryButton })
+      wrappedPrimaryButton
     ] })
   ] });
 };
@@ -607,7 +614,6 @@ import Icon from "@sproutsocial/seeds-react-icon";
 
 // ../seeds-react-mixins/dist/esm/index.js
 import { css } from "styled-components";
-import { theme } from "@sproutsocial/seeds-react-theme";
 var visuallyHidden = css`
   position: absolute;
   width: 1px;
@@ -619,11 +625,12 @@ var visuallyHidden = css`
   border: 0;
 `;
 var focusRing = css`
-  box-shadow: 0 0 0 1px ${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,
-        ${theme.colors.button.primary.background.base},
+        ${({ theme }) => theme.colors.button.primary.background.base},
         transparent 70%
       );
   outline: none;
@@ -633,15 +640,30 @@ var focusRing = css`
   }
 `;
 var pill = css`
-  min-width: ${theme.space[600]};
-  min-height: ${theme.space[600]};
-  padding: ${theme.space[300]};
-  border-radius: ${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 = css`
   opacity: 0.4;
   pointer-events: none;
 `;
+var container = 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 = css`
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+`;
+var truncate = css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
 
 // src/v2/components/ModalAction.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -837,6 +859,10 @@ var Modal = (props) => {
   );
   const wrappedOnEscapeKeyDown = React12.useCallback(
     (e) => {
+      const hasOpenPopout = document.querySelector("[data-qa-popout]") !== null;
+      if (hasOpenPopout) {
+        e.preventDefault();
+      }
       if (disableEscapeKeyClose) {
         e.preventDefault();
       }
@@ -960,4 +986,4 @@ export {
   useModalExternalTrigger,
   Modal_default
 };
-//# sourceMappingURL=chunk-ZY6VJ7XT.js.map
+//# sourceMappingURL=chunk-62MRZAJV.js.map