@seedgrid/fe-components 2026.8.7 → 2026.8.8

package/dist/ai/seedgrid-components.manifest.json

@@ -100,7 +100,16 @@
             "type": "boolean",
             "required": false,
             "default": false,
-            "description": "Abre sugestoes ao focar.",
+            "description": "Abre a lista ao focar; com um item ja selecionado abre a lista completa.",
+            "semanticRole": "behavior",
+            "bindable": true
+          },
+          {
+            "name": "showDropDownButton",
+            "type": "boolean",
+            "required": false,
+            "default": false,
+            "description": "Exibe o botao que abre/fecha a lista. Abre a lista completa quando o texto e uma selecao; preserva o filtro quando o usuario digitou.",
             "semanticRole": "behavior",
             "bindable": true
           },
@@ -342,11 +351,6 @@
             "type": "boolean",
             "required": false
           },
-          {
-            "name": "showDropDownButton",
-            "type": "boolean",
-            "required": false
-          },
           {
             "name": "suffixText",
             "type": "string",

package/dist/inputs/SgAutocomplete.js

@@ -33,6 +33,7 @@ function SgAutocompleteBase(props) {
     const wrapperRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
+    const listRef = React.useRef(null);
     const ignoreBlurRef = React.useRef(false);
     const [activeIndex, setActiveIndex] = React.useState(-1);
     const [lastSelected, setLastSelected] = React.useState("");
@@ -42,6 +43,16 @@ function SgAutocompleteBase(props) {
     const requestIdRef = React.useRef(0);
     const openRef = React.useRef(false);
     openRef.current = open;
+    // Quando a lista abre pelo botao dropdown (ou por openOnFocus) com um item ja
+    // selecionado, ela deve listar o catalogo inteiro em vez de refiltrar pelo
+    // label do proprio item selecionado -- senao a lista volta com 1 item so.
+    const browseModeRef = React.useRef(false);
+    // true enquanto o texto do input for algo que o usuario digitou (e ainda nao
+    // virou selecao). Enquanto for false, o texto e uma selecao (ou esta vazio) e
+    // abrir a lista deve mostrar o catalogo inteiro, nao refiltrar por ele.
+    const typedRef = React.useRef(false);
+    const inputValueRef = React.useRef(inputValue);
+    inputValueRef.current = inputValue;
     // While the user is focused (typing), every incoming `value` prop change is
     // just the parent echoing back our own onChange. Overwriting inputValue in
     // that window drops characters typed faster than one render cycle.
@@ -57,6 +68,12 @@ function SgAutocompleteBase(props) {
         // Never clobber what the user is actively typing.
         if (isFocusedRef.current)
             return;
+        // Valor identico ao que ja exibimos e apenas o pai ecoando nosso onChange:
+        // nao ha o que sincronizar, e trata-lo como valor externo apagaria o fato de
+        // o texto ter sido digitado pelo usuario.
+        if (value === inputValueRef.current)
+            return;
+        typedRef.current = false;
         setLastSelected(value);
         setInputValue(value);
         if (!value) {
@@ -133,9 +150,32 @@ function SgAutocompleteBase(props) {
     React.useEffect(() => {
         if (!openRef.current)
             return;
-        const handler = setTimeout(() => runSearch(inputValue), delay);
+        if (browseModeRef.current)
+            return;
+        const handler = setTimeout(() => {
+            // A lista pode ter fechado (ou entrado em modo browse) enquanto o debounce
+            // estava pendente; disparar aqui reabriria/refiltraria a lista sozinha.
+            if (!openRef.current || browseModeRef.current)
+                return;
+            runSearch(inputValue);
+        }, delay);
         return () => clearTimeout(handler);
     }, [delay, inputValue, runSearch]);
+    // Abre a lista em modo "browse" (catalogo completo) quando o texto do input
+    // nao foi digitado pelo usuario -- e uma selecao ou esta vazio. Se o usuario
+    // digitou algo, o filtro digitado e respeitado.
+    const openList = React.useCallback(() => {
+        const browse = !typedRef.current;
+        browseModeRef.current = browse;
+        setOpen(true);
+        onOpenChange?.(true);
+        runSearch(browse ? "" : inputValue, true);
+    }, [inputValue, onOpenChange, runSearch]);
+    const closeList = React.useCallback(() => {
+        browseModeRef.current = false;
+        setOpen(false);
+        onOpenChange?.(false);
+    }, [onOpenChange]);
     const selectItem = (item) => {
         if (item.disabled)
             return;
@@ -146,6 +186,8 @@ function SgAutocompleteBase(props) {
         onChange?.(selection);
         setLastSelected(selection);
         onSelect?.(item);
+        typedRef.current = false;
+        browseModeRef.current = false;
         setOpen(false);
         onOpenChange?.(false);
         if (clearOnSelect) {
@@ -157,6 +199,8 @@ function SgAutocompleteBase(props) {
         if (selectedItem && next !== (formatSelection ? formatSelection(selectedItem) : selectedItem.label)) {
             setSelectedItem(null);
         }
+        browseModeRef.current = false;
+        typedRef.current = next.length > 0;
         setInternalError(null);
         setInputValue(next);
         if (allowCustomValue || next.length === 0) {
@@ -189,6 +233,9 @@ function SgAutocompleteBase(props) {
             return;
         }
         isFocusedRef.current = false;
+        if (!allowCustomValue) {
+            typedRef.current = false;
+        }
         if (!allowCustomValue && inputValue !== lastSelected) {
             if (lastSelected) {
                 setInputValue(lastSelected);
@@ -204,6 +251,7 @@ function SgAutocompleteBase(props) {
                 onChange?.("");
             }
         }
+        browseModeRef.current = false;
         setOpen(false);
         onOpenChange?.(false);
     };
@@ -214,9 +262,7 @@ function SgAutocompleteBase(props) {
             setInputValue(selection);
         }
         if (openOnFocus) {
-            setOpen(true);
-            onOpenChange?.(true);
-            runSearch(inputValue, true);
+            openList();
         }
     };
     const handleKeyDown = (event) => {
@@ -237,8 +283,7 @@ function SgAutocompleteBase(props) {
                 selectItem(item);
         }
         else if (event.key === "Escape") {
-            setOpen(false);
-            onOpenChange?.(false);
+            closeList();
         }
     };
     const syncDropdownPosition = React.useCallback(() => {
@@ -261,13 +306,10 @@ function SgAutocompleteBase(props) {
             ignoreBlurRef.current = true;
         }, onClick: () => {
             if (open) {
-                setOpen(false);
-                onOpenChange?.(false);
+                closeList();
                 return;
             }
-            setOpen(true);
-            onOpenChange?.(true);
-            runSearch(inputValue, true);
+            openList();
         }, "aria-label": t(i18n, "components.actions.openList"), children: _jsx(ChevronDown, { size: 16 }) })) : null;
     const mergedIconButtons = dropdownButton ? [...(iconButtons ?? []), dropdownButton] : iconButtons;
     const groupedItems = React.useMemo(() => {
@@ -293,7 +335,7 @@ function SgAutocompleteBase(props) {
             return groupedItems.map(({ group, list }) => (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsx("div", { className: "px-3 py-1 text-xs font-semibold text-muted-foreground", children: renderGroupHeader ? renderGroupHeader(group) : group || " " }), list.map((item, index) => {
                         const flatIndex = items.indexOf(item);
                         const isActive = flatIndex === activeIndex;
-                        return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(flatIndex), onMouseDown: (event) => {
+                        return (_jsxs("div", { "data-sg-index": flatIndex, className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(flatIndex), onMouseDown: (event) => {
                                 event.preventDefault();
                                 ignoreBlurRef.current = true;
                             }, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(item) })) : null] }, item.id));
@@ -301,12 +343,38 @@ function SgAutocompleteBase(props) {
         }
         return items.map((item, index) => {
             const isActive = index === activeIndex;
-            return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
+            return (_jsxs("div", { "data-sg-index": index, className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
                     event.preventDefault();
                     ignoreBlurRef.current = true;
                 }, onClick: () => selectItem(item), children: [renderItem ? renderItem(item, isActive) : item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-2 py-1 text-xs text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(item) })) : null] }, item.id));
         });
     };
+    // No modo browse a lista abre inteira: destaca o item ja selecionado para o
+    // usuario se situar dentro dela.
+    React.useEffect(() => {
+        if (!open || !browseModeRef.current || !selectedItem)
+            return;
+        const index = items.findIndex((item) => item.id === selectedItem.id);
+        if (index >= 0)
+            setActiveIndex(index);
+    }, [items, open, selectedItem]);
+    // Mantem o item ativo visivel (item destacado ao abrir e navegacao por teclado).
+    React.useEffect(() => {
+        if (!open || activeIndex < 0)
+            return;
+        const container = listRef.current;
+        const node = container?.querySelector(`[data-sg-index="${activeIndex}"]`);
+        if (!container || !node)
+            return;
+        const top = node.offsetTop - container.offsetTop;
+        const bottom = top + node.offsetHeight;
+        if (top < container.scrollTop) {
+            container.scrollTop = top;
+        }
+        else if (bottom > container.scrollTop + container.clientHeight) {
+            container.scrollTop = bottom - container.clientHeight;
+        }
+    }, [activeIndex, items, open]);
     React.useEffect(() => {
         if (!open)
             return;
@@ -330,6 +398,7 @@ function SgAutocompleteBase(props) {
                     onChange?.("");
                 }
             }
+            browseModeRef.current = false;
             setOpen(false);
             onOpenChange?.(false);
         };
@@ -379,6 +448,6 @@ function SgAutocompleteBase(props) {
                         handleKeyDown(event);
                     }
                 } }), renderValue && selectedItem && !open ? (_jsx("div", { className: "pointer-events-none absolute inset-y-0 left-3 right-10 z-10 flex items-center overflow-hidden", children: renderValue(selectedItem) })) : null, open && !(enabled === false || readOnly) && typeof document !== "undefined"
-                ? createPortal(_jsxs("div", { ref: dropdownRef, className: "z-[1100] overflow-hidden rounded-md border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg", style: dropdownStyle, children: [_jsx("div", { className: "max-h-64 overflow-auto", children: listContent() }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2", children: renderFooter(inputValue, items.length > 0) })) : null] }), document.body)
+                ? createPortal(_jsxs("div", { ref: dropdownRef, className: "z-[1100] overflow-hidden rounded-md border border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] text-[rgb(var(--sg-text,var(--sg-fg)))] shadow-lg", style: dropdownStyle, children: [_jsx("div", { ref: listRef, className: "max-h-64 overflow-auto", children: listContent() }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-[rgb(var(--sg-surface,var(--sg-bg)))] px-3 py-2", children: renderFooter(inputValue, items.length > 0) })) : null] }), document.body)
                 : null] }));
 }

package/dist/inputs/SgAutocomplete.meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgAutocomplete.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgAutocomplete.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAgCpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}
+{"version":3,"file":"SgAutocomplete.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgAutocomplete.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAiCpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAmBrB,CAAC"}

package/dist/inputs/SgAutocomplete.meta.js

@@ -19,7 +19,8 @@ export const sgMeta = {
         { name: "delay", type: "number", description: "Debounce da pesquisa em milissegundos.", semanticRole: "behavior", bindable: true },
         { name: "maxResult", type: "number", description: "Limite de resultados exibidos.", semanticRole: "behavior", bindable: true },
         { name: "allowCustomValue", type: "boolean", default: false, description: "Permite valor fora da lista.", semanticRole: "behavior", bindable: true },
-        { name: "openOnFocus", type: "boolean", default: false, description: "Abre sugestoes ao focar.", semanticRole: "behavior", bindable: true },
+        { name: "openOnFocus", type: "boolean", default: false, description: "Abre a lista ao focar; com um item ja selecionado abre a lista completa.", semanticRole: "behavior", bindable: true },
+        { name: "showDropDownButton", type: "boolean", default: false, description: "Exibe o botao que abre/fecha a lista. Abre a lista completa quando o texto e uma selecao; preserva o filtro quando o usuario digitou.", semanticRole: "behavior", bindable: true },
         { name: "onSelect", type: "(item: SgAutocompleteItem) => void", description: "Callback disparado ao selecionar item.", semanticRole: "event", bindable: false }
     ],
     states: ["default", "focused", "open", "loading", "disabled", "error"],