@fluentui/web-components 3.0.0-rc.16 → 3.0.0-rc.17

package/dist/web-components.d.ts

@@ -1,12 +1,10 @@
 import { CaptureType } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
-import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
-import { Orientation } from '@microsoft/fast-web-utilities';
 import { SyntheticViewTemplate } from '@microsoft/fast-element';
 import { ViewTemplate } from '@microsoft/fast-element';
 
@@ -6806,6 +6804,21 @@ export declare const DialogType: {
 
 export declare type DialogType = ValuesOf<typeof DialogType>;
 
+/**
+ * Expose ltr and rtl strings
+ * @public
+ */
+export declare const Direction: {
+    readonly ltr: "ltr";
+    readonly rtl: "rtl";
+};
+
+/**
+ * The direction type
+ * @public
+ */
+export declare type Direction = (typeof Direction)[keyof typeof Direction];
+
 /**
  * Applies a CSS display property.
  * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
@@ -9018,6 +9031,21 @@ export declare const MessageBarStyles: ElementStyles;
  */
 export declare const MessageBarTemplate: ElementViewTemplate<MessageBar>;
 
+/**
+ * Standard orientation values
+ * @public
+ */
+export declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+
+/**
+ * The orientation type
+ * @public
+ */
+export declare type Orientation = (typeof Orientation)[keyof typeof Orientation];
+
 /**
  * A Progress HTML Element.
  * Based on BaseProgressBar and includes style and layout specific attributes

package/dist/web-components.js

@@ -12,6 +12,9 @@ function isCustomElement(tagSuffix) {
     return element.tagName.toLowerCase().endsWith(tagSuffix);
   };
 }
+function isHTMLElement(...args) {
+  return args.every(arg => arg instanceof HTMLElement);
+}
 
 function isAccordionItem(element, tagName2 = "-accordion-item") {
   return isCustomElement(tagName2)(element);
@@ -4646,81 +4649,6 @@ function swapStates(elementInternals, prev = "", next = "", States, prefix = "")
   }
 }
 
-/**
- * Standard orientation values
- */
-const Orientation = {
-  horizontal: "horizontal",
-  vertical: "vertical"
-};
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-  let k = array.length;
-  while (k--) {
-    if (predicate(array[k], k, array)) {
-      return k;
-    }
-  }
-  return -1;
-}
-
-/**
- * A test that ensures that all arguments are HTML Elements
- */
-function isHTMLElement(...args) {
-  return args.every(arg => arg instanceof HTMLElement);
-}
-
-/**
- * String values for use with KeyboardEvent.key
- */
-const keyArrowDown = "ArrowDown";
-const keyArrowLeft = "ArrowLeft";
-const keyArrowRight = "ArrowRight";
-const keyArrowUp = "ArrowUp";
-const keyEnd = "End";
-const keyEnter = "Enter";
-const keyEscape = "Escape";
-const keyHome = "Home";
-const keySpace = " ";
-const keyTab = "Tab";
-
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-(function (Direction) {
-  Direction["ltr"] = "ltr";
-  Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-function limit(min, max, value) {
-  return Math.min(Math.max(value, min), max);
-}
-
-let uniqueIdCounter$1 = 0;
-/**
- * Generates a unique ID based on incrementing a counter.
- */
-function uniqueId$1(prefix = "") {
-  return `${prefix}${uniqueIdCounter$1++}`;
-}
-
 var __defProp$L = Object.defineProperty;
 var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
 var __decorateClass$L = (decorators, target, key, kind) => {
@@ -4803,7 +4731,7 @@ class BaseAnchor extends FASTElement {
    */
   keydownHandler(e) {
     if (this.href) {
-      if (e.key === keyEnter) {
+      if (e.key === "Enter") {
         const newTab = !this.isMac ? e.ctrlKey : e.metaKey || e.ctrlKey;
         this.handleNavigation(newTab);
         return;
@@ -5706,7 +5634,7 @@ class BaseButton extends FASTElement {
       e.stopImmediatePropagation();
       return;
     }
-    if (e.key === keyEnter || e.key === keySpace) {
+    if (e.key === "Enter" || e.key === " ") {
       this.click();
       return;
     }
@@ -6641,6 +6569,11 @@ const definition$v = DialogBody.compose({
 
 definition$v.define(FluentDesignSystem.registry);
 
+const Orientation = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+
 const DividerRole = {
   /**
    * The divider semantically separates content
@@ -7087,6 +7020,10 @@ function isDropdownOption(value, tagName2 = "-option") {
 }
 const tagName$p = `${FluentDesignSystem.prefix}-option`;
 
+const Direction = {
+  ltr: "ltr",
+  rtl: "rtl"
+};
 const getDirection = rootNode => {
   return rootNode.closest("[dir]")?.dir === "rtl" ? Direction.rtl : Direction.ltr;
 };
@@ -8094,7 +8031,7 @@ class BaseField extends FASTElement {
    */
   setLabelProperties() {
     if (this.$fastController.isConnected) {
-      this.input.id = this.input.id || uniqueId$1("input");
+      this.input.id = this.input.id || uniqueId("input");
       this.labelSlot?.forEach(label => {
         if (label instanceof HTMLLabelElement) {
           label.htmlFor = label.htmlFor || this.input.id;
@@ -8558,17 +8495,17 @@ class MenuItem extends FASTElement {
         return false;
       }
       switch (e.key) {
-        case keyEnter:
-        case keySpace:
+        case "Enter":
+        case " ":
           this.invoke();
           return false;
-        case keyArrowRight:
+        case "ArrowRight":
           if (!this.disabled) {
             this.submenu?.togglePopover(true);
             this.submenu?.focus();
           }
           return false;
-        case keyArrowLeft:
+        case "ArrowLeft":
           if (this.parentElement?.hasAttribute("popover")) {
             this.parentElement.togglePopover(false);
             this.parentElement.parentElement?.focus();
@@ -9109,7 +9046,6 @@ var FocusGroup = class {
     const current = evt.composedPath()[0];
     if (evt.defaultPrevented || current === this.#owner) return;
     if (!this.#items.contains(current)) return;
-    evt.stopPropagation();
     let target;
     switch (getNavigationDirection(evt, current, this.#axis)) {
       case "start":
@@ -9159,25 +9095,21 @@ var FocusGroup = class {
       const tabStop = this.#memory ? this.#current || this.#start : this.#start;
       if (tabStop) this.#enableFocusabilityProxy(tabStop);
     }
-    if (evt.relatedTarget && this.#owner.contains(evt.relatedTarget) || this.#memory || !this.#start) return;
-    if (!this.#memory && this.#start) {
-      const prev = this.#current;
-      this.#current = null;
-      const nextStart = this.#items.start ?? this.#items.first?.() ?? null;
-      if (prev !== this.#start || nextStart !== this.#start) {
-        for (const {
-          element,
-          segmentBoundary
-        } of this.#items.items()) element.tabIndex = segmentBoundary ? 0 : -1;
-        if (nextStart) {
-          nextStart.tabIndex = 0;
-          this.#start = nextStart;
-        }
-        this.#items.flush?.();
+    if (evt.relatedTarget && nodeContains(this.#owner, evt.relatedTarget) || this.#memory || !this.#start) return;
+    const prev = this.#current;
+    this.#current = null;
+    const nextStart = this.#items.start ?? this.#items.first?.() ?? null;
+    if (prev !== this.#start || nextStart !== this.#start) {
+      for (const {
+        element,
+        segmentBoundary
+      } of this.#items.items()) element.tabIndex = segmentBoundary ? 0 : -1;
+      if (nextStart) {
+        nextStart.tabIndex = 0;
+        this.#start = nextStart;
       }
+      this.#items.flush?.();
     }
-    const tabStop = this.#memory ? this.#current || this.#start : this.#start;
-    if (tabStop) this.#enableFocusabilityProxy(tabStop);
   }
   /**
   * If the tab stop is inside a shadow DOM, sets `tabindex=0` on the
@@ -9513,8 +9445,8 @@ class Menu extends FASTElement {
       }
       const key = e.key;
       switch (key) {
-        case keySpace:
-        case keyEnter:
+        case " ":
+        case "Enter":
           e.preventDefault();
           this.toggleMenu();
           break;
@@ -9731,14 +9663,14 @@ class Menu extends FASTElement {
     }
     const key = e.key;
     switch (key) {
-      case keyEscape:
+      case "Escape":
         e.preventDefault();
         if (this._open) {
           this.closeMenu();
           this.focusTrigger();
         }
         break;
-      case keyTab:
+      case "Tab":
         if (this._open) this.closeMenu();
         if (e.shiftKey && e.composedPath()[0] !== this._trigger && e.composedPath()[0].assignedSlot !== this.primaryAction) {
           this.focusTrigger();
@@ -10396,7 +10328,7 @@ class BaseRadioGroup extends FASTElement {
     if (!this.name && next.every(x => x.name === next[0].name)) {
       this.name = next[0].name;
     }
-    const checkedIndex = findLastIndex(this.enabledRadios, x => x.initialChecked);
+    const checkedIndex = this.enabledRadios.findLastIndex(x => x.initialChecked);
     next.forEach((radio, index) => {
       radio.ariaPosInSet = `${index + 1}`;
       radio.ariaSetSize = `${setSize}`;
@@ -10605,15 +10537,15 @@ class BaseRadioGroup extends FASTElement {
    */
   keydownHandler(e) {
     switch (e.key) {
-      case keyArrowUp:
-      case keyArrowDown:
-      case keyArrowLeft:
-      case keyArrowRight:
-      case keyHome:
-      case keyEnd:
+      case "ArrowUp":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowRight":
+      case "Home":
+      case "End":
         this.isNavigating = true;
         break;
-      case keySpace:
+      case " ":
         this.checkRadio();
         break;
     }
@@ -11025,6 +10957,10 @@ const SliderMode = {
 };
 const tagName$b = `${FluentDesignSystem.prefix}-slider`;
 
+function limit(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
+
 const numberLikeStringConverter = {
   fromView(value) {
     const valueAsNumber = parseFloat(value);
@@ -11490,23 +11426,23 @@ class Slider extends FASTElement {
       return true;
     }
     switch (event.key) {
-      case keyHome:
+      case "Home":
         event.preventDefault();
         this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.minAsNumber}` : `${this.maxAsNumber}`;
         break;
-      case keyEnd:
+      case "End":
         event.preventDefault();
         this.value = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? `${this.maxAsNumber}` : `${this.minAsNumber}`;
         break;
-      case keyArrowRight:
-      case keyArrowUp:
+      case "ArrowRight":
+      case "ArrowUp":
         if (!event.shiftKey) {
           event.preventDefault();
           this.increment();
         }
         break;
-      case keyArrowLeft:
-      case keyArrowDown:
+      case "ArrowLeft":
+      case "ArrowDown":
         if (!event.shiftKey) {
           event.preventDefault();
           this.decrement();
@@ -11867,7 +11803,7 @@ class BaseTablist extends FASTElement {
       if (tab.slot !== "tab") {
         continue;
       }
-      tab.id || (tab.id = uniqueId$1("tab-"));
+      tab.id || (tab.id = uniqueId("tab-"));
       if (forceDisabled) {
         tab.disabled = this.disabled;
       } else {
@@ -13138,7 +13074,7 @@ class Tooltip extends FASTElement {
      * The attached element internals
      */
     this.elementInternals = this.attachInternals();
-    this.id = uniqueId$1("tooltip-");
+    this.id = uniqueId("tooltip-");
     /**
      * The default delay for the tooltip
      * @internal
@@ -13389,7 +13325,7 @@ class BaseTree extends FASTElement {
       return true;
     }
     switch (e.key) {
-      case keyArrowLeft:
+      case "ArrowLeft":
         {
           if (item?.childTreeItems?.length && item.expanded) {
             item.expanded = false;
@@ -13398,7 +13334,7 @@ class BaseTree extends FASTElement {
           }
           return;
         }
-      case keyArrowRight:
+      case "ArrowRight":
         {
           if (item?.childTreeItems?.length) {
             if (!item.expanded) {
@@ -13407,12 +13343,12 @@ class BaseTree extends FASTElement {
           }
           return;
         }
-      case keyEnter:
+      case "Enter":
         {
           this.clickHandler(e);
           return;
         }
-      case keySpace:
+      case " ":
         {
           item.selected = true;
           return;
@@ -13887,7 +13823,7 @@ function getShadowAdoptedStyleSheet(element) {
 }
 function getScopedThemeKey(theme) {
   if (!scopedThemeKeyMap.has(theme)) {
-    const themeKey = uniqueId$1("fluent-theme-");
+    const themeKey = uniqueId("fluent-theme-");
     const scopedThemeStyleSheet = new CSSStyleSheet();
     scopedThemeKeyMap.set(theme, themeKey);
     scopedThemeStyleSheet.replaceSync(`