design-zystem 1.0.361 → 1.0.363

package/dist/ui/index.d.mts

@@ -771,9 +771,10 @@ interface DrawerProps {
     size?: string;
     /**
      * `false` : le panneau n'inerte plus la page et ne capture plus le focus — à
-     * utiliser dès qu'il ouvre lui-même une modale (sinon celle-ci, montée hors
-     * de son DOM, devient inerte et injoignable au clavier). Le clic à côté le
-     * referme quand même, sauf s'il tombe dans une modale ouverte par-dessus.
+     * utiliser dès qu'il ouvre lui-même une modale ou une liste déroulante en
+     * portal (sinon celle-ci, montée hors de son DOM, devient inerte). Le clic à
+     * côté le referme quand même, sauf s'il tombe dans une modale ou une liste
+     * ouverte par-dessus.
      */
     modal?: boolean;
     className?: string;

package/dist/ui/index.d.ts

@@ -771,9 +771,10 @@ interface DrawerProps {
     size?: string;
     /**
      * `false` : le panneau n'inerte plus la page et ne capture plus le focus — à
-     * utiliser dès qu'il ouvre lui-même une modale (sinon celle-ci, montée hors
-     * de son DOM, devient inerte et injoignable au clavier). Le clic à côté le
-     * referme quand même, sauf s'il tombe dans une modale ouverte par-dessus.
+     * utiliser dès qu'il ouvre lui-même une modale ou une liste déroulante en
+     * portal (sinon celle-ci, montée hors de son DOM, devient inerte). Le clic à
+     * côté le referme quand même, sauf s'il tombe dans une modale ou une liste
+     * ouverte par-dessus.
      */
     modal?: boolean;
     className?: string;

package/dist/ui/index.js

@@ -3524,6 +3524,7 @@ var CollapsibleContent = (_a) => {
 var import_react25 = require("react");
 var import_vaul = require("vaul");
 var import_jsx_runtime45 = require("react/jsx-runtime");
+var KEEP_OPEN_SELECTOR = '[role="dialog"], [role="listbox"], [data-drawer-keep-open]';
 var CONTENT_POSITION = {
   top: "inset-x-4 top-4 rounded-2xl",
   bottom: "inset-x-4 bottom-4 rounded-2xl",
@@ -3548,12 +3549,19 @@ var Drawer = ({
       const target = event.target;
       if (!target) return;
       if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
-      if (target.closest('[role="dialog"], [data-drawer-keep-open]')) return;
+      if (target.closest(KEEP_OPEN_SELECTOR)) return;
       onClose == null ? void 0 : onClose();
     };
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [modal, open, onClose]);
+  (0, import_react25.useEffect)(() => {
+    if (modal || !open) return;
+    const frame = requestAnimationFrame(() => {
+      document.body.style.pointerEvents = "auto";
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [modal, open]);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     import_vaul.Drawer.Root,
     {
@@ -3569,8 +3577,7 @@ var Drawer = ({
             ref: contentRef,
             onPointerDownOutside: (event) => {
               const target = event.target;
-              if (target == null ? void 0 : target.closest('[role="dialog"], [data-drawer-keep-open]'))
-                event.preventDefault();
+              if (target == null ? void 0 : target.closest(KEEP_OPEN_SELECTOR)) event.preventDefault();
             },
             className: cn(
               "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",

package/dist/ui/index.mjs

@@ -3354,6 +3354,7 @@ var CollapsibleContent = (_a) => {
 import { useEffect as useEffect5, useRef as useRef6 } from "react";
 import { Drawer as VaulDrawer } from "vaul";
 import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
+var KEEP_OPEN_SELECTOR = '[role="dialog"], [role="listbox"], [data-drawer-keep-open]';
 var CONTENT_POSITION = {
   top: "inset-x-4 top-4 rounded-2xl",
   bottom: "inset-x-4 bottom-4 rounded-2xl",
@@ -3378,12 +3379,19 @@ var Drawer = ({
       const target = event.target;
       if (!target) return;
       if ((_a = contentRef.current) == null ? void 0 : _a.contains(target)) return;
-      if (target.closest('[role="dialog"], [data-drawer-keep-open]')) return;
+      if (target.closest(KEEP_OPEN_SELECTOR)) return;
       onClose == null ? void 0 : onClose();
     };
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [modal, open, onClose]);
+  useEffect5(() => {
+    if (modal || !open) return;
+    const frame = requestAnimationFrame(() => {
+      document.body.style.pointerEvents = "auto";
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [modal, open]);
   return /* @__PURE__ */ jsx45(
     VaulDrawer.Root,
     {
@@ -3399,8 +3407,7 @@ var Drawer = ({
             ref: contentRef,
             onPointerDownOutside: (event) => {
               const target = event.target;
-              if (target == null ? void 0 : target.closest('[role="dialog"], [data-drawer-keep-open]'))
-                event.preventDefault();
+              if (target == null ? void 0 : target.closest(KEEP_OPEN_SELECTOR)) event.preventDefault();
             },
             className: cn(
               "fixed z-50 flex flex-col gap-4 bg-white p-6 outline-none",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.361",
+  "version": "1.0.363",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",