@vector-business-services/cristal-ds-web 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -136,6 +136,8 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
   label,
   hint,
   error,
+  dropdown = false,
+  dropdownAriaLabel = "Mostrar op\xE7\xF5es",
   inputId,
   required,
   disabled,
@@ -150,6 +152,7 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
   const classes = [
     "cr-field",
     "cr-autocomplete",
+    dropdown && "cr-autocomplete--dropdown",
     `cr-field--${variant}`,
     `cr-field--${size}`,
     error && "cr-field--error",
@@ -170,6 +173,9 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
         required,
         disabled,
         scrollHeight: "185px",
+        dropdown,
+        dropdownAriaLabel,
+        dropdownIcon: /* @__PURE__ */ jsxRuntime.jsx(react$1.CaretDown, { className: "cr-autocomplete__dropdown-icon", "aria-hidden": "true" }),
         pt: {
           root: { className: "cr-autocomplete__root" },
           input: {
@@ -179,6 +185,9 @@ var AutoComplete = react.forwardRef(function AutoComplete2({
               "aria-invalid": error ? true : void 0
             }
           },
+          // A seta: o botão de dropdown do Prime, por cima do fim do <input> (que segue sendo a caixa,
+          // para a lista continuar alinhada ao campo).
+          dropdownButton: { root: { className: "cr-autocomplete__dropdown" } },
           // 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" },
@@ -2524,6 +2533,31 @@ var Tabs = react.forwardRef(function Tabs2({ activeIndex, onTabChange, children,
 function Column(_props) {
   return null;
 }
+function useCabecalhoNaPagina(raiz, ligado, offset) {
+  react.useEffect(() => {
+    const wrapper = raiz.current?.querySelector(".cr-table__wrapper");
+    if (!ligado || !wrapper) return;
+    const posicionar = () => {
+      const thead = wrapper.querySelector(".cr-table__thead");
+      if (!thead) return;
+      const limite = Math.max(0, wrapper.clientHeight - thead.offsetHeight);
+      const desce = Math.min(limite, Math.max(0, offset - wrapper.getBoundingClientRect().top));
+      thead.style.transform = desce ? `translateY(${desce}px)` : "";
+    };
+    posicionar();
+    const observador = new ResizeObserver(posicionar);
+    observador.observe(wrapper);
+    document.addEventListener("scroll", posicionar, { capture: true, passive: true });
+    window.addEventListener("resize", posicionar, { passive: true });
+    return () => {
+      observador.disconnect();
+      document.removeEventListener("scroll", posicionar, { capture: true });
+      window.removeEventListener("resize", posicionar);
+      const thead = wrapper.querySelector(".cr-table__thead");
+      if (thead) thead.style.transform = "";
+    };
+  }, [raiz, ligado, offset]);
+}
 var caixa = (label) => ({
   root: (options) => ({
     className: `cr-checkbox cr-checkbox__control${options?.props.checked ? " cr-checkbox__control--checked" : ""}`,
@@ -2620,12 +2654,16 @@ function TableBase({
   emptyMessage = "N\xE3o h\xE1 registros para mostrar.",
   loading,
   columnMenu = true,
+  stickyHeader = false,
+  stickyHeaderOffset = 0,
   ...props
 }, ref) {
   const elementos = react.Children.toArray(children).filter(react.isValidElement);
   const colunaDeSelecao = elementos.some((element) => element.props.selectionMode === "multiple");
   const template = paginatorTemplate(rowsPerPageLabel);
   const carregando = Boolean(loading);
+  const raiz = react.useRef(null);
+  useCabecalhoNaPagina(raiz, stickyHeader, stickyHeaderOffset);
   const paginaPropria = !props.onPage;
   const ordemPropria = !props.onSort;
   const [pagina, setPagina] = react.useState({
@@ -2733,7 +2771,7 @@ function TableBase({
   };
   return (
     // Contêiner da consulta de largura: a variante de 360px também muda a caixa do DataTable.
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cr-table", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: raiz, className: "cr-table", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         datatable.DataTable,
         {