@seedgrid/fe-components 2026.4.17 → 2026.4.19

package/dist/i18n/useComponentsI18n.meta.js

@@ -0,0 +1,76 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "hook.components-i18n",
+    package: "@seedgrid/fe-components",
+    exportName: "useComponentsI18n",
+    slug: "use-components-i18n",
+    displayName: "useComponentsI18n",
+    category: "hook",
+    subcategory: "internationalization",
+    description: "Hook para acessar contexto de internacionalizacao dos componentes SeedGrid. Fornece locale atual e funcoes de traducao.",
+    tags: ["hook", "i18n", "internationalization", "locale", "translation"],
+    capabilities: ["locale-access", "message-resolution", "dynamic-translation"],
+    fieldSemantics: ["i18nContext", "locale", "translation"],
+    props: [
+        {
+            name: "returns.locale",
+            type: "SgComponentsLocale",
+            description: "Locale atual (pt-BR, en-US, es, fr, pt-PT, en, etc).",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "returns.messages",
+            type: "SgComponentsMessages",
+            description: "Dicionario de mensagens para o locale atual.",
+            semanticRole: "data",
+            bindable: false
+        }
+    ],
+    states: ["pt-BR", "pt-PT", "en-US", "en", "es", "fr"],
+    examples: [
+        {
+            id: "basic",
+            title: "Acessar locale e mensagens",
+            file: "apps/showcase/src/app/components/hooks/use-components-i18n/samples/basic.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "with-translation",
+            title: "Usar para traducao de mensagens",
+            file: "apps/showcase/src/app/components/hooks/use-components-i18n/samples/with-translation.tsx.sample",
+            kind: "sample"
+        }
+    ],
+    showcase: {
+        route: "/components/hooks/use-components-i18n",
+        hasPlayground: false,
+        hasPropsTable: true
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Acessar mensagens traduzidas dentro de componentes customizados.",
+        "Validar se um locale especifico esta configurado.",
+        "Implementar fallback para mensagens customizadas em diferentes locales."
+    ],
+    avoidUseCases: [
+        "Usar para traducao de strings fora do contexto de componentes SeedGrid.",
+        "Supor que o hook valida o locale; sempre checar o resultado."
+    ],
+    synonyms: ["i18n context", "locale hook", "translation context"],
+    relatedEntityFields: ["locale", "language", "translation", "i18n"],
+    compositionHints: [
+        "Envolver a arvore com SgComponentsI18nProvider antes de usar.",
+        "Usar setComponentsI18n() para alternar locale dinamicamente.",
+        "Combinar com getBuiltInComponentsMessages() para mensagens builtin."
+    ],
+    rankingSignals: {
+        freeText: 0.8,
+        structuredChoice: 0.7,
+        date: 0,
+        number: 0,
+        denseLayout: 0.4
+    }
+};

package/dist/inputs/SgAutocomplete.js

@@ -26,6 +26,7 @@ function SgAutocompleteBase(props) {
     const loadingText = loadingTextProp ?? t(i18n, "components.autocomplete.loading");
     const effectiveGrouped = grouped ?? groupped ?? false;
     const [inputValue, setInputValue] = React.useState(value ?? "");
+    const [internalError, setInternalError] = React.useState(null);
     const [items, setItems] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
     const [open, setOpen] = React.useState(false);
@@ -53,11 +54,14 @@ function SgAutocompleteBase(props) {
     React.useEffect(() => {
         if (value === undefined)
             return;
-        setLastSelected(value);
         // Never clobber what the user is actively typing.
         if (isFocusedRef.current)
             return;
+        setLastSelected(value);
         setInputValue(value);
+        if (!value) {
+            setInternalError(null);
+        }
     }, [value]);
     React.useEffect(() => {
         if (!value) {
@@ -138,6 +142,7 @@ function SgAutocompleteBase(props) {
         const selection = formatSelection ? formatSelection(item) : item.label;
         setSelectedItem(item);
         setInputValue(selection);
+        setInternalError(null);
         onChange?.(selection);
         setLastSelected(selection);
         onSelect?.(item);
@@ -152,8 +157,14 @@ function SgAutocompleteBase(props) {
         if (selectedItem && next !== (formatSelection ? formatSelection(selectedItem) : selectedItem.label)) {
             setSelectedItem(null);
         }
+        setInternalError(null);
         setInputValue(next);
-        onChange?.(next);
+        if (allowCustomValue || next.length === 0) {
+            onChange?.(next);
+        }
+        else {
+            onChange?.("");
+        }
         if (next.length === 0) {
             setItems([]);
             setOpen(false);
@@ -178,9 +189,20 @@ function SgAutocompleteBase(props) {
             return;
         }
         isFocusedRef.current = false;
-        if (!allowCustomValue && lastSelected && inputValue !== lastSelected) {
-            setInputValue(lastSelected);
-            onChange?.(lastSelected);
+        if (!allowCustomValue && inputValue !== lastSelected) {
+            if (lastSelected) {
+                setInputValue(lastSelected);
+                setInternalError(null);
+                onChange?.(lastSelected);
+            }
+            else {
+                setInputValue("");
+                setSelectedItem(null);
+                setInternalError(props.required
+                    ? props.requiredMessage ?? t(i18n, "components.inputs.required")
+                    : null);
+                onChange?.("");
+            }
         }
         setOpen(false);
         onOpenChange?.(false);
@@ -293,9 +315,20 @@ function SgAutocompleteBase(props) {
                 return;
             if (dropdownRef.current?.contains(event.target))
                 return;
-            if (!allowCustomValue && lastSelected && inputValue !== lastSelected) {
-                setInputValue(lastSelected);
-                onChange?.(lastSelected);
+            if (!allowCustomValue && inputValue !== lastSelected) {
+                if (lastSelected) {
+                    setInputValue(lastSelected);
+                    setInternalError(null);
+                    onChange?.(lastSelected);
+                }
+                else {
+                    setInputValue("");
+                    setSelectedItem(null);
+                    setInternalError(props.required
+                        ? props.requiredMessage ?? t(i18n, "components.inputs.required")
+                        : null);
+                    onChange?.("");
+                }
             }
             setOpen(false);
             onOpenChange?.(false);
@@ -317,7 +350,7 @@ function SgAutocompleteBase(props) {
             window.removeEventListener("scroll", handleLayoutChange, true);
         };
     }, [open, syncDropdownPosition]);
-    return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, enabled: enabled, readOnly: readOnly, borderRadius: borderRadius, iconButtons: mergedIconButtons, inputProps: {
+    return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, error: resolveFieldError(rest.error, internalError ?? undefined), enabled: enabled, readOnly: readOnly, borderRadius: borderRadius, iconButtons: mergedIconButtons, inputProps: {
                     ...inputProps,
                     ref: inputRef,
                     autoComplete: "off",