@fluentui/web-components 2.5.15 → 2.5.17

package/dist/web-components.d.ts

@@ -231,7 +231,7 @@ export declare const allComponents: {
     fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, Tooltip>;
     fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => FoundationElementRegistry<FoundationElementDefinition, typeof TreeView>;
     fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => FoundationElementRegistry<TreeItemOptions, Constructable<FoundationElement>>;
-    register(container?: Container | undefined, ...rest: any[]): void;
+    register(container?: Container, ...rest: any[]): void;
 };
 
 /**

package/dist/web-components.js

@@ -2719,14 +2719,12 @@ function intersect(start1, end1, start2, end2) {
     if (end1 < end2) {
       return end1 - start2; // Overlap
     }
-
     return end2 - start2; // Contained
   }
   // Non-zero intersect, span2 first
   if (end2 < end1) {
     return end2 - start1; // Overlap
   }
-
   return end1 - start1; // Contained
 }
 /**
@@ -2821,7 +2819,6 @@ function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
       // no default
     }
   }
-
   if (splice !== void 0) {
     splices.push(splice);
   }
@@ -3113,16 +3110,30 @@ function ref(propertyName) {
   return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
 }
 
+/**
+ * Determines whether or not an object is a function.
+ * @public
+ */
+const isFunction = object => typeof object === "function";
+
+const noTemplate = () => null;
+function normalizeBinding(value) {
+  return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param binding - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-function when(binding, templateOrTemplateBinding) {
-  const getTemplate = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
-  return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
+function when(binding, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
+  const dataBinding = isFunction(binding) ? binding : () => binding;
+  const templateBinding = normalizeBinding(templateOrTemplateBinding);
+  const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+  return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : elseBinding(source, context);
 }
 
 const defaultRepeatOptions = Object.freeze({
@@ -4310,7 +4321,6 @@ class ContainerImpl {
       // Most likely cause is trying to register a plain object that does not have a
       // register method and is not a class constructor
     }
-
     let current;
     let keys;
     let value;
@@ -4426,7 +4436,7 @@ class ContainerImpl {
         return resolver.resolve(current, this);
       }
     }
-    throw new Error(`Unable to resolve key: ${key}`);
+    throw new Error(`Unable to resolve key: ${String(key)}`);
   }
   getAll(key, searchAncestors = false) {
     validateKey(key);
@@ -6936,6 +6946,7 @@ function FormAssociated(BaseCtor) {
      * @internal
      */
     disconnectedCallback() {
+      super.disconnectedCallback();
       this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
       if (!this.elementInternals && this.form) {
         this.form.removeEventListener("reset", this.formResetCallback);
@@ -8711,7 +8722,7 @@ const calendarTemplate = (context, definition) => {
   var _a;
   const today = new Date();
   const todayString = `${today.getMonth() + 1}-${today.getDate()}-${today.getFullYear()}`;
-  return html`<template>${startTemplate} ${definition.title instanceof Function ? definition.title(context, definition) : (_a = definition.title) !== null && _a !== void 0 ? _a : ""}<slot></slot>${when(x => x.readonly === false, interactiveCalendarGridTemplate(context, todayString))} ${when(x => x.readonly === true, noninteractiveCalendarTemplate(todayString))} ${endTemplate}</template>`;
+  return html`<template>${startTemplate} ${definition.title instanceof Function ? definition.title(context, definition) : (_a = definition.title) !== null && _a !== void 0 ? _a : ""}<slot></slot>${when(x => x.readonly, noninteractiveCalendarTemplate(todayString), interactiveCalendarGridTemplate(context, todayString))} ${endTemplate}</template>`;
 };
 
 /**
@@ -13228,7 +13239,7 @@ const progressSegments = 44;
  * The template for the {@link @microsoft/fast-foundation#BaseProgress} component.
  * @public
  */
-const progressRingTemplate = (context, definition) => html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" class="${x => x.paused ? "paused" : ""}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`)} ${when(x => typeof x.value !== "number", html`<slot name="indeterminate" slot="indeterminate">${definition.indeterminateIndicator || ""}</slot>`)}</template>`;
+const progressRingTemplate = (context, definition) => html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" class="${x => x.paused ? "paused" : ""}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`, html`<slot name="indeterminate" slot="indeterminate">${definition.indeterminateIndicator || ""}</slot>`)}</template>`;
 
 /**
  * An Progress HTML Element.
@@ -13298,7 +13309,7 @@ __decorate$1([observable], BaseProgress.prototype, "percentComplete", void 0);
  * The template for the {@link @microsoft/fast-foundation#BaseProgress} component.
  * @public
  */
-const progressTemplate = (context, defintion) => html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" class="${x => x.paused ? "paused" : ""}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`)} ${when(x => typeof x.value !== "number", html`<div class="progress" part="progress" slot="indeterminate"><slot class="indeterminate" name="indeterminate">${defintion.indeterminateIndicator1 || ""} ${defintion.indeterminateIndicator2 || ""}</slot></div>`)}</template>`;
+const progressTemplate = (context, defintion) => html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}" class="${x => x.paused ? "paused" : ""}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`, html`<div class="progress" part="progress" slot="indeterminate"><slot class="indeterminate" name="indeterminate">${defintion.indeterminateIndicator1 || ""} ${defintion.indeterminateIndicator2 || ""}</slot></div>`)}</template>`;
 
 /**
  * The template for the {@link @microsoft/fast-foundation#RadioGroup} component.
@@ -15638,8 +15649,11 @@ class Tabs extends FoundationElement {
     this.isDisabledElement = el => {
       return el.getAttribute("aria-disabled") === "true";
     };
+    this.isHiddenElement = el => {
+      return el.hasAttribute("hidden");
+    };
     this.isFocusableElement = el => {
-      return !this.isDisabledElement(el);
+      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
     };
     this.setTabs = () => {
       const gridHorizontalProperty = "gridColumn";
@@ -15663,6 +15677,7 @@ class Tabs extends FoundationElement {
           tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
           if (isActiveTab) {
             this.activetab = tab;
+            this.activeid = tabId;
           }
         }
         // If the original property isn't emptied out,
@@ -15882,9 +15897,14 @@ class Tabs extends FoundationElement {
    * This method allows the active index to be adjusted by numerical increments
    */
   adjust(adjustment) {
-    this.prevActiveTabIndex = this.activeTabIndex;
-    this.activeTabIndex = wrapInBounds(0, this.tabs.length - 1, this.activeTabIndex + adjustment);
-    this.setComponent();
+    const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
+    const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
+    const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+    // the index of the next focusable tab within the context of all available tabs
+    const nextIndex = this.tabs.indexOf(focusableTabs[nextTabIndex]);
+    if (nextIndex > -1) {
+      this.moveToTabByIndex(this.tabs, nextIndex);
+    }
   }
   focusTab() {
     this.tabs[this.activeTabIndex].focus();
@@ -16098,7 +16118,7 @@ const textFieldTemplate = (context, definition) => html`<template class=" ${x =>
  *
  * @public
  */
-const toolbarTemplate = (context, definition) => html`<template aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-orientation="${x => x.orientation}" orientation="${x => x.orientation}" role="toolbar" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" ${children({
+const toolbarTemplate = (context, definition) => html`<template aria-label="${x => x.ariaLabel}" aria-labelledby="${x => x.ariaLabelledby}" aria-orientation="${x => x.orientation}" orientation="${x => x.orientation}" role="toolbar" @mousedown="${(x, c) => x.mouseDownHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" ${children({
   property: "childItems",
   attributeFilter: ["disabled", "hidden"],
   filter: elements(),
@@ -16195,9 +16215,9 @@ class Toolbar$1 extends FoundationElement {
    *
    * @internal
    */
-  clickHandler(e) {
+  mouseDownHandler(e) {
     var _a;
-    const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.indexOf(e.target);
+    const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.findIndex(x => x.contains(e.target));
     if (activeIndex > -1 && this.activeIndex !== activeIndex) {
       this.setFocusedElement(activeIndex);
     }
@@ -20597,11 +20617,10 @@ const dataGridStyles = dataGridStyles$1;
  */
 const swatchConverter = {
   toView(value) {
-    var _a;
     if (value === null || value === undefined) {
       return null;
     }
-    return (_a = value) === null || _a === void 0 ? void 0 : _a.toColorString();
+    return value === null || value === void 0 ? void 0 : value.toColorString();
   },
   fromView(value) {
     if (value === null || value === undefined) {
@@ -20931,7 +20950,7 @@ const fluentDialog = Dialog.compose({
 const dialogStyles = dialogStyles$1;
 
 const dividerStyles$1 = (context, definition) => css`
-    ${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
+    ${display('block')} :host{box-sizing:content-box;height:0;border:none;border-top:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}:host([orientation="vertical"]){border:none;height:100%;margin:0 calc(${designUnit} * 1px);border-left:calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest}}`;
 
 /**
  * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
@@ -21704,7 +21723,7 @@ const textAreaStyles$1 = (context, definition) => css`
 
     ${inputStateStyles()}
 
-    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$1)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$1)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$1)));
+    :host{flex-direction:column;vertical-align:bottom}.control{height:calc((${heightNumber} * 2) * 1px);padding:calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px)}:host .control{resize:none}:host(.resize-both) .control{resize:both}:host(.resize-horizontal) .control{resize:horizontal}:host(.resize-vertical) .control{resize:vertical}:host([cols]){width:initial}:host([rows]) .control{height:initial}`.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector$1)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector$1)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector$1)));
 
 /**
  * The Fluent TextArea class