@brightspace-ui-labs/facet-filter-sort 6.4.0 → 6.6.0

package/README.md

@@ -126,10 +126,10 @@ Note that for the header and opener text overrides, if the terms are to reflect
 
 - `d2l-labs-filter-dropdown-close`: Fired when the filter dropdown is closed.
 - `d2l-labs-filter-dropdown-cleared`: Fired when the clear button or the clear filters button is pressed to clear all filters.
+- `d2l-labs-filter-dropdown-category-selected`: Fired when a filter tab is selected.
 
 `d2l-labs-filter-dropdown-category`:
 
-- `d2l-labs-filter-dropdown-category-selected`: Fired when a filter tab is selected.
 - `d2l-labs-filter-dropdown-category-searched`: Fired when a filter category is searched.
 - `d2l-labs-filter-dropdown-option-change`: Fired when a filter option is selected.
 

package/components/filter-dropdown/filter-dropdown-category.js

@@ -102,10 +102,6 @@ class LabsFilterDropdownCategory extends FilterLocalizeMixin(TabPanelMixin(LitEl
 			this.selected = !this.selected;
 			this.__onSelect(e);
 		});
-
-		this.addEventListener('d2l-tab-panel-selected', () => {
-			this._dispatchSelected();
-		});
 	}
 
 	render() {
@@ -123,17 +119,6 @@ class LabsFilterDropdownCategory extends FilterLocalizeMixin(TabPanelMixin(LitEl
 		`;
 	}
 
-	_dispatchSelected() {
-		// Event propagation of d2l-tab-panel-selected stopped in d2l-labs-filter-dropdown
-		this.dispatchEvent(new CustomEvent('d2l-labs-filter-dropdown-category-selected', {
-			detail: {
-				categoryKey: this.key
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-
 	_handleMenuItemChange(e) {
 		e.stopPropagation();
 		this.dispatchEvent(new CustomEvent('d2l-labs-filter-dropdown-option-change', {

package/components/filter-dropdown/filter-dropdown.js

@@ -5,12 +5,9 @@ import '@brightspace-ui/core/components/dropdown/dropdown-tabs.js';
 import '@brightspace-ui/core/components/tabs/tabs.js';
 import '@brightspace-ui/core/components/tabs/tab.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { getFlag } from '@brightspace-ui/core/helpers/flags.js';
 import { LocalizeBehavior } from '../localize-behavior.js';
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 
-const useTabsNewStructure = getFlag('GAUD-7146-tabs-new-structure', true);
-
 /**
  * A component containing filter options and emitting selection events
  * @slot - Contents of the dropdown, including filter categories and options
@@ -92,10 +89,6 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 				type: Boolean,
 				value: false
 			},
-			_useNewStructure: {
-				type: Boolean,
-				value: useTabsNewStructure
-			},
 			_tabInfos: {
 				type: Array,
 				value: () => []
@@ -139,15 +132,10 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 						<d2l-button-subtle text="[[localize('clear')]]" hidden$="[[!totalSelectedOptionCount]]" on-click="clearFilters"></d2l-button-subtle>
 					</div>
 					<d2l-tabs>
-						<template is="dom-if" if="[[!_useNewStructure]]">
-							<slot></slot>
-						</template>
-						<template is="dom-if" if="[[_useNewStructure]]">
-							<template is="dom-repeat" items="[[_tabInfos]]" as="tab">
-								<d2l-tab id="[[tab.key]]" text="[[tab.text]]" slot="tabs" selected$="[[tab.selected]]"></d2l-tab>
-							</template>
-							<slot on-slotchange="_handleCategoriesSlotChange" slot="panels"></slot>
+						<template is="dom-repeat" items="[[_tabInfos]]" as="tab">
+							<d2l-tab id="[[tab.key]]" text="[[tab.text]]" slot="tabs" selected$="[[tab.selected]]" on-d2l-tab-selected="_dispatchSelected"></d2l-tab>
 						</template>
+						<slot on-slotchange="_handleCategoriesSlotChange" slot="panels"></slot>
 					</d2l-tabs>
 					<slot name="footer" slot="[[_getFooterSlotValue(_hasFooter)]]" on-slotchange="_handleFooterSlotChange"></slot>
 				</d2l-dropdown-tabs>
@@ -157,7 +145,6 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 
 	attached() {
 		this.addEventListener('d2l-dropdown-close', this._handleDropdownClose);
-		this.addEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
 	}
 
 	clearFilters() {
@@ -178,23 +165,30 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 
 	detached() {
 		this.removeEventListener('d2l-dropdown-close', this._handleDropdownClose);
-		this.removeEventListener('d2l-tab-panel-selected', this._stopTabPanelSelectedEvent);
 
-		if (this._useNewStructure) {
-			const categories = this.querySelectorAll('d2l-labs-filter-dropdown-category');
-			categories.forEach(cat => {
-				if (cat.__tabInfoObserver) {
-					cat.__tabInfoObserver.disconnect();
-					delete cat.__tabInfoObserver;
-				}
-			});
-		}
+		const categories = this.querySelectorAll('d2l-labs-filter-dropdown-category');
+		categories.forEach(cat => {
+			if (cat.__tabInfoObserver) {
+				cat.__tabInfoObserver.disconnect();
+				delete cat.__tabInfoObserver;
+			}
+		});
 	}
 
 	focus() {
 		this.shadowRoot.querySelector('d2l-dropdown-button-subtle').focus();
 	}
 
+	_dispatchSelected(e) {
+		this.dispatchEvent(new CustomEvent('d2l-labs-filter-dropdown-category-selected', {
+			detail: {
+				categoryKey: e.target.id
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+
 	_getFooterSlotValue(hasFooter) {
 		return hasFooter ? 'footer' : undefined;
 	}
@@ -212,8 +206,6 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 	}
 
 	async _handleCategoriesSlotChange() {
-		if (!this._useNewStructure) return;
-
 		const tabsContainer = this.shadowRoot.querySelector('d2l-tabs');
 		const categories = this.querySelectorAll('d2l-labs-filter-dropdown-category');
 
@@ -267,11 +259,6 @@ class D2LLabsFilterDropdown extends mixinBehaviors([LocalizeBehavior], PolymerEl
 		if (!this.localize || !this.resources) return;
 		return altText ? altText : this.localize(...args);
 	}
-
-	// Must be done here (instead of d2l-labs-filter-dropdown-category) as the d2l-dropdown-tabs component needs to receive it
-	_stopTabPanelSelectedEvent(e) {
-		e.stopPropagation();
-	}
 }
 
 window.customElements.define(D2LLabsFilterDropdown.is, D2LLabsFilterDropdown);

package/custom-elements.json

@@ -449,6 +449,9 @@
         {
           "name": "d2l-labs-filter-dropdown-close",
           "description": "Dispatched when the filter dropdown is closed"
+        },
+        {
+          "name": "d2l-labs-filter-dropdown-category-selected"
         }
       ],
       "slots": [

package/package.json

@@ -37,7 +37,7 @@
     "lit-analyzer": "^1",
     "stylelint": "^15"
   },
-  "version": "6.4.0",
+  "version": "6.6.0",
   "dependencies": {
     "@brightspace-ui/core": "^3",
     "@brightspace-ui/localize-behavior": "^2",