@fluid-topics/ft-filter 1.2.50 → 1.2.51

package/build/ft-filter-level.d.ts

@@ -23,6 +23,7 @@ export declare class FtFilterLevel extends FtLitElement {
     get height(): number;
     focusOnBackButton(): void;
     focusOnExpandButton(value: string): void;
+    focusOnFirstOption(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     private goBackOnKeyPress;
     private goBackOnClick;

package/build/ft-filter-level.js

@@ -44,14 +44,17 @@ class FtFilterLevel extends FtLitElement {
     focusOnBackButton() {
         this.elementToFocus = {
             selector: `.ft-filter-level--go-back`,
-            isKeyboardNavigation: true,
         };
     }
     focusOnExpandButton(value) {
         // Find the correct expand button associated with the checkbox value
         this.elementToFocus = {
             selector: `.ft-filter-level--option ft-button[part="controls navigate-hierarchy"][data-value="${value}"]`,
-            isKeyboardNavigation: true,
+        };
+    }
+    focusOnFirstOption() {
+        this.elementToFocus = {
+            selector: `.ft-filter-level--option [part~="option"]`,
         };
     }
     render() {
@@ -131,11 +134,11 @@ class FtFilterLevel extends FtLitElement {
     displayMore() {
         var _a;
         const previousLimit = (_a = this.limit) !== null && _a !== void 0 ? _a : 0;
+        const hasGoBackButton = this.parent != null;
         this.displayedPages++;
         // Wait for the component update before focusing on the first new option
         this.elementToFocus = {
-            selector: `.ft-filter-level--option:nth-child(${previousLimit + 2}) [part~="option"]`,
-            isKeyboardNavigation: true,
+            selector: `.ft-filter-level--option:nth-child(${previousLimit + (hasGoBackButton ? 2 : 1)}) [part~="option"]`,
         };
     }
     buildMultiValuedOption(option) {

package/build/ft-filter.d.ts

@@ -45,6 +45,7 @@ export declare class FtFilter extends FtLitElement implements FtFilterProperties
     private renderLevel;
     private goBack;
     private onDisplayLevel;
+    focusOnFirstOption(): void;
     clear(): void;
     private onChange;
     private changeDebouncer;

package/build/ft-filter.js

@@ -68,7 +68,10 @@ class FtFilter extends FtLitElement {
                             <slot name="label"></slot>
                         </div>
                         ${valuesSelected && !this.hideClearButton ? html `
-                            <ft-button icon="close" dense @click=${this.clear} part="clear-button">
+                            <ft-button icon="close" dense @click=${() => {
+            this.clear();
+            this.focusOnFirstOption();
+        }} part="clear-button">
                                 ${this.clearButtonLabel}
                             </ft-button>
                         ` : null}
@@ -216,6 +219,13 @@ class FtFilter extends FtLitElement {
             newLevel === null || newLevel === void 0 ? void 0 : newLevel.focusOnBackButton();
         });
     }
+    focusOnFirstOption() {
+        waitUntil(() => this.slideOut === undefined).then(() => {
+            var _a;
+            const firstLevel = (_a = this.levelsContainer) === null || _a === void 0 ? void 0 : _a.querySelector(".ft-filter--level-center");
+            firstLevel === null || firstLevel === void 0 ? void 0 : firstLevel.focusOnFirstOption();
+        });
+    }
     clear() {
         this.flatOptions.forEach(o => o.selected = false);
         if (this.displayedLevels.length > 0) {