@internetarchive/collection-browser 2.18.3-alpha-webdev7768.1 → 2.18.3-alpha-webdev7768.2

package/dist/src/collection-facets/smart-facets/smart-facet-bar.d.ts

@@ -25,6 +25,10 @@ export declare class SmartFacetBar extends LitElement {
     private get filtersToggleTemplate();
     private get facetsToDisplay();
     private toSmartFacet;
+    /**
+     * Toggles the state of the given smart facet, and updates the selected facets accordingly.
+     */
+    private toggleSmartFacet;
     private facetClicked;
     private facetDropdownClicked;
     private onDropdownClick;

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js

@@ -200,25 +200,48 @@ let SmartFacetBar = class SmartFacetBar extends LitElement {
             }),
         };
     }
-    facetClicked(e) {
-        if (!e.detail.smartFacet.selected) {
+    /**
+     * Toggles the state of the given smart facet, and updates the selected facets accordingly.
+     */
+    toggleSmartFacet(facet, details) {
+        let newState;
+        if (facet.selected) {
+            // When deselected, leave the smart facet where it is
+            newState = 'none';
+            this.smartFacets = this.smartFacets.map(f => {
+                if (f[0] === facet)
+                    return [{ ...facet, selected: false }];
+                return f;
+            });
+        }
+        else {
+            // When selected, move the toggled smart facet to the front of the list
+            newState = 'selected';
             this.smartFacets = [
-                [{ ...e.detail.smartFacet, selected: true }],
-                ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),
+                [{ ...facet, selected: true }],
+                ...this.smartFacets.filter(f => f[0] !== facet),
             ];
         }
-        for (const facet of e.detail.details) {
-            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, facet.facetType, facet.bucket, true);
+        // Update the selected facets
+        for (const facet of details) {
+            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, facet.facetType, { ...facet.bucket, state: newState }, true);
         }
         const event = new CustomEvent('facetsChanged', {
             detail: this.selectedFacets,
         });
         this.dispatchEvent(event);
     }
+    facetClicked(e) {
+        this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);
+    }
     facetDropdownClicked(e) {
-        if (this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))) {
+        const existingFacet = this.smartFacets.find(sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet));
+        if (existingFacet) {
+            // The facet already exists outside the dropdown, so just select it there
+            this.toggleSmartFacet(existingFacet[0], e.detail.details);
             return;
         }
