@brightspace-ui/core 3.55.0 → 3.57.0

package/components/paging/README.md

@@ -101,3 +101,4 @@ pager.addEventListener('d2l-pager-load-more', e => {
 | Event | Description |
 |---|---|
 | `d2l-pager-load-more` | Dispatched when the user clicks the Load More button. The `pageSize` can be accessed from the event `target`. The consumer must call the `complete()` method on the event detail to signal completion after the new items have been loaded. |
+| `d2l-pager-load-more-loaded` | Dispatched after more items have been loaded.

package/components/paging/pager-load-more.js

@@ -17,6 +17,7 @@ const nativeFocus = document.createElement('div').focus;
 /**
  *  A pager component for load-more paging.
  * @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
+ * @fires d2l-pager-load-more-loaded - Dispatched after more items have been loaded.
  */
 class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))) {
 
@@ -125,19 +126,34 @@ class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(Rt
 		this._loading = false;
 
 		// wait a frame for async sub-components to render
-		await new Promise(resolve => requestAnimationFrame(resolve));
+		await new Promise(requestAnimationFrame);
 
 		const item = pageable._getItemByIndex(lastItemIndex + 1);
 
-		if (!item) return;
-		if (item.updateComplete) await item.updateComplete;
+		let itemToFocus;
+		if (item) {
+			if (item.updateComplete) await item.updateComplete;
+			if (item.focus !== nativeFocus) {
+				itemToFocus = item;
+			} else {
+				const firstFocusable = getFirstFocusableDescendant(item);
+				if (firstFocusable) {
+					itemToFocus = firstFocusable;
+				} else if (item.focus === nativeFocus) {
+					item.tabIndex = -1;
+					itemToFocus = item;
+				}
+			}
+		}
 
-		if (item.focus !== nativeFocus) {
-			requestAnimationFrame(() => item.focus());
-		} else {
-			const firstFocusable = getFirstFocusableDescendant(item);
-			if (firstFocusable) firstFocusable.focus();
+		if (itemToFocus) {
+			await new Promise(requestAnimationFrame);
+			itemToFocus.focus();
 		}
+
+		await new Promise(requestAnimationFrame);
+		this.dispatchEvent(new CustomEvent('d2l-pager-load-more-loaded'));
+
 	}
 
 }

package/custom-elements.json

@@ -10535,6 +10535,10 @@
         {
           "name": "d2l-pager-load-more",
           "description": "Dispatched when the user clicks the load-more button. Consumers must call the provided \"complete\" method once items have been loaded."
+        },
+        {
+          "name": "d2l-pager-load-more-loaded",
+          "description": "Dispatched after more items have been loaded."
         }
       ]
     },

package/package.json

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