@brightspace-ui/core 2.38.3 → 2.39.0

package/components/overflow-group/README.md

@@ -1,5 +1,5 @@
 # Overflow Groups
-The `d2l-overflow-group` element can be used to add responsiveness to a set of buttons, links or menus. 
+The `d2l-overflow-group` element can be used to add responsiveness to a set of buttons, links or menus. The `OverflowGroupMixin` allows for using the chomping logic without having to use those specific element types.
 
 <!-- docs: demo autoSize:false display:block size:medium -->
 ```html
@@ -70,3 +70,41 @@ Items added to this container element will no longer wrap onto a second line whe
 
 Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->
+
+## OverflowGroupMixin
+This mixin allows for creation of an overflow group that handles chomping when using elements that are not buttons, links, or menus, or when wanting an overflow container that is not a `d2l-dropdown`.
+
+### How to Use
+
+**Import:**
+```javascript
+import { OverflowGroupMixin } from '@brightspace-ui/core/components/overflow-group/overflow-group-mixin.js';
+
+class OtherOverflowGroup extends OverflowGroupMixin(LitElement) {
+...
+```
+
+**Styles:**
+
+```javascript
+static get styles() {
+  return [ super.styles ];
+}
+```
+
+**Functionality:**
+
+The functions `getOverflowContainer` and `convertToOverflowItem` need to be implemented by consumers of the mixin.
+
+```javascript
+convertToOverflowItem(node) {
+  // return html of overflow item. For example:
+  return html`<d2l-menu-item text="${node.text}"></d2l-menu-item>`;
+}
+
+getOverflowContainer(overflowItems, mini) {
+  // return html of overflow menu. "mini" specifies if smaller menu option should be used, where applicable. For example:
+  if (mini) html`<d2l-dropdown-context-menu text="Overflow Menu"><d2l-dropdown-menu>${overflowItems}</d2l-dropdown-menu></d2l-dropdown-context-menu>`;
+  else return html`<d2l-dropdown-button text="Overflow Menu"><d2l-dropdown-menu>${overflowItems}</d2l-dropdown-menu></d2l-dropdown-button>`;
+}
+```

package/components/overflow-group/overflow-group-mixin.js

@@ -0,0 +1,344 @@
+import { css, html, nothing } from 'lit';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { offscreenStyles } from '../offscreen/offscreen.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
+
+export const OVERFLOW_CLASS = 'd2l-overflow-container';
+export const OVERFLOW_MINI_CLASS = 'd2l-overflow-container-mini';
+
+const AUTO_SHOW_CLASS = 'd2l-button-group-show';
+const AUTO_NO_SHOW_CLASS = 'd2l-button-group-no-show';
+
+const OPENER_TYPE = {
+	DEFAULT: 'default',
+	ICON: 'icon'
+};
+
+async function filterAsync(arr, callback) {
+	const fail = Symbol();
+	const results = await Promise.all(arr.map(async item => {
+		const callbackResult = await callback(item);
+		return callbackResult ? item : fail;
+	}));
+	return results.filter(i => i !== fail);
+}
+
+export const OverflowGroupMixin = superclass => class extends LocalizeCoreElement(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * Use predefined classes on slot elements to set min and max slotted items to show
+			 * @type {boolean}
+			 */
+			autoShow: {
+				type: Boolean,
+				attribute: 'auto-show',
+			},
+			/**
+			 * minimum amount of slotted items to show
+			 * @type {number}
+			 */
+			minToShow: {
+				type: Number,
+				reflect: true,
+				attribute: 'min-to-show',
+			},
+			/**
+			 * maximum amount of slotted items to show
+			 * @type {number}
+			 */
+			maxToShow: {
+				type: Number,
+				reflect: true,
+				attribute: 'max-to-show',
+			},
+			/**
+			 * @ignore
+			 */
+			openerType: {
+				type: String,
+				attribute: 'opener-type'
+			},
+			_chompIndex: {
+				state: true
+			},
+			_mini: {
+				state: true
+			}
+		};
+	}
+
+	static get styles() {
+		return [offscreenStyles, css`
+			:host {
+				display: block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.d2l-overflow-group-container {
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: var(--d2l-overflow-group-justify-content, normal);
+			}
+			.d2l-overflow-group-container ::slotted([data-is-chomped]) {
+				display: none !important;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+
+		this._handleItemMutation = this._handleItemMutation.bind(this);
+		this._handleResize = this._handleResize.bind(this);
+		this._resizeObserver = new ResizeObserver((entries) => requestAnimationFrame(() => this._handleResize(entries)));
+
+		this._isObserving = false;
+		this._mini = this.openerType === OPENER_TYPE.ICON;
+		this._overflowContainerHidden = false;
+		this._slotItems = [];
+
+		this.autoShow = false;
+		this.maxToShow = -1;
+		this.minToShow = 1;
+		this.openerType = OPENER_TYPE.DEFAULT;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		if (this._isObserving) {
+			this._isObserving = false;
+			this._resizeObserver.disconnect();
+		}
+	}
+
+	render() {
+		const chompedOverflowItems = this._overflowItems ? this._overflowItems.slice(this._chompIndex) : [];
+		const overflowContainer = (!this._overflowContainerHidden && this._overflowItems)
+			? this.getOverflowContainer(chompedOverflowItems, this._mini)
+			: nothing;
+
+		this._slotItems.forEach((element, index) => {
+			if (!this._overflowContainerHidden && index >= this._chompIndex) {
+				element.setAttribute('data-is-chomped', '');
+			} else {
+				element.removeAttribute('data-is-chomped');
+			}
+		});
+
+		return html`
+			<div class="d2l-overflow-group-container">
+				<slot @slotchange="${this._handleSlotChange}"></slot>
+				${overflowContainer}
+			</div>
+		`;
+	}
+
+	update(changedProperties) {
+		super.update(changedProperties);
+
+		if (!this._isObserving) {
+			this._isObserving = true;
+			this._resizeObserver.observe(this.shadowRoot.querySelector('.d2l-overflow-group-container'));
+		}
+
+		if (changedProperties.has('autoShow') && this.autoShow) {
+			this._autoDetectBoundaries(this._slotItems);
+		}
+
+		if (changedProperties.has('minToShow')
+			|| changedProperties.has('maxToShow')) {
+			this._chomp();
+		}
+
+		// Slight hack to get the overflow container width the first time it renders
+		if (!this._overflowContainerWidth) {
+			// this action needs to be deferred until first render of our overflow container
+			requestAnimationFrame(() => {
+				this._chomp();
+			});
+		}
+	}
+
+	_autoDetectBoundaries(items) {
+		if (!items) return;
+
+		let minToShow, maxToShow;
+		for (let i = 0; i < items.length; i++) {
+			if (!items[i].classList) continue;
+
+			if (items[i].classList.contains(AUTO_SHOW_CLASS)) {
+				minToShow = i + 1;
+			}
+			if (maxToShow === undefined && items[i].classList.contains(AUTO_NO_SHOW_CLASS)) {
+				maxToShow = i;
+			}
+		}
+
+		if (minToShow !== undefined) {
+			this.minToShow = minToShow;
+		}
+		if (maxToShow !== undefined) {
+			this.maxToShow = maxToShow;
+		}
+	}
+
+	_chomp() {
+		if (!this.shadowRoot || !this._itemLayouts) return;
+
+		this._overflowContainer = this.shadowRoot.querySelector(`.${OVERFLOW_CLASS}`);
+		this._overflowContainerMini = this.shadowRoot.querySelector(`.${OVERFLOW_MINI_CLASS}`);
+		if (this.openerType === OPENER_TYPE.ICON && this._overflowContainerMini) {
+			this._overflowContainerWidth = this._overflowContainerMini.offsetWidth;
+		} else if (this._overflowContainer) {
+			this._overflowContainerWidth = this._overflowContainer.offsetWidth;
+		}
+
+		const showing = {
+			count: 0,
+			width: 0
+		};
+
+		let isSoftOverflowing, isForcedOverflowing;
+		for (let i = 0; i < this._itemLayouts.length; i++) {
+			const itemLayout = this._itemLayouts[i];
+
+			// handle minimum items to show
+			if (showing.count < this.minToShow) {
+				showing.width += itemLayout.width;
+				showing.count += 1;
+				itemLayout.trigger = 'force-show';
+				itemLayout.isChomped = false;
+				continue;
+			}
+
+			// handle maximum items to show
+			if (this.maxToShow >= 0 && showing.count >= this.maxToShow) {
+				isForcedOverflowing = true;
+				itemLayout.isChomped = true;
+				itemLayout.trigger = 'force-hide';
+				continue;
+			}
+
+			// chomp or unchomp based on space available, and we've already handled min/max above
+			if (!isSoftOverflowing && showing.width + itemLayout.width < this._availableWidth) {
+				showing.width += itemLayout.width;
+				showing.count += 1;
+				itemLayout.isChomped = false;
+				itemLayout.trigger = 'soft-show';
+
+			} else {
+				isSoftOverflowing = true;
+				itemLayout.isChomped = true;
+				itemLayout.trigger = 'soft-hide';
+
+			}
+
+		}
+		// if there is at least one showing and no more to be hidden, enable collapsing overflow container to mini overflow container
+		this._overflowContainerHidden = this._itemLayouts.length === showing.count;
+		if (!this._overflowContainerHidden && (isSoftOverflowing || isForcedOverflowing)) {
+			for (let j = this._itemLayouts.length; j--;) {
+				if (showing.width + this._overflowContainerWidth < this._availableWidth) {
+					break;
+				}
+				const itemLayoutOverflowing = this._itemLayouts[j];
+				if (itemLayoutOverflowing.trigger !== 'soft-show') {
+					continue;
+				}
+				showing.width -= itemLayoutOverflowing.width;
+				showing.count -= 1;
+				isSoftOverflowing = true;
+				itemLayoutOverflowing.trigger = 'soft-hide';
+				itemLayoutOverflowing.isChomped = true;
+			}
+		}
+		const overflowOverflowing = (showing.width + this._overflowContainerWidth >= this._availableWidth);
+		const swapToMini = overflowOverflowing && !this._overflowContainerHidden;
+
+		this._mini = this.openerType === OPENER_TYPE.ICON || swapToMini;
+		this._chompIndex = this._overflowContainerHidden ? null : showing.count;
+
+		/** Dispatched when there is an update performed to the overflow group */
+		this.dispatchEvent(new CustomEvent('d2l-overflow-group-updated', { composed: false, bubbles: true }));
+	}
+
+	_getItemLayouts(filteredNodes) {
+		const items = filteredNodes.map((node) => {
+			const computedStyles = window.getComputedStyle(node);
+
+			return {
+				type: node.tagName.toLowerCase(),
+				isChomped: false,
+				isHidden: computedStyles.display === 'none',
+				width: Math.ceil(parseFloat(computedStyles.width) || 0)
+					+ parseInt(computedStyles.marginRight) || 0
+					+ parseInt(computedStyles.marginLeft) || 0,
+				node: node
+			};
+		});
+
+		return items.filter(({ isHidden }) => !isHidden);
+	}
+
+	async _getItems() {
+		// get the items from the slot
+		this._slotItems = await this._getSlotItems();
+		// convert them to layout items (calculate widths)
+		this._itemLayouts = this._getItemLayouts(this._slotItems);
+		// convert to overflow items (for overflow container)
+		this._overflowItems = this._slotItems.map((node) => this.convertToOverflowItem(node));
+	}
+
+	async _getSlotItems() {
+		const filteredNodes = await filterAsync(this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true }), async(node) => {
+			if (node.nodeType !== Node.ELEMENT_NODE) return false;
+			if (node.updateComplete) await node.updateComplete;
+			return node.tagName.toLowerCase() !== 'template';
+		});
+
+		return filteredNodes;
+	}
+
+	_handleItemMutation(mutations) {
+		if (!mutations || mutations.length === 0) return;
+		if (this._updateOverflowItemsRequested) return;
+
+		this._updateOverflowItemsRequested = true;
+		setTimeout(() => {
+			this._overflowItems = this._slotItems.map(node => this.convertToOverflowItem(node));
+			this._updateOverflowItemsRequested = false;
+			this.requestUpdate();
+		}, 0);
+	}
+
+	_handleResize(entries) {
+		this._availableWidth = Math.ceil(entries[0].contentRect.width);
+		this._chomp();
+	}
+
+	_handleSlotChange() {
+		requestAnimationFrame(async() => {
+			await this._getItems();
+
+			this._slotItems.forEach(item => {
+				const observer = new MutationObserver(this._handleItemMutation);
+				observer.observe(item, {
+					attributes: true, /* required for legacy-Edge, otherwise attributeFilter throws a syntax error */
+					attributeFilter: ['disabled', 'text', 'selected'],
+					childList: false,
+					subtree: true
+				});
+			});
+
+			if (this.autoShow) {
+				this._autoDetectBoundaries(this._slotItems);
+			}
+
+			this._chomp();
+		});
+	}
+};

