@brightspace-ui/core 3.219.5 → 3.219.7

package/components/dropdown/README.md

@@ -215,7 +215,6 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 | Property | Type | Description |
 |---|---|---|
 | `align` | String | Optionally align dropdown to either `start` or `end`. If not set, the dropdown will attempt to be centred. |
-| `boundary` | Object | Optionally provide boundaries to where the dropdown will appear. Valid properties are `"above"`, `"below"`, `"left"` and `"right"`. |
 | `max-height` | Number | Override default `max-height`. _Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed_ |
 | `min-height` | Number | Override default height used for required space when `no-auto-fit` is true. Specify a number that would be the px value. _Note that the default behaviour is to be as tall as necessary within the viewport, so this property is usually not needed._ |
 | `max-width` | Number | Override default `max-width` |

package/components/dropdown/dropdown-content.js

@@ -1,40 +1,12 @@
-import { DropdownPopoverMixin, usePopoverMixin } from './dropdown-popover-mixin.js';
-import { DropdownContentMixin } from './dropdown-content-mixin.js';
-import { dropdownContentStyles } from './dropdown-content-styles.js';
+import { DropdownPopoverMixin } from './dropdown-popover-mixin.js';
 import { LitElement } from 'lit';
 
-if (usePopoverMixin) {
-
-	/**
-	 * A generic container for dropdown content. It provides behavior such as sizing,  positioning, and managing focus gain/loss.
-	 * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
-	 * @slot header - Sticky container at the top of the dropdown
-	 * @slot footer - Sticky container at the bottom of the dropdown
-	 * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
-	 */
-	class DropdownContent extends DropdownPopoverMixin(LitElement) { }
-	customElements.define('d2l-dropdown-content', DropdownContent);
-
-} else {
-
-	/**
-	 * A generic container for dropdown content. It provides behavior such as sizing,  positioning, and managing focus gain/loss.
-	 * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
-	 * @slot header - Sticky container at the top of the dropdown
-	 * @slot footer - Sticky container at the bottom of the dropdown
-	 * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
-	 */
-	class DropdownContent extends DropdownContentMixin(LitElement) {
-
-		static get styles() {
-			return dropdownContentStyles;
-		}
-
-		render() {
-			return this._renderContent();
-		}
-
-	}
-	customElements.define('d2l-dropdown-content', DropdownContent);
-
-}
+/**
+ * A generic container for dropdown content. It provides behavior such as sizing,  positioning, and managing focus gain/loss.
+ * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
+ * @slot header - Sticky container at the top of the dropdown
+ * @slot footer - Sticky container at the bottom of the dropdown
+ * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
+ */
+class DropdownContent extends DropdownPopoverMixin(LitElement) { }
+customElements.define('d2l-dropdown-content', DropdownContent);

package/components/dropdown/dropdown-menu.js

@@ -1,364 +1,174 @@
 import { css, LitElement } from 'lit';
-import { DropdownPopoverMixin, usePopoverMixin } from './dropdown-popover-mixin.js';
-import { DropdownContentMixin } from './dropdown-content-mixin.js';
-import { dropdownContentStyles } from './dropdown-content-styles.js';
+import { DropdownPopoverMixin } from './dropdown-popover-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const dropdownDelay = 300;
 
