rl-core-front 0.16.2 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.2",
+  "version": "0.16.3",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_utils/calendar.ts

@@ -253,6 +253,110 @@ export const maskDay = (raw: string, locale: string, previous = ""): string => {
   return saida.join("/");
 };
 
+/** Onde está o próximo dígito a partir de `posicao` — barra não se digita. */
+const proximoDigito = (texto: string, posicao: number): number => {
+  let atual = posicao;
+
+  while (atual < texto.length && texto[atual] === "/") {
+    atual += 1;
+  }
+
+  return atual;
+};
+
+/**
+ * Um dígito digitado **sobre** uma data já escrita: troca o de baixo do cursor.
+ *
+ * É o que faz o cursor parado no começo de `01/01/2026` servir para algo. Sem
+ * isto, a tecla se enfiaria no texto: `3` no começo produziria `301/01/2026`,
+ * que a máscara — que lê campo a campo — remonta como `30/10/1202`, uma data
+ * que ninguém digitou.
+ *
+ * Trabalha **por campo**, e não por caractere do texto: é o campo que tem teto
+ * (dia até 31, mês até 12) e é ele que diz quando a tecla seguinte muda de
+ * lugar. Duas saídas, conforme o dígito caiba ou não:
+ *
+ * - cabe: é correção, e o resto do campo fica de pé — `1` sobre o `2` de
+ *   `2026` dá `1026`, e não um ano recomeçado do zero;
+ * - não cabe: o campo recomeça daquele dígito, como se estivesse sendo
+ *   digitado agora — `9` sobre o dia `11` dá `09`, porque 9 não começa dia
+ *   nenhum, e o cursor já passa para o mês.
+ *
+ * A posição devolvida é a do próximo dígito a digitar, pulando a barra: quem
+ * teclar `3`, `1`, `0`, `8` escreve 31/08 sem tocar em seta nenhuma. Campo que
+ * ficou pela metade (o mês `1`, que ainda pode virar 10, 11 ou 12) mantém o
+ * cursor nele, esperando o segundo dígito.
+ */
+export const overtypeDay = (
+  texto: string,
+  posicao: number,
+  digito: string,
+  locale: string,
+): { texto: string; posicao: number } => {
+  const order = dayFieldOrder(locale);
+  const campos = texto.split("/");
+
+  // Só sobre uma data inteira. Meia data é o campo sendo preenchido, e ali a
+  // digitação normal já escreve no fim.
+  if (campos.length !== order.length) {
+    return { texto, posicao };
+  }
+
+  /*
+    Em que campo o cursor está, e em que dígito dele.
+
+    O cursor em cima da barra conta como o começo do campo seguinte — é onde
+    ele está depois de fechar o dia. E o cursor no fim de um campo que ainda
+    não está cheio continua nesse campo: é o `1` do mês esperando o `2`.
+  */
+  let base = 0;
+  let alvo = -1;
+  let offset = 0;
+
+  for (let indice = 0; indice < campos.length; indice += 1) {
+    const fim = base + campos[indice].length;
+    const cheio = campos[indice].length >= DAY_FIELD_SIZES[order[indice]];
+
+    if (posicao < fim || (posicao === fim && !cheio)) {
+      alvo = indice;
+      offset = Math.max(0, posicao - base);
+      break;
+    }
+
+    base = fim + 1;
+  }
+
+  // Depois do último dígito não há o que sobrescrever, e acrescentar faria a
+  // data crescer para além do formato.
+  if (alvo === -1) {
+    return { texto, posicao };
+  }
+
+  const tamanho = DAY_FIELD_SIZES[order[alvo]];
+  const max = DAY_FIELD_MAX[order[alvo]];
+  const campo = campos[alvo];
+  const trocado = `${campo.slice(0, offset)}${digito}${campo.slice(offset + 1)}`;
+  const cabe =
+    trocado.length <= tamanho && Number(trocado) >= 1 && Number(trocado) <= max;
+  const valor = cabe ? trocado : fitDayField(digito, max, tamanho, true).value;
+  const novo = campos
+    .map((atual, indice) => (indice === alvo ? valor : atual))
+    .join("/");
+
+  // Quantos dígitos do campo a tecla consumiu: um, quando corrigiu; o campo
+  // todo, quando ele recomeçou (o `9` que já vira `09`).
+  const consumido = cabe ? offset + 1 : valor.length;
+  const parou = base + consumido;
+
+  return {
+    texto: novo,
+    posicao:
+      consumido >= valor.length && valor.length === tamanho
+        ? proximoDigito(novo, parou)
+        : parou,
+  };
+};
+
 /**
  * O que foi digitado vira `"yyyy-MM-dd"`, ou `null` enquanto não for uma data.
  *

package/src/components/ui/date-picker.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
-import type { JSX } from "react";
-import { useState } from "react";
+import type { JSX, KeyboardEvent } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 
 import {
   addMonths,
@@ -14,6 +14,7 @@ import {
   maskDay,
   monthGrid,
   monthLabel,
+  overtypeDay,
   parseTypedDay,
   today,
   toIsoDay,
@@ -55,10 +56,12 @@ export interface DatePickerProps {
  * precisa navegar meses no calendário para dizê-la. O calendário continua ali,
  * no ícone — é o caminho de quem procura o dia, não de quem já o conhece.
  *
- * Focar o campo marca a data inteira, e por isso a digitação sempre começa
- * pelo dia. Com o cursor solto no fim do ano — onde o navegador o deixa —
- * escrever outra data exigia apagar dez caracteres primeiro, e um dígito
- * digitado ali entrava no meio do ano.
+ * Focar o campo põe o cursor **antes do dia**, e o dígito digitado sobrescreve
+ * o que está embaixo dele em vez de empurrar o resto: `3` sobre `01/01/2026`
+ * dá `31/01/2026` com o cursor já no mês. Com o cursor solto no fim do ano —
+ * onde o navegador o deixa — trocar a data exigia apagar dez caracteres
+ * primeiro; marcar tudo resolvia isso, mas obrigava a redigitar mês e ano para
+ * corrigir só o dia.
  */
 export function DatePicker({
   value,
@@ -81,23 +84,37 @@ export function DatePicker({
   const selected = fromIsoDay(value);
   const [month, setMonth] = useState<Date>(() => selected ?? today());
 
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  /*
+    Onde o cursor deve ficar depois do próximo render.
+
+    O input é controlado, então quem escreve o valor é o React — e ele repõe o
+    cursor no fim. A posição precisa ser reaplicada depois da pintura, e por
+    isso vive num ref: em estado, ela causaria um render só para dizer onde o
+    cursor está.
+  */
+  const caret = useRef<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (caret.current === null || !inputRef.current) {
+      return;
+    }
+
+    inputRef.current.setSelectionRange(caret.current, caret.current);
+    caret.current = null;
+  });
+
   const pickDay = (day: Date): void => {
     onChange(toIsoDay(day));
     setTyped(null);
     setOpen(false);
   };
 
-  /**
-   * Cada tecla: a máscara põe as barras, e a data sai assim que existir.
-   *
-   * O ano em branco é o do dia que está no campo — ou o de hoje, quando não há
-   * nenhum. Campo esvaziado limpa o valor: apagar é uma escolha, não um
-   * rascunho pela metade.
-   */
-  const digitar = (raw: string): void => {
-    // O texto que estava lá antes: é ele que diz se a tecla foi um dígito novo
-    // ou um apagar — e o campo se comporta diferente nos dois casos.
-    const texto = maskDay(raw, locale, typed ?? (value ? formatDay(value, locale) : ""));
+  /** O que o campo mostra agora: o rascunho, ou a data gravada. */
+  const escrito = (): string => typed ?? (value ? formatDay(value, locale) : "");
+
+  /** O texto vira rascunho e, se já for uma data, valor. */
+  const aplicar = (texto: string): void => {
     setTyped(texto);
 
     if (texto === "") {
@@ -118,6 +135,50 @@ export function DatePicker({
     }
   };
 
+  /**
+   * Cada tecla: a máscara põe as barras, e a data sai assim que existir.
+   *
+   * O ano em branco é o do dia que está no campo — ou o de hoje, quando não há
+   * nenhum. Campo esvaziado limpa o valor: apagar é uma escolha, não um
+   * rascunho pela metade.
+   */
+  const digitar = (raw: string): void => {
+    // O texto que estava lá antes: é ele que diz se a tecla foi um dígito novo
+    // ou um apagar — e o campo se comporta diferente nos dois casos.
+    aplicar(maskDay(raw, locale, escrito()));
+  };
+
+  /**
+   * Dígito sobre uma data já escrita: troca o de baixo do cursor.
+   *
+   * Só quando a data está completa e nada está selecionado. Data pela metade é
+   * o campo sendo preenchido, e ali o cursor já está no fim; com um trecho
+   * marcado, digitar substitui o trecho, que é o que qualquer campo de texto
+   * faz e ninguém espera diferente.
+   */
+  const sobrescrever = (event: KeyboardEvent<HTMLInputElement>): void => {
+    const campo = event.currentTarget;
+    const inicio = campo.selectionStart ?? 0;
+
+    if (
+      !/^\d$/.test(event.key) ||
+      event.ctrlKey ||
+      event.metaKey ||
+      event.altKey ||
+      campo.value.length < dayPlaceholder(locale).length ||
+      (campo.selectionEnd ?? inicio) !== inicio
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const { texto, posicao } = overtypeDay(campo.value, inicio, event.key, locale);
+
+    caret.current = posicao;
+    aplicar(texto);
+  };
+
   const dayClass = (day: Date): string => {
     if (selected && isSameDay(day, selected)) {
       return "bg-primary text-primary-foreground font-semibold";
@@ -142,18 +203,20 @@ export function DatePicker({
           )}
         >
           <input
+            ref={inputRef}
             aria-label={label}
-            value={typed ?? (value ? formatDay(value, locale) : "")}
+            value={escrito()}
             disabled={disabled}
             // Só dígitos, e o teclado do celular abre no numérico: a máscara é
             // quem escreve as barras.
             inputMode="numeric"
             placeholder={placeholder ?? dayPlaceholder(locale)}
             onChange={(event) => digitar(event.target.value)}
-            // Chegou o foco, a data inteira fica marcada: o próximo dígito
-            // reescreve a data do dia em diante, em vez de se enfiar no meio
-            // do ano.
-            onFocus={(event) => event.currentTarget.select()}
+            onKeyDown={sobrescrever}
+            // Chegou o foco, o cursor vai para antes do dia: é por ele que se
+            // começa a escrever uma data, e o navegador deixaria o cursor no
+            // fim do ano.
+            onFocus={(event) => event.currentTarget.setSelectionRange(0, 0)}
             // O clique é o nosso, e não o do navegador: o dele põe o cursor
             // onde se clicou e desfaz, no `mouseup`, a seleção que o foco
             // acabou de fazer. Só no primeiro clique — dentro do campo já