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

package/dist/index.d.cts

@@ -64,7 +64,7 @@ declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttri
 
 type AutoCompleteVariant = InputVariant;
 type AutoCompleteSize = InputSize;
-interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant' | 'invalid' | 'multiple' | 'selectionLimit' | 'selectedItemTemplate' | 'removeTokenIcon' | 'dropdown' | 'dropdownAriaLabel' | 'dropdownAutoFocus' | 'dropdownIcon' | 'dropdownMode' | 'showEmptyMessage' | 'emptyMessage' | 'loadingIcon' | 'inputClassName' | 'panelClassName' | 'scrollHeight' | 'inputRef' | 'pt' | 'ptOptions' | 'unstyled' | 'children'> {
+interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant' | 'invalid' | 'multiple' | 'selectionLimit' | 'selectedItemTemplate' | 'removeTokenIcon' | 'dropdownIcon' | 'showEmptyMessage' | 'emptyMessage' | 'loadingIcon' | 'inputClassName' | 'panelClassName' | 'scrollHeight' | 'inputRef' | 'pt' | 'ptOptions' | 'unstyled' | 'children'> {
     /** Type no Figma: Outline (com borda) e Filled (com fundo). */
     variant?: AutoCompleteVariant;
     /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -75,6 +75,14 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     hint?: string;
     /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
     error?: string;
+    /**
+     * Seta à direita do campo (o botão de dropdown do Prime): abre a lista sem digitar, com todas as
+     * sugestões (`dropdownMode="blank"`, o padrão) ou filtrando pelo texto (`"current"`).
+     * Padrão: false, como no Figma.
+     */
+    dropdown?: boolean;
+    /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
+    dropdownAriaLabel?: string;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -900,6 +908,14 @@ interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
      * Padrão: true.
      */
     columnMenu?: boolean;
+    /**
+     * Cabeçalho das colunas fixo na página: enquanto a página (ou o contêiner que rola em volta)
+     * passa pela Table, o cabeçalho fica no topo da tela, até a última linha. Soma com o
+     * `scrollHeight` do Prime, que fixa o cabeçalho dentro da Table. Padrão: false.
+     */
+    stickyHeader?: boolean;
+    /** Distância do topo da tela em que o cabeçalho para, em px (uma barra fixa da página). Padrão: 0. */
+    stickyHeaderOffset?: number;
 }
 /** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
 type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;

package/dist/index.d.ts

@@ -64,7 +64,7 @@ declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttri
 
 type AutoCompleteVariant = InputVariant;
 type AutoCompleteSize = InputSize;
-interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant' | 'invalid' | 'multiple' | 'selectionLimit' | 'selectedItemTemplate' | 'removeTokenIcon' | 'dropdown' | 'dropdownAriaLabel' | 'dropdownAutoFocus' | 'dropdownIcon' | 'dropdownMode' | 'showEmptyMessage' | 'emptyMessage' | 'loadingIcon' | 'inputClassName' | 'panelClassName' | 'scrollHeight' | 'inputRef' | 'pt' | 'ptOptions' | 'unstyled' | 'children'> {
+interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant' | 'invalid' | 'multiple' | 'selectionLimit' | 'selectedItemTemplate' | 'removeTokenIcon' | 'dropdownIcon' | 'showEmptyMessage' | 'emptyMessage' | 'loadingIcon' | 'inputClassName' | 'panelClassName' | 'scrollHeight' | 'inputRef' | 'pt' | 'ptOptions' | 'unstyled' | 'children'> {
     /** Type no Figma: Outline (com borda) e Filled (com fundo). */
     variant?: AutoCompleteVariant;
     /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -75,6 +75,14 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     hint?: string;
     /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
     error?: string;
+    /**
+     * Seta à direita do campo (o botão de dropdown do Prime): abre a lista sem digitar, com todas as
+     * sugestões (`dropdownMode="blank"`, o padrão) ou filtrando pelo texto (`"current"`).
+     * Padrão: false, como no Figma.
+     */
+    dropdown?: boolean;
+    /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
+    dropdownAriaLabel?: string;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -900,6 +908,14 @@ interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
      * Padrão: true.
      */
     columnMenu?: boolean;