-if (usePopoverMixin) {
-
-	/**
-	 * A container for a "d2l-menu". It provides additional support on top of "d2l-dropdown-content" for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.
-	 * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
-	 * @slot header - Sticky container at the top of the dropdown
-	 * @slot footer - Sticky container at the bottom of the dropdown
-	 * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
-	 */
-	class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) {
-
-		static get properties() {
-			return {
-				_closeRadio: { type: Boolean, reflect: true, attribute: '_close-radio' },
-			};
-		}
-
-		static get styles() {
-			return [super.styles, css`
-				:host {
-					--d2l-dropdown-close-animation-name: d2l-dropdown-close-animation;
-				}
-
-				:host([theme="dark"]) {
-					--d2l-dropdown-close-animation-name: d2l-dropdown-close-animation-dark;
-				}
-
-				:host([_close-radio]) {
-					animation: var(--d2l-dropdown-close-animation-name) ${dropdownDelay}ms ease-out;
-					animation-delay: 50ms;
-				}
-
-				@media (prefers-reduced-motion: reduce) {
-					:host([_close-radio]) {
-						animation: none !important;
-					}
-				}
-				@keyframes d2l-dropdown-close-animation {
-					0% { opacity: 1; transform: translate(0, 0); }
-					100% { opacity: 0; transform: translate(0, -10px); }
-				}
-
-				@keyframes d2l-dropdown-close-animation-dark {
-					0% { opacity: 0.9; transform: translate(0, 0); }
-					100% { opacity: 0; transform: translate(0, -10px); }
-				}
-			`];
-		}
-
-		constructor() {
-			super();
-			this.noAutoFocus = true;
-			this.noPadding = true;
-
-			this._closeRadio = false;
-			this.#initiallyOpenedSuppressFocus = false;
-			this.#maxHeightNonTray = this.maxHeight;
-		}
-
-		firstUpdated(changedProperties) {
-			super.firstUpdated(changedProperties);
-
-			if (this.opened) this.#initiallyOpenedSuppressFocus = true;
+/**
+ * A container for a "d2l-menu". It provides additional support on top of "d2l-dropdown-content" for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.
+ * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
+ * @slot header - Sticky container at the top of the dropdown
+ * @slot footer - Sticky container at the bottom of the dropdown
+ * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
+ */
+class DropdownMenu extends ThemeMixin(DropdownPopoverMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			_closeRadio: { type: Boolean, reflect: true, attribute: '_close-radio' },
+		};
+	}
 
-			this.#maxHeightNonTray = this.maxHeight;
-			if (this._mobile && this.mobileTray) {
-				this.maxHeight = null;
-			} else {
-				this.maxHeight = this.#maxHeightNonTray;
+	static get styles() {
+		return [super.styles, css`
+			:host {
+				--d2l-dropdown-close-animation-name: d2l-dropdown-close-animation;
 			}
 
-			this.addEventListener('animationend', this.#handleAnimationEnd);
-			this.addEventListener('d2l-dropdown-open', this.#handleOpen);
-			this.addEventListener('d2l-dropdown-close', this.#handleClose);
-			this.addEventListener('d2l-menu-resize', this.#handleMenuResize);
-			this.addEventListener('d2l-menu-item-select', this.#handleSelect);
-			this.addEventListener('d2l-selection-action-click', this.#handleSelect);
-			this.addEventListener('d2l-menu-item-change', this.#handleChange);
-			this.addEventListener('focus', this.#handleFocus);
-		}
-
-		#initializingHeight;
-		#initiallyOpenedSuppressFocus;
-		#maxHeightNonTray;
-
-		#getMenuElement() {
-			return this.shadowRoot?.querySelector('.dropdown-content > slot')
-				.assignedNodes()
-				.filter(node => node.hasAttribute && (node.getAttribute('role') === 'menu' || node.getAttribute('role') === 'listbox'))[0];
-		}
-
-		#handleAnimationEnd() {
-			if (!this._closeRadio) return;
-			this._closeRadio = false;
-			this.close();
-		}
-
-		#handleChange(e) {
-			if (e.target.getAttribute('role') !== 'menuitemradio') return;
-
-			if (reduceMotion) {
-				// Don't trigger the animation but still wait before closing the dropdown
-				setTimeout(() => {
-					this.close();
-				}, dropdownDelay);
-			} else {
-				this._closeRadio = true;
+			:host([theme="dark"]) {
+				--d2l-dropdown-close-animation-name: d2l-dropdown-close-animation-dark;
 			}
-		}
-
-		#handleClose(e) {
-			if (e.target !== this) return;
 
-			// reset to root view
-			const menu = this.#getMenuElement();
-			menu.show({ preventFocus: true });
-			menu.resetFocusables();
-		}
-
-		#handleFocus(e) {
-			// ignore focus events originating from inside dropdown content,
-			// such as the mobile tray close button, as to not move focus
-			if (e.srcElement === this) return;
-			this.#getMenuElement().focus();
-		}
-
-		#handleMenuResize(e) {
-
-			if (this._mobile && this.mobileTray) {
-				this.maxHeight = null;
-			} else {
-				this.maxHeight = this.#maxHeightNonTray;
+			:host([_close-radio]) {
+				animation: var(--d2l-dropdown-close-animation-name) ${dropdownDelay}ms ease-out;
+				animation-delay: 50ms;
 			}
 
-			this.position(e.detail, { updateLocation: this.#initializingHeight });
-			this.#initializingHeight = false;
-
-			const menu = this.#getMenuElement();
-			if (menu.getMenuType() === 'menu-radio') {
-				const selected = menu.querySelector('[selected]');
-				if (selected !== null) {
-					setTimeout(() => selected.scrollIntoView({ block: 'nearest' }), 0);
+			@media (prefers-reduced-motion: reduce) {
+				:host([_close-radio]) {
+					animation: none !important;
 				}
 			}
-		}
-
-		#handleOpen(e) {
-			if (e.target !== this) return;
-
-			this.#initializingHeight = true;
-			this._closeRadio = false;
-
-			const menu = this.#getMenuElement();
-			menu.resize();
-
-			// If dropdown-menu is opened on first render, do not focus
-			if (this.#initiallyOpenedSuppressFocus) this.#initiallyOpenedSuppressFocus = false;
-			else menu.focus();
-		}
-
-		#handleSelect(e) {
-			if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM', 'D2L-BUTTON-SPLIT-ITEM'].indexOf(e.target.tagName) < 0) {
-				return;
+			@keyframes d2l-dropdown-close-animation {
+				0% { opacity: 1; transform: translate(0, 0); }
+				100% { opacity: 0; transform: translate(0, -10px); }
 			}
-			this.close();
-		}
 
+			@keyframes d2l-dropdown-close-animation-dark {
+				0% { opacity: 0.9; transform: translate(0, 0); }
+				100% { opacity: 0; transform: translate(0, -10px); }
+			}
+		`];
 	}
-	customElements.define('d2l-dropdown-menu', DropdownMenu);
-
-} else {
-
-	/**
-	 * A container for a "d2l-menu". It provides additional support on top of "d2l-dropdown-content" for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.
-	 * @slot - Anything inside of "d2l-dropdown-content" that isn't in the "header" or "footer" slots appears as regular content
-	 * @slot header - Sticky container at the top of the dropdown
-	 * @slot footer - Sticky container at the bottom of the dropdown
-	 * @fires d2l-dropdown-open - Dispatched when the dropdown is opened
-	 */
-	class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
-
-		static get properties() {
-			return {
-				_closeRadio: {
-					type: Boolean,
-					reflect: true,
-					attribute: '_close-radio'
-				},
-			};
-		}
-
-		static get styles() {
-			return [
-				dropdownContentStyles,
-				css`
-					:host {
-						--d2l-dropdown-close-animation-name: d2l-dropdown-close-animation;
-					}
-
-					:host([theme="dark"]) {
-						--d2l-dropdown-close-animation-name: d2l-dropdown-close-animation-dark;
-					}
-
-					:host([_close-radio]) {
-						animation: var(--d2l-dropdown-close-animation-name) ${dropdownDelay}ms ease-out;
-						animation-delay: 50ms;
-					}
-
-					@media (prefers-reduced-motion: reduce) {
-						:host([_close-radio]) {
-							animation: none !important;
-						}
-					}
-					@keyframes d2l-dropdown-close-animation {
-						0% { opacity: 1; transform: translate(0, 0); }
-						100% { opacity: 0; transform: translate(0, -10px); }
-					}
-
-					@keyframes d2l-dropdown-close-animation-dark {
-						0% { opacity: 0.9; transform: translate(0, 0); }
-						100% { opacity: 0; transform: translate(0, -10px); }
-					}
-				`
-			];
-		}
 
-		constructor() {
-			super();
-			this.noAutoFocus = true;
-			this.noPadding = true;
-			this._closeRadio = false;
-			this._initiallyOpenedSuppressFocus = false;
-			this._maxHeightNonTray = this.maxHeight;
-		}
-
-		firstUpdated(changedProperties) {
-			super.firstUpdated(changedProperties);
-
-			if (this.opened) this._initiallyOpenedSuppressFocus = true;
+	constructor() {
+		super();
+		this.noAutoFocus = true;
+		this.noPadding = true;
 
-			this._maxHeightNonTray = this.maxHeight;
-			if (this._useMobileStyling && this.mobileTray) {
-				this.maxHeight = null;
-			} else {
-				this.maxHeight = this._maxHeightNonTray;
-			}
+		this._closeRadio = false;
+		this.#initiallyOpenedSuppressFocus = false;
+		this.#maxHeightNonTray = this.maxHeight;
+	}
 
-			this.addEventListener('animationend', this._onAnimationEnd);
-			this.addEventListener('d2l-dropdown-open', this._onOpen);
-			this.addEventListener('d2l-dropdown-close', this._onClose);
-			this.addEventListener('d2l-menu-resize', this._onMenuResize);
-			this.addEventListener('d2l-menu-item-select', this._onSelect);
-			this.addEventListener('d2l-selection-action-click', this._onSelect);
-			this.addEventListener('d2l-menu-item-change', this._onChange);
-			this.addEventListener('focus', this._onFocus);
-		}
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
 
-		render() {
-			return this._renderContent();
-		}
+		if (this.opened) this.#initiallyOpenedSuppressFocus = true;
 
-		__getMenuElement() {
-			return this.shadowRoot?.querySelector('.d2l-dropdown-content-slot')
-				.assignedElements({ flatten: true })
-				.filter(node => (node.getAttribute('role') === 'menu' || node.getAttribute('role') === 'listbox'))[0];
+		this.#maxHeightNonTray = this.maxHeight;
+		if (this._mobile && this.mobileTray) {
+			this.maxHeight = null;
+		} else {
+			this.maxHeight = this.#maxHeightNonTray;
 		}
 
-		_onAnimationEnd() {
-			if (!this._closeRadio) return;
-			this._closeRadio = false;
-			this.close();
-		}
+		this.addEventListener('animationend', this.#handleAnimationEnd);
+		this.addEventListener('d2l-dropdown-open', this.#handleOpen);
+		this.addEventListener('d2l-dropdown-close', this.#handleClose);
+		this.addEventListener('d2l-menu-resize', this.#handleMenuResize);
+		this.addEventListener('d2l-menu-item-select', this.#handleSelect);
+		this.addEventListener('d2l-selection-action-click', this.#handleSelect);
+		this.addEventListener('d2l-menu-item-change', this.#handleChange);
+		this.addEventListener('focus', this.#handleFocus);
+	}
 
-		_onChange(e) {
-			if (e.target.getAttribute('role') !== 'menuitemradio') {
-				return;
-			}
+	#initializingHeight;
+	#initiallyOpenedSuppressFocus;
+	#maxHeightNonTray;
 
-			if (reduceMotion) {
-				// Don't trigger the animation but still wait before closing the dropdown
-				setTimeout(() => {
-					this.close();
-				}, dropdownDelay);
-			} else {
-				this._closeRadio = true;
-			}
-		}
+	#getMenuElement() {
+		return this.shadowRoot?.querySelector('.dropdown-content > slot')
+			.assignedNodes()
+			.filter(node => node.hasAttribute && (node.getAttribute('role') === 'menu' || node.getAttribute('role') === 'listbox'))[0];
+	}
 
-		_onClose(e) {
+	#handleAnimationEnd() {
+		if (!this._closeRadio) return;
+		this._closeRadio = false;
+		this.close();
+	}
 
-			if (e.target !== this) {
-				return;
-			}
+	#handleChange(e) {
+		if (e.target.getAttribute('role') !== 'menuitemradio') return;
 
-			// reset to root view
-			const menu = this.__getMenuElement();
-			menu.show({ preventFocus: true });
-			menu.resetFocusables();
+		if (reduceMotion) {
+			// Don't trigger the animation but still wait before closing the dropdown
+			setTimeout(() => {
+				this.close();
+			}, dropdownDelay);
+		} else {
+			this._closeRadio = true;
 		}
+	}
 
-		_onFocus(e) {
-			// ignore focus events originating from inside dropdown content,
-			// such as the mobile tray close button, as to not move focus
-			if (e.srcElement === this) return;
-			this.__getMenuElement().focus();
-		}
+	#handleClose(e) {
+		if (e.target !== this) return;
 
-		_onMenuResize(e) {
+		// reset to root view
+		const menu = this.#getMenuElement();
+		menu.show({ preventFocus: true });
+		menu.resetFocusables();
+	}
 
-			if (this._useMobileStyling && this.mobileTray) {
-				this.maxHeight = null;
-			} else {
-				this.maxHeight = this._maxHeightNonTray;
-			}
+	#handleFocus(e) {
+		// ignore focus events originating from inside dropdown content,
+		// such as the mobile tray close button, as to not move focus
+		if (e.srcElement === this) return;
+		this.#getMenuElement().focus();
+	}
 
-			this.__position(e.detail, { updateAboveBelow: this._initializingHeight });
-			this._initializingHeight = false;
+	#handleMenuResize(e) {
 
-			const menu = this.__getMenuElement();
-			if (menu.getMenuType() === 'menu-radio') {
-				const selected = menu.querySelector('[selected]');
-				if (selected !== null) {
-					setTimeout(() => selected.scrollIntoView({ block: 'nearest' }), 0);
-				}
-			}
+		if (this._mobile && this.mobileTray) {
+			this.maxHeight = null;
+		} else {
+			this.maxHeight = this.#maxHeightNonTray;
 		}
 
-		_onOpen(e) {
+		this.position(e.detail, { updateLocation: this.#initializingHeight });
+		this.#initializingHeight = false;
 
-			if (e.target !== this) {
-				return;
+		const menu = this.#getMenuElement();
+		if (menu.getMenuType() === 'menu-radio') {
+			const selected = menu.querySelector('[selected]');
+			if (selected !== null) {
+				setTimeout(() => selected.scrollIntoView({ block: 'nearest' }), 0);
 			}
-			this._initializingHeight = true;
-			this._closeRadio = false;
+		}
+	}
 
-			const menu = this.__getMenuElement();
+	#handleOpen(e) {
+		if (e.target !== this) return;
 
-			menu.resize();
+		this.#initializingHeight = true;
+		this._closeRadio = false;
 
-			// If dropdown-menu is opened on first render, do not focus
-			if (this._initiallyOpenedSuppressFocus) this._initiallyOpenedSuppressFocus = false;
-			else menu.focus();
-		}
+		const menu = this.#getMenuElement();
+		menu.resize();
 
-		_onSelect(e) {
-			if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM', 'D2L-BUTTON-SPLIT-ITEM'].indexOf(e.target.tagName) < 0) {
-				return;
-			}
-			this.close();
-		}
+		// If dropdown-menu is opened on first render, do not focus
+		if (this.#initiallyOpenedSuppressFocus) this.#initiallyOpenedSuppressFocus = false;
+		else menu.focus();
+	}
 
+	#handleSelect(e) {
+		if (['D2L-MENU-ITEM', 'D2L-MENU-ITEM-LINK', 'D2L-SELECTION-ACTION-MENU-ITEM', 'D2L-BUTTON-SPLIT-ITEM'].indexOf(e.target.tagName) < 0) {
+			return;
+		}
+		this.close();
 	}
-	customElements.define('d2l-dropdown-menu', DropdownMenu);
 
 }
+customElements.define('d2l-dropdown-menu', DropdownMenu);

package/components/dropdown/dropdown-opener-mixin.js

@@ -1,12 +1,5 @@
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
-import { usePopoverMixin } from './dropdown-popover-mixin.js';
-
-const intersectionObserver = new IntersectionObserver(entries => {
-	entries.forEach(entry => {
-		entry.target.__updateContentVisibility(entry.isIntersecting);
-	});
-}, { threshold: 0 }); // 0-1 (0 -> intersection requires any pixel visible, 1 -> intersection requires all pixels visible)
 
 export const DropdownOpenerMixin = superclass => class extends superclass {
 
@@ -85,9 +78,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.addEventListener('mouseenter', this.__onMouseEnter);
 		this.addEventListener('mouseleave', this.__onMouseLeave);
 
-		if (this.dropdownOpened) {
-			intersectionObserver.observe(this);
-		}
 		if (this.openOnHover) {
 			document.body.addEventListener('mouseup', this._onOutsideClick);
 		}
@@ -101,8 +91,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		this.removeEventListener('mouseenter', this.__onMouseEnter);
 		this.removeEventListener('mouseleave', this.__onMouseLeave);
 
-		intersectionObserver.unobserve(this);
-
 		if (this.openOnHover) {
 			document.body.removeEventListener('mouseup', this._onOutsideClick);
 		}
@@ -195,8 +183,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	}
 
 	__onClosed() {
-		intersectionObserver.unobserve(this);
-
 		if (!this._setOpenerElementAttribute(false, true)) return;
 		this.dropdownOpened = false;
 		this._isOpenedViaClick = false;
@@ -231,8 +217,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		// do not respond to hover events on mobile screens
 		const dropdownContent = this.__getContentElement();
 
-		if (usePopoverMixin && dropdownContent._mobile) return;
-		else if (!usePopoverMixin && dropdownContent._useMobileStyling) return; // Flag cleanup: GAUD-7472-dropdown-popover
+		if (dropdownContent._mobile) return;
 
 		clearTimeout(this._dismissTimerId);
 		if (!this.dropdownOpened) await this.openDropdown(false);
@@ -245,8 +230,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		// do not respond to hover events on mobile screens
 		const dropdownContent = this.__getContentElement();
 
-		if (usePopoverMixin && dropdownContent._mobile) return;
-		else if (!usePopoverMixin && dropdownContent._useMobileStyling) return; // Flag cleanup: GAUD-7472-dropdown-popover
+		if (dropdownContent._mobile) return;
 
 		this._isHovering = false;
 		if (this._isOpenedViaClick) return;
@@ -266,8 +250,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	__onOpened() {
 		if (!this._setOpenerElementAttribute(true, true)) return;
 		this._isFading = false;
-
-		intersectionObserver.observe(this);
 	}
 
 	__onOpenerMouseUp(e) {
@@ -291,12 +273,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 	}
 
-	__updateContentVisibility(visible) {
-		if (!usePopoverMixin) {
-			this.__getContentElement().offscreen = !visible; // Flag cleanup: GAUD-7472-dropdown-popover
-		}
-	}
-
 	/* used by open-on-hover option */
 	_closeTimerStart() {
 		if (this.dropdownOpened) return;
@@ -322,9 +298,8 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		const isWithinDropdown = isComposedAncestor(dropdownContent, e.composedPath()[0]);
 		const isWithinOpener = isComposedAncestor(this.getOpenerElement(), e.composedPath()[0]);
 
-		// Flag cleanup: GAUD-7472-dropdown-popover
 		const isBackdropClick = isWithinDropdown
-			&& ((!usePopoverMixin && dropdownContent._useMobileStyling) || (usePopoverMixin && dropdownContent._mobile))
+			&& dropdownContent._mobile
 			&& e.composedPath().find(node => node.nodeName === 'D2L-BACKDROP');
 
 		if (!isWithinOpener && (!isWithinDropdown || isBackdropClick)) {

package/components/dropdown/dropdown-popover-mixin.js

@@ -1,13 +1,12 @@
+import '../button/button.js';
+import '../../helpers/visualReady.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PopoverMixin } from '../popover/popover-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-export const usePopoverMixin = getFlag('GAUD-7472-dropdown-popover', true);
-
 export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElement(PopoverMixin(superclass)) {
 
 	static get properties() {
@@ -276,10 +275,6 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 		super.open(opener, applyFocus);
 	}
 
-	// todo: remove this method when removing GAUD-7472-dropdown-popover flag (d2l-filter calls this)
-	requestRepositionNextResize() {
-	}
-
 	/**
 	 * Private.
 	 */