@vector-business-services/cristal-ds-web 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -321,6 +321,7 @@ function Drawer({
   subtitle,
   side = "right",
   behavior = "full",
+  modal = true,
   onBack,
   backLabel = "Voltar",
   closeLabel = "Fechar",
@@ -354,7 +355,7 @@ function Drawer({
     return () => observer.disconnect();
   }, [rolagem, children]);
   const prenderFoco = (event) => {
-    if (event.key !== "Tab" || !panelRef.current) return;
+    if (!modal || event.key !== "Tab" || !panelRef.current) return;
     const focaveis = [...panelRef.current.querySelectorAll(FOCAVEIS)];
     const primeiro = focaveis[0];
     const ultimo = focaveis[focaveis.length - 1];
@@ -376,16 +377,29 @@ function Drawer({
       visible,
       onHide,
       position: side,
-      blockScroll: true,
+      modal,
+      blockScroll: modal,
+      dismissable: modal,
       pt: {
-        mask: { className: `cr-drawer__mask cr-drawer__mask--${side}` },
+        mask: {
+          className: `cr-drawer__mask cr-drawer__mask--${side}${modal ? "" : " cr-drawer__mask--sem-overlay"}`
+        },
         root: {
           className: classes,
           role: "dialog",
-          "aria-modal": true,
+          "aria-modal": modal || void 0,
           "aria-labelledby": titleId,
           "aria-describedby": subtitle ? subtitleId : void 0,
           onKeyDown: prenderFoco
+        },
+        // No unstyled o Prime não põe classes na transição: o Cristal dá as dele (Drawer.css).
+        // O tipo do Prime exige o addEndListener do react-transition-group, que aqui não se usa.
+        transition: {
+          classNames: {
+            enter: "cr-drawer--enter",
+            enterActive: "cr-drawer--enter-active",
+            exitActive: "cr-drawer--exit-active"
+          }
         }
       },
       content: ({ closeIconRef, hide }) => /* @__PURE__ */ jsxRuntime.jsxs(