@sproutsocial/seeds-react-modal 2.1.2 → 2.2.0

package/dist/v2/index.d.mts

@@ -1,4 +1,4 @@
-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 } from '../ModalAction-BB7qJtQj.mjs';
+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 } from '../ModalAction-gIgCE73I.mjs';
 import 'react/jsx-runtime';
 import 'styled-components';
 import '@sproutsocial/seeds-react-box';

package/dist/v2/index.d.ts

@@ -1,4 +1,4 @@
-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 } from '../ModalAction-BB7qJtQj.js';
+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 } from '../ModalAction-gIgCE73I.js';
 import 'react/jsx-runtime';
 import 'styled-components';
 import '@sproutsocial/seeds-react-box';

package/dist/v2/index.js

@@ -218,6 +218,7 @@ var StyledMotionWrapper = (0, import_styled_components.default)(import_react.mot
   top: ${(props) => props.$isMobile ? "auto" : "50%"};
   left: 50%;
   bottom: ${(props) => props.$isMobile ? 0 : "auto"};
+  z-index: ${(props) => props.$zIndex ? props.$zIndex + 1 : 7};
 `;
 var StyledContent = import_styled_components.default.div.withConfig({
   shouldForwardProp: (prop) => !["isDragging", "draggable"].includes(prop)
@@ -277,6 +278,7 @@ var StaticModalContent = ({
   children,
   label,
   dataAttributes,
+  zIndex,
   rest
 }) => {
   const isMobile = useIsMobile();
@@ -285,11 +287,21 @@ var StaticModalContent = ({
     StyledMotionWrapper,
     {
       $isMobile: isMobile,
+      $zIndex: zIndex,
       variants: contentVariants,
       initial: "initial",
       animate: "animate",
       exit: "exit",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledContent, { draggable: false, ...dataAttributes, ...rest, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StyledContent,
+        {
+          "data-slot": "modal-content",
+          draggable: false,
+          ...dataAttributes,
+          ...rest,
+          children
+        }
+      )
     }
   ) }) });
 };
@@ -297,6 +309,7 @@ var DraggableModalContent = ({
   children,
   label,
   dataAttributes,
+  zIndex,
   rest
 }) => {
   const [position, setPosition] = React2.useState({ x: 0, y: 0 });
@@ -371,6 +384,7 @@ var DraggableModalContent = ({
         StyledMotionWrapper,
         {
           $isMobile: isMobile,
+          $zIndex: zIndex,
           variants: contentVariants,
           initial: "initial",
           animate: "animate",
@@ -385,6 +399,7 @@ var DraggableModalContent = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             StyledContent,
             {
+              "data-slot": "modal-content",
               ref: contentRef,
               draggable: true,
               isDragging,
@@ -436,6 +451,8 @@ var ModalHeader = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     ModalCustomHeader,
     {
+      "data-slot": "modal-header",
+      "data-qa-modal-header": true,
       ...rest,
       onMouseDown: isDraggable ? dragContext?.onHeaderMouseDown : void 0,
       draggable: isDraggable,
@@ -456,7 +473,7 @@ var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
 
 // src/v2/components/ModalCloseWrapper.tsx
-var React4 = require("react");
+var React4 = __toESM(require("react"));
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ModalCloseWrapper = (props) => {
@@ -464,7 +481,11 @@ var ModalCloseWrapper = (props) => {
   const handleClick = (e) => {
     onClick?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React4.isValidElement(children) ? React4.cloneElement(children, {
+    "data-slot": "modal-close-wrapper",
+    "data-qa-modal-close-wrapper": "",
+    ...children.props || {}
+  }) : children });
 };
 ModalCloseWrapper.displayName = "ModalCloseWrapper";
 
@@ -499,7 +520,7 @@ var ModalFooter = (props) => {
   if (!cancelButton && !primaryButton && !leftAction) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ModalCustomFooter, { ...rest, children: [
+  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 }),
@@ -534,7 +555,16 @@ var StyledModalBody = (0, import_styled_components4.default)(import_seeds_react_
 StyledModalBody.displayName = "ModalBody";
 var ModalBody = React6.forwardRef(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledModalBody, { "data-qa-modal-body": true, ref, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      StyledModalBody,
+      {
+        "data-slot": "modal-body",
+        "data-qa-modal-body": true,
+        ref,
+        ...rest,
+        children
+      }
+    );
   }
 );
 ModalBody.displayName = "ModalBody";
@@ -545,7 +575,16 @@ var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 var import_seeds_react_box4 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModalDescription = React7.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_box4.default, { ref, ...rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_seeds_react_box4.default,
+    {
+      "data-slot": "modal-description",
+      "data-qa-modal-description": true,
+      ref,
+      ...rest,
+      children
+    }
+  ) });
 });
 ModalDescription.displayName = "ModalDescription";
 
@@ -1217,6 +1256,9 @@ var ModalAction = ({
   const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     RailButton,
     {
+      "data-slot": "modal-action",
+      "data-qa-modal-action": true,
+      "data-qa-modal-action-type": actionType || "button",
       "aria-label": ariaLabel,
       title: ariaLabel,
       disabled: disabled2,
@@ -1243,6 +1285,7 @@ var StyledMotionOverlay = (0, import_styled_components8.default)(import_react3.m
   left: 0px;
   right: 0px;
   bottom: 0px;
+  z-index: ${(props) => props.$zIndex ?? 6};
 `;
 var StyledOverlay = import_styled_components8.default.div.withConfig({
   shouldForwardProp: (prop) => !["allowInteraction"].includes(prop)
@@ -1281,6 +1324,8 @@ var Modal = (props) => {
     showOverlay = true,
     actions,
     closeButtonAriaLabel = "Close",
+    closeButtonProps,
+    zIndex = 6,
     ...rest
   } = props;
   const [isOpen, setIsOpen] = React11.useState(defaultOpen ?? false);
@@ -1319,11 +1364,19 @@ var Modal = (props) => {
           showOverlay && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog6.Overlay, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             StyledMotionOverlay,
             {
+              $zIndex: zIndex,
               variants: overlayVariants,
               initial: "initial",
               animate: "animate",
               exit: "exit",
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledOverlay, { allowInteraction: draggable })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                StyledOverlay,
+                {
+                  "data-slot": "modal-overlay",
+                  "data-qa-modal-overlay": true,
+                  allowInteraction: draggable
+                }
+              )
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -1332,6 +1385,7 @@ var Modal = (props) => {
               label,
               dataAttributes,
               draggable,
+              zIndex,
               rest,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalRail, { children: [
@@ -1339,8 +1393,9 @@ var Modal = (props) => {
                     ModalAction,
                     {
                       actionType: "close",
-                      "aria-label": closeButtonAriaLabel,
-                      iconName: "x-outline"
+                      iconName: "x-outline",
+                      ...closeButtonProps,
+                      "aria-label": closeButtonProps?.["aria-label"] ?? closeButtonAriaLabel
                     }
                   ),
                   actions?.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalAction, { ...action }, idx))