@brightspace-ui/core 3.194.0 → 3.194.2

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

@@ -367,6 +367,10 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		this.dropNested = false;
 	}
 
+	get dropDisabled() {
+		return this._dropNestedOnly && !this.dropNested;
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.key) {
@@ -393,10 +397,6 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 	}
 
-	get #disabledDrop() {
-		return this._dropNestedOnly && !this.dropNested;
-	}
-
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
 		/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
@@ -551,7 +551,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		this.dragging = false;
 
 		// check the dropEffect in case the user cancelled by Escape while dragging ('none' set by browser)
-		if (!this.#disabledDrop && e.dataTransfer.dropEffect !== 'none' && dragState.shouldDrop(e.timeStamp)) {
+		if (!dragState.dropTarget?.dropDisabled && e.dataTransfer.dropEffect !== 'none' && dragState.shouldDrop(e.timeStamp)) {
 
 			const dropTargetList = findComposedAncestor(dragState.dropTarget, node => node.tagName === 'D2L-LIST');
 			const shouldDispatchPositionChange = !dragState.dragTargets.find(dragTarget => {
@@ -615,7 +615,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	_onDragOver(e) {
-		if (!this.key || this.#disabledDrop) return;
+		if (!this.key || this.dropDisabled) return;
 		const dragState = getDragState();
 		dragState.updateTime(e.timeStamp);
 		e.preventDefault();
@@ -903,7 +903,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	}
 
 	#onDropEnterHelper(e, isTopHalf, isMiddle) {
-		if (this.#disabledDrop) return;
+		if (this.dropDisabled) return;
 		e.dataTransfer.dropEffect = 'move';
 
 		let location;

package/components/typography/styles.js

@@ -171,10 +171,10 @@ const getHeadingFocusStyles = (selector) => {
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading1Styles = (selector) => {
+export const _generateHeading1Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -194,7 +194,7 @@ export const _generateHeading1Styles = (selector) => {
 	`;
 };
 export const heading1Styles = css`
-	${_generateHeading1Styles('.d2l-heading-1')}
+	${_generateHeading1Styles('.d2l-heading-1', true)}
 	:host([skeleton]) .d2l-heading-1.d2l-skeletize {
 		height: 2.4rem;
 		overflow: hidden;
@@ -217,10 +217,10 @@ export const heading1Styles = css`
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading2Styles = (selector) => {
+export const _generateHeading2Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -241,7 +241,7 @@ export const _generateHeading2Styles = (selector) => {
 	`;
 };
 export const heading2Styles = css`
-	${_generateHeading2Styles('.d2l-heading-2')}
+	${_generateHeading2Styles('.d2l-heading-2', true)}
 	:host([skeleton]) .d2l-heading-2.d2l-skeletize {
 		height: 1.8rem;
 		overflow: hidden;
@@ -264,10 +264,10 @@ export const heading2Styles = css`
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading3Styles = (selector) => {
+export const _generateHeading3Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -287,7 +287,7 @@ export const _generateHeading3Styles = (selector) => {
 	`;
 };
 export const heading3Styles = css`
-	${_generateHeading3Styles('.d2l-heading-3')}
+	${_generateHeading3Styles('.d2l-heading-3', true)}
 	:host([skeleton]) .d2l-heading-3.d2l-skeletize {
 		height: 1.5rem;
 		overflow: hidden;
@@ -310,10 +310,10 @@ export const heading3Styles = css`
 /**
  * A private helper method that should not be used by general consumers
  */
-export const _generateHeading4Styles = (selector) => {
+export const _generateHeading4Styles = (selector, includeFocus = false) => {
 	if (!_isValidCssSelector(selector)) return;
 
-	const focusStyles = getHeadingFocusStyles(selector);
+	const focusStyles = includeFocus ? getHeadingFocusStyles(selector) : unsafeCSS('');
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -326,7 +326,7 @@ export const _generateHeading4Styles = (selector) => {
 	`;
 };
 export const heading4Styles = css`
-	${_generateHeading4Styles('.d2l-heading-4')}
+	${_generateHeading4Styles('.d2l-heading-4', true)}
 	:host([skeleton]) .d2l-heading-4.d2l-skeletize {
 		height: 1.2rem;
 		overflow: hidden;

package/components/typography/typography.js

@@ -20,10 +20,10 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 		${_generateBodyCompactStyles('.d2l-typography .d2l-body-compact', false)}
 		${_generateBodySmallStyles('.d2l-typography .d2l-body-small', false)}
 		${_generateLabelStyles('.d2l-typography .d2l-label-text', false)}
-		${_generateHeading1Styles('.d2l-typography .d2l-heading-1')}
-		${_generateHeading2Styles('.d2l-typography .d2l-heading-2')}
-		${_generateHeading3Styles('.d2l-typography .d2l-heading-3')}
-		${_generateHeading4Styles('.d2l-typography .d2l-heading-4')}
+		${_generateHeading1Styles('.d2l-typography .d2l-heading-1', true)}
+		${_generateHeading2Styles('.d2l-typography .d2l-heading-2', true)}
+		${_generateHeading3Styles('.d2l-typography .d2l-heading-3', true)}
+		${_generateHeading4Styles('.d2l-typography .d2l-heading-4', true)}
 		${_generateBlockquoteStyles('.d2l-typography .d2l-blockquote')}
 	`;
 	document.head.appendChild(style);

package/custom-elements.json

@@ -9145,6 +9145,9 @@
           "description": "**Selection:** Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "dropDisabled"
+        },
         {
           "name": "draggable",
           "attribute": "draggable",
@@ -9555,6 +9558,9 @@
           "description": "**Selection:** Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "dropDisabled"
+        },
         {
           "name": "draggable",
           "attribute": "draggable",
@@ -10107,6 +10113,9 @@
           "description": "**Selection:** Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "dropDisabled"
+        },
         {
           "name": "draggable",
           "attribute": "draggable",
@@ -10456,6 +10465,9 @@
           "description": "**Selection:** Value to identify item if selectable",
           "type": "string"
         },
+        {
+          "name": "dropDisabled"
+        },
         {
           "name": "draggable",
           "attribute": "draggable",

package/package.json

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