@sproutsocial/seeds-react-modal 2.5.10 → 2.5.22

package/dist/v2/index.js

@@ -51,12 +51,12 @@ __export(v2_exports, {
 module.exports = __toCommonJS(v2_exports);
 
 // src/v2/Modal.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var Dialog6 = __toESM(require("@radix-ui/react-dialog"));
 var import_react4 = require("motion/react");
 
 // src/v2/components/ModalHeader.tsx
-var React3 = require("react");
+var React2 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
@@ -64,7 +64,7 @@ var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"))
 var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
 
 // src/v2/components/ModalContent.tsx
-var React2 = __toESM(require("react"));
+var React = __toESM(require("react"));
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var import_react = require("motion/react");
 var import_styled_components = __toESM(require("styled-components"));
@@ -80,7 +80,6 @@ var MODAL_SIZE_PRESETS = {
   large: "800px",
   full: "90vw"
 };
-var MOBILE_BREAKPOINT = "780px";
 var RAIL_BUTTON_SIZE = 44;
 var RAIL_OFFSET = 12;
 var RAIL_GAP = 12;
@@ -90,17 +89,11 @@ var RAIL_EXTRA_SPACE = RAIL_BUTTON_SIZE + RAIL_OFFSET;
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 
 // src/v2/MotionConfig.ts
-var React = __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,
@@ -138,40 +131,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,
@@ -186,42 +145,19 @@ var draggableModalVariants = {
     transition: desktopTransition
   }
 };
-function getContentVariants(isMobile, isDraggable) {
-  if (isDraggable) {
-    return draggableModalVariants;
-  }
-  return isMobile ? mobileDrawerVariants : desktopModalVariants;
+function getContentVariants(isDraggable) {
+  return isDraggable ? draggableModalVariants : desktopModalVariants;
 }
-function getOverlayVariants(isMobile) {
-  return isMobile ? mobileOverlayVariants : desktopOverlayVariants;
-}
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT})`).matches;
-  });
-  React.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_runtime = require("react/jsx-runtime");
 var StyledMotionWrapper = (0, import_styled_components.default)(import_react.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_components.default.div.withConfig({
@@ -236,33 +172,10 @@ var StyledContent = import_styled_components.default.div.withConfig({
   color: ${(props) => props.theme.colors.text.body};
   outline: none;
   width: ${DEFAULT_MODAL_WIDTH};
-  max-width: ${(props) => {
-  return `calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px)`;
-}};
+  /* Account for rail space on the side; shrinks to fit small viewports */
+  max-width: calc(100vw - ${BODY_PADDING} - ${RAIL_EXTRA_SPACE}px);
   max-height: calc(100vh - ${BODY_PADDING});
 
-  /* 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_PADDING});
   }
@@ -273,9 +186,9 @@ var StyledContent = import_styled_components.default.div.withConfig({
   ${import_seeds_react_system_props.LAYOUT}
 `;
 StyledContent.displayName = "ModalContent";
