@sproutsocial/seeds-react-modal 2.5.10 → 2.5.22

package/dist/index.js

@@ -297,12 +297,12 @@ var Modal_default = Modal;
 var v1_default = Modal_default;
 
 // src/v2/Modal.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var Dialog6 = __toESM(require("@radix-ui/react-dialog"));
 var import_react6 = require("motion/react");
 
 // src/v2/components/ModalHeader.tsx
-var React5 = require("react");
+var React4 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
@@ -310,7 +310,7 @@ var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text")
 var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
 
 // src/v2/components/ModalContent.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var import_react3 = require("motion/react");
 var import_styled_components2 = __toESM(require("styled-components"));
@@ -319,7 +319,6 @@ var import_seeds_react_portal = require("@sproutsocial/seeds-react-portal");
 // src/shared/constants.ts
 var DEFAULT_MODAL_WIDTH = "800px";
 var BODY_PADDING2 = "64px";
-var MOBILE_BREAKPOINT = "780px";
 var RAIL_BUTTON_SIZE = 44;
 var RAIL_OFFSET = 12;
 var RAIL_GAP = 12;
@@ -329,17 +328,11 @@ var RAIL_EXTRA_SPACE = RAIL_BUTTON_SIZE + RAIL_OFFSET;
 var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
 
 // src/v2/MotionConfig.ts
-var React3 = __toESM(require("react"));
-var DURATION_MOBILE = 0.6;
 var DURATION_DESKTOP = 0.3;
 var desktopTransition = {
   duration: DURATION_DESKTOP,
   ease: "easeInOut"
 };
