@brightspace-ui/core 3.21.3 → 3.22.0

package/components/filter/filter.js

@@ -19,6 +19,7 @@ import '../menu/menu-item.js';
 import '../paging/pager-load-more.js';
 import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
+import '../tooltip/tooltip.js';
 
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
@@ -37,6 +38,26 @@ const ESCAPE_KEY_CODE = 27;
 const FILTER_CONTENT_CLASS = 'd2l-filter-dropdown-content';
 const SET_DIMENSION_ID_PREFIX = 'list-';
 
+let hasDisplayedKeyboardTooltip = false;
+
+export function resetHasDisplayedKeyboardTooltip() {
+	hasDisplayedKeyboardTooltip = false;
+}
+let spacePressed = false;
+let spaceListenerAdded = false;
+function addSpaceListener() {
+	if (spaceListenerAdded) return;
+	spaceListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 32) return;
+		spacePressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 32) return;
+		spacePressed = false;
+	});
+}
+
 /**
  * A filter component that contains one or more dimensions a user can filter by.
  * This component is in charge of all rendering.
@@ -68,6 +89,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			text: { type: String },
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
+			_displayKeyboardTooltip: { state: true },
 			_minWidth: { type: Number, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
 		};
@@ -211,6 +233,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this.opened = false;
 		this._changeEventsToDispatch = new Map();
 		this._dimensions = [];
+		this._displayKeyboardTooltip = false;
 		this._minWidth = 285;
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
@@ -226,6 +249,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		return 'd2l-button-subtle';
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		addSpaceListener();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-filter-dimension-data-change', this._handleDimensionDataChange);
@@ -590,8 +618,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	_createSetDimensionItem(item) {
+		const itemId = `list-item-${item.key}`;
 		return html`
 			<d2l-list-item
+				id="${itemId}"
+				@d2l-list-item-selected="${ifDefined(item.additionalContent ? this._handleListItemSelelcted : undefined)}"
 				?selection-disabled="${item.disabled}"
 				?hidden="${item.hidden}"
 				key="${item.key}"
@@ -617,6 +648,9 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					` : nothing}
 				</div>
 			</d2l-list-item>
+			${item.additionalContent && item.selected && this._displayKeyboardTooltip
+		? html`<d2l-tooltip align="start" announced for="${itemId}" for-type="descriptor" @d2l-tooltip-hide="${this._handleTooltipHide}">${this.localizeHTML('components.filter.additionalContentTooltip')}</d2l-tooltip>`
+		: nothing}
 		`;
 	}
 
@@ -856,6 +890,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		parentListItem.classList.remove('expanding-content');
 	}
 
+	_handleListItemSelelcted() {
+		if (hasDisplayedKeyboardTooltip || !spacePressed) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
 	_handleSearch(e) {
 		const dimension = this._getActiveDimension();
 		const searchValue = e.detail.value.trim();
@@ -903,6 +943,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
+	_handleTooltipHide() {
+		this._displayKeyboardTooltip = false;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
 	_isDimensionEmpty(dimension) {
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':

package/components/popover/popover-mixin.js

@@ -1,4 +1,5 @@
 import '../colors/colors.js';
+import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
 import { getComposedActiveElement, getPreviousFocusableAncestor } from '../../helpers/focus.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
@@ -84,6 +85,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._removeAutoCloseHandlers();
+		this._clearDismissible();
 	}
 
 	updated(changedProperties) {
@@ -100,9 +102,11 @@ export const PopoverMixin = superclass => class extends superclass {
 			if (this.opened) {
 				this._opener = getComposedActiveElement();
 				this._addAutoCloseHandlers();
+				this._dismissibleId = setDismissible(() => this._close());
 				this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
 			} else if (changedProperties.get('opened') !== undefined) {
 				this._removeAutoCloseHandlers();
+				this._clearDismissible();
 				this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
 			}
 
@@ -115,6 +119,12 @@ export const PopoverMixin = superclass => class extends superclass {
 		document.addEventListener('click', this._handleAutoCloseClick, { capture: true });
 	}
 
+	_clearDismissible() {
+		if (!this._dismissibleId) return;
+		clearDismissible(this._dismissibleId);
+		this._dismissibleId = null;
+	}
+
 	_close() {
 		const hide = () => {
 			this.opened = false;

package/lang/ar.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "مهم!",
 	"components.dropdown.close": "إغلاق",
 	"components.filter.activeFilters": "عوامل تصفية نشطة:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "مسح",
 	"components.filter.clearAll": "مسح الكل",
 	"components.filter.clearAllAnnounce": "جارٍ مسح كل عوامل التصفية",

package/lang/cy.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critigol!",
 	"components.dropdown.close": "Cau",
 	"components.filter.activeFilters": "Dim Hidlwyr Gweithredol:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Clirio",
 	"components.filter.clearAll": "Clirio’r Cyfan",
 	"components.filter.clearAllAnnounce": "Wrthi’n clirio’r holl hidlwyr",

package/lang/da.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritisk!",
 	"components.dropdown.close": "Luk",
 	"components.filter.activeFilters": "Aktive filtre:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Ryd",
 	"components.filter.clearAll": "Ryd alle",
 	"components.filter.clearAllAnnounce": "Rydder alle filtre",

package/lang/de.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritisch!",
 	"components.dropdown.close": "Schließen",
 	"components.filter.activeFilters": "Aktive Filter:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Löschen",
 	"components.filter.clearAll": "Alle löschen",
 	"components.filter.clearAllAnnounce": "Alle Filter werden gelöscht",

package/lang/en-gb.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Close",
 	"components.filter.activeFilters": "Active Filters:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Clear",
 	"components.filter.clearAll": "Clear All",
 	"components.filter.clearAllAnnounce": "Clearing all filters",

package/lang/en.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Close",
 	"components.filter.activeFilters": "Active Filters:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Clear",
 	"components.filter.clearAll": "Clear All",
 	"components.filter.clearAllAnnounce": "Clearing all filters",
@@ -29,8 +30,8 @@ export default {
 	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Today} one {Last {num} day} other {Last {num} days}}",
 	"components.filter-dimension-set-date-text-value.textMonths": "Last {num} months",
 	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} to {endValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Start: {startValue}",
-	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "End: {endValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Start Date: {startValue}",
+	"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "End Date: {endValue}",
 	"components.filter-dimension-set-date-time-range-value.text": "Custom date range",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",

package/lang/es-es.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "¡Crítico!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Borrar",
 	"components.filter.clearAll": "Borrar todo",
 	"components.filter.clearAllAnnounce": "Borrando todos los filtros",

package/lang/es.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "¡Crucial!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Borrar",
 	"components.filter.clearAll": "Borrar todo",
 	"components.filter.clearAllAnnounce": "Borrando todos los filtros",

package/lang/fr-fr.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critique !",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Effacer",
 	"components.filter.clearAll": "Tout effacer",
 	"components.filter.clearAllAnnounce": "Suppression de tous les filtres",

package/lang/fr.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Essentiel!",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Effacer",
 	"components.filter.clearAll": "Effacer tout",
 	"components.filter.clearAllAnnounce": "Effacement de tous les filtres en cours",

package/lang/hi.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "महत्वपूर्ण!",
 	"components.dropdown.close": "बंद करें",
 	"components.filter.activeFilters": "सक्रिय फ़िल्टर्स:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "साफ़ करें",
 	"components.filter.clearAll": "सभी साफ़ करें",
 	"components.filter.clearAllAnnounce": "सभी फिल्टर साफ़ किए जा रहे हैं",

package/lang/ja.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "重大です！",
 	"components.dropdown.close": "閉じる",
 	"components.filter.activeFilters": "アクティブフィルタ:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "クリア",
 	"components.filter.clearAll": "すべてをクリア",
 	"components.filter.clearAllAnnounce": "すべてのフィルタのクリア",

package/lang/ko.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "중요!",
 	"components.dropdown.close": "닫기",
 	"components.filter.activeFilters": "활성 필터:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "지우기",
 	"components.filter.clearAll": "모두 지우기",
 	"components.filter.clearAllAnnounce": "모든 필터 지우기",

package/lang/nl.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritiek!",
 	"components.dropdown.close": "Sluiten",
 	"components.filter.activeFilters": "Actieve filters:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Wissen",
 	"components.filter.clearAll": "Alles wissen",
 	"components.filter.clearAllAnnounce": "Alle filters wissen",

package/lang/pt.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Crítico!",
 	"components.dropdown.close": "Fechar",
 	"components.filter.activeFilters": "Filtros ativos:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Limpar",
 	"components.filter.clearAll": "Limpar tudo",
 	"components.filter.clearAllAnnounce": "Limpando todos os filtros",

package/lang/sv.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Viktigt!",
 	"components.dropdown.close": "Stäng",
 	"components.filter.activeFilters": "Aktiva filter:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Rensa",
 	"components.filter.clearAll": "Rensa alla",
 	"components.filter.clearAllAnnounce": "Rensar alla filter",

package/lang/tr.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritik!",
 	"components.dropdown.close": "Kapat",
 	"components.filter.activeFilters": "Etkin Filtreler:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Temizle",
 	"components.filter.clearAll": "Tümünü Temizle",
 	"components.filter.clearAllAnnounce": "Tüm filtreler temizleniyor",

package/lang/zh-cn.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "严重问题！",
 	"components.dropdown.close": "关闭",
 	"components.filter.activeFilters": "活动筛选器：",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "清除",
 	"components.filter.clearAll": "全部清除",
 	"components.filter.clearAllAnnounce": "清除所有筛选器",

package/lang/zh-tw.js

@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "重大！",
 	"components.dropdown.close": "關閉",
 	"components.filter.activeFilters": "啟用中的篩選器：",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "清除",
 	"components.filter.clearAll": "全部清除",
 	"components.filter.clearAllAnnounce": "正在清除所有篩選器",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.21.3",
+  "version": "3.22.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",