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

package/dist/index.cjs

@@ -2533,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" : ""}`,
@@ -2629,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({
@@ -2742,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,
         {