-var mobileTransition = {
-  duration: DURATION_MOBILE,
-  ease: "easeInOut"
-};
 var desktopModalVariants = {
   initial: {
     opacity: 0,
@@ -377,40 +370,6 @@ var desktopOverlayVariants = {
     transition: desktopTransition
   }
 };
-var mobileDrawerVariants = {
-  initial: {
-    opacity: 0,
-    x: "-50%",
-    y: "100%",
-    transition: mobileTransition
-  },
-  animate: {
-    opacity: 1,
-    x: "-50%",
-    y: 0,
-    transition: mobileTransition
-  },
-  exit: {
-    opacity: 0,
-    x: "-50%",
-    y: "100%",
-    transition: mobileTransition
-  }
-};
-var mobileOverlayVariants = {
-  initial: {
-    opacity: 0,
-    transition: mobileTransition
-  },
-  animate: {
-    opacity: 1,
-    transition: mobileTransition
-  },
-  exit: {
-    opacity: 0,
-    transition: mobileTransition
-  }
-};
 var draggableModalVariants = {
   initial: {
     opacity: 0,
@@ -425,42 +384,19 @@ var draggableModalVariants = {
     transition: desktopTransition
   }
 };
-function getContentVariants(isMobile, isDraggable) {
-  if (isDraggable) {
-    return draggableModalVariants;
-  }
-  return isMobile ? mobileDrawerVariants : desktopModalVariants;
-}
-function getOverlayVariants(isMobile) {
-  return isMobile ? mobileOverlayVariants : desktopOverlayVariants;
+function getContentVariants(isDraggable) {
+  return isDraggable ? draggableModalVariants : desktopModalVariants;
 }
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React3.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;
-  });
-  React3.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`);
-    const handler = (e) => setIsMobile(e.matches);
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handler);
-      return () => mediaQuery.removeEventListener("change", handler);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handler);
-      return () => mediaQuery.removeListener(handler);
-    }
-  }, []);
-  return isMobile;
+function getOverlayVariants() {
+  return desktopOverlayVariants;
 }
 
 // src/v2/components/ModalContent.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var StyledMotionWrapper = (0, import_styled_components2.default)(import_react3.motion.div)`
   position: fixed;
-  top: ${(props) => props.$isMobile ? "auto" : "50%"};
+  top: 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({
@@ -475,33 +411,10 @@ var StyledContent = import_styled_components2.default.div.withConfig({
   color: ${(props) => props.theme.colors.text.body};
   outline: none;
   width: ${DEFAULT_MODAL_WIDTH};
-  max-width: ${(props) => {
-  return `calc(100vw - ${BODY_PADDING2} - ${RAIL_EXTRA_SPACE}px)`;
-}};
+  /* Account for rail space on the side; shrinks to fit small viewports */
+  max-width: calc(100vw - ${BODY_PADDING2} - ${RAIL_EXTRA_SPACE}px);
   max-height: calc(100vh - ${BODY_PADDING2});
 
-  /* Mobile styles for viewport <= ${MOBILE_BREAKPOINT} */
-  @media (max-width: ${MOBILE_BREAKPOINT}) {
-    /* Full viewport width - edge to edge */
-    width: 100vw;
-    max-width: 100vw;
-    min-width: 100vw;
-
-    /* Height hugs content, with increased max-height to get closer to top */
-    /* Subtract space for rail + comfortable gap (44px rail + ~40px gap) */
-    height: auto;
-    max-height: calc(95vh - 84px);
-
-    /* Adjust border radius for mobile - rounded top, flat bottom to blend with device */
-    border-top-left-radius: ${(props) => props.theme.radii[800]};
-    border-top-right-radius: ${(props) => props.theme.radii[800]};
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    /* Mobile shadow - appears to cast upward (high-reverse) */
-    box-shadow: 0px -16px 32px 0px rgba(39, 51, 51, 0.24);
-  }
-
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     height: calc(100vh - ${BODY_PADDING2});
   }
@@ -512,9 +425,9 @@ var StyledContent = import_styled_components2.default.div.withConfig({
   ${import_seeds_react_system_props2.LAYOUT}
 `;
 StyledContent.displayName = "ModalContent";
-var DragContext = React4.createContext(null);
+var DragContext = React3.createContext(null);
 var useDragContext = () => {
-  const context = React4.useContext(DragContext);
+  const context = React3.useContext(DragContext);
   return context;
 };
 var StaticModalContent = ({
@@ -525,12 +438,10 @@ var StaticModalContent = ({
   rest,
   dialogContentProps
 }) => {
-  const isMobile = useIsMobile();
-  const contentVariants = getContentVariants(isMobile, false);
+  const contentVariants = getContentVariants(false);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DragContext.Provider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Content, { asChild: true, "aria-label": label, ...dialogContentProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     StyledMotionWrapper,
     {
-      $isMobile: isMobile,
       $zIndex: zIndex2,
       variants: contentVariants,
       initial: "initial",
@@ -557,11 +468,10 @@ var DraggableModalContent = ({
   rest,
   dialogContentProps
 }) => {
-  const [position, setPosition] = React4.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React4.useState(false);
-  const contentRef = React4.useRef(null);
-  const isMobile = useIsMobile();
-  const handleHeaderMouseDown = React4.useCallback((e) => {
+  const [position, setPosition] = React3.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React3.useState(false);
+  const contentRef = React3.useRef(null);
+  const handleHeaderMouseDown = React3.useCallback((e) => {
     const target = e.target;
     if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.closest("button")) {
       return;
@@ -576,18 +486,12 @@ var DraggableModalContent = ({
       e2.preventDefault();
       const newX = e2.clientX - offsetX;
       const newY = e2.clientY - offsetY;
-      const isRailOnSide = window.innerWidth > 780;
       const modalWidth = rect.width;
       const modalHeight = rect.height;
-      let maxX = window.innerWidth - modalWidth;
-      let minX = 0;
-      let maxY = window.innerHeight - modalHeight;
-      let minY = 0;
-      if (isRailOnSide) {
-        maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;
-      } else {
-        minY = RAIL_BUTTON_SIZE + RAIL_OFFSET;
-      }
+      const minX = 0;
+      const maxX = window.innerWidth - modalWidth - RAIL_EXTRA_SPACE;
+      const minY = 0;
+      const maxY = window.innerHeight - modalHeight;
       const constrainedX = Math.max(minX, Math.min(maxX, newX));
       const constrainedY = Math.max(minY, Math.min(maxY, newY));
       const centerX = window.innerWidth / 2 - modalWidth / 2;
@@ -605,7 +509,7 @@ var DraggableModalContent = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, []);
-  const dragContextValue = React4.useMemo(
+  const dragContextValue = React3.useMemo(
     () => ({
       position,
       isDragging,
@@ -615,10 +519,10 @@ var DraggableModalContent = ({
     }),
     [position, isDragging, handleHeaderMouseDown]
   );
-  const handleInteractOutside = React4.useCallback((e) => {
+  const handleInteractOutside = React3.useCallback((e) => {
     e.preventDefault();
   }, []);
-  const contentVariants = getContentVariants(isMobile, true);
+  const contentVariants = getContentVariants(true);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Dialog.Content,
     {
@@ -629,7 +533,6 @@ var DraggableModalContent = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         StyledMotionWrapper,
         {
-          $isMobile: isMobile,
           $zIndex: zIndex2,
           variants: contentVariants,
           initial: "initial",
@@ -714,13 +617,13 @@ var ModalHeader2 = (props) => {
 ModalHeader2.displayName = "ModalHeader";
 
 // src/v2/components/ModalFooter.tsx
-var React7 = require("react");
+var React6 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
 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 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ModalCloseWrapper = (props) => {
@@ -728,7 +631,7 @@ var ModalCloseWrapper = (props) => {
   const handleClick = (e) => {
     onClick?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React6.isValidElement(children) ? React6.cloneElement(children, {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React5.isValidElement(children) ? React5.cloneElement(children, {
     "data-slot": "modal-close-wrapper",
     "data-qa-modal-close-wrapper": "",
     ...children.props || {}
@@ -750,12 +653,6 @@ var ModalCustomFooter = (0, import_styled_components4.default)(import_seeds_reac
   justify-content: flex-end;
   gap: ${(props) => props.theme.space[100]};
 
-  /* Flat bottom corners to blend with device edge on mobile */
-  @media (max-width: ${MOBILE_BREAKPOINT}) {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
   ${import_seeds_react_system_props4.COMMON}
   ${import_seeds_react_system_props4.FLEXBOX}
   ${import_seeds_react_system_props4.BORDER}
@@ -785,7 +682,7 @@ var ModalFooter2 = (props) => {
 ModalFooter2.displayName = "ModalFooter";
 
 // src/v2/components/ModalBody.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_seeds_react_box5 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_system_props5 = require("@sproutsocial/seeds-react-system-props");
@@ -807,7 +704,7 @@ var StyledModalBody = (0, import_styled_components5.default)(import_seeds_react_
   ${import_seeds_react_system_props5.LAYOUT}
 `;
 StyledModalBody.displayName = "ModalBody";
-var ModalBody = React8.forwardRef(
+var ModalBody = React7.forwardRef(
   ({ children, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       StyledModalBody,
@@ -824,11 +721,11 @@ var ModalBody = React8.forwardRef(
 ModalBody.displayName = "ModalBody";
 
 // src/v2/components/ModalDescription.tsx
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 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) => {
+var ModalDescription = React8.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,
     {
@@ -843,7 +740,7 @@ var ModalDescription = React9.forwardRef(({ children, descriptionProps = {}, ...
 ModalDescription.displayName = "ModalDescription";
 
 // src/v2/components/ModalRail.tsx
-var React10 = require("react");
+var React9 = require("react");
 var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var Rail = import_styled_components6.default.div`
@@ -854,16 +751,6 @@ var Rail = import_styled_components6.default.div`
   flex-direction: column;
   gap: ${RAIL_GAP}px;
   z-index: 1;
-
-  @media (max-width: ${MOBILE_BREAKPOINT}) {
-    /* Move rail above the modal on the right side */
-    top: auto;
-    bottom: calc(100% + ${RAIL_OFFSET}px);
-    right: ${RAIL_OFFSET}px;
-    left: auto;
-    /* Change to horizontal layout with reversed order */
-    flex-direction: row-reverse;
-  }
 `;
 var ModalRail = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -879,7 +766,7 @@ var ModalRail = ({ children }) => {
 ModalRail.displayName = "ModalRail";
 
 // src/v2/components/ModalAction.tsx
-var React11 = require("react");
+var React10 = require("react");
 var Dialog5 = __toESM(require("@radix-ui/react-dialog"));
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
@@ -1005,11 +892,11 @@ var ModalAction = ({
 ModalAction.displayName = "ModalAction";
 
 // src/v2/components/ModalExternalTrigger.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ModalExternalTrigger = React12.forwardRef(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {
-  const handleClick = React12.useCallback(
+var ModalExternalTrigger = React11.forwardRef(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {
+  const handleClick = React11.useCallback(
     (e) => {
       onClick?.(e);
       if (!e.defaultPrevented) {
@@ -1096,15 +983,15 @@ var Modal2 = (props) => {
     disableEscapeKeyClose = false,
     ...rest
   } = props;
-  const [isOpen, setIsOpen] = React14.useState(defaultOpen ?? false);
-  const handleOpenChange = React14.useCallback(
+  const [isOpen, setIsOpen] = React13.useState(defaultOpen ?? false);
+  const handleOpenChange = React13.useCallback(
     (newOpen) => {
       setIsOpen(newOpen);
       onOpenChange?.(newOpen);
     },
     [onOpenChange]
   );
-  const dataAttributes = React14.useMemo(() => {
+  const dataAttributes = React13.useMemo(() => {
     const attrs = {};
     Object.entries(data).forEach(([key, value]) => {
       attrs[`data-${key}`] = String(value);
@@ -1116,10 +1003,9 @@ var Modal2 = (props) => {
     return attrs;
   }, [data, open]);
   const shouldRenderHeader = Boolean(title || subtitle);
-  const isMobile = useIsMobile();
-  const overlayVariants = getOverlayVariants(isMobile);
+  const overlayVariants = getOverlayVariants();
   const ModalContentComponent = draggable ? DraggableModalContent : StaticModalContent;
-  const wrappedOnInteractOutside = React14.useCallback(
+  const wrappedOnInteractOutside = React13.useCallback(
     (e) => {
       if (disableOutsideClickClose) {
         e.preventDefault();
@@ -1128,12 +1014,16 @@ var Modal2 = (props) => {
     },
     [disableOutsideClickClose, onInteractOutside]
   );
-  const wrappedOnEscapeKeyDown = React14.useCallback(
+  const wrappedOnEscapeKeyDown = React13.useCallback(
     (e) => {
       const hasOpenPopout = document.querySelector("[data-qa-popout]") !== null;
       if (hasOpenPopout) {
         e.preventDefault();
       }
+      const hasOpenBaseUIPopup = document.querySelector("[role='dialog'] [data-open]") !== null;
+      if (hasOpenBaseUIPopup) {
+        e.preventDefault();
+      }
       if (disableEscapeKeyClose) {
         e.preventDefault();
       }
@@ -1211,7 +1101,7 @@ var Modal2 = (props) => {
   );
 };
 function useModalTriggerProps(isOpen, modalId) {
-  return React14.useMemo(
+  return React13.useMemo(
     () => ({
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -1221,8 +1111,8 @@ function useModalTriggerProps(isOpen, modalId) {
   );
 }
 function useModalExternalTrigger(modalId) {
-  const triggerRef = React14.useRef(null);
-  const triggerProps = React14.useCallback(
+  const triggerRef = React13.useRef(null);
+  const triggerProps = React13.useCallback(
     (isOpen) => ({
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -1230,7 +1120,7 @@ function useModalExternalTrigger(modalId) {
     }),
     [modalId]
   );
-  const onCloseAutoFocus = React14.useCallback((e) => {
+  const onCloseAutoFocus = React13.useCallback((e) => {
     e.preventDefault();
     triggerRef.current?.focus();
   }, []);