@fluid-topics/ft-combobox 2.1.23 → 2.2.0

package/build/ft-combobox.d.ts

@@ -2,6 +2,11 @@ import { PropertyValues, TemplateResult } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtComboboxProperties } from "./ft-combobox.properties";
 import { FtComboboxSuggestionDefinition } from "./models";
+type VisibleSuggestion = {
+    id: string;
+    label: string;
+    kind: "regular" | "new";
+};
 declare const FtCombobox_base: typeof FtLitElement & import("@fluid-topics/ft-wc-utils").Constructor<import("@fluid-topics/ft-i18n").FtLitElementWithI18nInterface>;
 export declare class FtCombobox extends FtCombobox_base implements FtComboboxProperties {
     static styles: import("lit").CSSResult[];
@@ -27,17 +32,17 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     maxValues?: number;
     maxLength?: number;
     labels: string[];
-    private labelsToValues;
-    private filter;
-    private isOpen;
-    private comboboxHasVisualFocus;
-    private listboxHasVisualFocus;
-    private providedSuggestions;
-    private visibleSuggestions;
-    private activeIndex;
-    private ariaLiveMessage;
-    private input;
-    private listbox;
+    labelsToValues: Map<string, string>;
+    filter: string;
+    isOpen: boolean;
+    comboboxHasVisualFocus: boolean;
+    listboxHasVisualFocus: boolean;
+    providedSuggestions: FtComboboxSuggestionDefinition[];
+    visibleSuggestions: VisibleSuggestion[];
+    activeIndex: number;
+    ariaLiveMessage: string;
+    input: HTMLInputElement;
+    listbox: HTMLUListElement;
     constructor();
     private _suggestionsProviderDebouncer?;
     protected willUpdate(props: PropertyValues): void;
@@ -48,8 +53,6 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     private shouldOfferNew;
     private getTotalSuggestionsCount;
     private isNewValueSuggestionSelected;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     private renderLiveText;
     private getActiveDescendantId;
     private updateSuggestions;
@@ -81,6 +84,8 @@ export declare class FtCombobox extends FtCombobox_base implements FtComboboxPro
     private onComboboxClick;
     private onComboboxFocus;
     private onComboboxBlur;
+    private backgroundListenerInstalled;
+    protected contentAvailableCallback(props: PropertyValues<this>): void;
     private onBackgroundPointerUp;
     private onSuggestionClick;
     focus(): void;

package/build/ft-combobox.js

@@ -86,12 +86,12 @@ export class FtCombobox extends withI18n(FtLitElement) {
         this.onComboboxBlur = () => {
             this.removeVisualFocusAll();
         };
+        this.backgroundListenerInstalled = false;
         this.onBackgroundPointerUp = (event) => {
             // Use composedPath to handle Shadow DOM correctly
             const path = event.composedPath();
             const clickedInside = path.includes(this);
             if (!clickedInside) {
-                this.comboboxHasVisualFocus = false;
                 this.removeVisualFocusAll();
                 setTimeout(() => this.closeListbox(true), 300); // Inspired from the WCAG examples
             }
@@ -284,14 +284,6 @@ export class FtCombobox extends withI18n(FtLitElement) {
             && this.activeIndex < this.visibleSuggestions.length
             && ((_a = this.visibleSuggestions[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.kind) === "new";
     }
-    connectedCallback() {
-        super.connectedCallback();
-        document.body.addEventListener("pointerup", this.onBackgroundPointerUp);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.body.removeEventListener("pointerup", this.onBackgroundPointerUp);
-    }
     renderLiveText() {
         const total = this.getTotalSuggestionsCount();
         if (this.isOpen && total > 0) {
@@ -642,6 +634,23 @@ export class FtCombobox extends withI18n(FtLitElement) {
             event.preventDefault();
         }
     }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (props.has("comboboxHasVisualFocus") || props.has("listboxHasVisualFocus") || props.has("isOpen")) {
+            if (this.comboboxHasVisualFocus || this.listboxHasVisualFocus || this.isOpen) {
+                if (!this.backgroundListenerInstalled) {
+                    document.body.addEventListener("pointerup", this.onBackgroundPointerUp);
+                    this.backgroundListenerInstalled = true;
+                }
+            }
+            else {
+                if (this.backgroundListenerInstalled) {
+                    document.body.removeEventListener("pointerup", this.onBackgroundPointerUp);
+                    this.backgroundListenerInstalled = false;
+                }
+            }
+        }
+    }
     focus() {
         var _a;
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();