sellmate-design-system-react 4.3.0 → 4.3.1

package/dist/index.cjs

@@ -5329,6 +5329,16 @@ var SCircleProgress = /* @__PURE__ */ react.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__ */ react.forwardRef(
   function SLoadingContainer2({ open = false, message, zIndex = Z_INDEX.loading, className, style }, ref) {
     const [mounted2, setMounted] = react.useState(false);
@@ -5365,6 +5375,7 @@ var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
       "div",
       {
         ref: setRef,
+        ...globalOverlayProps,
         "aria-hidden": !open,
         className: cn(
           "fixed inset-0 flex items-center justify-center transition-opacity duration-200",
@@ -5572,6 +5583,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
     style
   }, ref) {
     const portalContainer = usePortalContainer();
+    const insideModal = useInsideModal();
     const [open, setOpen] = react.useState(false);
     const splitWrapRef = react.useRef(null);
     const splitToggleRef = react.useRef(null);
@@ -5660,6 +5672,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       RDropdown__namespace.Root,
       {
+        modal: !insideModal,
         open,
         onOpenChange: (o) => {
           setOpen(o);
@@ -6094,6 +6107,7 @@ function SGuide({
   style
 }) {
   const [open, setOpen] = react.useState(false);
+  const portalContainer = usePortalContainer();
   const isNotion = type === "notion";
   const defaultLabel = DEFAULT_LABEL[type];
   const iconName = ICON[type];
@@ -6128,7 +6142,7 @@ function SGuide({
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
   return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
       RPopover2__namespace.Content,
       {
         side: "bottom",
@@ -6269,6 +6283,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__ */ jsxRuntime.jsx(RDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       RDialog__namespace.Overlay,
@@ -6295,8 +6316,8 @@ function SModalContainer({
               contentRef.current?.focus({ preventScroll: true });
             },
             onEscapeKeyDown: guardClose,
-            onPointerDownOutside: guardClose,
-            onInteractOutside: guardClose,
+            onPointerDownOutside: guardInteractOutside,
+            onInteractOutside: guardInteractOutside,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Title, { className: "sr-only", children: ariaTitle }),
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6658,6 +6679,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();
@@ -6700,8 +6728,8 @@ function SDrawer({
           contentRef.current?.focus({ preventScroll: true });
         },
         onEscapeKeyDown: guardClose,
-        onPointerDownOutside: guardClose,
-        onInteractOutside: guardClose,
+        onPointerDownOutside: guardInteractOutside,
+        onInteractOutside: guardInteractOutside,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Title, { className: "sr-only", children: title || "Drawer" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11977,6 +12005,7 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
+          ...globalOverlayProps,
           style: {
             position: "fixed",
             zIndex,