@vector-business-services/cristal-ds-web 0.12.0 → 0.13.1

package/dist/index.cjs

@@ -88,6 +88,23 @@ var Accordion = react.forwardRef(function Accordion2({ multiple = false, activeI
     }
   );
 });
+
+// src/components/popup.ts
+function seguirLado(painel, alvo) {
+  if (!(painel instanceof HTMLElement) || !alvo) return;
+  const marcar = () => {
+    const acima = painel.getBoundingClientRect().top < alvo.getBoundingClientRect().top;
+    if (acima) painel.setAttribute("data-cr-lado", "acima");
+    else painel.removeAttribute("data-cr-lado");
+  };
+  marcar();
+  new MutationObserver(marcar).observe(painel, { attributes: true, attributeFilter: ["style"] });
+}
+var painelDoCampo = (campo, seletorDoPainel) => {
+  const lista = campo?.getAttribute("aria-controls");
+  return lista ? document.getElementById(lista)?.closest(seletorDoPainel) : null;
+};
+var aoPosicionar = (onEnter) => ({ onEnter });
 var AutoComplete = react.forwardRef(function AutoComplete2({
   variant = "outline",
   size = "large",
@@ -140,6 +157,11 @@ 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-autocomplete__panel" },
+          // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
+          transition: aoPosicionar(() => {
+            const campo = document.getElementById(id);
+            seguirLado(painelDoCampo(campo, ".cr-autocomplete__panel"), campo);
+          }),
           list: { className: "cr-autocomplete__list" },
           item: { className: "cr-autocomplete__item" }
         },
@@ -211,6 +233,11 @@ var Card = react.forwardRef(function Card2({ padding = "xsmall", outline = false
     }
   );
 });
+var usandoTeclado = false;
+if (typeof document !== "undefined") {
+  document.addEventListener("keydown", () => usandoTeclado = true, true);
+  document.addEventListener("pointerdown", () => usandoTeclado = false, true);
+}
 var resolveTargets = (target) => {
   if (typeof target === "string") return Array.from(document.querySelectorAll(target));
   if (target instanceof HTMLElement) return [target];
@@ -225,16 +252,27 @@ function Tooltip({
   showDelay,
   hideDelay,
   disabled,
+  describe = true,
   id,
   className
 }) {
   const autoId = react.useId();
   const tooltipId = id ?? autoId;
   react.useEffect(() => {
+    if (!describe) return;
     const elements = resolveTargets(target);
-    elements.forEach((element) => element.setAttribute("aria-describedby", tooltipId));
-    return () => elements.forEach((element) => element.removeAttribute("aria-describedby"));
-  }, [target, tooltipId]);
+    const ids = (element) => (element.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
+    const gravar = (element, lista) => lista.length ? element.setAttribute("aria-describedby", lista.join(" ")) : element.removeAttribute("aria-describedby");
+    elements.forEach((element) => {
+      if (!ids(element).includes(tooltipId)) gravar(element, [...ids(element), tooltipId]);
+    });
+    return () => elements.forEach(
+      (element) => gravar(
+        element,
+        ids(element).filter((idAtual) => idAtual !== tooltipId)
+      )
+    );
+  }, [target, tooltipId, describe]);
   const classes = ["cr-tooltip", `cr-tooltip--${type}`, className].filter(Boolean).join(" ");
   const pt = {
     root: (options) => {
@@ -255,6 +293,8 @@ function Tooltip({
       showDelay,
       hideDelay,
       disabled,
+      closeOnEscape: true,
+      onBeforeShow: (e) => e.originalEvent?.type !== "focus" || usandoTeclado,
       pt,
       children: content
     }
@@ -569,7 +609,10 @@ var Checkbox = react.forwardRef(function Checkbox2({
         value,
         icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.Check, { size: 16 }),
         pt: {
-          root: { className: "cr-checkbox__control" },
+          // Marcado pela prop do Cristal, não pelo atributo interno do Prime (data-p-highlight).
+          root: {
+            className: `cr-checkbox__control${checked ? " cr-checkbox__control--checked" : ""}`
+          },
           input: { className: "cr-checkbox__input" },
           box: { className: "cr-checkbox__box" },
           icon: { className: "cr-checkbox__icon", "aria-hidden": true }
@@ -658,24 +701,54 @@ var Divider = react.forwardRef(function Divider2({ orientation = "horizontal", v
     }
   );
 });
-var IconButton = react.forwardRef(function IconButton2({ variant = "primary", size = "large", icon, type = "button", className, ...props }, ref) {
+var IconButton = react.forwardRef(function IconButton2({
+  variant = "primary",
+  size = "large",
+  icon,
+  type = "button",
+  tooltip,
+  tooltipPosition,
+  className,
+  ...props
+}, ref) {
+  const botao = react.useRef(null);
+  const ligar = react.useCallback(
+    (elemento) => {
+      botao.current = elemento;
+      if (typeof ref === "function") ref(elemento);
+      else if (ref) ref.current = elemento;
+    },
+    [ref]
+  );
+  const texto = tooltip ?? props["aria-label"];
   const classes = [
     "cr-icon-button",
     `cr-icon-button--${variant}`,
     `cr-icon-button--${size}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    button.Button,
-    {
-      unstyled: true,
-      ref,
-      type,
-      className: classes,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      button.Button,
+      {
+        unstyled: true,
+        ref: ligar,
+        type,
+        className: classes,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cr-icon-button__icon", "aria-hidden": "true", children: icon })
+      }
+    ),
+    texto !== false && /* @__PURE__ */ jsxRuntime.jsx(
+      Tooltip,
+      {
+        target: botao,
+        content: texto,
+        position: tooltipPosition,
+        describe: texto !== props["aria-label"]
+      }
+    )
+  ] });
 });
 var FOCAVEIS = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Drawer({
@@ -898,10 +971,17 @@ var Menu = react.forwardRef(function Menu2({
   className
 }, ref) {
   const primeRef = react.useRef(null);
+  const alvo = react.useRef(null);
   const context = react.useContext(api.PrimeReactContext);
   react.useImperativeHandle(ref, () => ({
-    toggle: (event) => primeRef.current?.toggle(event),
-    show: (event) => primeRef.current?.show(event),
+    toggle: (event) => {
+      alvo.current = event.currentTarget;
+      primeRef.current?.toggle(event);
+    },
+    show: (event) => {
+      alvo.current = event.currentTarget;
+      primeRef.current?.show(event);
+    },
     hide: (event) => primeRef.current?.hide(event),
     getElement: () => primeRef.current?.getElement() ?? null
   }));
@@ -939,6 +1019,12 @@ 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.
+    // 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(
+      () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
+    ),
     action: { className: "cr-menu__action" },
     label: { className: "cr-menu__label" }
   };
@@ -1196,9 +1282,12 @@ var MenuPrincipal = react.forwardRef(
     const primeRef = react.useRef(null);
     const context = react.useContext(api.PrimeReactContext);
     const [baseDoAlvo, setBaseDoAlvo] = react.useState();
+    const alvo = react.useRef(null);
     const medirAlvo = (event) => {
-      const alvo = event.currentTarget;
-      if (alvo instanceof Element) setBaseDoAlvo(alvo.getBoundingClientRect().bottom);
+      const elemento = event.currentTarget;
+      if (!(elemento instanceof Element)) return;
+      alvo.current = elemento;
+      setBaseDoAlvo(elemento.getBoundingClientRect().bottom);
     };
     react.useImperativeHandle(ref, () => ({
       toggle: (event) => {
@@ -1257,7 +1346,12 @@ var MenuPrincipal = react.forwardRef(
       menu: { className: "cr-menu-principal__list", "aria-label": ariaLabel },
       submenuHeader: { className: "cr-menu-principal__group" },
       separator: { className: "cr-menu-principal__separator" },
-      menuitem: { className: "cr-menu-principal__item" }
+      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(
+        () => queueMicrotask(() => seguirLado(primeRef.current?.getElement(), alvo.current))
+      )
     };
     const menu$1 = /* @__PURE__ */ jsxRuntime.jsx(
       menu.Menu,
@@ -1592,7 +1686,9 @@ var PageHeader = react.forwardRef(function PageHeader2({
   segmentControl,
   actions,
   onExpand,
+  expanded,
   expandLabel = "Expandir",
+  collapseLabel = "Recolher",
   tabs,
   activeTab,
   onTabChange,
@@ -1602,6 +1698,8 @@ var PageHeader = react.forwardRef(function PageHeader2({
 }, ref) {
   const [interna, setInterna] = react.useState(0);
   const ativa = activeTab ?? interna;
+  const [expandidoInterno, setExpandidoInterno] = react.useState(false);
+  const expandido = expanded ?? expandidoInterno;
   const tools = segmentControl || actions;
   const tabTemplate = (tab) => (
     // O TabMenu também passa o index da aba nas opções, além do que o tipo do MenuItem declara.
@@ -1649,9 +1747,12 @@ var PageHeader = react.forwardRef(function PageHeader2({
               className: "cr-page-header__expand",
               variant: "tertiary",
               size: "medium",
-              icon: /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowsOutSimple, {}),
-              "aria-label": expandLabel,
-              onClick: onExpand
+              icon: expandido ? /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowsInSimple, {}) : /* @__PURE__ */ jsxRuntime.jsx(react$1.ArrowsOutSimple, {}),
+              "aria-label": expandido ? collapseLabel : expandLabel,
+              onClick: () => {
+                setExpandidoInterno(!expandido);
+                onExpand(!expandido);
+              }
             }
           )
         ]
@@ -1737,9 +1838,23 @@ 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-select__panel" },
+    // Lado da lista (acima ou abaixo do campo), medido logo depois de o Prime posicionar.
+    transition: aoPosicionar(
+      () => seguirLado(
+        document.getElementById(listId)?.closest(".cr-select__panel"),
+        document.getElementById(inputId)?.closest(".cr-select__control")
+      )
+    ),
     wrapper: { className: "cr-select__wrapper" },
     list: { className: "cr-select__list", id: listId },
-    item: { className: "cr-select__item" },
+    // Selecionado e em foco (teclado) pelo contexto do pt, a API pública do Prime (não data-p-*).
+    item: ({ context }) => ({
+      className: [
+        "cr-select__item",
+        context.selected && "cr-select__item--selected",
+        context.focused && "cr-select__item--focused"
+      ].filter(Boolean).join(" ")
+    }),
     emptyMessage: { className: "cr-select__item cr-select__empty" }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
@@ -1927,7 +2042,8 @@ var Radio = react.forwardRef(function Radio2({
         disabled,
         required,
         pt: {
-          root: { className: "cr-radio__control" },
+          // Marcado pela prop do Cristal, não pelo atributo interno do Prime (data-p-checked).
+          root: { className: `cr-radio__control${checked ? " cr-radio__control--checked" : ""}` },
           input: { className: "cr-radio__input" },
           box: { className: "cr-radio__box" },
           icon: { className: "cr-radio__icon" }
@@ -2067,7 +2183,12 @@ var Switch = react.forwardRef(function Switch2({
         disabled,
         name,
         pt: {
-          root: { className: "cr-switch__control", role: void 0, "aria-checked": void 0 },
+          // Ligado pela prop do Cristal, não pelo atributo interno do Prime (data-p-highlight).
+          root: {
+            className: `cr-switch__control${checked ? " cr-switch__control--checked" : ""}`,
+            role: void 0,
+            "aria-checked": void 0
+          },
           input: { className: "cr-switch__input" },
           slider: { className: "cr-switch__track" }
         }