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

package/dist/index.js

@@ -14,9 +14,9 @@ import { Checkbox as Checkbox$1 } from 'primereact/checkbox';
 import { Chip as Chip$1 } from 'primereact/chip';
 import { ContextMenu as ContextMenu$1 } from 'primereact/contextmenu';
 import { Menu as Menu$1 } from 'primereact/menu';
-import { OverlayPanel } from 'primereact/overlaypanel';
 import { InputText } from 'primereact/inputtext';
 import { RadioButton } from 'primereact/radiobutton';
+import { OverlayPanel } from 'primereact/overlaypanel';
 import { Divider as Divider$1 } from 'primereact/divider';
 import { Sidebar } from 'primereact/sidebar';
 import { Menubar as Menubar$1 } from 'primereact/menubar';
@@ -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" },
@@ -1110,116 +1133,6 @@ var ContextMenu = forwardRef(function ContextMenu2({
     }
   );
 });
-function DatePickerBase({
-  variant = "outline",
-  size = "large",
-  label,
-  hint,
-  error,
-  offDays,
-  locale = LOCALE,
-  placeholder = "dd/mm/aaaa",
-  inputId,
-  required,
-  disabled,
-  className,
-  style,
-  onShow,
-  onHide,
-  ...props
-}, ref) {
-  const autoId = useId();
-  const id = inputId ?? autoId;
-  const hintId = `${id}-hint`;
-  const supportText = error ?? hint;
-  const pelaSeta = useRef(false);
-  const peloTeclado = useRef(false);
-  const calendario = useRef(null);
-  useImperativeHandle(ref, () => calendario.current, []);
-  const classes2 = [
-    "cr-field",
-    "cr-datepicker",
-    `cr-field--${variant}`,
-    `cr-field--${size}`,
-    error && "cr-field--error",
-    disabled && "cr-field--disabled",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
-    label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Calendar$1,
-      {
-        ...setas,
-        locale,
-        placeholder,
-        ...props,
-        ref: calendario,
-        unstyled: true,
-        inputId: id,
-        required,
-        disabled,
-        showIcon: true,
-        icon: /* @__PURE__ */ jsx(CalendarDot, { "aria-hidden": "true" }),
-        onShow: () => {
-          if (!pelaSeta.current) document.getElementById(id)?.focus();
-          pelaSeta.current = false;
-          onShow?.();
-        },
-        onHide: () => {
-          const atual = calendario.current;
-          const ativo = document.activeElement;
-          const semFoco = ativo === document.body || atual?.getOverlay()?.contains(ativo);
-          if (peloTeclado.current && semFoco && atual) {
-            atual.focus();
-            atual.hide();
-          }
-          peloTeclado.current = false;
-          pelaSeta.current = false;
-          onHide?.();
-        },
-        pt: {
-          root: { className: "cr-datepicker__root" },
-          input: {
-            root: {
-              className: "cr-field__control cr-datepicker__input",
-              "aria-describedby": supportText ? hintId : void 0,
-              "aria-invalid": error ? true : void 0,
-              onKeyDown: (event) => {
-                if (event.code === "ArrowDown" && !calendario.current?.getOverlay()) {
-                  pelaSeta.current = true;
-                }
-              }
-            }
-          },
-          dropdownButton: { root: { className: "cr-datepicker__button" } },
-          panel: {
-            className: "cr-calendar cr-datepicker__panel",
-            onKeyDown: (event) => {
-              if (["Enter", "NumpadEnter", "Space"].includes(event.code))
-                peloTeclado.current = true;
-            }
-          },
-          // Animação de entrada e saída (a do Prime) e o lado do painel, medido logo depois de o
-          // Prime posicionar.
-          transition: transicaoDoPopup(() => {
-            const campo = document.getElementById(id);
-            seguirLado(painelDoCampo(campo, ".cr-datepicker__panel"), campo);
-          }),
-          ...ptDoPainel(offDays)
-        }
-      }
-    ),
-    supportText && /* @__PURE__ */ jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
-      /* @__PURE__ */ jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsx(WarningCircle, {}) : /* @__PURE__ */ jsx(Info, {}) }),
-      supportText
-    ] })
-  ] });
-}
-var DatePicker = forwardRef(DatePickerBase);
 var Input = forwardRef(function Input2({
   variant = "outline",
   size = "large",
@@ -1332,7 +1245,7 @@ var Radio = forwardRef(function Radio2({
   ] });
 });
 
-// src/components/DateRangeButton/periodos.ts
+// src/components/Calendar/periodos.ts
 var dia = (ano, mes, numero) => new Date(ano, mes, numero);
 var semHora = (data) => dia(data.getFullYear(), data.getMonth(), data.getDate());
 var menos = (data, dias) => dia(data.getFullYear(), data.getMonth(), data.getDate() - dias);
@@ -1390,6 +1303,310 @@ function lerData(texto) {
   const data = dia(a, m - 1, d);
   return data.getMonth() === m - 1 && data.getDate() === d ? data : null;
 }
+function ListaDePeriodos({
+  periods,
+  periodo,
+  onEscolher
+}) {
+  const grupo = useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      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({
+  value,
+  onChange
+}) {
+  const [textos, setTextos] = useState([
+    dataCurta(value[0]),
+    dataCurta(value[1])
+  ]);
+  const [base, setBase] = useState(value);
+  if (!mesmoRascunho(base, value)) {
+    setBase(value);
+    setTextos([dataCurta(value[0]), dataCurta(value[1])]);
+  }
+  const digitar = (indice, texto) => {
+    const novosTextos = [...textos];
+    novosTextos[indice] = texto;
+    setTextos(novosTextos);
+    const data = lerData(texto);
+    if (!data) return;
+    const novo = [...value];
+    novo[indice] = data;
+    if (novo[0] && novo[1] && novo[0] > novo[1]) novo[indice === 0 ? 1 : 0] = null;
+    setBase(novo);
+    onChange(novo);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cr-data-picker__inputs", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "medium",
+        "aria-label": "Data inicial",
+        placeholder: "dd / mm / aaaa",
+        value: textos[0],
+        onChange: (event) => digitar(0, event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "cr-data-picker__dash", "aria-hidden": "true", children: "-" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "medium",
+        "aria-label": "Data final",
+        placeholder: "dd / mm / aaaa",
+        value: textos[1],
+        onChange: (event) => digitar(1, event.target.value)
+      }
+    )
+  ] });
+}
+function RodapeDoPeriodo({
+  podeSelecionar,
+  onFechar,
+  onSelecionar
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cr-data-picker__footer", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "medium", onClick: onFechar, children: "Fechar" }),
+    /* @__PURE__ */ jsx(Button, { size: "medium", disabled: !podeSelecionar, onClick: onSelecionar, children: "Selecionar" })
+  ] });
+}
+function DatePickerBase({
+  variant = "outline",
+  size = "large",
+  label,
+  hint,
+  error,
+  offDays,
+  locale = LOCALE,
+  placeholder = "dd/mm/aaaa",
+  inputId,
+  required,
+  disabled,
+  className,
+  style,
+  onShow,
+  onHide,
+  periods = [],
+  footer = false,
+  today,
+  value,
+  onChange,
+  footerTemplate,
+  ...props
+}, ref) {
+  const autoId = useId();
+  const id = inputId ?? autoId;
+  const hintId = `${id}-hint`;
+  const supportText = error ?? hint;
+  const pelaSeta = useRef(false);
+  const peloTeclado = useRef(false);
+  const calendario = useRef(null);
+  useImperativeHandle(ref, () => calendario.current, []);
+  const comPeriodos = props.selectionMode === "range" && periods.length > 0;
+  const dataPicker = footer || comPeriodos;
+  const [aberto, setAberto] = useState(false);
+  const [rascunho, setRascunho] = useState(null);
+  const [periodo, setPeriodo] = useState(null);
+  const devolverFoco = useRef(false);
+  const ignorarAbertura = useRef(false);
+  const valorNaTela = footer && aberto ? rascunho : value;
+  const emitir = (novo) => onChange?.({
+    value: novo,
+    stopPropagation: () => {
+    },
+    preventDefault: () => {
+    },
+    target: { name: props.name, id, value: novo }
+  });
+  const fechar = (pelosBotoes) => {
+    devolverFoco.current = pelosBotoes;
+    setAberto(false);
+  };
+  const mudar = (novo, novoPeriodo) => {
+    setPeriodo(novoPeriodo);
+    if (footer) setRascunho(novo);
+    else emitir(novo);
+  };
+  const classes2 = [
+    "cr-field",
+    "cr-datepicker",
+    `cr-field--${variant}`,
+    `cr-field--${size}`,
+    error && "cr-field--error",
+    disabled && "cr-field--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes2, style, children: [
+    label && /* @__PURE__ */ jsxs("label", { className: "cr-field__label", htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "cr-field__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Calendar$1,
+      {
+        ...setas,
+        locale,
+        placeholder,
+        ...props,
+        value: valorNaTela,
+        onChange: footer ? (event) => mudar(event.value, null) : comPeriodos ? (event) => {
+          setPeriodo(null);
+          onChange?.(event);
+        } : onChange,
+        ...dataPicker && {
+          visible: aberto,
+          onVisibleChange: (event) => {
+            if (!event.callback) {
+              if (ignorarAbertura.current || aberto) return;
+              const hoje = today ?? /* @__PURE__ */ new Date();
+              setRascunho(value);
+              setPeriodo(periodoDe(periods, value ?? null, hoje) ?? null);
+              setAberto(true);
+              return;
+            }
+            if (footer && event.type === "dateselect") return;
+            fechar(false);
+            event.callback?.();
+          },
+          footerTemplate: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+            comPeriodos && /* @__PURE__ */ jsx(
+              ListaDePeriodos,
+              {
+                periods,
+                periodo,
+                onEscolher: (item) => {
+                  mudar(item.range(today ?? /* @__PURE__ */ new Date()), item);
+                  if (!footer) fechar(true);
+                }
+              }
+            ),
+            props.selectionMode === "range" && /* @__PURE__ */ jsx(
+              CamposDoPeriodo,
+              {
+                value: valorNaTela ?? [null, null],
+                onChange: (novo) => mudar(novo, null)
+              }
+            ),
+            footer && /* @__PURE__ */ jsx(
+              RodapeDoPeriodo,
+              {
+                podeSelecionar: props.selectionMode === "range" ? Boolean(rascunho?.[0] && rascunho[1]) : rascunho != null,
+                onFechar: () => fechar(true),
+                onSelecionar: () => {
+                  emitir(rascunho);
+                  fechar(true);
+                }
+              }
+            )
+          ] })
+        },
+        ...!dataPicker && { footerTemplate },
+        ref: calendario,
+        unstyled: true,
+        inputId: id,
+        required,
+        disabled,
+        showIcon: true,
+        icon: /* @__PURE__ */ jsx(CalendarDot, { "aria-hidden": "true" }),
+        onShow: () => {
+          if (!pelaSeta.current) document.getElementById(id)?.focus();
+          pelaSeta.current = false;
+          onShow?.();
+        },
+        onHide: () => {
+          const atual = calendario.current;
+          const ativo = document.activeElement;
+          const semFoco = ativo === document.body || atual?.getOverlay()?.contains(ativo);
+          if ((peloTeclado.current || devolverFoco.current) && semFoco && atual) {
+            if (dataPicker) {
+              ignorarAbertura.current = true;
+              atual.focus();
+              ignorarAbertura.current = false;
+            } else {
+              atual.focus();
+              atual.hide();
+            }
+          }
+          peloTeclado.current = false;
+          pelaSeta.current = false;
+          devolverFoco.current = false;
+          onHide?.();
+        },
+        pt: {
+          root: { className: "cr-datepicker__root" },
+          input: {
+            root: {
+              className: "cr-field__control cr-datepicker__input",
+              "aria-describedby": supportText ? hintId : void 0,
+              "aria-invalid": error ? true : void 0,
+              onKeyDown: (event) => {
+                if (event.code === "ArrowDown" && !calendario.current?.getOverlay()) {
+                  pelaSeta.current = true;
+                }
+                const painel = calendario.current?.getOverlay();
+                if (dataPicker && event.code === "ArrowDown" && painel) {
+                  const dia2 = painel.querySelector(".cr-calendar__date--selected") ?? painel.querySelector(
+                    ".cr-calendar__date:not(.cr-calendar__date--disabled)"
+                  );
+                  if (dia2) {
+                    event.preventDefault();
+                    dia2.tabIndex = 0;
+                    dia2.focus();
+                  }
+                }
+              }
+            }
+          },
+          dropdownButton: { root: { className: "cr-datepicker__button" } },
+          panel: {
+            className: `cr-calendar cr-datepicker__panel${dataPicker ? " cr-datepicker__panel--data-picker" : ""}`,
+            onKeyDown: (event) => {
+              if (["Enter", "NumpadEnter", "Space"].includes(event.code))
+                peloTeclado.current = true;
+              if (dataPicker && event.code === "Escape" && aberto) fechar(true);
+            }
+          },
+          // Animação de entrada e saída (a do Prime) e o lado do painel, medido logo depois de o
+          // Prime posicionar.
+          transition: transicaoDoPopup(() => {
+            const campo = document.getElementById(id);
+            seguirLado(painelDoCampo(campo, ".cr-datepicker__panel"), campo);
+          }),
+          ...ptDoPainel(offDays),
+          // As partes do Data Picker entram no rodapé do Prime, que some no layout: cada uma ocupa o
+          // seu lugar na grade do painel (DatePicker.css). O Prime aplica o pt do footer, mas não o
+          // declara no tipo.
+          ...{ footer: { className: "cr-datepicker__extras" } }
+        }
+      }
+    ),
+    supportText && /* @__PURE__ */ jsxs("p", { id: hintId, className: `cr-field__hint${error ? " cr-field__hint--error" : ""}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "cr-field__hint-icon", "aria-hidden": "true", children: error ? /* @__PURE__ */ jsx(WarningCircle, {}) : /* @__PURE__ */ jsx(Info, {}) }),
+      supportText
+    ] })
+  ] });
+}
+var DatePicker = forwardRef(DatePickerBase);
 function mesDaTela(range, meses, hoje) {
   const base = (meses > 1 ? range[1] : range[0]) ?? range[0] ?? hoje;
   return new Date(base.getFullYear(), base.getMonth() - (meses > 1 ? 1 : 0), 1);
@@ -1407,76 +1624,40 @@ function PainelDePeriodo({
   onSelect,
   onClose
 }) {
-  const grupo = useId();
   const [rascunho, setRascunho] = useState(value ?? [null, null]);
   const [periodo, setPeriodo] = useState(() => periodoDe(periods, value, today) ?? null);
-  const [textos, setTextos] = useState([
-    dataCurta(value?.[0]),
-    dataCurta(value?.[1])
-  ]);
   const [mes, setMes] = useState(() => mesDaTela(rascunho, numberOfMonths, today));
-  const mudar = (novo, novoPeriodo, mudarTextos = true) => {
+  const mudar = (novo, novoPeriodo) => {
     setRascunho(novo);
     setPeriodo(novoPeriodo);
-    if (mudarTextos) setTextos([dataCurta(novo[0]), dataCurta(novo[1])]);
     if (!footer && novo[0] && novo[1]) onSelect([novo[0], novo[1]], novoPeriodo);
   };
-  const escolherPeriodo = (item) => {
-    const range = item.range(today);
-    setMes(mesDaTela(range, numberOfMonths, today));
-    mudar(range, item);
-  };
-  const digitar = (indice, texto) => {
-    const novosTextos = [...textos];
-    novosTextos[indice] = texto;
-    setTextos(novosTextos);
-    const data = lerData(texto);
-    if (!data) return;
-    const novo = [...rascunho];
-    novo[indice] = data;
-    if (novo[0] && novo[1] && novo[0] > novo[1]) novo[indice === 0 ? 1 : 0] = null;
-    setMes(mesDaTela(novo, numberOfMonths, today));
-    mudar(novo, null, false);
-  };
   const [inicio, fim] = rascunho;
   return /* @__PURE__ */ jsxs("div", { className: "cr-date-range", children: [
     /* @__PURE__ */ jsxs("div", { className: "cr-date-range__body", children: [
-      periods.length > 0 && /* @__PURE__ */ jsx("div", { className: "cr-date-range__periods", role: "radiogroup", "aria-label": "Per\xEDodos", children: periods.map((item) => /* @__PURE__ */ jsx(
-        Radio,
+      periods.length > 0 && /* @__PURE__ */ jsx(
+        ListaDePeriodos,
         {
-          className: "cr-date-range__period",
-          name: grupo,
-          label: item.label,
-          value: item.label,
-          checked: periodo === item,
-          onChange: () => escolherPeriodo(item)
-        },
-        item.label
-      )) }),
+          periods,
+          periodo,
+          onEscolher: (item) => {
+            const range = item.range(today);
+            setMes(mesDaTela(range, numberOfMonths, today));
+            mudar(range, item);
+          }
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "cr-date-range__calendars", children: [
-        /* @__PURE__ */ jsxs("div", { className: "cr-date-range__inputs", children: [
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              size: "medium",
-              "aria-label": "Data inicial",
-              placeholder: "dd / mm / aaaa",
-              value: textos[0],
-              onChange: (event) => digitar(0, event.target.value)
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "cr-date-range__dash", "aria-hidden": "true", children: "-" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              size: "medium",
-              "aria-label": "Data final",
-              placeholder: "dd / mm / aaaa",
-              value: textos[1],
-              onChange: (event) => digitar(1, event.target.value)
+        /* @__PURE__ */ jsx(
+          CamposDoPeriodo,
+          {
+            value: rascunho,
+            onChange: (novo) => {
+              setMes(mesDaTela(novo, numberOfMonths, today));
+              mudar(novo, null);
             }
-          )
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           Calendar,
           {
@@ -1486,8 +1667,8 @@ function PainelDePeriodo({
             viewDate: mes,
             onViewDateChange: (event) => setMes(event.value),
             onChange: (event) => {
-              const [inicio2 = null, fim2 = null] = event.value ?? [];
-              mudar([inicio2, fim2], null);
+              const [novoInicio = null, novoFim = null] = event.value ?? [];
+              mudar([novoInicio, novoFim], null);
             },
             minDate,
             maxDate,
@@ -1497,18 +1678,14 @@ function PainelDePeriodo({
         )
       ] })
     ] }),
-    footer && /* @__PURE__ */ jsxs("div", { className: "cr-date-range__footer", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "medium", onClick: onClose, children: "Fechar" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "medium",
-          disabled: !inicio || !fim,
-          onClick: () => inicio && fim && onSelect([inicio, fim], periodo),
-          children: "Selecionar"
-        }
-      )
-    ] })
+    footer && /* @__PURE__ */ jsx(
+      RodapeDoPeriodo,
+      {
+        podeSelecionar: Boolean(inicio && fim),
+        onFechar: onClose,
+        onSelecionar: () => inicio && fim && onSelect([inicio, fim], periodo)
+      }
+    )
   ] });
 }
 var DateRangeButton = forwardRef(