package/components/overflow-group/overflow-group.js

@@ -11,20 +11,10 @@ import '../menu/menu-item.js';
 import '../menu/menu-item-separator.js';
 import '../menu/menu-item-link.js';
 import { css, html, LitElement } from 'lit';
+import { OVERFLOW_CLASS, OVERFLOW_MINI_CLASS, OverflowGroupMixin } from './overflow-group-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { offscreenStyles } from '../offscreen/offscreen.js';
-import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
-const AUTO_SHOW_CLASS = 'd2l-button-group-show';
-const AUTO_NO_SHOW_CLASS = 'd2l-button-group-no-show';
-
-const OPENER_TYPE = {
-	DEFAULT: 'default',
-	ICON: 'icon'
-};
-
 const OPENER_STYLE = {
 	DEFAULT: 'default',
 	SUBTLE: 'subtle',
@@ -61,140 +51,36 @@ function createMenuItemSeparator() {
 	return html`<d2l-menu-item-separator></d2l-menu-item-separator>`;
 }
 
-function createMenuItemMenu(node) {
-	const menuOpener =
-		node.querySelector('d2l-dropdown-button')
-		||  node.querySelector('d2l-dropdown-button-subtle');
-
-	const openerText = node.text || menuOpener.text;
-	const disabled = !!node.disabled;
-	const subMenu = node.querySelector('d2l-menu');
-
-	const subItems = Array.from(subMenu.children).map((node) => convertToDropdownItem(node));
-
-	return html`<d2l-menu-item
-		?disabled=${disabled}
-		text="${openerText}">
-		<d2l-menu>
-			${subItems}
-		</d2l-menu>
-	</d2l-menu-item>`;
-}
-
-function convertToDropdownItem(node) {
-	const tagName = node.tagName.toLowerCase();
-	switch (tagName) {
-		case 'd2l-button':
-		case 'd2l-button-subtle':
-		case 'button':
-		case 'd2l-button-icon':
-		case 'd2l-selection-action':
-			return createMenuItem(node);
-		case 'a':
-		case 'd2l-link':
-			return createMenuItemLink(node);
-		case 'd2l-menu':
-		case 'd2l-dropdown':
-		case 'd2l-dropdown-button':
-		case 'd2l-dropdown-button-subtle':
-		case 'd2l-dropdown-context-menu':
-		case 'd2l-dropdown-more':
-		case 'd2l-selection-action-dropdown':
-			return createMenuItemMenu(node);
-		case 'd2l-menu-item':
-		case 'd2l-selection-action-menu-item':
-			// if the menu item has children treat it as a menu item menu
-			if (node.children.length > 0) {
-				return createMenuItemMenu(node);
-			} else {
-				return createMenuItem(node);
-			}
-	}
-	if (node.getAttribute('role') === 'separator') {
-		return createMenuItemSeparator();
-	}
-}
-
 /**
  *
  * A component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container
  * @slot - Buttons, dropdown buttons, links or other items to be added to the container
- * @fires d2l-overflow-group-updated - Dispatched when there is an update performed to the overflow group
+ * @attr {'default'|'icon'} [opener-type="default"] - Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text
 */
-class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
+class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 
 	static get properties() {
 		return {
-			/**
-			 * Use predefined classes on slot elements to set min and max buttons to show
-			 * @type {boolean}
-			 */
-			autoShow: {
-				type: Boolean,
-				attribute: 'auto-show',
-			},
-			/**
-			 * minimum amount of buttons to show
-			 * @type {number}
-			 */
-			minToShow: {
-				type: Number,
-				reflect: true,
-				attribute: 'min-to-show',
-			},
-			/**
-			 * maximum amount of buttons to show
-			 * @type {number}
-			 */
-			maxToShow: {
-				type: Number,
-				reflect: true,
-				attribute: 'max-to-show',
-			},
-			/**
-			 * Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text
-			 * @type {'default'|'icon'}
-			 */
-			openerType: {
-				type: String,
-				attribute: 'opener-type'
-			},
 			/**
 			 * Setting this property will change the style of the overflow menu opener
 			 * @type {'default'|'subtle'}
+			 * @default "default"
 			 */
 			openerStyle: {
 				type: String,
 				reflect: true,
 				attribute: 'opener-style',
-			},
-			_mini: {
-				type: Boolean,
-				reflect: true
-			},
-			_chompIndex: {
-				type: Number,
 			}
 		};
 	}
 
 	static get styles() {
-		return [offscreenStyles, css`
-			:host {
-				display: block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
+		return [super.styles, css`
 			:host([opener-style="subtle"]) {
 				--d2l-button-icon-fill-color: var(--d2l-color-celestine);
 				--d2l-button-icon-fill-color-hover: var(--d2l-color-celestine-minus-1);
 			}
-			.d2l-overflow-group-container {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: var(--d2l-overflow-group-justify-content, normal);
-			}
+
 			::slotted(d2l-button),
 			::slotted(d2l-link),
 			::slotted(span),
@@ -229,291 +115,93 @@ class OverflowGroup extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				margin-left: 0.2rem;
 				margin-right: 0;
 			}
-			.d2l-overflow-group-container ::slotted([data-is-chomped]) {
-				display: none !important;
-			}
 		`];
 	}
 
 	constructor() {
 		super();
-		this._handleItemMutation = this._handleItemMutation.bind(this);
-		this._handleResize = this._handleResize.bind(this);
-
-		this._throttledResize = (entries) => requestAnimationFrame(() => this._handleResize(entries));
-
-		this._overflowHidden = false;
-		this.autoShow = false;
-		this.maxToShow = -1;
-		this.minToShow = 1;
 		this.openerStyle = OPENER_STYLE.DEFAULT;
-		this.openerType = OPENER_TYPE.DEFAULT;
-		this._mini = this.openerType === OPENER_TYPE.ICON;
-		this._resizeObserver = null;
-		this._slotItems = [];
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this._resizeObserver) this._resizeObserver.disconnect();
 	}
 
-	async firstUpdated() {
-		super.firstUpdated();
-
-		// selected elements
-		this._buttonSlot = this.shadowRoot.querySelector('slot');
-
-		this._container = this.shadowRoot.querySelector('.d2l-overflow-group-container');
-
-		this._resizeObserver = new ResizeObserver(this._throttledResize);
-		this._resizeObserver.observe(this._container);
-	}
-
-	render() {
-		const overflowMenu = this._getOverflowMenu();
-
-		this._slotItems.forEach((element, index) => {
-			if (!this._overflowMenuHidden && index >= this._chompIndex) {
-				element.setAttribute('data-is-chomped', '');
-			} else {
-				element.removeAttribute('data-is-chomped');
-			}
-		});
-
-		return html`
-			<div class="d2l-overflow-group-container">
-				<slot @slotchange="${this._handleSlotChange}"></slot>
-				${overflowMenu}
-			</div>
-		`;
-	}
-
-	update(changedProperties) {
-		super.update(changedProperties);
-
-		if (changedProperties.get('autoShow')) {
-			this._getItemLayouts(this._slotItems);
-			this._autoDetectBoundaries(this._itemLayouts);
-		}
-
-		if (changedProperties.get('minToShow')
-			|| changedProperties.get('maxToShow')) {
-			this._chomp();
-		}
-
-		// Slight hack to get the overflow menu width the first time it renders
-		if (!this._overflowMenuWidth) {
-			// this action needs to be deferred until first render of our overflow button
-			requestAnimationFrame(() => {
-				this._chomp();
-			});
-		}
-	}
-
-	_autoDetectBoundaries(items) {
-
-		let minToShow, maxToShow;
-		for (let i = 0; i < items.length; i++) {
-			if (items[i].classList.contains(AUTO_SHOW_CLASS)) {
-				minToShow = i + 1;
-			}
-			if (maxToShow === undefined && items[i].classList.contains(AUTO_NO_SHOW_CLASS)) {
-				maxToShow = i;
-			}
-		}
-
-		if (minToShow !== undefined) {
-			this.minToShow = minToShow;
-		}
-		if (maxToShow !== undefined) {
-			this.maxToShow = maxToShow;
-		}
-	}
-
-	_chomp() {
-		if (!this.shadowRoot || !this._itemLayouts) return;
-
-		this._overflowMenu = this.shadowRoot.querySelector('.d2l-overflow-dropdown');
-		this._overflowMenuMini = this.shadowRoot.querySelector('.d2l-overflow-dropdown-mini');
-		if (this.openerType === OPENER_TYPE.ICON && this._overflowMenuMini) {
-			this._overflowMenuWidth = this._overflowMenuMini.offsetWidth;
-		} else if (this._overflowMenu) {
-			this._overflowMenuWidth = this._overflowMenu.offsetWidth;
-		}
-
-		const showing = {
-			count: 0,
-			width: 0
-		};
-
-		let isSoftOverflowing, isForcedOverflowing;
-		for (let i = 0; i < this._itemLayouts.length; i++) {
-			const itemLayout = this._itemLayouts[i];
-
-			// handle minimum items to show
-			if (showing.count < this.minToShow) {
-				showing.width += itemLayout.width;
-				showing.count += 1;
-				itemLayout.trigger = 'force-show';
-				itemLayout.isChomped = false;
-				continue;
-			}
-
-			// handle maximum items to show
-			if (this.maxToShow >= 0 && showing.count >= this.maxToShow) {
-				isForcedOverflowing = true;
-				itemLayout.isChomped = true;
-				itemLayout.trigger = 'force-hide';
-				continue;
-			}
-
-			// chomp or unchomp based on space available, and we've already handled min/max above
-			if (!isSoftOverflowing && showing.width + itemLayout.width < this._availableWidth) {
-				showing.width += itemLayout.width;
-				showing.count += 1;
-				itemLayout.isChomped = false;
-				itemLayout.trigger = 'soft-show';
-
-			} else {
-				isSoftOverflowing = true;
-				itemLayout.isChomped = true;
-				itemLayout.trigger = 'soft-hide';
-
-			}
-
-		}
-		// if there is at least one showing and no more to be hidden, enable collapsing more button to [...]
-		this._overflowMenuHidden = this._itemLayouts.length === showing.count;
-		if (!this._overflowMenuHidden && (isSoftOverflowing || isForcedOverflowing)) {
-			for (let j = this._itemLayouts.length; j--;) {
-				if (showing.width + this._overflowMenuWidth < this._availableWidth) {
-					break;
-				}
-				const itemLayoutOverflowing = this._itemLayouts[j];
-				if (itemLayoutOverflowing.trigger !== 'soft-show') {
-					continue;
+	convertToOverflowItem(node) {
+		const tagName = node.tagName.toLowerCase();
+		switch (tagName) {
+			case 'd2l-button':
+			case 'd2l-button-subtle':
+			case 'button':
+			case 'd2l-button-icon':
+			case 'd2l-selection-action':
+				return createMenuItem(node);
+			case 'a':
+			case 'd2l-link':
+				return createMenuItemLink(node);
+			case 'd2l-menu':
+			case 'd2l-dropdown':
+			case 'd2l-dropdown-button':
+			case 'd2l-dropdown-button-subtle':
+			case 'd2l-dropdown-context-menu':
+			case 'd2l-dropdown-more':
+			case 'd2l-selection-action-dropdown':
+				return this._createMenuItemMenu(node);
+			case 'd2l-menu-item':
+			case 'd2l-selection-action-menu-item':
+				// if the menu item has children treat it as a menu item menu
+				if (node.children.length > 0) {
+					return this._createMenuItemMenu(node);
+				} else {
+					return createMenuItem(node);
 				}
-				showing.width -= itemLayoutOverflowing.width;
-				showing.count -= 1;
-				isSoftOverflowing = true;
-				itemLayoutOverflowing.trigger = 'soft-hide';
-				itemLayoutOverflowing.isChomped = true;
-			}
 		}
-		const overflowDropdownOverflowing = (showing.width + this._overflowMenuWidth >= this._availableWidth);
-		const swapToMiniButton = overflowDropdownOverflowing && !this._overflowMenuHidden;
-
-		this._mini = this.openerType === OPENER_TYPE.ICON || swapToMiniButton;
-		this._chompIndex = this._overflowMenuHidden ? null : showing.count;
-
-		this.dispatchEvent(new CustomEvent('d2l-overflow-group-updated', { composed: false, bubbles: true }));
-	}
-
-	_getItemLayouts(filteredNodes) {
-		const items = filteredNodes.map((node) => {
-			const computedStyles = window.getComputedStyle(node);
-
-			return {
-				type: node.tagName.toLowerCase(),
-				isChomped: false,
-				isHidden: computedStyles.display === 'none',
-				width: Math.ceil(parseFloat(computedStyles.width) || 0)
-					+ parseInt(computedStyles.marginRight) || 0
-					+ parseInt(computedStyles.marginLeft) || 0,
-				node: node
-			};
-		});
-
-		return items.filter(({ isHidden }) => !isHidden);
-	}
-
-	_getItems() {
-		// get the items from the button slot
-		this._slotItems = this._getSlotItems();
-		// convert them to layout items (calculate widths)
-		this._itemLayouts = this._getItemLayouts(this._slotItems);
-		// convert to dropdown items (for overflow menu)
-		this._dropdownItems = this._slotItems.map((node) => convertToDropdownItem(node));
+		if (node.getAttribute('role') === 'separator') {
+			return createMenuItemSeparator();
+		}
 	}
 
-	_getOverflowMenu() {
-		if (this._overflowMenuHidden) {
-			return;
-		}
+	getOverflowContainer(overflowItems, mini) {
 		const moreActionsText = this.localize('components.overflow-group.moreActions');
-		const overflowItems = this._dropdownItems ? this._dropdownItems.slice(this._chompIndex) : [];
 		const menu = html`<d2l-dropdown-menu>
 			<d2l-menu label="${moreActionsText}">
 				${overflowItems}
 			</d2l-menu>
 		</d2l-dropdown-menu>`;
 
-		if (this._mini) {
-			return html`<d2l-dropdown-more class="d2l-overflow-dropdown-mini" text="${moreActionsText}">
+		if (mini) {
+			return html`<d2l-dropdown-more class="${OVERFLOW_MINI_CLASS} d2l-overflow-dropdown-mini" text="${moreActionsText}">
 				${menu}
 			</d2l-dropdown-more>`;
 		}
 
 		if (this.openerStyle === OPENER_STYLE.SUBTLE) {
-			return html`<d2l-dropdown-button-subtle class="d2l-overflow-dropdown" text="${moreActionsText}">
+			return html`<d2l-dropdown-button-subtle class="${OVERFLOW_CLASS} d2l-overflow-dropdown" text="${moreActionsText}">
 				${menu}
 			</d2l-dropdown-button-subtle>`;
 		}
 
-		return html`<d2l-dropdown-button class="d2l-overflow-dropdown" text="${moreActionsText}">
+		return html`<d2l-dropdown-button class="${OVERFLOW_CLASS} d2l-overflow-dropdown" text="${moreActionsText}">
 			${menu}
 		</d2l-dropdown-button>`;
 	}
 
-	_getSlotItems() {
-		const nodes = this._buttonSlot.assignedNodes({ flatten: true });
-		const filteredNodes = nodes.filter((node) => {
-			const isNode = node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() !== 'template';
-			return isNode;
-		});
+	_createMenuItemMenu(node) {
+		const menuOpener =
+			node.querySelector('d2l-dropdown-button')
+			||  node.querySelector('d2l-dropdown-button-subtle');
 
-		return filteredNodes;
-	}
-
-	_handleItemMutation(mutations) {
-		if (!mutations || mutations.length === 0) return;
-		if (this._updateDropdownItemsRequested) return;
+		const openerText = node.text || menuOpener.text;
+		const disabled = !!node.disabled;
+		const subMenu = node.querySelector('d2l-menu');
 
-		this._updateDropdownItemsRequested = true;
-		setTimeout(() => {
-			this._dropdownItems = this._slotItems.map(node => convertToDropdownItem(node));
-			this._updateDropdownItemsRequested = false;
-			this.requestUpdate();
-		}, 0);
-	}
+		const subItems = Array.from(subMenu.children).map((node) => this.convertToOverflowItem(node));
 
-	_handleResize(entries) {
-		this._availableWidth = Math.ceil(entries[0].contentRect.width);
-		this._chomp();
+		return html`<d2l-menu-item
+			?disabled=${disabled}
+			text="${openerText}">
+			<d2l-menu>
+				${subItems}
+			</d2l-menu>
+		</d2l-menu-item>`;
 	}
 
-	_handleSlotChange() {
-		requestAnimationFrame(() => {
-			this._getItems();
-
-			this._slotItems.forEach(item => {
-				const observer = new MutationObserver(this._handleItemMutation);
-				observer.observe(item, {
-					attributes: true, /* required for legacy-Edge, otherwise attributeFilter throws a syntax error */
-					attributeFilter: ['disabled', 'text'],
-					childList: false,
-					subtree: false
-				});
-			});
-
-			if (this.autoShow) {
-				this._autoDetectBoundaries(this._slotItems);
-			}
-
-			this._chomp();
-		});
-	}
 }
 
 customElements.define('d2l-overflow-group', OverflowGroup);

package/custom-elements.json

@@ -8760,71 +8760,69 @@
       "path": "./components/overflow-group/overflow-group.js",
       "description": "\nA component that can be used to display a set of buttons, links or menus that will be put into a dropdown menu when they no longer fit on the first line of their container",
       "attributes": [
+        {
+          "name": "opener-style",
+          "description": "Setting this property will change the style of the overflow menu opener",
+          "type": "'default'|'subtle'",
+          "default": "\"\\\"default\\\"\""
+        },
         {
           "name": "auto-show",
-          "description": "Use predefined classes on slot elements to set min and max buttons to show",
+          "description": "Use predefined classes on slot elements to set min and max slotted items to show",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "max-to-show",
-          "description": "maximum amount of buttons to show",
+          "description": "maximum amount of slotted items to show",
           "type": "number",
           "default": "-1"
         },
         {
           "name": "min-to-show",
-          "description": "minimum amount of buttons to show",
+          "description": "minimum amount of slotted items to show",
           "type": "number",
           "default": "1"
         },
-        {
-          "name": "opener-style",
-          "description": "Setting this property will change the style of the overflow menu opener",
-          "type": "'default'|'subtle'",
-          "default": "\"DEFAULT\""
-        },
         {
           "name": "opener-type",
           "description": "Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text",
           "type": "'default'|'icon'",
-          "default": "\"DEFAULT\""
+          "default": "\"default\""
         }
       ],
       "properties": [
+        {
+          "name": "openerStyle",
+          "attribute": "opener-style",
+          "description": "Setting this property will change the style of the overflow menu opener",
+          "type": "'default'|'subtle'",
+          "default": "\"\\\"default\\\"\""
+        },
         {
           "name": "autoShow",
           "attribute": "auto-show",
-          "description": "Use predefined classes on slot elements to set min and max buttons to show",
+          "description": "Use predefined classes on slot elements to set min and max slotted items to show",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "maxToShow",
           "attribute": "max-to-show",
-          "description": "maximum amount of buttons to show",
+          "description": "maximum amount of slotted items to show",
           "type": "number",
           "default": "-1"
         },
         {
           "name": "minToShow",
           "attribute": "min-to-show",
-          "description": "minimum amount of buttons to show",
+          "description": "minimum amount of slotted items to show",
           "type": "number",
           "default": "1"
         },
-        {
-          "name": "openerStyle",
-          "attribute": "opener-style",
-          "description": "Setting this property will change the style of the overflow menu opener",
-          "type": "'default'|'subtle'",
-          "default": "\"DEFAULT\""
-        },
         {
           "name": "openerType",
-          "attribute": "opener-type",
-          "description": "Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text",
-          "type": "'default'|'icon'",
+          "type": "string",
           "default": "\"DEFAULT\""
         }
       ],

package/package.json

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