@vector-business-services/cristal-ds-web 0.22.0 → 0.23.0

package/dist/index.d.cts

@@ -84,6 +84,11 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     dropdown?: boolean;
     /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
     dropdownAriaLabel?: string;
+    /**
+     * O clique no campo abre a lista, com as sugestões do texto que já está nele (com o campo vazio,
+     * todas). Padrão: true.
+     */
+    openOnClick?: boolean;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 

package/dist/index.d.ts

@@ -84,6 +84,11 @@ interface AutoCompleteProps extends Omit<AutoCompleteProps$1, 'size' | 'variant'
     dropdown?: boolean;
     /** Nome da seta para o leitor de tela. Padrão: "Mostrar opções". */
     dropdownAriaLabel?: string;
+    /**
+     * O clique no campo abre a lista, com as sugestões do texto que já está nele (com o campo vazio,
+     * todas). Padrão: true.
+     */
+    openOnClick?: boolean;
 }
 declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -138,6 +138,7 @@ var AutoComplete = forwardRef(function AutoComplete2({
   error,
   dropdown = false,
   dropdownAriaLabel = "Mostrar op\xE7\xF5es",
+  openOnClick = true,
   inputId,
   required,
   disabled,
@@ -149,6 +150,8 @@ var AutoComplete = forwardRef(function AutoComplete2({
   const id = inputId ?? autoId;
   const hintId = `${id}-hint`;
   const supportText = error ?? hint;
+  const prime = useRef(null);
+  const aberta = () => Boolean(prime.current?.getOverlay());
   const classes2 = [
     "cr-field",
     "cr-autocomplete",
@@ -167,6 +170,7 @@ var AutoComplete = forwardRef(function AutoComplete2({
     /* @__PURE__ */ jsx(
       AutoComplete$1,
       {
+        ref: prime,
         unstyled: true,
         inputRef: ref,
         inputId: id,
@@ -182,12 +186,31 @@ var AutoComplete = forwardRef(function AutoComplete2({
             root: {
               className: "cr-field__control cr-autocomplete__input",
               "aria-describedby": juntarIds(supportText && hintId, props["aria-describedby"]),
-              "aria-invalid": error ? true : void 0
+              "aria-invalid": error ? true : void 0,
+              // O clique no campo abre a lista (o Prime só abre ao digitar ou pela seta).
+              ...openOnClick && {
+                onClick: (event) => {
+                  if (!aberta() && !disabled) {
+                    prime.current?.search(event, event.currentTarget.value, "dropdown");
+                  }
+                }
+              }
             }
           },
           // 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" } },
+          dropdownButton: {
+            root: {
+              className: "cr-autocomplete__dropdown",
+              // Com a lista aberta, a seta fecha (como no p-autoComplete do PrimeNG 19); a do
+              // PrimeReact só abre. Na captura, antes do clique do Prime, que buscaria de novo.
+              onClickCapture: (event) => {
+                if (!aberta()) return;
+                event.stopPropagation();
+                prime.current?.hide();
+              }
+            }
+          },
           // 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" },
@@ -1286,18 +1309,26 @@ function ListaDePeriodos({
   onEscolher
 }) {
   const grupo = useId();
-  return /* @__PURE__ */ jsx("div", { className: "cr-data-picker__periods", role: "radiogroup", "aria-label": "Per\xEDodos", children: periods.map((item) => /* @__PURE__ */ jsx(
-    Radio,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className: "cr-data-picker__period",
-      name: grupo,
-      label: item.label,
-      value: item.label,
-      checked: periodo === item,
-      onChange: () => onEscolher(item)
-    },
-    item.label
-  )) });
+      className: "cr-data-picker__periods cr-rolagem-fina",
+      role: "radiogroup",
+      "aria-label": "Per\xEDodos",
+      children: periods.map((item) => /* @__PURE__ */ jsx(
+        Radio,
+        {
+          className: "cr-data-picker__period",
+          name: grupo,
+          label: item.label,
+          value: item.label,
+          checked: periodo === item,
+          onChange: () => onEscolher(item)
+        },
+        item.label
+      ))
+    }
+  );
 }
 var mesmoRascunho = (a, b) => (a[0] === b[0] || mesmoDia2(a[0], b[0])) && (a[1] === b[1] || mesmoDia2(a[1], b[1]));
 function CamposDoPeriodo({