@fluentui/web-components 2.5.3 → 2.5.4

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Thu, 16 Jun 2022 23:03:03 GMT",
+      "date": "Tue, 30 Aug 2022 07:41:19 GMT",
+      "tag": "@fluentui/web-components_v2.5.4",
+      "version": "2.5.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "9e86978c43db785ec3f40ee9e0bd35693e26189d",
+            "comment": "update FAST packages to resolve issues with form constraint validation on form associated elements"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 10 Aug 2022 07:37:33 GMT",
+      "tag": "@fluentui/web-components_v2.5.3",
+      "version": "2.5.3",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "5a44edc603012847bbe5cc7b29d65bb86c7fb8b2",
+            "comment": "chore: use only 1 instance of ts-node in monorepo"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Jul 2022 07:36:55 GMT",
+      "tag": "@fluentui/web-components_v2.5.3",
+      "version": "2.5.3",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "5aa33cbb283143f8dda9a836faa1b69d94c1ca64",
+            "comment": "chore(storybook): remove deprecated --static-dir CLI flag usage"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Jun 2022 23:03:44 GMT",
       "tag": "@fluentui/web-components_v2.5.3",
       "version": "2.5.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 16 Jun 2022 23:03:03 GMT and should not be manually modified.
+This log was last generated on Tue, 30 Aug 2022 07:41:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.4)
+
+Tue, 30 Aug 2022 07:41:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.3..@fluentui/web-components_v2.5.4)
+
+### Patches
+
+- update FAST packages to resolve issues with form constraint validation on form associated elements ([PR #24557](https://github.com/microsoft/fluentui/pull/24557) by chhol@microsoft.com)
+
 ## [2.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.3)
 
-Thu, 16 Jun 2022 23:03:03 GMT 
+Thu, 16 Jun 2022 23:03:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.2..@fluentui/web-components_v2.5.3)
 
 ### Patches

package/dist/web-components.js

@@ -3861,37 +3861,54 @@ class RepeatBehavior {
   updateViews(splices) {
     const childContext = this.childContext;
     const views = this.views;
-    const totalRemoved = [];
     const bindView = this.bindView;
-    let removeDelta = 0;
-
-    for (let i = 0, ii = splices.length; i < ii; ++i) {
-      const splice = splices[i];
-      const removed = splice.removed;
-      totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
-      removeDelta -= splice.addedCount;
-    }
-
     const items = this.items;
     const template = this.template;
+    const recycle = this.options.recycle;
+    const leftoverViews = [];
+    let leftoverIndex = 0;
+    let availableViews = 0;
 
     for (let i = 0, ii = splices.length; i < ii; ++i) {
       const splice = splices[i];
+      const removed = splice.removed;
+      let removeIndex = 0;
       let addIndex = splice.index;
       const end = addIndex + splice.addedCount;
+      const removedViews = views.splice(splice.index, removed.length);
+      availableViews = leftoverViews.length + removedViews.length;
 
       for (; addIndex < end; ++addIndex) {
         const neighbor = views[addIndex];
         const location = neighbor ? neighbor.firstChild : this.location;
-        const view = this.options.recycle && totalRemoved.length > 0 ? totalRemoved.shift() : template.create();
+        let view;
+
+        if (recycle && availableViews > 0) {
+          if (removeIndex <= availableViews && removedViews.length > 0) {
+            view = removedViews[removeIndex];
+            removeIndex++;
+          } else {
+            view = leftoverViews[leftoverIndex];
+            leftoverIndex++;
+          }
+
+          availableViews--;
+        } else {
+          view = template.create();
+        }
+
         views.splice(addIndex, 0, view);
         bindView(view, items, addIndex, childContext);
         view.insertBefore(location);
       }
+
+      if (removedViews[removeIndex]) {
+        leftoverViews.push(...removedViews.slice(removeIndex));
+      }
     }
 
-    for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
-      totalRemoved[i].dispose();
+    for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+      leftoverViews[i].dispose();
     }
 
     if (this.options.positioning) {
@@ -3913,7 +3930,7 @@ class RepeatBehavior {
     let views = this.views;
     let viewsLength = views.length;
 
-    if (itemsLength === 0 || templateChanged) {
+    if (itemsLength === 0 || templateChanged || !this.options.recycle) {
       // all views need to be removed
       HTMLView.disposeContiguousBatch(views);
       viewsLength = 0;
@@ -4011,7 +4028,7 @@ class RepeatDirective extends HTMLDirective {
 
 function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
   const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
-  return new RepeatDirective(itemsBinding, templateBinding, options);
+  return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
 /**
@@ -8450,15 +8467,12 @@ function FormAssociated(BaseCtor) {
       this.removeChild(this.proxy);
       (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
     }
-    /**
-     * Sets the validity of the custom element. By default this uses the proxy element to determine
-     * validity, but this can be extended or replaced in implementation.
-     */
+    /** {@inheritDoc (FormAssociated:interface).validate} */
 
 
-    validate() {
+    validate(anchor) {
       if (this.proxy instanceof HTMLElement) {
-        this.setValidity(this.proxy.validity, this.proxy.validationMessage);
+        this.setValidity(this.proxy.validity, this.proxy.validationMessage, anchor);
       }
     }
     /**
@@ -8762,6 +8776,12 @@ class Button$1 extends FormAssociatedButton {
     next === "reset" && this.addEventListener("click", this.handleFormReset);
     previous === "reset" && this.removeEventListener("click", this.handleFormReset);
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
   /**
    * @internal
    */
@@ -10573,8 +10593,16 @@ class Checkbox extends FormAssociatedCheckbox {
      */
 
     this.keypressHandler = e => {
+      if (this.readOnly) {
+        return;
+      }
+
       switch (e.key) {
         case keySpace:
+          if (this.indeterminate) {
+            this.indeterminate = false;
+          }
+
           this.checked = !this.checked;
           break;
       }
@@ -10586,6 +10614,10 @@ class Checkbox extends FormAssociatedCheckbox {
 
     this.clickHandler = e => {
       if (!this.disabled && !this.readOnly) {
+        if (this.indeterminate) {
+          this.indeterminate = false;
+        }
+
         this.checked = !this.checked;
       }
     };
@@ -11587,6 +11619,12 @@ class Combobox$1 extends FormAssociatedCombobox {
     this.setDefaultSelectedOption();
     this.updateValue();
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
 
   get isAutocompleteInline() {
     return this.autocomplete === ComboboxAutocomplete.inline || this.isAutocompleteBoth;
@@ -11806,7 +11844,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
 
   focusoutHandler(e) {
-    this.updateValue();
+    this.syncValue();
 
     if (!this.open) {
       return true;
@@ -11835,7 +11873,11 @@ class Combobox$1 extends FormAssociatedCombobox {
     this.filter = this.control.value;
     this.filterOptions();
 
-    if (e.inputType === "deleteContentBackward" || !this.filter.length) {
+    if (!this.isAutocompleteInline) {
+      this.selectedIndex = this.options.map(option => option.text).indexOf(this.control.value);
+    }
+
+    if (e.inputType.includes("deleteContent") || !this.filter.length) {
       return true;
     }
 
@@ -11843,10 +11885,14 @@ class Combobox$1 extends FormAssociatedCombobox {
       this.open = true;
     }
 
-    if (this.isAutocompleteInline && this.filteredOptions.length) {
-      this.selectedOptions = [this.filteredOptions[0]];
-      this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
-      this.setInlineSelection();
+    if (this.isAutocompleteInline) {
+      if (this.filteredOptions.length) {
+        this.selectedOptions = [this.filteredOptions[0]];
+        this.selectedIndex = this.options.indexOf(this.firstSelectedOption);
+        this.setInlineSelection();
+      } else {
+        this.selectedIndex = -1;
+      }
     }
 
     return;
@@ -11869,7 +11915,7 @@ class Combobox$1 extends FormAssociatedCombobox {
     switch (key) {
       case "Enter":
         {
-          this.updateValue(true);
+          this.syncValue();
 
           if (this.isAutocompleteInline) {
             this.filter = this.value;
@@ -11900,7 +11946,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
       case "Tab":
         {
-          this.updateValue();
+          this.setInputToSelection();
 
           if (!this.open) {
             return true;
@@ -11926,7 +11972,6 @@ class Combobox$1 extends FormAssociatedCombobox {
           }
 
           if (this.isAutocompleteInline) {
-            this.updateValue();
             this.setInlineSelection();
           }
 
@@ -12023,20 +12068,44 @@ class Combobox$1 extends FormAssociatedCombobox {
     }
   }
   /**
-   * Focus and select the content of the control based on the first selected option.
+   * Focus and set the content of the control based on the first selected option.
    *
-   * @param start - The index for the starting range
    * @internal
    */
 
 
-  setInlineSelection() {
+  setInputToSelection() {
     if (this.firstSelectedOption) {
       this.control.value = this.firstSelectedOption.text;
       this.control.focus();
+    }
+  }
+  /**
+   * Focus, set and select the content of the control based on the first selected option.
+   *
+   * @internal
+   */
+
+
+  setInlineSelection() {
+    if (this.firstSelectedOption) {
+      this.setInputToSelection();
       this.control.setSelectionRange(this.filter.length, this.control.value.length, "backward");
     }
   }
+  /**
+   * Determines if a value update should involve emitting a change event, then updates the value.
+   *
+   * @internal
+   */
+
+
+  syncValue() {
+    var _a;
+
+    const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+    this.updateValue(this.value !== newValue);
+  }
   /**
    * Calculate and apply listbox positioning based on available viewport space.
    *
@@ -12100,6 +12169,7 @@ class Combobox$1 extends FormAssociatedCombobox {
 
     if (this.$fastController.isConnected) {
       this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+      this.control.value = this.value;
     }
 
     if (shouldEmit) {
@@ -15578,6 +15648,12 @@ class TextField$1 extends FormAssociatedTextField {
   handleChange() {
     this.$emit("change");
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
 
 }
 
@@ -15776,6 +15852,12 @@ class NumberField$1 extends FormAssociatedNumberField {
 
     this.isUserInput = false;
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
   /**
    * Sets the internal value to a valid number between the min and max properties
    * @param value - user input
@@ -16374,7 +16456,7 @@ class RadioGroup extends FoundationElement {
   valueChanged() {
     if (this.slottedRadioButtons) {
       this.slottedRadioButtons.forEach(radio => {
-        if (radio.getAttribute("value") === this.value) {
+        if (radio.value === this.value) {
           radio.checked = true;
           this.selectedRadio = radio;
         }
@@ -16818,20 +16900,32 @@ class HorizontalScroll$1 extends FoundationElement {
 
   setStops() {
     this.updateScrollStops();
-    this.width = this.offsetWidth;
+    const {
+      scrollContainer: container
+    } = this;
+    const {
+      scrollLeft
+    } = container;
+    const {
+      width: containerWidth,
+      left: containerLeft
+    } = container.getBoundingClientRect();
+    this.width = containerWidth;
     let lastStop = 0;
-    let stops = this.scrollItems.map(({
-      offsetLeft: left,
-      offsetWidth: width
-    }, index) => {
-      const right = left + width;
+    let stops = this.scrollItems.map((item, index) => {
+      const {
+        left,
+        width
+      } = item.getBoundingClientRect();
+      const leftPosition = Math.round(left + scrollLeft - containerLeft);
+      const right = Math.round(leftPosition + width);
 
       if (this.isRtl) {
         return -right;
       }
 
       lastStop = right;
-      return index === 0 ? 0 : left;
+      return index === 0 ? 0 : leftPosition;
     }).concat(lastStop);
     /* Fixes a FireFox bug where it doesn't scroll to the start */
 
@@ -16873,6 +16967,50 @@ class HorizontalScroll$1 extends FoundationElement {
       (_b = this.nextFlipperContainer) === null || _b === void 0 ? void 0 : _b.classList.toggle("disabled", Math.abs(position) + this.width >= lastStop);
     }
   }
+  /**
+   * Function that can scroll an item into view.
+   * @param item - An item index, a scroll item or a child of one of the scroll items
+   * @param padding - Padding of the viewport where the active item shouldn't be
+   * @param rightPadding - Optional right padding. Uses the padding if not defined
+   *
+   * @public
+   */
+
+
+  scrollInView(item, padding = 0, rightPadding) {
+    var _a;
+
+    if (typeof item !== "number" && item) {
+      item = this.scrollItems.findIndex(scrollItem => scrollItem === item || scrollItem.contains(item));
+    }
+
+    if (item !== undefined) {
+      rightPadding = rightPadding !== null && rightPadding !== void 0 ? rightPadding : padding;
+      const {
+        scrollContainer: container,
+        scrollStops,
+        scrollItems: items
+      } = this;
+      const {
+        scrollLeft
+      } = this.scrollContainer;
+      const {
+        width: containerWidth
+      } = container.getBoundingClientRect();
+      const itemStart = scrollStops[item];
+      const {
+        width
+      } = items[item].getBoundingClientRect();
+      const itemEnd = itemStart + width;
+      const isBefore = scrollLeft + padding > itemStart;
+
+      if (isBefore || scrollLeft + containerWidth - rightPadding < itemEnd) {
+        const stops = [...scrollStops].sort((a, b) => isBefore ? b - a : a - b);
+        const scrollTo = (_a = stops.find(position => isBefore ? position + padding < itemStart : position + containerWidth - (rightPadding !== null && rightPadding !== void 0 ? rightPadding : 0) > itemEnd)) !== null && _a !== void 0 ? _a : 0;
+        this.scrollToPosition(scrollTo);
+      }
+    }
+  }
   /**
    * Lets the user arrow left and right through the horizontal scroll
    * @param e - Keyboard event
@@ -16994,7 +17132,7 @@ class HorizontalScroll$1 extends FoundationElement {
     }
 
     this.resizeTimeout = setTimeout(() => {
-      this.width = this.offsetWidth;
+      this.width = this.scrollContainer.offsetWidth;
       this.setFlippers();
     }, this.frameTime);
   }
@@ -17170,6 +17308,12 @@ class Search$1 extends FormAssociatedSearch {
       });
     }
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
   /**
    * Handles the internal control's `input` event
    * @internal
@@ -18050,7 +18194,7 @@ class SliderLabel extends FoundationElement {
         break;
 
       case "max":
-        this.sliderMinPosition = source.max;
+        this.sliderMaxPosition = source.max;
         break;
 
       case "min":
@@ -19292,6 +19436,12 @@ class TextArea$1 extends FormAssociatedTextArea {
   handleChange() {
     this.$emit("change");
   }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+
+
+  validate() {
+    super.validate(this.control);
+  }
 
 }