@vector-business-services/cristal-ds-web 0.15.0 → 0.16.0

package/dist/index.cjs

@@ -42,7 +42,7 @@ var Accordion = react.forwardRef(function Accordion2({ multiple = false, activeI
   const primeRef = react.useRef(null);
   react.useImperativeHandle(ref, () => primeRef.current?.getElement());
   const [interno, setInterno] = react.useState(multiple ? [0] : 0);
-  const abertos = activeIndex === void 0 ? interno : activeIndex;
+  const abertos2 = activeIndex === void 0 ? interno : activeIndex;
   const tabs = react.Children.toArray(children).filter(
     (child) => react.isValidElement(child)
   );
@@ -54,7 +54,7 @@ var Accordion = react.forwardRef(function Accordion2({ multiple = false, activeI
       ref: primeRef,
       id,
       multiple,
-      activeIndex: abertos,
+      activeIndex: abertos2,
       onTabChange: (event) => {
         const index = event.index;
         setInterno(index);
@@ -78,8 +78,16 @@ var Accordion = react.forwardRef(function Accordion2({ multiple = false, activeI
             headerAction: { className: "cr-accordion__action" },
             toggleableContent: { className: "cr-accordion__region" },
             content: { className: "cr-accordion__content" },
-            // Sem animação: o Prime manteria o conteúdo na tela pelos 450ms da saída dele.
-            transition: { timeout: 0 }
+            // Abre e fecha pela altura, como o tema do Prime (p-toggleable-content, Accordion.css):
+            // no unstyled o Prime só dá o tempo, sem classes.
+            transition: {
+              classNames: {
+                enter: "cr-accordion__region--entrar",
+                enterActive: "cr-accordion__region--entrando",
+                exit: "cr-accordion__region--sair",
+                exitActive: "cr-accordion__region--saindo"
+              }
+            }
           },
           children: tab.props.children
         },
@@ -107,7 +115,17 @@ var painelDoCampo = (campo, seletorDoPainel) => {
   const lista = campo?.getAttribute("aria-controls");
   return lista ? document.getElementById(lista)?.closest(seletorDoPainel) : null;
 };
-var aoPosicionar = (onEnter) => ({ onEnter });
+var CLASSES_DO_POPUP = {
+  enter: "cr-popup--entrar",
+  enterActive: "cr-popup--entrando",
+  enterDone: "cr-popup--entrou",
+  exitActive: "cr-popup--saindo"
+};
+var transicaoDoPopup = (onEnter) => (
+  // Sem onEnter, a chave nem aparece: o Prime soma as funções do pt às dele, mas um undefined
+  // substituiria o onEnter dele (que posiciona a lista).
+  { classNames: CLASSES_DO_POPUP, ...onEnter && { onEnter } }
+);
 var AutoComplete = react.forwardRef(function AutoComplete2({
   variant = "outline",
   size = "large",
@@ -160,8 +178,9 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
           // O Prime mostra um spinner próprio enquanto busca; o Figma não define esse estado.
           loadingIcon: { className: "cr-autocomplete__loader" },
           panel: { className: "cr-lista cr-autocomplete__panel" },
-          // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
-          transition: aoPosicionar(() => {
+          // Animação de entrada e saída (a do Prime) e o lado da lista, medido logo depois de o Prime
+          // posicionar.
+          transition: transicaoDoPopup(() => {
             const campo = document.getElementById(id);
             seguirLado(painelDoCampo(campo, ".cr-autocomplete__panel"), campo);
           }),
@@ -241,8 +260,16 @@ var Card = react.forwardRef(function Card2({ padding = "xsmall", outline = false
   );
 });
 var usandoTeclado = false;
+var abertos = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
-  document.addEventListener("keydown", () => usandoTeclado = true, true);
+  document.addEventListener(
+    "keydown",
+    (event) => {
+      usandoTeclado = true;
+      if (event.key === "Escape") abertos.forEach((fechar) => fechar());
+    },
+    true
+  );
   document.addEventListener("pointerdown", () => usandoTeclado = false, true);
 }
 var resolveTargets = (target) => {
@@ -265,6 +292,9 @@ function Tooltip({
 }) {
   const autoId = react.useId();
   const tooltipId = id ?? autoId;
+  const primeRef = react.useRef(null);
+  const [fechar] = react.useState(() => () => void primeRef.current?.hide());
+  react.useEffect(() => () => void abertos.delete(fechar), [fechar]);
   react.useEffect(() => {
     if (!describe) return;
     const elements = resolveTargets(target);
@@ -299,9 +329,17 @@ function Tooltip({
       event,
       showDelay,
       hideDelay,
+      ref: primeRef,
       disabled,
-      closeOnEscape: true,
-      onBeforeShow: (e) => e.originalEvent?.type !== "focus" || usandoTeclado,
+      onBeforeShow: (e) => {
+        const abre = e.originalEvent?.type !== "focus" || usandoTeclado;
+        if (abre) abertos.add(fechar);
+        return abre;
+      },
+      onBeforeHide: () => {
+        abertos.delete(fechar);
+        return true;
+      },
       pt,
       children: content
     }
@@ -1070,10 +1108,11 @@ var Menu = react.forwardRef(function Menu2({
       };
     },
     content: { className: "cr-menu__content" },
-    // Lado do popup (acima ou abaixo de quem o abriu), medido logo depois de o Prime posicionar.
+    // Animação de entrada e saída (a do Prime) e o lado do popup, medido logo depois de o Prime
+    // posicionar.
     // Numa microtarefa: no onEnter o Prime ainda está religando a ref (getElement vem vazio); ela
     // roda logo depois, antes de a tela ser pintada.
-    transition: aoPosicionar(
+    transition: transicaoDoPopup(
       () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
     ),
     action: { className: "cr-lista__item cr-menu__action" },
@@ -1416,7 +1455,7 @@ var MenuPrincipal = react.forwardRef(
       menuitem: { className: "cr-menu-principal__item" },
       // Lado do popup, medido logo depois de o Prime posicionar.
       // Numa microtarefa: no onEnter o Prime ainda está religando a ref (como no Menu).
-      transition: aoPosicionar(
+      transition: transicaoDoPopup(
         () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
       )
     };
@@ -1530,6 +1569,16 @@ var Modal = react.forwardRef(function Modal2({
           className: classes,
           "aria-labelledby": titleId,
           "aria-describedby": void 0
+        },
+        // Entrada e saída do tema do Prime (p-dialog, Modal.css). No unstyled o Prime não põe
+        // classes na transição; o tipo exige o addEndListener do react-transition-group.
+        transition: {
+          classNames: {
+            enter: "cr-modal--entrar",
+            enterActive: "cr-modal--entrando",
+            enterDone: "cr-modal--entrou",
+            exitActive: "cr-modal--saindo"
+          }
         }
       },
       content: ({ hide, closeRef }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1715,7 +1764,9 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
       ...checkbox,
       root: { ...checkbox.root, role: void 0, "aria-checked": void 0, inert: true }
     },
-    emptyMessage: { className: "cr-multiselect__empty" }
+    emptyMessage: { className: "cr-multiselect__empty" },
+    // Animação de entrada e saída da lista, a do Prime (comum.css).
+    transition: transicaoDoPopup()
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cr-field__label", htmlFor: inputId, children: [
@@ -1917,8 +1968,9 @@ var Select = react.forwardRef(function Select2({
     input: { className: "cr-select__value" },
     trigger: { className: "cr-field__icon cr-select__trigger", "aria-hidden": true },
     panel: { className: "cr-lista cr-select__panel" },
-    // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
-    transition: aoPosicionar(
+    // Animação de entrada e saída (a do Prime) e o lado da lista, medido logo depois de o Prime
+    // posicionar.
+    transition: transicaoDoPopup(
       () => seguirLado(
         document.getElementById(listId)?.closest(".cr-select__panel"),
         document.getElementById(inputId)?.closest(".cr-select__control")
@@ -2437,6 +2489,7 @@ var Toast = react.forwardRef(function Toast2({ position = "top-right", closeLabe
           classNames: {
             enter: "cr-toast__message--enter",
             enterActive: "cr-toast__message--enter-active",
+            exit: "cr-toast__message--exit",
             exitActive: "cr-toast__message--exit-active"
           }
         }