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

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++}`;
@@ -8923,7 +8937,7 @@ var __decorateClass$o = (decorators, target, key, kind) => {
   if (kind && result) __defProp$o(target, key, result);
   return result;
 };
-const _MenuList = class _MenuList extends FASTElement {
+const _BaseMenuList = class _BaseMenuList extends FASTElement {
   constructor() {
     super();
     /**
@@ -9003,7 +9017,7 @@ const _MenuList = class _MenuList extends FASTElement {
      * check if the item is a menu item
      */
     this.isMenuItemElement = el => {
-      return isMenuItem(el) || isHTMLElement(el) && !!el.role && el.role in _MenuList.focusableElementRoles;
+      return isMenuItem(el) || isHTMLElement(el) && !!el.role && el.role in _BaseMenuList.focusableElementRoles;
     };
     /**
      * check if the item is focusable
@@ -9099,7 +9113,7 @@ const _MenuList = class _MenuList extends FASTElement {
     });
     const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
     const indent = filteredMenuListItems?.reduce((accum, current) => {
-      const elementValue = _MenuList.elementIndent(current);
+      const elementValue = _BaseMenuList.elementIndent(current);
       return Math.max(accum, elementValue);
     }, 0);
     filteredMenuListItems?.forEach(item => {
@@ -9133,9 +9147,11 @@ const _MenuList = class _MenuList extends FASTElement {
     }
   }
 };
-_MenuList.focusableElementRoles = MenuItemRole;
-__decorateClass$o([observable], _MenuList.prototype, "items", 2);
-let MenuList = _MenuList;
+_BaseMenuList.focusableElementRoles = MenuItemRole;
+__decorateClass$o([observable], _BaseMenuList.prototype, "items", 2);
+let BaseMenuList = _BaseMenuList;
+
+class MenuList extends BaseMenuList {}
 
 const styles$j = css`
   ${display("flex")}
@@ -10018,7 +10034,7 @@ var __decorateClass$i = (decorators, target, key, kind) => {
   if (kind && result) __defProp$i(target, key, result);
   return result;
 };
-class RadioGroup extends FASTElement {
+class BaseRadioGroup extends FASTElement {
   constructor() {
     super();
     /**
@@ -10474,23 +10490,25 @@ class RadioGroup extends FASTElement {
  *
  * @public
  */
-RadioGroup.formAssociated = true;
-__decorateClass$i([observable], RadioGroup.prototype, "checkedIndex", 2);
+BaseRadioGroup.formAssociated = true;
+__decorateClass$i([observable], BaseRadioGroup.prototype, "checkedIndex", 2);
 __decorateClass$i([attr({
   attribute: "disabled",
   mode: "boolean"
-})], RadioGroup.prototype, "disabled", 2);
+})], BaseRadioGroup.prototype, "disabled", 2);
 __decorateClass$i([attr({
   attribute: "value",
   mode: "fromView"
-})], RadioGroup.prototype, "initialValue", 2);
-__decorateClass$i([attr], RadioGroup.prototype, "name", 2);
-__decorateClass$i([attr], RadioGroup.prototype, "orientation", 2);
-__decorateClass$i([observable], RadioGroup.prototype, "radios", 2);
+})], BaseRadioGroup.prototype, "initialValue", 2);
+__decorateClass$i([attr], BaseRadioGroup.prototype, "name", 2);
+__decorateClass$i([attr], BaseRadioGroup.prototype, "orientation", 2);
+__decorateClass$i([observable], BaseRadioGroup.prototype, "radios", 2);
 __decorateClass$i([attr({
   mode: "boolean"
-})], RadioGroup.prototype, "required", 2);
-__decorateClass$i([observable], RadioGroup.prototype, "slottedRadios", 2);
+})], BaseRadioGroup.prototype, "required", 2);
+__decorateClass$i([observable], BaseRadioGroup.prototype, "slottedRadios", 2);
+
+class RadioGroup extends BaseRadioGroup {}
 
 const styles$e = css`
   ${display("flex")}