@fluentui/web-components 3.0.0-beta.90 → 3.0.0-beta.92

package/dist/web-components.js

@@ -7211,6 +7211,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
         this.enabledOptions.filter(x => x.defaultSelected).forEach((x, i) => {
           x.selected = this.multiple || i === 0;
         });
+        this.setValidity();
       });
     }
   }
@@ -7293,6 +7294,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       }
       this.selectOption(i);
     });
+    this.setValidity();
   }
   /**
    * A reference to the first freeform option, if present.
@@ -7310,6 +7312,14 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
   get isCombobox() {
     return this.type === DropdownType.combobox;
   }
+  /**
+   * A reference to all associated label elements.
+   *
+   * @public
+   */
+  get labels() {
+    return Object.freeze(Array.from(this.elementInternals.labels));
+  }
   /**
    * The collection of all child options.
    *
@@ -7348,14 +7358,28 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     if (this.elementInternals.validationMessage) {
       return this.elementInternals.validationMessage;
     }
-    if (!this.validationFallbackMessage) {
+    if (!this._validationFallbackMessage) {
       const validationMessageFallbackControl = document.createElement("input");
       validationMessageFallbackControl.type = "radio";
+      validationMessageFallbackControl.name = "validation-message-fallback";
       validationMessageFallbackControl.required = true;
       validationMessageFallbackControl.checked = false;
-      this.validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+      this._validationFallbackMessage = validationMessageFallbackControl.validationMessage;
+    }
+    if (!this.disabled && this.required && this.listbox.selectedOptions.length === 0) {
+      return this._validationFallbackMessage;
     }
-    return this.validationFallbackMessage;
+    return "";
+  }
+  /**
+   * The element's validity state.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+   */
+  get validity() {
+    return this.elementInternals.validity;
   }
   /**
    * The current value of the selected option.
@@ -7373,6 +7397,16 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this.selectOption(this.enabledOptions.findIndex(x => x.value === next));
     Observable.track(this, "value");
   }
+  /**
+   * Determines if the control can be submitted for constraint validation.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+   */
+  get willValidate() {
+    return this.elementInternals.willValidate;
+  }
   /**
    * Handles the change events for the dropdown.
    *
@@ -7388,6 +7422,16 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     this.selectOption(optionIndex, true);
     return true;
   }
+  /**
+   * Checks the validity of the element and returns the result.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+   */
+  checkValidity() {
+    return this.elementInternals.checkValidity();
+  }
   /**
    * Handles the click events for the dropdown.
    *
@@ -7592,6 +7636,16 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     }
     return !isDropdownOption(e.target);
   }
+  /**
+   * Reports the validity of the element.
+   *
+   * @public
+   * @remarks
+   * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+   */
+  reportValidity() {
+    return this.elementInternals.reportValidity();
+  }
   /**
    * Selects an option by index.
    *
@@ -7626,7 +7680,7 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       this.elementInternals.setValidity({
         valueMissing,
         ...flags
-      }, message ?? this.validationMessage, anchor ?? this.listbox.enabledOptions[0]);
+      }, message ?? this.validationMessage, anchor ?? this.control);
     }
   }
   /**
@@ -13219,7 +13273,7 @@ class BaseTree extends FASTElement {
    * Updates current selected when slottedTreeItems changes
    */
   updateCurrentSelected() {
-    const selectedItem = this.querySelector(`[aria-selected='true']`);
+    const selectedItem = this.querySelector(`[selected]`);
     this.currentSelected = selectedItem;
     if (this.currentFocused === null || !this.contains(this.currentFocused)) {
       this.currentFocused = this.getValidFocusableItem();
@@ -13291,7 +13345,7 @@ class BaseTree extends FASTElement {
         }
       case keySpace:
         {
-          item.toggleSelection();
+          item.selected = true;
           return;
         }
     }
@@ -13307,12 +13361,8 @@ class BaseTree extends FASTElement {
       return;
     }
     if (e.target === this) {
-      if (this.currentFocused === null) {
-        this.currentFocused = this.getValidFocusableItem();
-      }
-      if (this.currentFocused !== null) {
-        this.currentFocused.focus();
-      }
+      this.currentFocused = this.getValidFocusableItem();
+      this.currentFocused?.focus();
       return;
     }
     if (this.contains(e.target)) {
@@ -13344,7 +13394,7 @@ class BaseTree extends FASTElement {
     }
     const item = e.target;
     item.toggleExpansion();
-    item.toggleSelection();
+    item.selected = true;
   }
   /**
    * Handles the selected-changed events bubbling up
@@ -13539,6 +13589,7 @@ class BaseTreeItem extends FASTElement {
     if (!this.childTreeItems?.length) {
       return;
     }
+    this.expanded = Array.from(this.querySelectorAll("*")).some(el => isTreeItem(el) && el.selected);
     this.childTreeItems.forEach(item => {
       this.setIndent(item);
     });
@@ -13550,29 +13601,6 @@ class BaseTreeItem extends FASTElement {
     const indent = this.dataIndent ?? 0;
     item.dataIndent = indent + 1;
   }
-  /**
-   * Handle focus events
-   *
-   * @public
-   */
-  focusHandler(e) {
-    if (e.target === this ||
-    // In case where the tree-item contains a focusable element, we should not set the tabindex to 0 when the focus is on its child focusable element,
-    // so users can shift+tab to navigate to the tree-item from its child focusable element.
-    this.contains(e.target)) {
-      this.setAttribute("tabindex", "0");
-    }
-  }
-  /**
-   * Handle blur events
-   *
-   * @public
-   */
-  blurHandler(e) {
-    if (e.target === this) {
-      this.setAttribute("tabindex", "-1");
-    }
-  }
   /**
    * Toggle the expansion state of the tree item
    *
@@ -13583,14 +13611,6 @@ class BaseTreeItem extends FASTElement {
       this.expanded = !this.expanded;
     }
   }
-  /**
-   * Toggle the single selection state of the tree item
-   *
-   * @public
-   */
-  toggleSelection() {
-    this.selected = !this.selected;
-  }
   /**
    * Whether the tree is nested
    * @internal
@@ -13677,7 +13697,7 @@ const styles = css`
       ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
 
 const chevronIcon = html`<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
-const template = html`<template tabindex="-1" slot="${x => x.isNestedItem ? "item" : void 0}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" ${children({
+const template = html`<template tabindex="${x => x.selected ? 0 : -1}" slot="${x => x.isNestedItem ? "item" : void 0}" ${children({
   property: "childTreeItems",
   filter: node => isTreeItem(node)
 })}><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item"></slot></div></template>`;