@vector-business-services/cristal-ds-web 0.17.0 → 0.18.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>>;
 

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>>;
 

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" },