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

package/dist/index.d.cts

@@ -161,6 +161,11 @@ interface DrawerProps {
     side?: DrawerSide;
     /** Padrão: full. */
     behavior?: DrawerBehavior;
+    /**
+     * Com overlay (padrão): a gaveta é modal, a página atrás fica bloqueada e o clique no overlay
+     * fecha. Sem overlay (`false`): a página continua rolando e clicável, e só o X e o Esc fecham.
+     */
+    modal?: boolean;
     /** Mostra o botão de voltar antes do título. */
     onBack?: () => void;
     backLabel?: string;
@@ -171,7 +176,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),

package/dist/index.d.ts

@@ -161,6 +161,11 @@ interface DrawerProps {
     side?: DrawerSide;
     /** Padrão: full. */
     behavior?: DrawerBehavior;
+    /**
+     * Com overlay (padrão): a gaveta é modal, a página atrás fica bloqueada e o clique no overlay
+     * fecha. Sem overlay (`false`): a página continua rolando e clicável, e só o X e o Esc fecham.
+     */
+    modal?: boolean;
     /** Mostra o botão de voltar antes do título. */
     onBack?: () => void;
     backLabel?: string;
@@ -171,7 +176,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),

package/dist/index.js

@@ -319,6 +319,7 @@ function Drawer({
   subtitle,
   side = "right",
   behavior = "full",
+  modal = true,
   onBack,
   backLabel = "Voltar",
   closeLabel = "Fechar",
@@ -352,7 +353,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];
@@ -374,16 +375,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__ */ jsxs(