+        // Otherwise, prepend a new smart facet for the selected option
         this.smartFacets = [
             [{ ...e.detail.smartFacet, selected: true }],
             ...this.smartFacets,

package/dist/src/collection-facets/smart-facets/smart-facet-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { CollectionTitles } from '../../data-source/models';\nimport type { FacetOption, SelectedFacets } from '../../models';\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\nimport type { SmartFacet, SmartFacetEvent } from './models';\nimport { smartFacetEquals } from './smart-facet-equals';\nimport { dedupe } from './dedupe';\nimport { log } from '../../utils/log';\nimport filterIcon from '../../assets/img/icons/filter';\n\nimport './smart-facet-button';\nimport './smart-facet-dropdown';\n\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\n  collection: 'Collection: ',\n  creator: 'By: ',\n  subject: 'About: ',\n};\n\nfunction capitalize(str: string) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  /** The map from collection identifiers to their titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @property({ type: Boolean }) filterToggleActive = false;\n\n  @property({ type: String }) label?: string;\n\n  @state() private heuristicRecs: SmartFacet[] = [];\n\n  @state() private smartFacets: SmartFacet[][] = [];\n\n  @state() private lastAggregations?: Record<string, Aggregation>;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    if (!this.query) return nothing;\n\n    const shouldShowLabel = !!this.label && this.smartFacets.length > 0;\n    return html`\n      <div id=\"smart-facets-container\">\n        ${this.filtersToggleTemplate}\n        ${shouldShowLabel\n          ? html`<p id=\"filters-label\">${this.label}</p>`\n          : nothing}\n        ${repeat(\n          this.smartFacets,\n          f =>\n            `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,\n          facet => this.makeSmartFacet(facet),\n        )}\n      </div>\n    `;\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    let shouldUpdateSmartFacets = false;\n\n    if (changed.has('query')) {\n      log('query change', changed.get('query'), this.query);\n      this.lastAggregations = undefined;\n      shouldUpdateSmartFacets = true;\n    }\n\n    if (\n      changed.has('aggregations') &&\n      !this.lastAggregations &&\n      this.aggregations &&\n      Object.keys(this.aggregations).length > 0\n    ) {\n      log('aggs change', changed.get('aggregations'), this.aggregations);\n      this.lastAggregations = this.aggregations;\n      shouldUpdateSmartFacets = true;\n    }\n\n    if (shouldUpdateSmartFacets) {\n      log('should update smart facets, doing so...');\n      this.updateSmartFacets();\n    }\n  }\n\n  refresh(): void {\n    this.lastAggregations = this.aggregations;\n    this.updateSmartFacets();\n  }\n\n  private async updateSmartFacets(): Promise<void> {\n    log('updating smart facets');\n    if (this.query) {\n      this.heuristicRecs =\n        await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\n      log('heuristic recs are', this.heuristicRecs);\n      this.smartFacets = dedupe(this.facetsToDisplay);\n      log('smart facets are', this.smartFacets);\n    }\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private makeSmartFacet(facets: SmartFacet[]) {\n    if (facets.length === 0) {\n      return nothing;\n    }\n    if (facets.length === 1) {\n      return this.smartFacetButton(facets[0]);\n    }\n    return this.smartFacetDropdown(facets);\n  }\n\n  private smartFacetButton(facet: SmartFacet) {\n    return html`\n      <smart-facet-button\n        .facetInfo=${facet}\n        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\n        .selected=${facet.selected ?? false}\n        @facetClick=${this.facetClicked}\n      ></smart-facet-button>\n    `;\n  }\n\n  private smartFacetDropdown(facets: SmartFacet[]) {\n    return html`\n      <smart-facet-dropdown\n        .facetInfo=${facets}\n        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\n        .activeFacetRef=${facets[0].facets[0]}\n        @facetClick=${this.facetDropdownClicked}\n        @dropdownClick=${this.onDropdownClick}\n      ></smart-facet-dropdown>\n    `;\n  }\n\n  private get filtersToggleTemplate(): TemplateResult {\n    return html`\n      <button\n        id=\"filters-toggle\"\n        class=${this.filterToggleActive ? 'active' : ''}\n        title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\n        @click=${this.filterToggleClicked}\n      >\n        ${filterIcon}\n      </button>\n    `;\n  }\n\n  private get facetsToDisplay(): SmartFacet[][] {\n    const facets: SmartFacet[][] = [];\n\n    if (this.heuristicRecs.length > 0) {\n      for (const rec of this.heuristicRecs) {\n        // Suppress mediatype-only facets for now.\n        if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\n          continue;\n\n        facets.push([rec]);\n      }\n    }\n\n    if (this.lastAggregations) {\n      const keys = [\n        'mediatype',\n        'year',\n        'language',\n        'creator',\n        'subject',\n        'collection',\n      ];\n      for (const key of keys) {\n        const agg = this.lastAggregations[key];\n        if (!agg) continue;\n        if (agg.buckets.length === 0) continue;\n        if (['lending', 'year_histogram', 'date_histogram'].includes(key))\n          continue;\n        if (typeof agg.buckets[0] === 'number') continue;\n\n        if (\n          key === 'mediatype' &&\n          this.selectedFacets &&\n          Object.values(this.selectedFacets.mediatype ?? {}).some(\n            bucket => bucket.state !== 'none',\n          )\n        ) {\n          continue;\n        }\n\n        const facetType = key as FacetOption;\n        const buckets = agg.buckets as Bucket[];\n\n        const unusedBuckets = buckets.filter(b => {\n          const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\n          if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\n            return false;\n          }\n          return true;\n        });\n\n        if (facetType === 'mediatype') {\n          continue;\n          // Don't include mediatype bubbles\n        } else if (facetType === 'collection' || facetType === 'subject') {\n          const topBuckets = unusedBuckets.slice(0, 5);\n          facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\n        } else {\n          facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\n        }\n      }\n    }\n\n    return facets;\n  }\n\n  private toSmartFacet(\n    facetType: FacetOption,\n    buckets: Bucket[],\n    // prefix = true\n  ): SmartFacet {\n    return {\n      facets: buckets.map(bucket => {\n        let displayText = capitalize(bucket.key.toString());\n        if (facetType === 'collection') {\n          const title = this.collectionTitles?.get(bucket.key.toString());\n          if (title) displayText = title;\n        }\n\n        return {\n          facetType,\n          bucketKey: bucket.key.toString(),\n          displayText,\n        };\n      }),\n    } as SmartFacet;\n  }\n\n  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\n    if (!e.detail.smartFacet.selected) {\n      this.smartFacets = [\n        [{ ...e.detail.smartFacet, selected: true }],\n        ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),\n      ];\n    }\n\n    for (const facet of e.detail.details) {\n      this.selectedFacets = updateSelectedFacetBucket(\n        this.selectedFacets,\n        facet.facetType,\n        facet.bucket,\n        true,\n      );\n    }\n\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {\n    if (\n      this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))\n    ) {\n      return;\n    }\n\n    this.smartFacets = [\n      [{ ...e.detail.smartFacet, selected: true }],\n      ...this.smartFacets,\n    ];\n\n    for (const facet of e.detail.details) {\n      this.selectedFacets = updateSelectedFacetBucket(\n        this.selectedFacets,\n        facet.facetType,\n        facet.bucket,\n        true,\n      );\n    }\n\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {\n    log('smart bar: onDropdownClick', e.detail);\n    this.shadowRoot\n      ?.querySelectorAll('smart-facet-dropdown')\n      .forEach(dropdown => {\n        if (dropdown !== e.detail) {\n          log('closing', dropdown);\n          (dropdown as SmartFacetDropdown).close();\n        }\n      });\n  }\n\n  private filterToggleClicked(): void {\n    this.dispatchEvent(new CustomEvent('filtersToggled'));\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #smart-facets-container {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 5px 10px;\n        padding: 10px 0;\n      }\n\n      #filters-toggle {\n        margin: 0;\n        border: 0;\n        padding: 5px 8px;\n        border-radius: 5px;\n        background: white;\n        color: #2c2c2c;\n        border: 1px solid #194880;\n        font-size: 1.4rem;\n        font-family: inherit;\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      #filters-toggle.active {\n        background: #194880;\n        color: white;\n      }\n\n      #filters-toggle > svg {\n        width: 12px;\n        filter: invert(0.16667);\n        vertical-align: -1px;\n      }\n\n      #filters-toggle.active > svg {\n        filter: invert(1);\n      }\n\n      #filters-label {\n        font-size: 1.4rem;\n        font-weight: bold;\n        margin: 0 -5px 0 0;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"smart-facet-bar.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  nothing,\n  PropertyValues,\n} from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\nimport type { Aggregation, Bucket } from '@internetarchive/search-service';\nimport type { CollectionTitles } from '../../data-source/models';\nimport type {\n  FacetEventDetails,\n  FacetOption,\n  FacetState,\n  SelectedFacets,\n} from '../../models';\nimport { updateSelectedFacetBucket } from '../../utils/facet-utils';\nimport { SmartQueryHeuristicGroup } from './smart-facet-heuristics';\nimport type { SmartFacetDropdown } from './smart-facet-dropdown';\nimport type { SmartFacet, SmartFacetEvent } from './models';\nimport { smartFacetEquals } from './smart-facet-equals';\nimport { dedupe } from './dedupe';\nimport { log } from '../../utils/log';\nimport filterIcon from '../../assets/img/icons/filter';\n\nimport './smart-facet-button';\nimport './smart-facet-dropdown';\n\nconst fieldPrefixes: Partial<Record<FacetOption, string>> = {\n  collection: 'Collection: ',\n  creator: 'By: ',\n  subject: 'About: ',\n};\n\nfunction capitalize(str: string) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\n@customElement('smart-facet-bar')\nexport class SmartFacetBar extends LitElement {\n  @property({ type: String }) query?: string;\n\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  /** The map from collection identifiers to their titles */\n  @property({ type: Object })\n  collectionTitles?: CollectionTitles;\n\n  @property({ type: Boolean }) filterToggleActive = false;\n\n  @property({ type: String }) label?: string;\n\n  @state() private heuristicRecs: SmartFacet[] = [];\n\n  @state() private smartFacets: SmartFacet[][] = [];\n\n  @state() private lastAggregations?: Record<string, Aggregation>;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    if (!this.query) return nothing;\n\n    const shouldShowLabel = !!this.label && this.smartFacets.length > 0;\n    return html`\n      <div id=\"smart-facets-container\">\n        ${this.filtersToggleTemplate}\n        ${shouldShowLabel\n          ? html`<p id=\"filters-label\">${this.label}</p>`\n          : nothing}\n        ${repeat(\n          this.smartFacets,\n          f =>\n            `${f[0].label}|${f[0].facets[0].facetType}|${f[0].facets[0].bucketKey}`,\n          facet => this.makeSmartFacet(facet),\n        )}\n      </div>\n    `;\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    let shouldUpdateSmartFacets = false;\n\n    if (changed.has('query')) {\n      log('query change', changed.get('query'), this.query);\n      this.lastAggregations = undefined;\n      shouldUpdateSmartFacets = true;\n    }\n\n    if (\n      changed.has('aggregations') &&\n      !this.lastAggregations &&\n      this.aggregations &&\n      Object.keys(this.aggregations).length > 0\n    ) {\n      log('aggs change', changed.get('aggregations'), this.aggregations);\n      this.lastAggregations = this.aggregations;\n      shouldUpdateSmartFacets = true;\n    }\n\n    if (shouldUpdateSmartFacets) {\n      log('should update smart facets, doing so...');\n      this.updateSmartFacets();\n    }\n  }\n\n  refresh(): void {\n    this.lastAggregations = this.aggregations;\n    this.updateSmartFacets();\n  }\n\n  private async updateSmartFacets(): Promise<void> {\n    log('updating smart facets');\n    if (this.query) {\n      this.heuristicRecs =\n        await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);\n      log('heuristic recs are', this.heuristicRecs);\n      this.smartFacets = dedupe(this.facetsToDisplay);\n      log('smart facets are', this.smartFacets);\n    }\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private makeSmartFacet(facets: SmartFacet[]) {\n    if (facets.length === 0) {\n      return nothing;\n    }\n    if (facets.length === 1) {\n      return this.smartFacetButton(facets[0]);\n    }\n    return this.smartFacetDropdown(facets);\n  }\n\n  private smartFacetButton(facet: SmartFacet) {\n    return html`\n      <smart-facet-button\n        .facetInfo=${facet}\n        .labelPrefix=${fieldPrefixes[facet.facets[0].facetType]}\n        .selected=${facet.selected ?? false}\n        @facetClick=${this.facetClicked}\n      ></smart-facet-button>\n    `;\n  }\n\n  private smartFacetDropdown(facets: SmartFacet[]) {\n    return html`\n      <smart-facet-dropdown\n        .facetInfo=${facets}\n        .labelPrefix=${fieldPrefixes[facets[0].facets[0].facetType]}\n        .activeFacetRef=${facets[0].facets[0]}\n        @facetClick=${this.facetDropdownClicked}\n        @dropdownClick=${this.onDropdownClick}\n      ></smart-facet-dropdown>\n    `;\n  }\n\n  private get filtersToggleTemplate(): TemplateResult {\n    return html`\n      <button\n        id=\"filters-toggle\"\n        class=${this.filterToggleActive ? 'active' : ''}\n        title=\"${this.filterToggleActive ? 'Hide' : 'Show'} filters pane\"\n        @click=${this.filterToggleClicked}\n      >\n        ${filterIcon}\n      </button>\n    `;\n  }\n\n  private get facetsToDisplay(): SmartFacet[][] {\n    const facets: SmartFacet[][] = [];\n\n    if (this.heuristicRecs.length > 0) {\n      for (const rec of this.heuristicRecs) {\n        // Suppress mediatype-only facets for now.\n        if (rec.facets.length === 1 && rec.facets[0].facetType === 'mediatype')\n          continue;\n\n        facets.push([rec]);\n      }\n    }\n\n    if (this.lastAggregations) {\n      const keys = [\n        'mediatype',\n        'year',\n        'language',\n        'creator',\n        'subject',\n        'collection',\n      ];\n      for (const key of keys) {\n        const agg = this.lastAggregations[key];\n        if (!agg) continue;\n        if (agg.buckets.length === 0) continue;\n        if (['lending', 'year_histogram', 'date_histogram'].includes(key))\n          continue;\n        if (typeof agg.buckets[0] === 'number') continue;\n\n        if (\n          key === 'mediatype' &&\n          this.selectedFacets &&\n          Object.values(this.selectedFacets.mediatype ?? {}).some(\n            bucket => bucket.state !== 'none',\n          )\n        ) {\n          continue;\n        }\n\n        const facetType = key as FacetOption;\n        const buckets = agg.buckets as Bucket[];\n\n        const unusedBuckets = buckets.filter(b => {\n          const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];\n          if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {\n            return false;\n          }\n          return true;\n        });\n\n        if (facetType === 'mediatype') {\n          continue;\n          // Don't include mediatype bubbles\n        } else if (facetType === 'collection' || facetType === 'subject') {\n          const topBuckets = unusedBuckets.slice(0, 5);\n          facets.push(topBuckets.map(b => this.toSmartFacet(facetType, [b])));\n        } else {\n          facets.push([this.toSmartFacet(facetType, [unusedBuckets[0]])]);\n        }\n      }\n    }\n\n    return facets;\n  }\n\n  private toSmartFacet(\n    facetType: FacetOption,\n    buckets: Bucket[],\n    // prefix = true\n  ): SmartFacet {\n    return {\n      facets: buckets.map(bucket => {\n        let displayText = capitalize(bucket.key.toString());\n        if (facetType === 'collection') {\n          const title = this.collectionTitles?.get(bucket.key.toString());\n          if (title) displayText = title;\n        }\n\n        return {\n          facetType,\n          bucketKey: bucket.key.toString(),\n          displayText,\n        };\n      }),\n    } as SmartFacet;\n  }\n\n  /**\n   * Toggles the state of the given smart facet, and updates the selected facets accordingly.\n   */\n  private toggleSmartFacet(\n    facet: SmartFacet,\n    details: FacetEventDetails[],\n  ): void {\n    let newState: FacetState;\n    if (facet.selected) {\n      // When deselected, leave the smart facet where it is\n      newState = 'none';\n      this.smartFacets = this.smartFacets.map(f => {\n        if (f[0] === facet) return [{ ...facet, selected: false }];\n        return f;\n      });\n    } else {\n      // When selected, move the toggled smart facet to the front of the list\n      newState = 'selected';\n      this.smartFacets = [\n        [{ ...facet, selected: true }],\n        ...this.smartFacets.filter(f => f[0] !== facet),\n      ];\n    }\n\n    // Update the selected facets\n    for (const facet of details) {\n      this.selectedFacets = updateSelectedFacetBucket(\n        this.selectedFacets,\n        facet.facetType,\n        { ...facet.bucket, state: newState },\n        true,\n      );\n    }\n\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {\n    this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);\n  }\n\n  private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {\n    const existingFacet = this.smartFacets.find(\n      sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),\n    );\n    if (existingFacet) {\n      // The facet already exists outside the dropdown, so just select it there\n      this.toggleSmartFacet(existingFacet[0], e.detail.details);\n      return;\n    }\n\n    // Otherwise, prepend a new smart facet for the selected option\n    this.smartFacets = [\n      [{ ...e.detail.smartFacet, selected: true }],\n      ...this.smartFacets,\n    ];\n\n    for (const facet of e.detail.details) {\n      this.selectedFacets = updateSelectedFacetBucket(\n        this.selectedFacets,\n        facet.facetType,\n        facet.bucket,\n        true,\n      );\n    }\n\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {\n    log('smart bar: onDropdownClick', e.detail);\n    this.shadowRoot\n      ?.querySelectorAll('smart-facet-dropdown')\n      .forEach(dropdown => {\n        if (dropdown !== e.detail) {\n          log('closing', dropdown);\n          (dropdown as SmartFacetDropdown).close();\n        }\n      });\n  }\n\n  private filterToggleClicked(): void {\n    this.dispatchEvent(new CustomEvent('filtersToggled'));\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #smart-facets-container {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 5px 10px;\n        padding: 10px 0;\n      }\n\n      #filters-toggle {\n        margin: 0;\n        border: 0;\n        padding: 5px 8px;\n        border-radius: 5px;\n        background: white;\n        color: #2c2c2c;\n        border: 1px solid #194880;\n        font-size: 1.4rem;\n        font-family: inherit;\n        text-decoration: none;\n        cursor: pointer;\n      }\n\n      #filters-toggle.active {\n        background: #194880;\n        color: white;\n      }\n\n      #filters-toggle > svg {\n        width: 12px;\n        filter: invert(0.16667);\n        vertical-align: -1px;\n      }\n\n      #filters-toggle.active > svg {\n        filter: invert(1);\n      }\n\n      #filters-label {\n        font-size: 1.4rem;\n        font-weight: bold;\n        margin: 0 -5px 0 0;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.d.ts

