sellmate-design-system-react 4.3.0 → 4.3.1

package/dist/index.js

@@ -5301,6 +5301,16 @@ var SCircleProgress = /* @__PURE__ */ forwardRef(
     );
   }
 );
+
+// src/lib/global-overlay.ts
+var GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
+var globalOverlayProps = { [GLOBAL_OVERLAY_ATTR]: "" };
+function isFromGlobalOverlay(event) {
+  const detail = event.detail;
+  const target = detail?.originalEvent?.target ?? event.target;
+  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  return !!element?.closest(`[${GLOBAL_OVERLAY_ATTR}]`);
+}
 var SLoadingContainer = /* @__PURE__ */ forwardRef(
   function SLoadingContainer2({ open = false, message, zIndex = Z_INDEX.loading, className, style }, ref) {
     const [mounted2, setMounted] = useState(false);
@@ -5337,6 +5347,7 @@ var SLoadingContainer = /* @__PURE__ */ forwardRef(
       "div",
       {
         ref: setRef,
+        ...globalOverlayProps,
         "aria-hidden": !open,
         className: cn(
           "fixed inset-0 flex items-center justify-center transition-opacity duration-200",
@@ -5544,6 +5555,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ forwardRef(
     style
   }, ref) {
     const portalContainer = usePortalContainer();
+    const insideModal = useInsideModal();
     const [open, setOpen] = useState(false);
     const splitWrapRef = useRef(null);
     const splitToggleRef = useRef(null);
@@ -5632,6 +5644,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ forwardRef(
     return /* @__PURE__ */ jsxs(
       RDropdown.Root,
       {
+        modal: !insideModal,
         open,
         onOpenChange: (o) => {
           setOpen(o);
@@ -6066,6 +6079,7 @@ function SGuide({
   style
 }) {
   const [open, setOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const isNotion = type === "notion";
   const defaultLabel = DEFAULT_LABEL[type];
   const iconName = ICON[type];
@@ -6100,7 +6114,7 @@ function SGuide({
     return /* @__PURE__ */ jsx("span", { className, style, children: trigger });
   return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover2.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(RPopover2.Portal, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
       RPopover2.Content,
       {
         side: "bottom",
@@ -6241,6 +6255,13 @@ function SModalContainer({
     e.preventDefault();
     if (stackRegistrationRef.current?.isTop()) triggerShake();
   } : void 0;
+  const guardInteractOutside = (e) => {
+    if (isFromGlobalOverlay(e)) {
+      e.preventDefault();
+      return;
+    }
+    guardClose?.(e);
+  };
   return /* @__PURE__ */ jsx(RDialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsx(RDialog.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
     /* @__PURE__ */ jsx(
       RDialog.Overlay,
@@ -6267,8 +6288,8 @@ function SModalContainer({
               contentRef.current?.focus({ preventScroll: true });
             },
             onEscapeKeyDown: guardClose,
-            onPointerDownOutside: guardClose,
-            onInteractOutside: guardClose,
+            onPointerDownOutside: guardInteractOutside,
+            onInteractOutside: guardInteractOutside,
             children: [
               /* @__PURE__ */ jsx(RDialog.Title, { className: "sr-only", children: ariaTitle }),
               /* @__PURE__ */ jsxs(
@@ -6630,6 +6651,13 @@ function SDrawer({
     event.preventDefault();
     if (stackRegistrationRef.current?.isTop()) triggerShake();
   } : void 0;
+  const guardInteractOutside = (e) => {
+    if (isFromGlobalOverlay(e)) {
+      e.preventDefault();
+      return;
+    }
+    guardClose?.(e);
+  };
   const handleBackdropInteraction = () => {
     if (persistent) {
       if (stackRegistrationRef.current?.isTop()) triggerShake();
@@ -6672,8 +6700,8 @@ function SDrawer({
           contentRef.current?.focus({ preventScroll: true });
         },
         onEscapeKeyDown: guardClose,
-        onPointerDownOutside: guardClose,
-        onInteractOutside: guardClose,
+        onPointerDownOutside: guardInteractOutside,
+        onInteractOutside: guardInteractOutside,
         children: [
           /* @__PURE__ */ jsx(RDialog.Title, { className: "sr-only", children: title || "Drawer" }),
           /* @__PURE__ */ jsxs(
@@ -11949,6 +11977,7 @@ var SToastContainer = /* @__PURE__ */ forwardRef(
       /* @__PURE__ */ jsx(
         "div",
         {
+          ...globalOverlayProps,
           style: {
             position: "fixed",
             zIndex,