@sproutsocial/seeds-react-modal 2.1.1 → 2.2.0

package/dist/index.js

@@ -441,6 +441,7 @@ var StyledMotionWrapper = (0, import_styled_components2.default)(import_react3.m
   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_components2.default.div.withConfig({
   shouldForwardProp: (prop) => !["isDragging", "draggable"].includes(prop)
@@ -500,6 +501,7 @@ var StaticModalContent = ({
   children,
   label,
   dataAttributes,
+  zIndex: zIndex2,
   rest
 }) => {
   const isMobile = useIsMobile();
@@ -508,11 +510,21 @@ var StaticModalContent = ({
     StyledMotionWrapper,
     {
       $isMobile: isMobile,
+      $zIndex: zIndex2,
       variants: contentVariants,
       initial: "initial",
       animate: "animate",
       exit: "exit",
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledContent, { draggable: false, ...dataAttributes, ...rest, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        StyledContent,
+        {
+          "data-slot": "modal-content",
+          draggable: false,
+          ...dataAttributes,
+          ...rest,
+          children
+        }
+      )
     }
   ) }) });
 };
@@ -520,6 +532,7 @@ var DraggableModalContent = ({
   children,
   label,
   dataAttributes,
+  zIndex: zIndex2,
   rest
 }) => {
   const [position, setPosition] = React4.useState({ x: 0, y: 0 });
@@ -594,6 +607,7 @@ var DraggableModalContent = ({
         StyledMotionWrapper,
         {
           $isMobile: isMobile,
+          $zIndex: zIndex2,
           variants: contentVariants,
           initial: "initial",
           animate: "animate",
@@ -608,6 +622,7 @@ var DraggableModalContent = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             StyledContent,
             {
+              "data-slot": "modal-content",
               ref: contentRef,
               draggable: true,
               isDragging,
@@ -659,6 +674,8 @@ var ModalHeader2 = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     ModalCustomHeader,
     {
+      "data-slot": "modal-header",
+      "data-qa-modal-header": true,
       ...rest,
       onMouseDown: isDraggable ? dragContext?.onHeaderMouseDown : void 0,
       draggable: isDraggable,
@@ -679,7 +696,7 @@ var import_seeds_react_box4 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_system_props4 = require("@sproutsocial/seeds-react-system-props");
 
 // src/v2/components/ModalCloseWrapper.tsx
-var React6 = require("react");
+var React6 = __toESM(require("react"));
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalCloseWrapper = (props) => {
@@ -687,7 +704,11 @@ var ModalCloseWrapper = (props) => {
   const handleClick = (e) => {
     onClick?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React6.isValidElement(children) ? React6.cloneElement(children, {
+    "data-slot": "modal-close-wrapper",
+    "data-qa-modal-close-wrapper": "",
+    ...children.props || {}
+  }) : children });
 };
 ModalCloseWrapper.displayName = "ModalCloseWrapper";
 
@@ -722,7 +743,7 @@ var ModalFooter2 = (props) => {
   if (!cancelButton && !primaryButton && !leftAction) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ModalCustomFooter, { ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ModalCustomFooter, { "data-slot": "modal-footer", "data-qa-modal-footer": true, ...rest, children: [
     leftAction ? leftAction : null,
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_seeds_react_box4.default, { display: "flex", gap: 300, marginLeft: "auto", children: [
       cancelButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModalCloseWrapper, { children: cancelButton }),
@@ -757,7 +778,16 @@ var StyledModalBody = (0, import_styled_components5.default)(import_seeds_react_
 StyledModalBody.displayName = "ModalBody";
 var ModalBody = React8.forwardRef(
   ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledModalBody, { "data-qa-modal-body": true, ref, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      StyledModalBody,
+      {
+        "data-slot": "modal-body",
+        "data-qa-modal-body": true,
+        ref,
+        ...rest,
+        children
+      }
+    );
   }
 );
 ModalBody.displayName = "ModalBody";
@@ -768,7 +798,16 @@ var Dialog4 = __toESM(require("@radix-ui/react-dialog"));
 var import_seeds_react_box6 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ModalDescription = React9.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_box6.default, { ref, ...rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_seeds_react_box6.default,
+    {
+      "data-slot": "modal-description",
+      "data-qa-modal-description": true,
+      ref,
+      ...rest,
+      children
+    }
+  ) });
 });
 ModalDescription.displayName = "ModalDescription";
 
@@ -1440,6 +1479,9 @@ var ModalAction = ({
   const button = /* @__PURE__ */ (0, import_jsx_runtime10.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,
@@ -1466,6 +1508,7 @@ var StyledMotionOverlay = (0, import_styled_components9.default)(import_react5.m
   left: 0px;
   right: 0px;
   bottom: 0px;
+  z-index: ${(props) => props.$zIndex ?? 6};
 `;
 var StyledOverlay = import_styled_components9.default.div.withConfig({
   shouldForwardProp: (prop) => !["allowInteraction"].includes(prop)
@@ -1504,6 +1547,8 @@ var Modal2 = (props) => {
     showOverlay = true,
     actions,
     closeButtonAriaLabel = "Close",
+    closeButtonProps,
+    zIndex: zIndex2 = 6,
     ...rest
   } = props;
   const [isOpen, setIsOpen] = React13.useState(defaultOpen ?? false);
@@ -1542,11 +1587,19 @@ var Modal2 = (props) => {
           showOverlay && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog6.Overlay, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             StyledMotionOverlay,
             {
+              $zIndex: zIndex2,
               variants: overlayVariants,
               initial: "initial",
               animate: "animate",
               exit: "exit",
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledOverlay, { allowInteraction: draggable })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                StyledOverlay,
+                {
+                  "data-slot": "modal-overlay",
+                  "data-qa-modal-overlay": true,
+                  allowInteraction: draggable
+                }
+              )
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -1555,6 +1608,7 @@ var Modal2 = (props) => {
               label,
               dataAttributes,
               draggable,
+              zIndex: zIndex2,
               rest,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ModalRail, { children: [
@@ -1562,8 +1616,9 @@ var Modal2 = (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_runtime11.jsx)(ModalAction, { ...action }, idx))