Make smart facets scrollable & fix deselection bug

Author: latonv

package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.18.2",
+  "version": "2.18.3-alpha-webdev7768.7",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "@internetarchive/field-parsers": "^1.0.0",
     "@internetarchive/histogram-date-range": "^1.4.0",
     "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/ia-dropdown": "^1.3.10",
+    "@internetarchive/ia-dropdown": "1.3.11-alpha-webdev-7768.0",
     "@internetarchive/iaux-item-metadata": "^1.0.5",
     "@internetarchive/infinite-scroller": "^1.0.1",
     "@internetarchive/modal-manager": "^2.0.1",

src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -161,7 +161,7 @@ export class SmartFacetBar extends LitElement {
         .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}
         .activeFacetRef=${facets[0].facets[0]}
         @facetClick=${this.dropdownOptionClicked}
-        @dropdownClick=${this.onDropdownClick}
+        @dropdownClick=${this.dropdownClicked}
       ></smart-facet-dropdown>
     `;
   }
@@ -294,7 +294,13 @@ export class SmartFacetBar extends LitElement {
     }
 
     this.updateSelectedFacets(
-      details.map(facet => ({ ...facet, state: newState })),
+      details.map(facet => ({
+        ...facet,
+        bucket: {
+          ...facet.bucket,
+          state: newState,
+        },
+      })),
     );
   }
 
@@ -327,7 +333,7 @@ export class SmartFacetBar extends LitElement {
   }
 
   /**
-   * Handler for when an option in a smart facet dropdown is selected
+   * Handler for when an option in a smart facet dropdown menu is selected
    */
   private dropdownOptionClicked(e: CustomEvent<SmartFacetEvent>): void {
     const existingFacet = this.smartFacets.find(
@@ -348,7 +354,10 @@ export class SmartFacetBar extends LitElement {
     this.updateSelectedFacets(e.detail.details);
   }
 
-  private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {
+  /**
+   * Handler for when any dropdown is clicked (whether button, caret, or menu item)
+   */
+  private dropdownClicked(e: CustomEvent<SmartFacetDropdown>): void {
     log('smart bar: onDropdownClick', e.detail);
     this.shadowRoot
       ?.querySelectorAll('smart-facet-dropdown')
@@ -373,9 +382,11 @@ export class SmartFacetBar extends LitElement {
       #smart-facets-container {
         display: flex;
         align-items: center;
-        flex-wrap: wrap;
         gap: 5px 10px;
         padding: 10px 0;
+        white-space: nowrap;
+        overflow: scroll hidden;
+        scrollbar-width: none;
       }
 
       #filters-toggle {

src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -35,6 +35,7 @@ export class SmartFacetDropdown extends LitElement {
           closeOnEscape
           closeOnBackdropClick
           includeSelectedOption
+          usePopover
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
           .openViaButton=${false}

yarn.lock

@@ -334,10 +334,10 @@
   dependencies:
     lit "^2.8.0"
 
-"@internetarchive/ia-dropdown@^1.3.10":
-  version "1.3.10"
-  resolved "https://registry.npmjs.org/@internetarchive/ia-dropdown/-/ia-dropdown-1.3.10.tgz"
-  integrity sha512-+xGgyfE0O4cV+w4rk61yA5av5KeSqCmojukp6ePbrluIYBIH2UCtfDcfCEQFVsnNSs8AesJOkUb0q3jaW0M4cQ==
+"@internetarchive/[email protected].11-alpha-webdev-7768.0":
+  version "1.3.11-alpha-webdev-7768.0"
+  resolved "https://registry.yarnpkg.com/@internetarchive/ia-dropdown/-/ia-dropdown-1.3.11-alpha-webdev-7768.0.tgz#91fa0d7f3f86bbbf70439fb65466ecfa65e57e0d"
+  integrity sha512-G+v5GyZob+AfHobHe/2VJWakgfI6ewXZLJG+2BNrC8UxC5e8/MzNjd2fLuQkPfClMEc48uWnA1gcEMmsKGmWZQ==
   dependencies:
     lit "^2.8.0"
 
@@ -5080,16 +5080,7 @@ streamx@^2.15.0, streamx@^2.21.0:
   optionalDependencies:
     bare-events "^2.2.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5155,14 +5146,7 @@ stringify-object@^3.2.1:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -5611,7 +5595,7 @@ wordwrapjs@^5.1.0:
   resolved "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.0.tgz"
   integrity sha512-JNjcULU2e4KJwUNv6CHgI46UvDGitb6dGryHajXTDiLgg1/RiGoPSDw4kZfYnwGtEXf2ZMeIewDQgFGzkCB2Sg==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -5629,15 +5613,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"