@internetarchive/collection-browser 4.2.0-alpha-webdev8164.0 → 4.2.0-alpha-webdev8164.2

package/src/app-root.ts

@@ -950,10 +950,6 @@ export class AppRoot extends LitElement {
       --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);
       --modalTitleLineHeight: 4rem;
       --modalTitleFontSize: 1.8rem;
-      --modalCornerRadius: 0;
-      --modalBottomPadding: 0;
-      --modalBottomMargin: 0;
-      --modalScrollOffset: 0;
       --modalCornerRadius: 0.5rem;
     }
     modal-manager.expanded-date-picker {

package/src/collection-facets/more-facets-content.ts

@@ -161,7 +161,7 @@ export class MoreFacetsContent extends LitElement {
   /**
    * Whether the horizontal scroll is at the rightmost position.
    */
-  @state() private atScrollEnd = false;
+  @state() private atScrollEnd = true;
 
   @query('ia-clearable-text-input')
   private filterInput!: HTMLElement;
@@ -240,25 +240,30 @@ export class MoreFacetsContent extends LitElement {
   firstUpdated(): void {
     this.setupEscapeListeners();
     this.setupCompactViewObserver();
+    this.constrainToScrollContainer();
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
     this.removeScrollListener();
+    document.removeEventListener('keydown', this.escapeHandler);
   }
 
   private scrollHandler = () => this.updateScrollState();
 
   private scrollListenerAttached = false;
 
+  private scrollListenerTarget?: HTMLElement;
+
   /**
    * Attaches a scroll event listener to the facets content element
    * to track horizontal scroll position for arrow button states.
    */
   private attachScrollListener(): void {
     if (this.scrollListenerAttached || !this.facetsContentEl) return;
-    this.facetsContentEl.addEventListener('scroll', this.scrollHandler, {
+    this.scrollListenerTarget = this.facetsContentEl;
+    this.scrollListenerTarget.addEventListener('scroll', this.scrollHandler, {
       passive: true,
     });
     this.scrollListenerAttached = true;
@@ -268,8 +273,9 @@ export class MoreFacetsContent extends LitElement {
   }
 
   private removeScrollListener(): void {
-    if (!this.scrollListenerAttached || !this.facetsContentEl) return;
-    this.facetsContentEl.removeEventListener('scroll', this.scrollHandler);
+    if (!this.scrollListenerAttached || !this.scrollListenerTarget) return;
+    this.scrollListenerTarget.removeEventListener('scroll', this.scrollHandler);
+    this.scrollListenerTarget = undefined;
     this.scrollListenerAttached = false;
   }
 
@@ -344,24 +350,61 @@ export class MoreFacetsContent extends LitElement {
   private setupCompactViewObserver(): void {
     this.resizeObserver = new ResizeObserver(entries => {
       for (const entry of entries) {
-        this.isCompactView = entry.contentRect.width <= 560;
+        const compact = entry.contentRect.width <= 560;
+        if (this.isCompactView !== compact) this.isCompactView = compact;
       }
     });
     this.resizeObserver.observe(this);
   }
 
+  /**
+   * Constrains the section's max-height to fit within the nearest
+   * scroll-container ancestor (e.g., the modal's content area).
+   * This is a safety net for cases where the CSS max-height calculation
+   * doesn't perfectly match the container's available space.
+   */
+  private constrainToScrollContainer(): void {
+    requestAnimationFrame(() => {
+      const section = this.shadowRoot?.querySelector(
+        'section#more-facets',
+      ) as HTMLElement;
+      if (!section) return;
+
+      // Walk up from the assigned slot to find the nearest overflow container
+      let el = this.assignedSlot?.parentElement;
+      while (el) {
+        const cs = getComputedStyle(el);
+        if (
+          cs.overflowY === 'auto' ||
+          cs.overflowY === 'scroll' ||
+          cs.overflowY === 'hidden'
+        ) {
+          const containerBottom = el.getBoundingClientRect().bottom;
+          const sectionTop = section.getBoundingClientRect().top;
+          const available = containerBottom - sectionTop;
+          // Compare against the CSS max-height rather than actual height,
+          // since content may not have loaded yet at firstUpdated time
+          const computedMax = parseFloat(getComputedStyle(section).maxHeight);
+          if (available > 0 && available < computedMax) {
+            section.style.maxHeight = `${available}px`;
+          }
+          return;
+        }
+        el = el.parentElement;
+      }
+    });
+  }
+
   /**
    * Close more facets modal on Escape click
    */
+  private escapeHandler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') this.modalManager?.closeModal();
+  };
+
   private setupEscapeListeners() {
     if (this.modalManager) {
-      document.addEventListener('keydown', (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          this.modalManager?.closeModal();
-        }
-      });
-    } else {
-      document.removeEventListener('keydown', () => {});
+      document.addEventListener('keydown', this.escapeHandler);
     }
   }
 
@@ -400,15 +443,18 @@ export class MoreFacetsContent extends LitElement {
       rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
     };
 
-    const results = await this.searchService?.search(params, this.searchType);
-    this.aggregations = results?.success?.response.aggregations;
-    this.facetsLoading = false;
+    try {
+      const results = await this.searchService?.search(params, this.searchType);
+      this.aggregations = results?.success?.response.aggregations;
 
-    const collectionTitles = results?.success?.response?.collectionTitles;
-    if (collectionTitles) {
-      for (const [id, title] of Object.entries(collectionTitles)) {
-        this.collectionTitles?.set(id, title);
+      const collectionTitles = results?.success?.response?.collectionTitles;
+      if (collectionTitles) {
+        for (const [id, title] of Object.entries(collectionTitles)) {
+          this.collectionTitles?.set(id, title);
+        }
       }
+    } finally {
+      this.facetsLoading = false;
     }
   }
 
@@ -493,7 +539,10 @@ export class MoreFacetsContent extends LitElement {
 
     const buckets: FacetBucket[] = Object.entries(selectedFacetsForKey).map(
       ([value, data]) => {
-        const displayText: string = value;
+        const displayText =
+          (this.facetKey === 'collection'
+            ? this.collectionTitles?.get(value)
+            : undefined) ?? value;
         return {
           displayText,
           key: value,
@@ -537,17 +586,33 @@ export class MoreFacetsContent extends LitElement {
       });
     }
 
-    // Construct the array of facet buckets from the aggregation buckets
+    // Construct the array of facet buckets from the aggregation buckets,
+    // using collection display titles where available.
     const facetBuckets: FacetBucket[] = sortedBuckets.map(bucket => {
       const bucketKeyStr = `${bucket.key}`;
+      const displayText =
+        (this.facetKey === 'collection'
+          ? this.collectionTitles?.get(bucketKeyStr)
+          : undefined) ?? bucketKeyStr;
       return {
-        displayText: `${bucketKeyStr}`,
+        displayText,
         key: `${bucketKeyStr}`,
         count: bucket.doc_count,
         state: 'none',
       };
     });
 
+    // For collection facets sorted alphabetically, re-sort by display title
+    // instead of the raw identifier used by getSortedBuckets.
+    if (
+      this.facetKey === 'collection' &&
+      this.sortedBy === AggregationSortType.ALPHABETICAL
+    ) {
+      facetBuckets.sort((a, b) =>
+        (a.displayText ?? a.key).localeCompare(b.displayText ?? b.key),
+      );
+    }
+
     return {
       title: facetGroupTitle,
       key: this.facetKey,
@@ -739,7 +804,11 @@ export class MoreFacetsContent extends LitElement {
     });
 
     this.dispatchEvent(
-      new CustomEvent('pageChanged', { detail: this.pageNumber }),
+      new CustomEvent('pageChanged', {
+        detail: this.pageNumber,
+        bubbles: true,
+        composed: true,
+      }),
     );
   }
 
@@ -786,6 +855,46 @@ export class MoreFacetsContent extends LitElement {
       </span>`;
   }
 
+  private get horizontalScrollTemplate(): TemplateResult {
+    const contentClasses = classMap({
+      'facets-content': true,
+      'horizontal-scroll-mode': true,
+    });
+    const showArrows = !this.atScrollStart || !this.atScrollEnd;
+
+    return html`<div class="scroll-nav-container">
+      ${when(
+        showArrows,
+        () =>
+          html`<button
+            class="scroll-arrow scroll-left"
+            @click=${this.onScrollLeft}
+            ?disabled=${this.atScrollStart}
+            aria-label="Scroll facets left"
+          >
+            ${arrowLeftIcon}
+          </button>`,
+      )}
+      <div class=${contentClasses}>
+        <div class="facets-horizontal-container">
+          ${this.moreFacetsTemplate}
+        </div>
+      </div>
+      ${when(
+        showArrows,
+        () =>
+          html`<button
+            class="scroll-arrow scroll-right"
+            @click=${this.onScrollRight}
+            ?disabled=${this.atScrollEnd}
+            aria-label="Scroll facets right"
+          >
+            ${arrowRightIcon}
+          </button>`,
+      )}
+    </div>`;
+  }
+
   render() {
     const sectionClasses = classMap({
       'pagination-mode': this.usePagination,
@@ -794,7 +903,6 @@ export class MoreFacetsContent extends LitElement {
     const contentClasses = classMap({
       'facets-content': true,
       'pagination-mode': this.usePagination,
-      'horizontal-scroll-mode': !this.usePagination,
     });
 
     return html`
@@ -807,37 +915,7 @@ export class MoreFacetsContent extends LitElement {
                 ? html`<div class=${contentClasses}>
                     ${this.moreFacetsTemplate}
                   </div>`
-                : html`<div class="scroll-nav-container">
-                    ${when(
-                      !this.atScrollStart || !this.atScrollEnd,
-                      () =>
-                        html`<button
-                          class="scroll-arrow scroll-left"
-                          @click=${this.onScrollLeft}
-                          ?disabled=${this.atScrollStart}
-                          aria-label="Scroll facets left"
-                        >
-                          ${arrowLeftIcon}
-                        </button>`,
-                    )}
-                    <div class=${contentClasses}>
-                      <div class="facets-horizontal-container">
-                        ${this.moreFacetsTemplate}
-                      </div>
-                    </div>
-                    ${when(
-                      !this.atScrollStart || !this.atScrollEnd,
-                      () =>
-                        html`<button
-                          class="scroll-arrow scroll-right"
-                          @click=${this.onScrollRight}
-                          ?disabled=${this.atScrollEnd}
-                          aria-label="Scroll facets right"
-                        >
-                          ${arrowRightIcon}
-                        </button>`,
-                    )}
-                  </div>`}
+                : this.horizontalScrollTemplate}
               ${this.footerTemplate}
             </section>
           `}
@@ -895,7 +973,7 @@ export class MoreFacetsContent extends LitElement {
         section#more-facets {
           display: flex;
           flex-direction: column;
-          max-height: calc(100vh - 16.5rem);
+          max-height: calc(100vh - 16.5rem - var(--modalBottomMargin, 2.5rem));
           padding: 10px;
           box-sizing: border-box;
           --facetsColumnCount: 3;
@@ -908,6 +986,9 @@ export class MoreFacetsContent extends LitElement {
         }
         .header-content {
           flex-shrink: 0;
+          position: relative;
+          z-index: 1;
+          background: #fff;
         }
 
         .header-content .title {
@@ -922,8 +1003,8 @@ export class MoreFacetsContent extends LitElement {
           display: flex;
           flex-wrap: wrap;
           align-items: center;
-          gap: 4px 20px;
-          padding: 0 10px;
+          gap: 8px 20px;
+          padding: 0 10px 8px;
         }
 
         .sort-controls {

package/src/collection-facets/more-facets-pagination.ts

@@ -42,7 +42,10 @@ export class MoreFacetsPagination extends LitElement {
     ) {
       this.updatePages();
     }
-    if (changed.has('currentPage')) {
+    if (
+      changed.has('currentPage') &&
+      changed.get('currentPage') !== undefined
+    ) {
       this.emitPageClick();
     }
   }

package/test/collection-facets/more-facets-content.test.ts

@@ -404,6 +404,81 @@ describe('More facets content', () => {
     expect(clearableInput.value).to.equal('');
   });
 
+  describe('Modal container height constraint', () => {
+    // Register a test wrapper element to simulate the modal's scroll container
+    if (!customElements.get('test-scroll-wrapper')) {
+      customElements.define(
+        'test-scroll-wrapper',
+        class extends HTMLElement {
+          constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+            this.shadowRoot!.innerHTML = `
+              <style>
+                :host { display: block; }
+                .content { overflow-y: auto; max-height: 300px; }
+              </style>
+              <div class="content"><slot></slot></div>
+            `;
+          }
+        },
+      );
+    }
+
+    it('should constrain section height when inside a scroll container', async () => {
+      const el = await fixture<MoreFacetsContent>(html`
+        <test-scroll-wrapper>
+          <more-facets-content></more-facets-content>
+        </test-scroll-wrapper>
+      `);
+
+      const mfc = el.querySelector('more-facets-content') as MoreFacetsContent;
+      mfc.facetsLoading = false;
+      await mfc.updateComplete;
+
+      // Wait for the constrainToScrollContainer rAF callback
+      await new Promise(r =>
+        requestAnimationFrame(() => requestAnimationFrame(r)),
+      );
+
+      const section = mfc.shadowRoot?.querySelector(
+        'section#more-facets',
+      ) as HTMLElement;
+
+      // The section's inline max-height should be set when it would
+      // overflow the 300px scroll container
+      const sectionHeight = section.getBoundingClientRect().height;
+      const wrapper = el.shadowRoot?.querySelector('.content') as HTMLElement;
+      const wrapperBottom = wrapper.getBoundingClientRect().bottom;
+      const sectionTop = section.getBoundingClientRect().top;
+      const availableSpace = wrapperBottom - sectionTop;
+
+      // The section should not exceed the available space in the container
+      expect(sectionHeight).to.be.at.most(availableSpace + 1); // +1 for rounding
+    });
+
+    it('should not constrain section when no scroll container exists', async () => {
+      const el = await fixture<MoreFacetsContent>(
+        html`<more-facets-content></more-facets-content>`,
+      );
+
+      el.facetsLoading = false;
+      await el.updateComplete;
+
+      // Wait for the constrainToScrollContainer rAF callback
+      await new Promise(r =>
+        requestAnimationFrame(() => requestAnimationFrame(r)),
+      );
+
+      const section = el.shadowRoot?.querySelector(
+        'section#more-facets',
+      ) as HTMLElement;
+
+      // No inline max-height should be set when there's no scroll container
+      expect(section.style.maxHeight).to.equal('');
+    });
+  });
+
   describe('Horizontal scroll navigation arrows', () => {
     it('should use scroll-nav-container in horizontal scroll mode', async () => {
       const searchService = new MockSearchService();