@seedgrid/fe-components 2026.9.4 → 2026.9.5

package/dist/inputs/SgInputDate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgInputDate.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAC9D,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAuBF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA0JlD"}
+{"version":3,"file":"SgInputDate.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAC9D,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAoCF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA0JlD"}

package/dist/inputs/SgInputDate.js

@@ -29,6 +29,18 @@ function parseDateValue(value) {
         return null;
     return date;
 }
+/**
+ * Teto do widget quando o consumidor nao informa `maxDate`.
+ *
+ * O <input type="date"> aceita ano de ate 6 digitos (o calendario do HTML vai ate
+ * 275760), entao sem `max` o campo aceita "202699" no lugar de "2026". Com um `max`
+ * de ano de 4 digitos o navegador contem o segmento em 4.
+ *
+ * Vale so' para o atributo HTML: a validacao continua usando os limites que o
+ * consumidor pediu, para nenhuma mensagem de erro citar um 31/12/9999 que ninguem
+ * escolheu.
+ */
+const WIDGET_MAX_DATE = "9999-12-31";
 export function SgInputDate(props) {
     const i18n = useComponentsI18n();
     const isDark = useDarkFlag();
@@ -86,7 +98,7 @@ export function SgInputDate(props) {
         ...inputProps,
         placeholder: showStaticLabel ? " " : (inputProps?.placeholder ?? rest.hintText ?? labelText),
         min: minDateValue,
-        max: maxDateValue,
+        max: maxDateValue ?? WIDGET_MAX_DATE,
         readOnly: inputProps?.readOnly,
         onChange: (event) => {
             setHasInteracted(true);

package/dist/inputs/SgPeriodSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPeriodSelector.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPeriodSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgPeriodSelector.d.ts","sourceRoot":"","sources":["../../src/inputs/SgPeriodSelector.tsx"],"names":[],"mappings":"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"}

package/dist/inputs/SgPeriodSelector.js

@@ -296,37 +296,51 @@ export function buildPeriodOptions(config, locale = "pt-BR") {
 /* ------------------------------------------------------------------ */
 /* Componente                                                          */
 /* ------------------------------------------------------------------ */
-function toIsoDate(d) {
-    if (!d)
-        return "";
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, "0");
-    const day = String(d.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-}
+/**
+ * Converte o valor cru do <input type="date"> (ISO yyyy-MM-dd) em Date local.
+ *
+ * O input nativo emite um change a cada digito do ano, entao "2026" chega aqui
+ * antes como "0002", "0020" e "0202". Esses anos incompletos sao recusados, e o
+ * ano completo passa por setFullYear para escapar da regra legada do JS que
+ * mapeia ano 0..99 para 1900+ano (new Date(2, 8, 19) => 1902-09-19).
+ */
 function parseIsoDate(value) {
-    if (!value)
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+    if (!match)
         return null;
-    const [y, m, d] = value.split("-").map((part) => Number(part));
-    if (!y || !m || !d)
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+    if (year < 1000 || month < 1 || month > 12 || day < 1 || day > 31)
         return null;
-    return new Date(y, m - 1, d);
+    const date = new Date(year, month - 1, day);
+    date.setFullYear(year);
+    return Number.isNaN(date.getTime()) ? null : date;
 }
 function SgPeriodSelectorBase(props) {
     const { id = "sg-period-selector", label, value, onChange, permitPast = true, permitCurrent = true, permitFuture = true, permitAll = true, allowCustomPeriod = true, locale = "pt-BR", disabled, required, minDate, maxDate, referenceDate, className, error } = props;
     const isControlled = value !== undefined;
     const [internalPreset, setInternalPreset] = React.useState(value ?? null);
     const selectedPreset = isControlled ? value ?? null : internalPreset;
-    const [customStart, setCustomStart] = React.useState(null);
-    const [customEnd, setCustomEnd] = React.useState(null);
+    // Guardamos a string crua do input (ISO ou parcial), nunca um Date reformatado:
+    // devolver ao input um texto diferente do digitado reinicia o segmento em foco
+    // e impede o usuario de terminar de digitar o ano.
+    const [customStart, setCustomStart] = React.useState("");
+    const [customEnd, setCustomEnd] = React.useState("");
     const options = React.useMemo(() => buildPeriodOptions({ permitAll, allowCustomPeriod, permitCurrent, permitFuture, permitPast }, locale), [permitAll, allowCustomPeriod, permitCurrent, permitFuture, permitPast, locale]);
     const resolveOptions = React.useMemo(() => ({ minDate, maxDate, locale }), [minDate, maxDate, locale]);
-    const emitCustom = React.useCallback((start, end) => {
+    const emitCustom = React.useCallback((startIso, endIso) => {
+        // Enquanto a data estiver incompleta o parse devolve null: melhor emitir
+        // "sem limite" do que uma data de ano 0002 no meio da digitacao.
+        const startDate = parseIsoDate(startIso);
+        const endDate = parseIsoDate(endIso);
+        startDate?.setHours(0, 0, 0, 0);
+        endDate?.setHours(23, 59, 59, 999);
         onChange?.({
             preset: PeriodPreset.CUSTOM,
             label: periodPresetLabel(PeriodPreset.CUSTOM, locale),
-            startDate: start ? new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0, 0) : null,
-            endDate: end ? new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59, 999) : null
+            startDate,
+            endDate
         });
     }, [locale, onChange]);
     const handleValueChange = React.useCallback((raw) => {
@@ -346,14 +360,12 @@ function SgPeriodSelectorBase(props) {
         onChange?.(resolvePeriod(preset, referenceDate ?? new Date(), resolveOptions));
     }, [customEnd, customStart, emitCustom, isControlled, onChange, referenceDate, resolveOptions]);
     const showCustomRange = allowCustomPeriod && selectedPreset === PeriodPreset.CUSTOM;
-    return (_jsxs("div", { className: cn("w-full max-w-[18rem]", className), children: [_jsx(SgCombobox, { id: id, label: label, source: options, value: selectedPreset ?? null, grouped: true, openOnFocus: true, enabled: disabled ? false : undefined, required: required, error: error, renderGroupHeader: (group) => group ? (_jsx("div", { className: "mt-2 border-b border-border pb-1.5 text-center text-[11px] font-bold uppercase tracking-wider text-muted-foreground", children: group })) : null, onValueChange: handleValueChange }), showCustomRange ? (_jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2", children: [_jsx(SgInputDate, { id: `${id}-custom-start`, inputProps: { value: toIsoDate(customStart) }, minDate: minDate, maxDate: maxDate, enabled: disabled ? false : undefined, onChange: (next) => {
-                            const parsed = parseIsoDate(next);
-                            setCustomStart(parsed);
-                            emitCustom(parsed, customEnd);
-                        } }), _jsx(SgInputDate, { id: `${id}-custom-end`, inputProps: { value: toIsoDate(customEnd) }, minDate: minDate, maxDate: maxDate, enabled: disabled ? false : undefined, onChange: (next) => {
-                            const parsed = parseIsoDate(next);
-                            setCustomEnd(parsed);
-                            emitCustom(customStart, parsed);
+    return (_jsxs("div", { className: cn("w-full max-w-[18rem]", className), children: [_jsx(SgCombobox, { id: id, label: label, source: options, value: selectedPreset ?? null, grouped: true, openOnFocus: true, enabled: disabled ? false : undefined, required: required, error: error, renderGroupHeader: (group) => group ? (_jsx("div", { className: "mt-2 border-b border-border pb-1.5 text-center text-[11px] font-bold uppercase tracking-wider text-muted-foreground", children: group })) : null, onValueChange: handleValueChange }), showCustomRange ? (_jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2", children: [_jsx(SgInputDate, { id: `${id}-custom-start`, inputProps: { value: customStart }, minDate: minDate, maxDate: maxDate, enabled: disabled ? false : undefined, onChange: (next) => {
+                            setCustomStart(next);
+                            emitCustom(next, customEnd);
+                        } }), _jsx(SgInputDate, { id: `${id}-custom-end`, inputProps: { value: customEnd }, minDate: minDate, maxDate: maxDate, enabled: disabled ? false : undefined, onChange: (next) => {
+                            setCustomEnd(next);
+                            emitCustom(customStart, next);
                         } })] })) : null] }));
 }
 export function SgPeriodSelector(props) {