fix(web-components): use defined in querySelector for requestIdleCallback (#35142)

Author: radium-v

change/@fluentui-web-components-653c92a3-be49-44a6-851a-d52d144efe5b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: use defined selector in waitForConnectedDescendants",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/package.json

@@ -27,6 +27,8 @@
   ],
   "exports": {
     ".": "./dist/esm/index.js",
+    "./utils/behaviors/*.js": "./dist/esm/utils/behaviors/*.js",
+    "./utils/*.js": "./dist/esm/utils/*.js",
     "./utilities.js": "./dist/esm/utils/index.js",
     "./theme/*.js": "./dist/esm/theme/*.js",
     "./*/base.js": "./dist/esm/*/*.base.js",

packages/web-components/src/listbox/listbox.ts

@@ -216,8 +216,9 @@ export class Listbox extends FASTElement {
    * @public
    */
   public slotchangeHandler(e: Event): void {
+    const target = e.target as HTMLSlotElement;
     waitForConnectedDescendants(this, () => {
-      const options = (e.target as HTMLSlotElement)
+      const options = target
         .assignedElements()
         .filter<DropdownOption>((option): option is DropdownOption => isDropdownOption(option));
 

packages/web-components/src/utils/request-idle-callback.ts

@@ -8,7 +8,7 @@
  * @public
  */
 export function requestIdleCallback(
-  callback: (args: { didTimeout: boolean }) => void,
+  callback: (deadline: IdleDeadline) => void,
   options?: { timeout: number },
 ): ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout> {
   if ('requestIdleCallback' in globalThis) {
@@ -19,6 +19,7 @@ export function requestIdleCallback(
   return setTimeout(() => {
     callback({
       didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
+      timeRemaining: () => 0,
     });
   }, 1);
 }
@@ -58,30 +59,25 @@ export function cancelIdleCallback(id: ReturnType<typeof globalThis.requestIdleC
 export function waitForConnectedDescendants(
   target: HTMLElement,
   callback: () => void,
-  options = { shallow: false, timeout: 50 },
+  options?: { shallow?: boolean; timeout?: number },
 ): void {
-  let idleCallbackId: ReturnType<typeof requestIdleCallback> | void;
-  const query = options.shallow ? ':scope > *' : '*';
+  let idleCallbackId: ReturnType<typeof requestIdleCallback> | undefined;
+  const shallow = options?.shallow ?? false;
+  const query = `${shallow ? ':scope > ' : ''}:not(:defined)`;
+  const timeout = options?.timeout ?? 50;
 
-  if (!target.isConnected) {
-    return;
-  }
-
-  const scheduleCheck = () => {
+  const scheduleCheck = (deadline?: IdleDeadline) => {
     if (idleCallbackId) {
-      idleCallbackId = cancelIdleCallback(idleCallbackId);
+      cancelIdleCallback(idleCallbackId);
+      idleCallbackId = undefined;
     }
 
-    if (
-      Array.from(target.querySelectorAll(query))
-        .filter(el => el.tagName.includes('-'))
-        .every(el => el.isConnected)
-    ) {
+    if (!target.querySelector(query) || (deadline && deadline.timeRemaining() <= 0)) {
       callback();
       return;
     }
 
-    idleCallbackId = requestIdleCallback(scheduleCheck, { timeout: options.timeout });
+    idleCallbackId = requestIdleCallback(scheduleCheck, { timeout });
   };
 
   scheduleCheck();