@@ -9,7 +9,19 @@ export declare class SmartFacetDropdown extends LitElement {
     render(): import("lit").TemplateResult<1> | typeof nothing;
     private get dropdownOptions();
     private get activeDropdownOption();
+    /**
+     * Handler for when the default option on the dropdown button is clicked
+     */
+    private defaultOptionSelected;
+    /**
+     * Handler for when an option in the dropdown menu is selected
+     */
     private optionSelected;
+    /**
+     * Responds to a dropdown selection by emitting a `facetClick` event with
+     * the appropriate facet details.
+     */
+    private handleSelection;
     private onDropdownClick;
     close(): void;
     static get styles(): CSSResultGroup;

package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.js

@@ -30,7 +30,10 @@ let SmartFacetDropdown = class SmartFacetDropdown extends LitElement {
           @optionSelected=${this.optionSelected}
           @click=${this.onDropdownClick}
         >
-          <span class="dropdown-label" slot="dropdown-label"
+          <span
+            class="dropdown-label"
+            slot="dropdown-label"
+            @click=${this.defaultOptionSelected}
             >${(_b = this.labelPrefix) !== null && _b !== void 0 ? _b : nothing} ${displayText}</span
           >
         </ia-dropdown>
@@ -58,12 +61,29 @@ let SmartFacetDropdown = class SmartFacetDropdown extends LitElement {
             return undefined;
         return this.dropdownOptions.find(opt => { var _a; return opt.id === ((_a = this.activeFacetRef) === null || _a === void 0 ? void 0 : _a.bucketKey); });
     }
+    /**
+     * Handler for when the default option on the dropdown button is clicked
+     */
+    defaultOptionSelected() {
+        var _a;
+        this.handleSelection((_a = this.activeFacetRef) === null || _a === void 0 ? void 0 : _a.bucketKey);
+    }
+    /**
+     * Handler for when an option in the dropdown menu is selected
+     */
     optionSelected(e) {
-        if (!this.facetInfo || !this.activeFacetRef)
+        this.handleSelection(e.detail.option.id);
+    }
+    /**
+     * Responds to a dropdown selection by emitting a `facetClick` event with
+     * the appropriate facet details.
+     */
+    handleSelection(bucketKey) {
+        if (!bucketKey || !this.facetInfo || !this.activeFacetRef)
             return;
         let selectedSmartFacet;
         for (const smartFacet of this.facetInfo) {
-            const selectedRef = smartFacet.facets.find(b => b.bucketKey === e.detail.option.id);
+            const selectedRef = smartFacet.facets.find(b => b.bucketKey === bucketKey);
             if (selectedRef) {
                 this.activeFacetRef = selectedRef;
                 selectedSmartFacet = smartFacet;

package/dist/src/collection-facets/smart-facets/smart-facet-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"smart-facet-dropdown.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-dropdown.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGnE,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAG/B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAShD,EAAE;IACF,8BAA8B;IAC9B,EAAE;IAEF,MAAM;;QACJ,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO,OAAO,CAAC;QAC5D,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,OAAO,CAAC;QAEhD,MAAM,WAAW,GACf,MAAA,IAAI,CAAC,cAAc,CAAC,WAAW,mCAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;QACnE,IAAI,CAAC,WAAW;YAAE,OAAO,OAAO,CAAC;QAEjC,OAAO,IAAI,CAAA;;;;;;;;;qBASM,IAAI,CAAC,eAAe;4BACb,IAAI,CAAC,oBAAoB;2BAC1B,KAAK;4BACJ,IAAI,CAAC,cAAc;mBAC5B,IAAI,CAAC,eAAe;;;eAGxB,MAAA,IAAI,CAAC,WAAW,mCAAI,OAAO,IAAI,WAAW;;;;KAIpD,CAAC;IACJ,CAAC;IAED,EAAE;IACF,gBAAgB;IAChB,EAAE;IAEF,IAAY,eAAe;;QACzB,OAAO,CACL,MAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,GAAG,CAAC,UAAU,CAAC,EAAE;;YAC/B,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACxC,OAAO;gBACL,EAAE,EAAE,UAAU,CAAC,SAAS;gBACxB,KAAK,EAAE,IAAI,CAAA;cACP,MAAA,MAAA,UAAU,CAAC,KAAK,mCAClB,UAAU,CAAC,WAAW,mCACtB,UAAU,CAAC,SAAS;kBACd;aACT,CAAC;QACJ,CAAC,CAAC,mCAAI,EAAE,CACT,CAAC;IACJ,CAAC;IAED,IAAY,oBAAoB;QAC9B,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO,SAAS,CAAC;QAC3C,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAC9B,GAAG,CAAC,EAAE,WAAC,OAAA,GAAG,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,cAAc,0CAAE,SAAS,CAAA,CAAA,EAAA,CACjD,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAA2C;QAChE,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QAEpD,IAAI,kBAAkB,CAAC;QACvB,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACxC,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CACxC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CACxC,CAAC;YACF,IAAI,WAAW,EAAE,CAAC;gBAChB,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;gBAClC,kBAAkB,GAAG,UAAU,CAAC;YAClC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,kBAAkB;YAAE,OAAO;QAEhC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAkB,YAAY,EAAE;YAC7C,MAAM,EAAE;gBACN,UAAU,EAAE,kBAAkB;gBAC9B,OAAO,EAAE;oBACP;wBACE,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,SAAS;wBACxC,MAAM,EAAE;4BACN,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,SAAS;4BAClC,KAAK,EAAE,CAAC;4BACR,KAAK,EAAE,UAAU;yBAClB;wBACD,QAAQ,EAAE,KAAK;qBAChB;iBACF;aACF;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,GAAG,CAAC,iCAAiC,EAAE,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAqB,eAAe,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CACvE,CAAC;IACJ,CAAC;IAED,KAAK;QACH,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,EAAE;IACF,SAAS;IACT,EAAE;IAEF,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BT,CAAC;IACJ,CAAC;CACF,CAAA;AA1J4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAA0B;AAExB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AAErB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAA2B;AAEhC;IAArB,KAAK,CAAC,aAAa,CAAC;oDAAuB;AAPjC,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA2J9B","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { FacetRef, SmartFacet, SmartFacetEvent } from './models';\nimport { log } from '../../utils/log';\n\n@customElement('smart-facet-dropdown')\nexport class SmartFacetDropdown extends LitElement {\n  @property({ type: Array }) facetInfo?: SmartFacet[];\n\n  @property({ type: String }) labelPrefix?: string;\n\n  @property({ type: Object }) activeFacetRef?: FacetRef;\n\n  @query('ia-dropdown') dropdown?: IaDropdown;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    if (!this.facetInfo || !this.activeFacetRef) return nothing;\n    if (this.facetInfo.length === 0) return nothing;\n\n    const displayText =\n      this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;\n    if (!displayText) return nothing;\n\n    return html`\n      <div class=\"dropdown-container\">\n        <ia-dropdown\n          class=\"dropdown\"\n          displayCaret\n          closeOnSelect\n          closeOnEscape\n          closeOnBackdropClick\n          includeSelectedOption\n          .options=${this.dropdownOptions}\n          .selectedOption=${this.activeDropdownOption}\n          .openViaButton=${false}\n          @optionSelected=${this.optionSelected}\n          @click=${this.onDropdownClick}\n        >\n          <span class=\"dropdown-label\" slot=\"dropdown-label\"\n            >${this.labelPrefix ?? nothing} ${displayText}</span\n          >\n        </ia-dropdown>\n      </div>\n    `;\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private get dropdownOptions(): optionInterface[] {\n    return (\n      this.facetInfo?.map(smartFacet => {\n        const firstFacet = smartFacet.facets[0];\n        return {\n          id: firstFacet.bucketKey,\n          label: html`<span>\n            ${smartFacet.label ??\n            firstFacet.displayText ??\n            firstFacet.bucketKey}\n          </span>`,\n        };\n      }) ?? []\n    );\n  }\n\n  private get activeDropdownOption(): optionInterface | undefined {\n    if (!this.activeFacetRef) return undefined;\n    return this.dropdownOptions.find(\n      opt => opt.id === this.activeFacetRef?.bucketKey,\n    );\n  }\n\n  private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {\n    if (!this.facetInfo || !this.activeFacetRef) return;\n\n    let selectedSmartFacet;\n    for (const smartFacet of this.facetInfo) {\n      const selectedRef = smartFacet.facets.find(\n        b => b.bucketKey === e.detail.option.id,\n      );\n      if (selectedRef) {\n        this.activeFacetRef = selectedRef;\n        selectedSmartFacet = smartFacet;\n      }\n    }\n\n    if (!selectedSmartFacet) return;\n\n    this.dispatchEvent(\n      new CustomEvent<SmartFacetEvent>('facetClick', {\n        detail: {\n          smartFacet: selectedSmartFacet,\n          details: [\n            {\n              facetType: this.activeFacetRef.facetType,\n              bucket: {\n                key: this.activeFacetRef.bucketKey,\n                count: 0,\n                state: 'selected',\n              },\n              negative: false,\n            },\n          ],\n        },\n      }),\n    );\n  }\n\n  private onDropdownClick(): void {\n    log('smart dropdown: onDropdownClick', this);\n    this.dispatchEvent(\n      new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this }),\n    );\n  }\n\n  close(): void {\n    if (this.dropdown) {\n      this.dropdown.open = false;\n    }\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .dropdown-container {\n        padding: 5px 5px;\n        border-radius: 5px;\n        background: white;\n        color: #2c2c2c;\n        border: 1px solid #194880;\n        font-size: 1.4rem;\n        font-family: inherit;\n      }\n\n      .dropdown-label {\n        font-size: 1.4rem;\n        font-family: inherit;\n      }\n\n      .dropdown {\n        --dropdownBorderColor: #194880;\n        --dropdownBorderWidth: 1px;\n        --dropdownBgColor: white;\n        --dropdownHoverBgColor: #f8f8f8;\n        --dropdownTextColor: #2c2c2c;\n        --dropdownHoverTextColor: #2c2c2c;\n        --dropdownCaretColor: #2c2c2c;\n        --dropdownWhiteSpace: nowrap;\n        --caretWidth: 14px;\n        --caretHeight: 14px;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"smart-facet-dropdown.js","sourceRoot":"","sources":["../../../../src/collection-facets/smart-facets/smart-facet-dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';\nimport type { FacetRef, SmartFacet, SmartFacetEvent } from './models';\nimport { log } from '../../utils/log';\n\n@customElement('smart-facet-dropdown')\nexport class SmartFacetDropdown extends LitElement {\n  @property({ type: Array }) facetInfo?: SmartFacet[];\n\n  @property({ type: String }) labelPrefix?: string;\n\n  @property({ type: Object }) activeFacetRef?: FacetRef;\n\n  @query('ia-dropdown') dropdown?: IaDropdown;\n\n  //\n  // COMPONENT LIFECYCLE METHODS\n  //\n\n  render() {\n    if (!this.facetInfo || !this.activeFacetRef) return nothing;\n    if (this.facetInfo.length === 0) return nothing;\n\n    const displayText =\n      this.activeFacetRef.displayText ?? this.activeFacetRef.bucketKey;\n    if (!displayText) return nothing;\n\n    return html`\n      <div class=\"dropdown-container\">\n        <ia-dropdown\n          class=\"dropdown\"\n          displayCaret\n          closeOnSelect\n          closeOnEscape\n          closeOnBackdropClick\n          includeSelectedOption\n          .options=${this.dropdownOptions}\n          .selectedOption=${this.activeDropdownOption}\n          .openViaButton=${false}\n          @optionSelected=${this.optionSelected}\n          @click=${this.onDropdownClick}\n        >\n          <span\n            class=\"dropdown-label\"\n            slot=\"dropdown-label\"\n            @click=${this.defaultOptionSelected}\n            >${this.labelPrefix ?? nothing} ${displayText}</span\n          >\n        </ia-dropdown>\n      </div>\n    `;\n  }\n\n  //\n  // OTHER METHODS\n  //\n\n  private get dropdownOptions(): optionInterface[] {\n    return (\n      this.facetInfo?.map(smartFacet => {\n        const firstFacet = smartFacet.facets[0];\n        return {\n          id: firstFacet.bucketKey,\n          label: html`<span>\n            ${smartFacet.label ??\n            firstFacet.displayText ??\n            firstFacet.bucketKey}\n          </span>`,\n        };\n      }) ?? []\n    );\n  }\n\n  private get activeDropdownOption(): optionInterface | undefined {\n    if (!this.activeFacetRef) return undefined;\n    return this.dropdownOptions.find(\n      opt => opt.id === this.activeFacetRef?.bucketKey,\n    );\n  }\n\n  /**\n   * Handler for when the default option on the dropdown button is clicked\n   */\n  private defaultOptionSelected(): void {\n    this.handleSelection(this.activeFacetRef?.bucketKey);\n  }\n\n  /**\n   * Handler for when an option in the dropdown menu is selected\n   */\n  private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {\n    this.handleSelection(e.detail.option.id);\n  }\n\n  /**\n   * Responds to a dropdown selection by emitting a `facetClick` event with\n   * the appropriate facet details.\n   */\n  private handleSelection(bucketKey?: string): void {\n    if (!bucketKey || !this.facetInfo || !this.activeFacetRef) return;\n\n    let selectedSmartFacet;\n    for (const smartFacet of this.facetInfo) {\n      const selectedRef = smartFacet.facets.find(\n        b => b.bucketKey === bucketKey,\n      );\n      if (selectedRef) {\n        this.activeFacetRef = selectedRef;\n        selectedSmartFacet = smartFacet;\n      }\n    }\n\n    if (!selectedSmartFacet) return;\n\n    this.dispatchEvent(\n      new CustomEvent<SmartFacetEvent>('facetClick', {\n        detail: {\n          smartFacet: selectedSmartFacet,\n          details: [\n            {\n              facetType: this.activeFacetRef.facetType,\n              bucket: {\n                key: this.activeFacetRef.bucketKey,\n                count: 0,\n                state: 'selected',\n              },\n              negative: false,\n            },\n          ],\n        },\n      }),\n    );\n  }\n\n  private onDropdownClick(): void {\n    log('smart dropdown: onDropdownClick', this);\n    this.dispatchEvent(\n      new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this }),\n    );\n  }\n\n  close(): void {\n    if (this.dropdown) {\n      this.dropdown.open = false;\n    }\n  }\n\n  //\n  // STYLES\n  //\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .dropdown-container {\n        padding: 5px 5px;\n        border-radius: 5px;\n        background: white;\n        color: #2c2c2c;\n        border: 1px solid #194880;\n        font-size: 1.4rem;\n        font-family: inherit;\n      }\n\n      .dropdown-label {\n        font-size: 1.4rem;\n        font-family: inherit;\n      }\n\n      .dropdown {\n        --dropdownBorderColor: #194880;\n        --dropdownBorderWidth: 1px;\n        --dropdownBgColor: white;\n        --dropdownHoverBgColor: #f8f8f8;\n        --dropdownTextColor: #2c2c2c;\n        --dropdownHoverTextColor: #2c2c2c;\n        --dropdownCaretColor: #2c2c2c;\n        --dropdownWhiteSpace: nowrap;\n        --caretWidth: 14px;\n        --caretHeight: 14px;\n      }\n    `;\n  }\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.18.3-alpha-webdev7768.1",
+  "version": "2.18.3-alpha-webdev7768.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

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

@@ -12,7 +12,12 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { msg } from '@lit/localize';
 import type { Aggregation, Bucket } from '@internetarchive/search-service';
 import type { CollectionTitles } from '../../data-source/models';
-import type { FacetOption, SelectedFacets } from '../../models';
+import type {
+  FacetEventDetails,
+  FacetOption,
+  FacetState,
+  SelectedFacets,
+} from '../../models';
 import { updateSelectedFacetBucket } from '../../utils/facet-utils';
 import { SmartQueryHeuristicGroup } from './smart-facet-heuristics';
 import type { SmartFacetDropdown } from './smart-facet-dropdown';
@@ -261,19 +266,36 @@ export class SmartFacetBar extends LitElement {
     } as SmartFacet;
   }
 
-  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {
-    if (!e.detail.smartFacet.selected) {
+  /**
+   * Toggles the state of the given smart facet, and updates the selected facets accordingly.
+   */
+  private toggleSmartFacet(
+    facet: SmartFacet,
+    details: FacetEventDetails[],
+  ): void {
+    let newState: FacetState;
+    if (facet.selected) {
+      // When deselected, leave the smart facet where it is
+      newState = 'none';
+      this.smartFacets = this.smartFacets.map(f => {
+        if (f[0] === facet) return [{ ...facet, selected: false }];
+        return f;
+      });
+    } else {
+      // When selected, move the toggled smart facet to the front of the list
+      newState = 'selected';
       this.smartFacets = [
-        [{ ...e.detail.smartFacet, selected: true }],
-        ...this.smartFacets.filter(f => f[0] !== e.detail.smartFacet),
+        [{ ...facet, selected: true }],
+        ...this.smartFacets.filter(f => f[0] !== facet),
       ];
     }
 
-    for (const facet of e.detail.details) {
+    // Update the selected facets
+    for (const facet of details) {
       this.selectedFacets = updateSelectedFacetBucket(
         this.selectedFacets,
         facet.facetType,
-        facet.bucket,
+        { ...facet.bucket, state: newState },
         true,
       );
     }
@@ -284,13 +306,21 @@ export class SmartFacetBar extends LitElement {
     this.dispatchEvent(event);
   }
 
+  private facetClicked(e: CustomEvent<SmartFacetEvent>): void {
+    this.toggleSmartFacet(e.detail.smartFacet, e.detail.details);
+  }
+
   private facetDropdownClicked(e: CustomEvent<SmartFacetEvent>): void {
-    if (
-      this.smartFacets.find(sf => smartFacetEquals(sf[0], e.detail.smartFacet))
-    ) {
+    const existingFacet = this.smartFacets.find(
+      sf => sf.length === 1 && smartFacetEquals(sf[0], e.detail.smartFacet),
+    );
+    if (existingFacet) {
+      // The facet already exists outside the dropdown, so just select it there
+      this.toggleSmartFacet(existingFacet[0], e.detail.details);
       return;
     }
 
+    // Otherwise, prepend a new smart facet for the selected option
     this.smartFacets = [
       [{ ...e.detail.smartFacet, selected: true }],
       ...this.smartFacets,

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

@@ -41,7 +41,10 @@ export class SmartFacetDropdown extends LitElement {
           @optionSelected=${this.optionSelected}
           @click=${this.onDropdownClick}
         >
-          <span class="dropdown-label" slot="dropdown-label"
+          <span
+            class="dropdown-label"
+            slot="dropdown-label"
+            @click=${this.defaultOptionSelected}
             >${this.labelPrefix ?? nothing} ${displayText}</span
           >
         </ia-dropdown>
@@ -76,13 +79,31 @@ export class SmartFacetDropdown extends LitElement {
     );
   }
 
+  /**
+   * Handler for when the default option on the dropdown button is clicked
+   */
+  private defaultOptionSelected(): void {
+    this.handleSelection(this.activeFacetRef?.bucketKey);
+  }
+
+  /**
+   * Handler for when an option in the dropdown menu is selected
+   */
   private optionSelected(e: CustomEvent<{ option: optionInterface }>): void {
-    if (!this.facetInfo || !this.activeFacetRef) return;
+    this.handleSelection(e.detail.option.id);
+  }
+
+  /**
+   * Responds to a dropdown selection by emitting a `facetClick` event with
+   * the appropriate facet details.
+   */
+  private handleSelection(bucketKey?: string): void {
+    if (!bucketKey || !this.facetInfo || !this.activeFacetRef) return;
 
     let selectedSmartFacet;
     for (const smartFacet of this.facetInfo) {
       const selectedRef = smartFacet.facets.find(
-        b => b.bucketKey === e.detail.option.id,
+        b => b.bucketKey === bucketKey,
       );
       if (selectedRef) {
         this.activeFacetRef = selectedRef;