@openproject/primer-view-components 0.45.0 → 0.46.0-rc.7fd653fd

package/app/components/primer/open_project/sub_header.css

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}
+.SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}:is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto){width:100vw}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}.SubHeader-filterInput_hiddenClearButton+button.FormControl-input-trailingAction{display:none}

package/app/components/primer/open_project/sub_header.css.json

@@ -7,6 +7,8 @@
     ".SubHeader-middlePane",
     ".SubHeader-bottomPane",
     ".SubHeader-leftPane",
-    ".SubHeader-filterContainer"
+    ":is(.SubHeader-leftPane [class*=FormControl-input-width--]):not(.FormControl-input-width--auto)",
+    ".SubHeader-filterContainer",
+    ".SubHeader-filterInput_hiddenClearButton+button.FormControl-input-trailingAction"
   ]
 }

package/app/components/primer/open_project/sub_header_element.d.ts

@@ -1,9 +1,13 @@
 declare class SubHeaderElement extends HTMLElement {
-    filterInput: HTMLElement;
+    filterInput: HTMLInputElement;
     hiddenItemsOnExpandedFilter: HTMLElement[];
     shownItemsOnExpandedFilter: HTMLElement[];
+    connectedCallback(): void;
+    setupFilterInputClearButton(): void;
+    toggleFilterInputClearButton(): void;
     expandFilterInput(): void;
     collapseFilterInput(): void;
+    private waitForCondition;
 }
 declare global {
     interface Window {

package/app/components/primer/open_project/sub_header_element.js

@@ -6,6 +6,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { controller, target, targets } from '@github/catalyst';
 let SubHeaderElement = class SubHeaderElement extends HTMLElement {
+    connectedCallback() {
+        this.setupFilterInputClearButton();
+    }
+    setupFilterInputClearButton() {
+        this.waitForCondition(() => Boolean(this.filterInput), () => {
+            this.toggleFilterInputClearButton();
+        });
+    }
+    toggleFilterInputClearButton() {
+        if (this.filterInput.value.length > 0) {
+            this.filterInput.classList.remove('SubHeader-filterInput_hiddenClearButton');
+        }
+        else {
+            this.filterInput.classList.add('SubHeader-filterInput_hiddenClearButton');
+        }
+    }
     expandFilterInput() {
         for (const item of this.hiddenItemsOnExpandedFilter) {
             item.classList.add('d-none');
@@ -25,6 +41,22 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
         }
         this.classList.remove('SubHeader--expandedSearch');
     }
+    // Waits for condition to return true. If it returns false initially, this function creates a
+    // MutationObserver that calls body() whenever the contents of the component change.
+    waitForCondition(condition, body) {
+        if (condition()) {
+            body();
+        }
+        else {
+            const mutationObserver = new MutationObserver(() => {
+                if (condition()) {
+                    body();
+                    mutationObserver.disconnect();
+                }
+            });
+            mutationObserver.observe(this, { childList: true, subtree: true });
+        }
+    }
 };
 __decorate([
     target

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.45.0",
+  "version": "0.46.0-rc.7fd653fd",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/classes.json

@@ -591,6 +591,9 @@
   "SubHeader-filterContainer": [
     "Primer::OpenProject::SubHeader"
   ],
+  "SubHeader-filterInput_hiddenClearButton": [
+    "Primer::OpenProject::SubHeader"
+  ],
   "SubHeader-leftPane": [
     "Primer::OpenProject::SubHeader"
   ],