@fluentui/web-components 3.0.0-rc.11 → 3.0.0-rc.12

package/dist/web-components.js

@@ -4636,6 +4636,38 @@ const definition$F = AccordionItem.compose({
 
 definition$F.define(FluentDesignSystem.registry);
 
+function requestIdleCallback(callback, options) {
+  if ("requestIdleCallback" in globalThis) {
+    return globalThis.requestIdleCallback(callback, options);
+  }
+  const start = Date.now();
+  return setTimeout(() => {
+    callback({
+      didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
+      timeRemaining: () => 0
+    });
+  }, 1);
+}
+function waitForConnectedDescendants(target, callback, options) {
+  const shallow = options?.shallow ?? false;
+  const timeout = options?.timeout ?? 50;
+  const selector = `${shallow ? ":scope > " : ""}:not(:defined)`;
+  const scheduleCheck = deadline => {
+    if (target.querySelector(selector) === null || deadline && deadline.timeRemaining() <= 0) {
+      requestAnimationFrame(callback);
+      return;
+    }
+    requestIdleCallback(scheduleCheck, {
+      timeout
+    });
+  };
+  scheduleCheck();
+}
+
+function isAccordionItem(element, tagName = "-accordion-item") {
+  return isCustomElement(tagName)(element);
+}
+
 const AccordionExpandMode = {
   single: "single",
   multi: "multi"
@@ -4652,7 +4684,6 @@ var __decorateClass$M = (decorators, target, key, kind) => {
 class Accordion extends FASTElement {
   constructor() {
     super(...arguments);
-    this.expandmode = AccordionExpandMode.multi;
     this.activeItemIndex = 0;
     /**
      * Resets event listeners and sets the `accordionItems` property
@@ -4660,21 +4691,23 @@ class Accordion extends FASTElement {
      * @returns {void}
      */
     this.setItems = () => {
-      if (this.slottedAccordionItems.length === 0) {
-        return;
-      }
-      const children = Array.from(this.children);
-      this.removeItemListeners(children);
-      children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
-      this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
-      this.accordionItems.forEach((item, index) => {
-        item.addEventListener("click", this.expandedChangedHandler);
-        Observable.getNotifier(item).subscribe(this, "expanded");
+      waitForConnectedDescendants(this, () => {
+        if (this.slottedAccordionItems.length === 0) {
+          return;
+        }
+        const children = Array.from(this.children);
+        this.removeItemListeners(children);
+        children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
+        this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
+        this.accordionItems.forEach((item, index) => {
+          item.addEventListener("click", this.expandedChangedHandler);
+          Observable.getNotifier(item).subscribe(this, "expanded");
+        });
+        if (this.isSingleExpandMode()) {
+          const expandedItem = this.findExpandedItem();
+          this.setSingleExpandMode(expandedItem);
+        }
       });
-      if (this.isSingleExpandMode()) {
-        const expandedItem = this.findExpandedItem();
-        this.setSingleExpandMode(expandedItem);
-      }
     };
     /**
      * Removes event listeners from the previous accordion items
@@ -4694,7 +4727,7 @@ class Accordion extends FASTElement {
      */
     this.expandedChangedHandler = evt => {
       const item = evt.target;
-      if (item instanceof BaseAccordionItem) {
+      if (isAccordionItem(item)) {
         if (!this.isSingleExpandMode()) {
           item.expanded = !item.expanded;
           this.activeItemIndex = this.accordionItems.indexOf(item);
@@ -4745,10 +4778,10 @@ class Accordion extends FASTElement {
    * @returns {void}
    */
   findExpandedItem() {
-    if (this.accordionItems.length === 0) {
+    if (!this.accordionItems || this.accordionItems?.length === 0) {
       return null;
     }
-    return this.accordionItems.find(item => item instanceof BaseAccordionItem && item.expanded) ?? this.accordionItems[0];
+    return this.accordionItems.find(item => isAccordionItem(item) && item.expanded) ?? this.accordionItems[0];
   }
   /**
    * Checks if the accordion is in single expand mode
@@ -4763,23 +4796,32 @@ class Accordion extends FASTElement {
    * @returns {void}
    */
   setSingleExpandMode(expandedItem) {
-    if (this.accordionItems.length === 0) {
-      return;
-    }
-    const currentItems = Array.from(this.accordionItems);
-    this.activeItemIndex = currentItems.indexOf(expandedItem);
-    currentItems.forEach((item, index) => {
-      if (item instanceof BaseAccordionItem) {
-        if (this.activeItemIndex === index) {
-          item.expanded = true;
-          item.expandbutton.setAttribute("aria-disabled", "true");
-        } else {
-          item.expanded = false;
-          if (!item.hasAttribute("disabled")) {
-            item.expandbutton.removeAttribute("aria-disabled");
+    requestAnimationFrame(() => {
+      if (this.accordionItems.length === 0) {
+        return;
+      }
+      const currentItems = Array.from(this.accordionItems);
+      this.activeItemIndex = currentItems.indexOf(expandedItem);
+      currentItems.forEach((item, index) => {
+        if (isAccordionItem(item)) {
+          if (this.activeItemIndex === index) {
+            item.expanded = true;
+            item.expandbutton.setAttribute("aria-disabled", "true");
+          } else {
+            item.expanded = false;
+            if (!item.hasAttribute("disabled")) {
+              item.expandbutton.removeAttribute("aria-disabled");
+            }
           }
         }
-      }
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      this.expandmode = this.expandmode || AccordionExpandMode.multi;
+      this.setItems();
     });
   }
 }
@@ -7229,34 +7271,6 @@ function getLanguage(rootNode) {
   return rootNode.closest("[lang]")?.lang ?? "en";
 }
 
-function requestIdleCallback(callback, options) {
-  if ("requestIdleCallback" in globalThis) {
-    return globalThis.requestIdleCallback(callback, options);
-  }
-  const start = Date.now();
-  return setTimeout(() => {
-    callback({
-      didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
-      timeRemaining: () => 0
-    });
-  }, 1);
-}
-function waitForConnectedDescendants(target, callback, options) {
-  const shallow = options?.shallow ?? false;
-  const timeout = options?.timeout ?? 50;
-  const selector = `${shallow ? ":scope > " : ""}:not(:defined)`;
-  const scheduleCheck = deadline => {
-    if (target.querySelector(selector) === null || deadline && deadline.timeRemaining() <= 0) {
-      requestAnimationFrame(callback);
-      return;
-    }
-    requestIdleCallback(scheduleCheck, {
-      timeout
-    });
-  };
-  scheduleCheck();
-}
-
 let uniqueIdCounter = 0;
 function uniqueId(prefix = "id-") {
   const str = `${prefix}${uniqueIdCounter++}`;