@brightspace-ui/core 3.134.3 → 3.135.1

package/components/form/form.js

@@ -5,10 +5,13 @@ import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { localizeFormElement } from './form-element-localize-helper.js';
 
+const formElementMixinWithNestedFormsParticipates = getFlag('form-element-mixin-nested-forms', true);
+
 /**
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
  * Values of these interactive controls are aggregated but the user is responsible for handling submission via the @d2l-form-submit event.
@@ -165,7 +168,13 @@ class Form extends LocalizeCoreElement(LitElement) {
 						}
 					}
 				}
-			} else {
+			} else if (!formElementMixinWithNestedFormsParticipates) {
+				const eleErrors = await this._validateFormElement(ele, true);
+				if (eleErrors.length > 0) {
+					errorMap.set(ele, eleErrors);
+				}
+			}
+			if (formElementMixinWithNestedFormsParticipates) {
 				const eleErrors = await this._validateFormElement(ele, true);
 				if (eleErrors.length > 0) {
 					errorMap.set(ele, eleErrors);
@@ -354,13 +363,16 @@ class Form extends LocalizeCoreElement(LitElement) {
 	}
 
 	async _validateFormElement(ele, showNewErrors) {
+		const isCustom = isCustomFormElement(ele);
+		const isNative = isNativeFormElement(ele);
+		if (!isCustom && !isNative) return [];
 		// if validation occurs before we've rendered,
 		// localization may not have loaded yet
 		await this._firstUpdatePromise;
 		ele.id = ele.id || getUniqueId();
-		if (isCustomFormElement(ele)) {
+		if (isCustom) {
 			return ele.validate(showNewErrors);
-		} else if (isNativeFormElement(ele)) {
+		} else if (isNative) {
 			const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
 			const results = await Promise.all(customs.map(custom => custom.validate()));
 			const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);

package/components/list/list-item-drag-drop-mixin.js

@@ -341,6 +341,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
 				:host([_focusing-elem]) d2l-list-item-drag-handle,
+				:host([_list-item-new-styles][_focusing]) d2l-list-item-drag-handle,
 				d2l-list-item-drag-handle:hover,
 				d2l-list-item-drag-handle.d2l-hovering,
 				d2l-list-item-drag-handle.d2l-focusing {

package/components/list/list-item-mixin.js

@@ -637,7 +637,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		return node.role === 'row' || node.role === 'listitem';
 	}
 
-	_onFocusIn() {
+	_onFocusIn(e) {
+		if (this._listItemNewStyles) {
+			e.stopPropagation(); // prevent _focusing from being set on the parent
+		}
 		this._focusing = true;
 		if (this.role !== 'row' || !tabPressed || hasDisplayedKeyboardTooltip) return;
 		this._displayKeyboardTooltip = true;

package/components/list/list-item-nav-mixin.js

@@ -1,7 +1,5 @@
 import '../colors/colors.js';
 import { css } from 'lit';
-import { findComposedAncestor } from '../../helpers/dom.js';
-import { getComposedActiveElement } from '../../helpers/focus.js';
 import { ListItemLinkMixin } from './list-item-link-mixin.js';
 
 export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(superclass) {
@@ -119,15 +117,10 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 		super._handleLinkClick(e);
 	}
 
+	/* clean up (including _focusingElem) with GAUD-7495-list-item-new-styles flag */
 	#handleFocusIn(e) {
 		e.stopPropagation(); // prevent _focusing from being set on the parent
-		requestAnimationFrame(() => {
-			const activeElement = getComposedActiveElement();
-			const parentListItem = findComposedAncestor(activeElement, (node) => node.role === 'row' || node.role === 'listitem');
-			if (parentListItem && parentListItem === this) {
-				this._focusingElem = true;
-			}
-		});
+		this._focusingElem = true;
 	}
 
 	#handleFocusOut() {

package/package.json

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