@govbr-ds/webcomponents 2.1.1 → 2.1.2

package/dist/collection/components/select/select-list/select-list.js

@@ -116,6 +116,8 @@ export class SelectList {
         this.options = this.syncSelectAllOption(this.options);
     }
     handleOptionStateChange(event) {
+        if (this.isControlledBySelect)
+            return;
         const detail = event.detail;
         if (!detail?.value)
             return;
@@ -216,9 +218,15 @@ export class SelectList {
      */
     async setMultiple(isMultiple) {
         this.isMultiple = isMultiple;
-        this.options = this.normalizeOptionsForMode(this.options, isMultiple);
+        if (!this.isControlledBySelect)
+            this.options = this.normalizeOptionsForMode(this.options, isMultiple);
         this.scheduleMeasureItemHeight();
     }
+    get isControlledBySelect() {
+        const root = this.el.getRootNode();
+        const host = root.host;
+        return host?.tagName?.toLowerCase() === 'br-select';
+    }
     /**
      * Retorna uma cópia das opções atualmente controladas pela lista.
      *
@@ -539,14 +547,18 @@ export class SelectList {
     renderOption(option, index) {
         const rowHeight = this.getRowHeight();
         const optionPart = this.isSelectAllOption(option) ? 'option select-all' : 'option';
-        return (h("br-select-option", { part: optionPart, active: index === this.activeOptionIndex, "data-option-index": index, disabled: option.disabled, id: `${this.el.id || 'br-select-list'}-option-${index}`, indeterminate: option.indeterminate, key: option.value, label: option.label, selected: option.selected, "show-checkbox": this.isMultiple, style: {
+        return (h("br-select-option", { part: optionPart, active: index === this.activeOptionIndex, "data-option-index": index, disabled: option.disabled, id: `${this.el.id || 'br-select-list'}-option-${index}`, indeterminate: option.indeterminate,
+            // A seleção faz parte da identidade visual renderizada. Incluir o estado
+            // na chave evita que uma opção virtual reutilizada retenha o snapshot
+            // interno anterior do br-select-option/br-item.
+            key: `${option.value}:${option.selected ? 'selected' : 'unselected'}`, label: option.label, selected: option.selected, "show-checkbox": this.isMultiple, style: {
                 boxSizing: 'border-box',
                 height: `${rowHeight}px`,
                 position: 'absolute',
                 top: `${index * rowHeight}px`,
                 left: '0',
                 right: '0',
-            }, value: option.value }, option.label ?? option.value));
+            }, value: option.value }, option.content ? h("span", { innerHTML: option.content }) : (option.label ?? option.value)));
     }
     getVirtualScrollStyle() {
         return {
@@ -580,7 +592,7 @@ export class SelectList {
         return (h("div", { part: "loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { size: "small", label: "Buscando op\u00E7\u00F5es" }))));
     }
     render() {
-        return (h(Host, { key: '5dc8eb2363f8deae198dade6003ded206eb959a4' }, h("div", { key: '6cc0273ab1143d29114090ea7edde1b49d217fe8', class: this.getCssClassMap(), part: "list", ref: (el) => (this.listElement = el), onScroll: this.handleScroll, style: this.getVirtualScrollStyle() }, this.loading ? this.renderLoading() : this.renderVirtualOptions())));
+        return (h(Host, { key: '537c7f312573570953b24e27fed7188a052c4bd5' }, h("div", { key: 'aac978e5664c9dee21ba7a6763125fe7daf915d3', class: this.getCssClassMap(), part: "list", ref: (el) => (this.listElement = el), onScroll: this.handleScroll, style: this.getVirtualScrollStyle() }, this.loading ? this.renderLoading() : this.renderVirtualOptions())));
     }
     static get is() { return "br-select-list"; }
     static get encapsulation() { return "shadow"; }
@@ -904,7 +916,7 @@ export class SelectList {
                     "signature": "(option: SelectOptionData) => Promise<void>",
                     "parameters": [{
                             "name": "option",
-                            "type": "{ disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
+                            "type": "{ content?: string; disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
                             "docs": "Op\u00E7\u00E3o que deve ser persistida na lista."
                         }],
                     "references": {

package/dist/collection/components/select/select-option/select-option.js

@@ -79,7 +79,10 @@ export class SelectOption {
             if (this.isRedundantCheckboxReflection(event, current)) {
                 return;
             }
-            this.applySelection(current);
+            if (this.isControlledBySelect)
+                this.emitStateChange(current);
+            else
+                this.applySelection(current);
         };
     }
     componentDidLoad() {
@@ -117,7 +120,11 @@ export class SelectOption {
     async setSelectedState(selected) {
         if (this.disabled)
             return;
-        this.applySelection(typeof selected === 'boolean' ? selected : !this.selected);
+        const nextSelected = typeof selected === 'boolean' ? selected : !this.selected;
+        if (this.isControlledBySelect)
+            this.emitStateChange(nextSelected);
+        else
+            this.applySelection(nextSelected);
     }
     isRedundantCheckboxReflection(event, nextSelected) {
         if (!event)
@@ -129,11 +136,11 @@ export class SelectOption {
             return false;
         return Boolean(nextSelected) === Boolean(this.selected);
     }
-    emitStateChange() {
+    emitStateChange(selected = this.selected) {
         const detail = {
             disabled: this.disabled,
             indeterminate: this.indeterminate,
-            selected: this.selected,
+            selected,
             value: this.getResolvedValue(),
             label: this.getResolvedLabel(),
         };
@@ -143,6 +150,20 @@ export class SelectOption {
         this.lastStateChangeKey = nextKey;
         this.brSelectOptionStateChange.emit(detail);
     }
+    get isControlledBySelect() {
+        if (this.el.closest('br-select'))
+            return true;
+        let node = this.el;
+        for (;;) {
+            const root = node.getRootNode();
+            const host = root.host;
+            if (!host)
+                return false;
+            if (host.tagName.toLowerCase() === 'br-select')
+                return true;
+            node = host;
+        }
+    }
     /**
      * Centraliza a transição de seleção para manter emissão e limpeza de estado consistentes.
      *
@@ -209,7 +230,7 @@ export class SelectOption {
         return this.normalizeText(this.el.textContent || '');
     }
     render() {
-        return (h(Host, { key: 'a7699275905c23dc2dccd444dfccf4f7a8684afe', part: "option", exportparts: "checkbox:checkbox, checkbox:option-checkbox", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.selected ? 'true' : 'false', role: "option", onMouseEnter: () => {
+        return (h(Host, { key: '3b20b8766d73d6a862765fb890028e6ff7374d96', part: "option", exportparts: "checkbox:checkbox, checkbox:option-checkbox", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.selected ? 'true' : 'false', role: "option", onMouseEnter: () => {
                 this.el.dispatchEvent(new CustomEvent('brInternalSelectOptionHover', {
                     bubbles: true,
                     composed: true,
@@ -221,7 +242,7 @@ export class SelectOption {
                     composed: true,
                     detail: { label: this.getResolvedLabel(), value: this.getResolvedValue() },
                 }));
-            } }, h("br-item", { key: '72c058725e6b39ef51203f3820676b445b041076', class: this.getCssClassMap(), disabled: this.disabled, "is-selected": this.selected, "is-interactive": true, ref: (el) => (this.itemElement = el), onBrDidSelect: this.handleSelect }, this.showCheckbox && (h("br-checkbox", { key: '43e1b61dd4f9ef8f8f55c0aa2e574e0369388ac7', exportparts: "input:checkbox, input:option-checkbox", slot: "start", checked: this.selected, disabled: this.disabled, indeterminate: this.indeterminate, name: this.getResolvedValue(), onCheckedChange: this.handleSelect })), h("span", { key: '102cd7d571fe2d17347e1b04bc6cb58237dfb39c', class: "br-select-option-label" }, h("slot", { key: '523687250477527205355f980d495ada9cd24de6' }, this.getResolvedLabel())))));
+            } }, h("br-item", { key: '7b32b68bbc5541090e24d81e55602045bdbbba47', class: this.getCssClassMap(), disabled: this.disabled, active: this.active, selected: this.selected, "is-interactive": true, ref: (el) => (this.itemElement = el), onBrItemSelect: this.handleSelect }, this.showCheckbox && (h("br-checkbox", { key: 'fd5426e02e229eaaa8b22d457329cce6acf59e51', exportparts: "input:checkbox, input:option-checkbox", slot: "start", checked: this.selected, disabled: this.disabled, indeterminate: this.indeterminate, name: this.getResolvedValue(), onCheckedChange: this.handleSelect })), h("span", { key: '6185b2e6b60bf65059c321d4118d675859f9940e', class: "br-select-option-label" }, h("slot", { key: 'c78020a423fe1ed34ef39f46301f71baf5b0cbd8' }, this.getResolvedLabel())))));
     }
     static get is() { return "br-select-option"; }
     static get encapsulation() { return "shadow"; }
@@ -422,7 +443,7 @@ export class SelectOption {
                 },
                 "complexType": {
                     "original": "SelectOptionData",
-                    "resolved": "{ disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
+                    "resolved": "{ content?: string; disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
                     "references": {
                         "SelectOptionData": {
                             "location": "import",