-var DragContext = React2.createContext(null);
+var DragContext = React.createContext(null);
 var useDragContext = () => {
-  const context = React2.useContext(DragContext);
+  const context = React.useContext(DragContext);
   return context;
 };
 var StaticModalContent = ({
@@ -286,12 +199,10 @@ var StaticModalContent = ({
   rest,
   dialogContentProps
 }) => {
-  const isMobile = useIsMobile();
-  const contentVariants = getContentVariants(isMobile, false);
+  const contentVariants = getContentVariants(false);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragContext.Provider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Content, { asChild: true, "aria-label": label, ...dialogContentProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     StyledMotionWrapper,
     {
-      $isMobile: isMobile,
       $zIndex: zIndex,
       variants: contentVariants,
       initial: "initial",
@@ -318,11 +229,10 @@ var DraggableModalContent = ({
   rest,
   dialogContentProps
 }) => {
-  const [position, setPosition] = React2.useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = React2.useState(false);
-  const contentRef = React2.useRef(null);
-  const isMobile = useIsMobile();
-  const handleHeaderMouseDown = React2.useCallback((e) => {
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React.useState(false);
+  const contentRef = React.useRef(null);
+  const handleHeaderMouseDown = React.useCallback((e) => {
     const target = e.target;
     if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.closest("button")) {
       return;
@@ -337,18 +247,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;
@@ -366,7 +270,7 @@ var DraggableModalContent = ({
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   }, []);
-  const dragContextValue = React2.useMemo(
+  const dragContextValue = React.useMemo(
     () => ({
       position,
       isDragging,
@@ -376,10 +280,10 @@ var DraggableModalContent = ({
     }),
     [position, isDragging, handleHeaderMouseDown]
   );
-  const handleInteractOutside = React2.useCallback((e) => {
+  const handleInteractOutside = React.useCallback((e) => {
     e.preventDefault();
   }, []);
-  const contentVariants = getContentVariants(isMobile, true);
+  const contentVariants = getContentVariants(true);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragContext.Provider, { value: dragContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Dialog.Content,
     {
@@ -390,7 +294,6 @@ var DraggableModalContent = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         StyledMotionWrapper,
         {
-          $isMobile: isMobile,
           $zIndex: zIndex,
           variants: contentVariants,
           initial: "initial",
@@ -475,13 +378,13 @@ var ModalHeader = (props) => {
 ModalHeader.displayName = "ModalHeader";
 
 // src/v2/components/ModalFooter.tsx
-var React5 = require("react");
+var React4 = require("react");
 var import_styled_components3 = __toESM(require("styled-components"));
 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 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ModalCloseWrapper = (props) => {
@@ -489,7 +392,7 @@ var ModalCloseWrapper = (props) => {
   const handleClick = (e) => {
     onClick?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React4.isValidElement(children) ? React4.cloneElement(children, {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog3.Close, { asChild, onClick: handleClick, ...rest, children: React3.isValidElement(children) ? React3.cloneElement(children, {
     "data-slot": "modal-close-wrapper",
     "data-qa-modal-close-wrapper": "",
     ...children.props || {}
@@ -511,12 +414,6 @@ var ModalCustomFooter = (0, import_styled_components3.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_props3.COMMON}
   ${import_seeds_react_system_props3.FLEXBOX}
   ${import_seeds_react_system_props3.BORDER}
@@ -546,7 +443,7 @@ var ModalFooter = (props) => {
 ModalFooter.displayName = "ModalFooter";
 
 // src/v2/components/ModalBody.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_styled_components4 = __toESM(require("styled-components"));
 var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_system_props4 = require("@sproutsocial/seeds-react-system-props");
@@ -568,7 +465,7 @@ var StyledModalBody = (0, import_styled_components4.default)(import_seeds_react_
   ${import_seeds_react_system_props4.LAYOUT}
 `;
 StyledModalBody.displayName = "ModalBody";
-var ModalBody = React6.forwardRef(
+var ModalBody = React5.forwardRef(
   ({ children, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       StyledModalBody,
@@ -585,11 +482,11 @@ var ModalBody = React6.forwardRef(
 ModalBody.displayName = "ModalBody";
 
 // src/v2/components/ModalDescription.tsx
-var React7 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 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) => {
+var ModalDescription = React6.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,
     {
@@ -604,7 +501,7 @@ var ModalDescription = React7.forwardRef(({ children, descriptionProps = {}, ...
 ModalDescription.displayName = "ModalDescription";
 
 // src/v2/components/ModalRail.tsx
-var React8 = require("react");
+var React7 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Rail = import_styled_components5.default.div`
@@ -615,16 +512,6 @@ var Rail = import_styled_components5.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_runtime7.jsx)(
@@ -640,7 +527,7 @@ var ModalRail = ({ children }) => {
 ModalRail.displayName = "ModalRail";
 
 // src/v2/components/ModalAction.tsx
-var React9 = require("react");
+var React8 = require("react");
 var Dialog5 = __toESM(require("@radix-ui/react-dialog"));
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
@@ -766,11 +653,11 @@ var ModalAction = ({
 ModalAction.displayName = "ModalAction";
 
 // src/v2/components/ModalExternalTrigger.tsx
-var React10 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var ModalExternalTrigger = React10.forwardRef(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {
-  const handleClick = React10.useCallback(
+var ModalExternalTrigger = React9.forwardRef(({ isOpen, onTrigger, modalId, onClick, ...buttonProps }, ref) => {
+  const handleClick = React9.useCallback(
     (e) => {
       onClick?.(e);
       if (!e.defaultPrevented) {
@@ -857,15 +744,15 @@ var Modal = (props) => {
     disableEscapeKeyClose = false,
     ...rest
   } = props;
-  const [isOpen, setIsOpen] = React12.useState(defaultOpen ?? false);
-  const handleOpenChange = React12.useCallback(
+  const [isOpen, setIsOpen] = React11.useState(defaultOpen ?? false);
+  const handleOpenChange = React11.useCallback(
     (newOpen) => {
       setIsOpen(newOpen);
       onOpenChange?.(newOpen);
     },
     [onOpenChange]
   );
-  const dataAttributes = React12.useMemo(() => {
+  const dataAttributes = React11.useMemo(() => {
     const attrs = {};
     Object.entries(data).forEach(([key, value]) => {
       attrs[`data-${key}`] = String(value);
@@ -877,10 +764,9 @@ var Modal = (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 = React12.useCallback(
+  const wrappedOnInteractOutside = React11.useCallback(
     (e) => {
       if (disableOutsideClickClose) {
         e.preventDefault();
@@ -889,12 +775,16 @@ var Modal = (props) => {
     },
     [disableOutsideClickClose, onInteractOutside]
   );
-  const wrappedOnEscapeKeyDown = React12.useCallback(
+  const wrappedOnEscapeKeyDown = React11.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();
       }
@@ -972,7 +862,7 @@ var Modal = (props) => {
   );
 };
 function useModalTriggerProps(isOpen, modalId) {
-  return React12.useMemo(
+  return React11.useMemo(
     () => ({
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -982,8 +872,8 @@ function useModalTriggerProps(isOpen, modalId) {
   );
 }
 function useModalExternalTrigger(modalId) {
-  const triggerRef = React12.useRef(null);
-  const triggerProps = React12.useCallback(
+  const triggerRef = React11.useRef(null);
+  const triggerProps = React11.useCallback(
     (isOpen) => ({
       "aria-haspopup": "dialog",
       "aria-expanded": isOpen,
@@ -991,7 +881,7 @@ function useModalExternalTrigger(modalId) {
     }),
     [modalId]
   );
-  const onCloseAutoFocus = React12.useCallback((e) => {
+  const onCloseAutoFocus = React11.useCallback((e) => {
     e.preventDefault();
     triggerRef.current?.focus();
   }, []);