+    /**
+     * Cabeçalho das colunas fixo na página: enquanto a página (ou o contêiner que rola em volta)
+     * passa pela Table, o cabeçalho fica no topo da tela, até a última linha. Soma com o
+     * `scrollHeight` do Prime, que fixa o cabeçalho dentro da Table. Padrão: false.
+     */
+    stickyHeader?: boolean;
+    /** Distância do topo da tela em que o cabeçalho para, em px (uma barra fixa da página). Padrão: 0. */
+    stickyHeaderOffset?: number;
 }
 /** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
 type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useLayoutEffect, useMemo, useCallback, useEffect, useContext, cloneElement } from 'react';
 import { Accordion as Accordion$1, AccordionTab as AccordionTab$1 } from 'primereact/accordion';
-import { WarningCircle, Info, Question, Check, CircleNotch, ArrowLeft, X, CaretDown, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, Funnel, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, Note, ArrowsInLineHorizontal, SortAscending, SortDescending, DotsThreeVertical, CaretLeft, CaretRight, Trash, CaretDoubleRight, CaretDoubleLeft, GearSix } from '@phosphor-icons/react';
+import { CaretDown, WarningCircle, Info, Question, Check, CircleNotch, ArrowLeft, X, MagnifyingGlass, ArrowsInSimple, ArrowsOutSimple, CaretUp, Funnel, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, Note, ArrowsInLineHorizontal, SortAscending, SortDescending, DotsThreeVertical, CaretLeft, CaretRight, Trash, CaretDoubleRight, CaretDoubleLeft, GearSix } from '@phosphor-icons/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
 import { Badge as Badge$1 } from 'primereact/badge';
@@ -134,6 +134,8 @@ var AutoComplete = forwardRef(function AutoComplete2({
   label,
   hint,
   error,
+  dropdown = false,
+  dropdownAriaLabel = "Mostrar op\xE7\xF5es",
   inputId,
   required,
   disabled,
@@ -148,6 +150,7 @@ var AutoComplete = forwardRef(function AutoComplete2({
   const classes = [
     "cr-field",
     "cr-autocomplete",
+    dropdown && "cr-autocomplete--dropdown",
     `cr-field--${variant}`,
     `cr-field--${size}`,
     error && "cr-field--error",
@@ -168,6 +171,9 @@ var AutoComplete = forwardRef(function AutoComplete2({
         required,
         disabled,
         scrollHeight: "185px",
+        dropdown,
+        dropdownAriaLabel,
+        dropdownIcon: /* @__PURE__ */ jsx(CaretDown, { className: "cr-autocomplete__dropdown-icon", "aria-hidden": "true" }),
         pt: {
           root: { className: "cr-autocomplete__root" },
           input: {
@@ -177,6 +183,9 @@ var AutoComplete = 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" },
@@ -2522,6 +2531,31 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
 function Column(_props) {
   return null;
 }
+function useCabecalhoNaPagina(raiz, ligado, offset) {
+  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" : ""}`,
@@ -2618,12 +2652,16 @@ function TableBase({
   emptyMessage = "N\xE3o h\xE1 registros para mostrar.",
   loading,
   columnMenu = true,
+  stickyHeader = false,
+  stickyHeaderOffset = 0,
   ...props
 }, ref) {
   const elementos = Children.toArray(children).filter(isValidElement);
   const colunaDeSelecao = elementos.some((element) => element.props.selectionMode === "multiple");
   const template = paginatorTemplate(rowsPerPageLabel);
   const carregando = Boolean(loading);
+  const raiz = useRef(null);
+  useCabecalhoNaPagina(raiz, stickyHeader, stickyHeaderOffset);
   const paginaPropria = !props.onPage;
   const ordemPropria = !props.onSort;
   const [pagina, setPagina] = useState({
@@ -2731,7 +2769,7 @@ function TableBase({
   };
   return (
     // Contêiner da consulta de largura: a variante de 360px também muda a caixa do DataTable.
-    /* @__PURE__ */ jsxs("div", { className: "cr-table", children: [
+    /* @__PURE__ */ jsxs("div", { ref: raiz, className: "cr-table", children: [
       /* @__PURE__ */ jsx(
         DataTable,
         {