@ni/nimble-components 24.1.5 → 24.1.7

package/dist/all-components-bundle.js

@@ -5398,7 +5398,7 @@
    * 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) {
+  function limit$1(min, max, value) {
       return Math.min(Math.max(value, min), max);
   }
   /**
@@ -8380,12 +8380,12 @@
    *
    * @internal
    */
-  class FormAssociatedCombobox extends FormAssociated(_Combobox) {
+  let FormAssociatedCombobox$1 = class FormAssociatedCombobox extends FormAssociated(_Combobox) {
       constructor() {
           super(...arguments);
           this.proxy = document.createElement("input");
       }
-  }
+  };
 
   /**
    * Autocomplete values for combobox.
@@ -8415,7 +8415,7 @@
    *
    * @public
    */
-  let Combobox$1 = class Combobox extends FormAssociatedCombobox {
+  let Combobox$2 = class Combobox extends FormAssociatedCombobox$1 {
       constructor() {
           super(...arguments);
           /**
@@ -8796,7 +8796,7 @@
        */
       selectedIndexChanged(prev, next) {
           if (this.$fastController.isConnected) {
-              next = limit(-1, this.options.length - 1, next);
+              next = limit$1(-1, this.options.length - 1, next);
               // we only want to call the super method when the selectedIndex is in range
               if (next !== this.selectedIndex) {
                   this.selectedIndex = next;
@@ -8943,22 +8943,22 @@
   };
   __decorate([
       attr({ attribute: "autocomplete", mode: "fromView" })
-  ], Combobox$1.prototype, "autocomplete", void 0);
+  ], Combobox$2.prototype, "autocomplete", void 0);
   __decorate([
       observable
-  ], Combobox$1.prototype, "maxHeight", void 0);
+  ], Combobox$2.prototype, "maxHeight", void 0);
   __decorate([
       attr({ attribute: "open", mode: "boolean" })
-  ], Combobox$1.prototype, "open", void 0);
+  ], Combobox$2.prototype, "open", void 0);
   __decorate([
       attr
-  ], Combobox$1.prototype, "placeholder", void 0);
+  ], Combobox$2.prototype, "placeholder", void 0);
   __decorate([
       attr({ attribute: "position" })
-  ], Combobox$1.prototype, "positionAttribute", void 0);
+  ], Combobox$2.prototype, "positionAttribute", void 0);
   __decorate([
       observable
-  ], Combobox$1.prototype, "position", void 0);
+  ], Combobox$2.prototype, "position", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA combobox role.
    *
@@ -8973,7 +8973,7 @@
       observable
   ], DelegatesARIACombobox.prototype, "ariaControls", void 0);
   applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
-  applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
+  applyMixins(Combobox$2, StartEnd, DelegatesARIACombobox);
 
   /**
    * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
@@ -13545,7 +13545,7 @@
       adjust(adjustment) {
           const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
           const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
-          const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
+          const nextTabIndex = limit$1(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) {
@@ -13942,7 +13942,7 @@
       }
       set activeIndex(value) {
           if (this.$fastController.isConnected) {
-              this._activeIndex = limit(0, this.focusableElements.length - 1, value);
+              this._activeIndex = limit$1(0, this.focusableElements.length - 1, value);
               Observable.notify(this, "activeIndex");
           }
       }
@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 02 Apr 2024 21:45:54 GMT
+   * Generated on Thu, 04 Apr 2024 17:54:36 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16717,6 +16717,19 @@
       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 = 0;
   /**
    * Generates a unique ID based on incrementing a counter.
@@ -21077,65 +21090,173 @@
     </template>
 `;
 
+  // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/combobox/combobox.form-associated.ts
+  /* eslint-disable max-classes-per-file */
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  let Combobox$1 = class Combobox extends ListboxElement {
+  };
+  /**
+   * A form-associated base class for the Combobox component. This was copied from the
+   * FAST FormAssociatedCombobox (which is not exported by fast-foundation)
+   *
+   * @internal
+   */
+  class FormAssociatedCombobox extends FormAssociated(Combobox$1) {
+      constructor() {
+          super(...arguments);
+          this.proxy = document.createElement('input');
+      }
+  }
+
   /**
    * A nimble-styed HTML combobox
    */
-  class Combobox extends Combobox$1 {
+  class Combobox extends FormAssociatedCombobox {
       constructor() {
           super(...arguments);
           this.appearance = DropdownAppearance.underline;
           this.errorVisible = false;
+          /**
+           * The open attribute.
+           */
+          this.open = false;
+          /**
+           * The collection of currently filtered options.
+           */
+          this.filteredOptions = [];
           /** @internal */
           this.hasOverflow = false;
+          /**
+           * The unique id for the internal listbox element.
+           *
+           * @internal
+           */
+          this.listboxId = uniqueId('listbox-');
+          /**
+           * The max height for the listbox when opened.
+           *
+           * @internal
+           */
+          this.maxHeight = 0;
           this.valueUpdatedByInput = false;
+          this._value = '';
+          this.filter = '';
+          /**
+           * The initial state of the position attribute.
+           */
+          this.forcedPosition = false;
       }
       get value() {
-          return super.value;
+          Observable.track(this, 'value');
+          return this._value;
       }
-      // This override is to work around an issue in FAST where an old filter value
-      // is used after programmatically setting the value property.
-      // See: https://github.com/microsoft/fast/issues/6749
       set value(next) {
-          super.value = next;
-          // Workaround using index notation to manipulate private member
+          const prev = `${this._value}`;
+          let updatedValue = next;
+          if (this.$fastController.isConnected && this.options) {
+              const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
+              const prevSelectedValue = this.options[this.selectedIndex]?.text;
+              const nextSelectedValue = this.options[selectedIndex]?.text;
+              this.selectedIndex = prevSelectedValue !== nextSelectedValue
+                  ? selectedIndex
+                  : this.selectedIndex;
+              updatedValue = this.firstSelectedOption?.text || next;
+          }
+          if (prev !== updatedValue) {
+              this._value = updatedValue;
+              super.valueChanged(prev, updatedValue);
+              Observable.notify(this, 'value');
+          }
           // Can remove when following resolved: https://github.com/microsoft/fast/issues/6749
-          // eslint-disable-next-line @typescript-eslint/dot-notation
-          this['filter'] = next;
+          this.filter = next;
           this.filterOptions();
           this.selectedIndex = this.options
               .map(option => option.text)
               .indexOf(this.value);
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5123
-      setPositioning() {
-          if (!this.$fastController.isConnected) {
-              // Don't call setPositioning() until we're connected,
-              // since this.forcedPosition isn't initialized yet.
-              return;
-          }
-          super.setPositioning();
+      /**
+       * The list of options.
+       *
+       * Overrides `Listbox.options`.
+       */
+      get options() {
+          Observable.track(this, 'options');
+          return this.filteredOptions?.length
+              ? this.filteredOptions
+              : this._options;
+      }
+      set options(value) {
+          this._options = value;
+          Observable.notify(this, 'options');
+      }
+      get isAutocompleteInline() {
+          return (this.autocomplete === ComboboxAutocomplete.inline
+              || this.isAutocompleteBoth);
+      }
+      get isAutocompleteList() {
+          return (this.autocomplete === ComboboxAutocomplete.list
+              || this.isAutocompleteBoth);
+      }
+      get isAutocompleteBoth() {
+          return this.autocomplete === ComboboxAutocomplete.both;
       }
-      // Workaround for https://github.com/microsoft/fast/issues/5773
       slottedOptionsChanged(prev, next) {
+          // Workaround for https://github.com/microsoft/fast/issues/5773
           const value = this.value;
           super.slottedOptionsChanged(prev, next);
+          this.updateValue();
           if (value) {
               this.value = value;
           }
       }
       connectedCallback() {
           super.connectedCallback();
-          // Call setPositioning() after this.forcedPosition is initialized.
+          this.forcedPosition = !!this.positionAttribute;
+          if (this.value) {
+              this.initialValue = this.value;
+          }
           this.setPositioning();
           this.updateInputAriaLabel();
       }
+      /**
+       * @internal
+       */
+      clickHandler(e) {
+          if (this.disabled) {
+              return false;
+          }
+          if (this.open) {
+              const captured = e.target.closest('option,[role=option]');
+              if (!captured || captured.disabled) {
+                  return false;
+              }
+              this.selectedOptions = [captured];
+              this.control.value = captured.text;
+              this.clearSelectionRange();
+              this.updateValue(true);
+          }
+          this.open = !this.open;
+          if (this.open) {
+              this.control.focus();
+          }
+          return true;
+      }
+      /**
+       * @internal
+       */
       toggleButtonClickHandler(e) {
           e.stopImmediatePropagation();
       }
+      /**
+       * @internal
+       */
       toggleButtonChangeHandler(e) {
           this.open = this.dropdownButton.checked;
           e.stopImmediatePropagation();
       }
+      /**
+       * @internal
+       */
       toggleButtonKeyDownHandler(e) {
           switch (e.key) {
               case keyArrowUp:
@@ -21149,20 +21270,57 @@
                   return true;
           }
       }
+      /**
+       * @internal
+       */
       filterOptions() {
-          super.filterOptions();
+          if (!this.autocomplete
+              || this.autocomplete === ComboboxAutocomplete.none) {
+              this.filter = '';
+          }
+          const filter = this.filter.toLowerCase();
+          this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(filter));
+          if (this.isAutocompleteList) {
+              if (!this.filteredOptions.length && !filter) {
+                  this.filteredOptions = this._options;
+              }
+              this._options.forEach(o => {
+                  o.visuallyHidden = !this.filteredOptions.includes(o);
+              });
+          }
           const enabledOptions = this.filteredOptions.filter(o => !o.disabled);
           this.filteredOptions = enabledOptions;
       }
       /**
-       * This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
-       * For now, we will update the value ourselves while a user types in text. Note that there is other
-       * implementation related to this (like the 'keydownEventHandler') needed to create the complete set
-       * of desired behavior described in the issue noted above.
+       * @internal
        */
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
       inputHandler(e) {
-          const returnValue = super.inputHandler(e);
+          this.filter = this.control.value;
+          this.filterOptions();
+          if (!this.isAutocompleteInline) {
+              this.selectedIndex = this.options
+                  .map(option => option.text)
+                  .indexOf(this.control.value);
+          }
+          if (!(e.inputType.includes('deleteContent') || !this.filter.length)) {
+              if (this.isAutocompleteList && !this.open) {
+                  this.open = true;
+              }
+              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;
+                  }
+              }
+          }
+          // This is a workaround for the issue described here: https://github.com/microsoft/fast/issues/6267
+          // For now, we will update the value ourselves while a user types in text. Note that there is other
+          // implementation related to this (like the 'keydownEventHandler') needed to create the complete set
+          // of desired behavior described in the issue noted above.
           if (!this.valueUpdatedByInput) {
               this.valueBeforeTextUpdate = this.value;
           }
@@ -21172,47 +21330,257 @@
               this.focusAndScrollOptionIntoView();
           }
           this.value = this.control.value;
-          return returnValue;
+          return true;
       }
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
       keydownHandler(e) {
-          const returnValue = super.keydownHandler(e);
           if (e.ctrlKey || e.altKey) {
-              return returnValue;
+              return true;
           }
           switch (e.key) {
               case keyEnter:
+                  this.syncValue();
+                  if (this.isAutocompleteInline) {
+                      this.filter = this.value;
+                  }
+                  this.open = false;
+                  this.clearSelectionRange();
                   this.emitChangeIfValueUpdated();
                   break;
+              case keyEscape:
+                  if (!this.isAutocompleteInline) {
+                      this.selectedIndex = -1;
+                  }
+                  if (this.open) {
+                      this.open = false;
+                      break;
+                  }
+                  this.value = '';
+                  this.control.value = '';
+                  this.filter = '';
+                  this.filterOptions();
+                  break;
+              case keyTab:
+                  this.setInputToSelection();
+                  if (!this.open) {
+                      return true;
+                  }
+                  e.preventDefault();
+                  this.open = false;
+                  break;
               case keyArrowDown:
               case keyArrowUp:
+                  this.filterOptions();
+                  if (!this.open) {
+                      this.open = true;
+                      break;
+                  }
+                  if (this.filteredOptions.length > 0) {
+                      super.keydownHandler(e);
+                  }
+                  if (this.isAutocompleteInline) {
+                      this.setInlineSelection();
+                  }
                   if (this.open && this.valueUpdatedByInput) {
                       this.valueUpdatedByInput = false;
                   }
                   break;
               default:
-                  return returnValue;
+                  return true;
+          }
+          return true;
+      }
+      /**
+       * @internal
+       */
+      keyupHandler(e) {
+          const key = e.key;
+          switch (key) {
+              case 'ArrowLeft':
+              case 'ArrowRight':
+              case 'Backspace':
+              case 'Delete':
+              case 'Home':
+              case 'End': {
+                  this.filter = this.control.value;
+                  this.selectedIndex = -1;
+                  this.filterOptions();
+                  break;
+              }
           }
-          return returnValue;
+          return true;
       }
-      // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+      /**
+       * @internal
+       */
       focusoutHandler(e) {
-          const returnValue = super.focusoutHandler(e);
+          this.syncValue();
+          if (this.open) {
+              const focusTarget = e.relatedTarget;
+              if (this.isSameNode(focusTarget)) {
+                  this.focus();
+              }
+          }
           this.open = false;
           this.emitChangeIfValueUpdated();
-          return returnValue;
+          return true;
+      }
+      /**
+       * Reset the element to its first selectable option when its parent form is reset.
+       *
+       * @internal
+       */
+      formResetCallback() {
+          super.formResetCallback();
+          this.setDefaultSelectedOption();
+          this.updateValue();
+      }
+      /** {@inheritDoc (FormAssociated:interface).validate} */
+      validate() {
+          super.validate(this.control);
+      }
+      /**
+       * Set the default selected options at initialization or reset.
+       *
+       * @internal
+       * @remarks
+       * Overrides `Listbox.setDefaultSelectedOption`
+       */
+      setDefaultSelectedOption() {
+          if (this.$fastController.isConnected && this.options) {
+              const selectedIndex = this.options.findIndex(el => el.getAttribute('selected') !== null || el.selected);
+              this.selectedIndex = selectedIndex;
+              if (!this.dirtyValue && this.firstSelectedOption) {
+                  this.value = this.firstSelectedOption.text;
+              }
+              this.setSelectedOptions();
+          }
+      }
+      /**
+       * @internal
+       */
+      selectedIndexChanged(prev, next) {
+          if (this.$fastController.isConnected) {
+              const pinnedSelectedIndex = limit(-1, this.options.length - 1, next);
+              // we only want to call the super method when the selectedIndex is in range
+              if (pinnedSelectedIndex !== this.selectedIndex) {
+                  this.selectedIndex = pinnedSelectedIndex;
+                  return;
+              }
+              super.selectedIndexChanged(prev, pinnedSelectedIndex);
+          }
       }
+      /**
+       * Synchronize the `aria-disabled` property when the `disabled` property changes.
+       *
+       * @internal
+       */
+      disabledChanged(prev, next) {
+          if (super.disabledChanged) {
+              super.disabledChanged(prev, next);
+          }
+          this.ariaDisabled = this.disabled ? 'true' : 'false';
+      }
+      /**
+       * Move focus to the previous selectable option.
+       *
+       * @internal
+       * @remarks
+       * Overrides `Listbox.selectPreviousOption`
+       */
+      selectPreviousOption() {
+          if (!this.disabled && this.selectedIndex >= 0) {
+              this.selectedIndex -= 1;
+          }
+      }
+      /**
+       * @internal
+       */
+      setPositioning() {
+          // Workaround for https://github.com/microsoft/fast/issues/5123
+          if (!this.$fastController.isConnected) {
+              // Don't call setPositioning() until we're connected,
+              // since this.forcedPosition isn't initialized yet.
+              return;
+          }
+          const currentBox = this.getBoundingClientRect();
+          const viewportHeight = window.innerHeight;
+          const availableBottom = viewportHeight - currentBox.bottom;
+          if (this.forcedPosition) {
+              this.position = this.positionAttribute;
+          }
+          else if (currentBox.top > availableBottom) {
+              this.position = SelectPosition.above;
+          }
+          else {
+              this.position = SelectPosition.below;
+          }
+          this.positionAttribute = this.forcedPosition
+              ? this.positionAttribute
+              : this.position;
+          this.maxHeight = this.position === SelectPosition.above
+              ? Math.trunc(currentBox.top)
+              : Math.trunc(availableBottom);
+      }
+      /**
+       * Focus the control and scroll the first selected option into view.
+       *
+       * @internal
+       * @remarks
+       * Overrides: `Listbox.focusAndScrollOptionIntoView`
+       */
       focusAndScrollOptionIntoView() {
           if (this.open) {
-              super.focusAndScrollOptionIntoView();
+              if (this.contains(document.activeElement)) {
+                  this.control.focus();
+                  if (this.firstSelectedOption) {
+                      requestAnimationFrame(() => {
+                          this.firstSelectedOption?.scrollIntoView({
+                              block: 'nearest'
+                          });
+                      });
+                  }
+              }
           }
       }
       openChanged() {
-          super.openChanged();
+          if (this.open) {
+              this.ariaControls = this.listboxId;
+              this.ariaExpanded = 'true';
+              this.setPositioning();
+              this.focusAndScrollOptionIntoView();
+              // focus is directed to the element when `open` is changed programmatically
+              DOM.queueUpdate(() => this.focus());
+          }
+          else {
+              this.ariaControls = '';
+              this.ariaExpanded = 'false';
+          }
           if (this.dropdownButton) {
               this.dropdownButton.checked = this.open;
           }
       }
+      placeholderChanged() {
+          if (this.proxy instanceof HTMLInputElement) {
+              this.proxy.placeholder = this.placeholder ?? '';
+          }
+      }
+      /**
+       * Ensure that the entire list of options is used when setting the selected property.
+       * @internal
+       * @remarks
+       * Overrides: `Listbox.selectedOptionsChanged`
+       */
+      selectedOptionsChanged(_, next) {
+          if (this.$fastController.isConnected) {
+              this._options.forEach(o => {
+                  o.selected = next.includes(o);
+              });
+          }
+      }
+      positionChanged(_, next) {
+          this.positionAttribute = next;
+          this.setPositioning();
+      }
       regionChanged(_prev, _next) {
           if (this.region && this.controlWrapper) {
               this.region.anchorElement = this.controlWrapper;
@@ -21230,6 +21598,49 @@
       maxHeightChanged() {
           this.updateListboxMaxHeightCssVariable();
       }
+      /**
+       * Sets the value and to match the first selected option.
+       */
+      updateValue(shouldEmit) {
+          if (this.$fastController.isConnected) {
+              this.value = this.firstSelectedOption?.text || this.control.value;
+              this.control.value = this.value;
+          }
+          if (shouldEmit) {
+              this.$emit('change');
+          }
+      }
+      /**
+       * Focus and set the content of the control based on the first selected option.
+       */
+      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.
+       */
+      setInlineSelection() {
+          if (this.firstSelectedOption) {
+              this.setInputToSelection();
+              this.control.setSelectionRange(this.filter.length, this.control.value.length, 'backward');
+          }
+      }
+      clearSelectionRange() {
+          const controlValueLength = this.control.value.length;
+          this.control.setSelectionRange(controlValueLength, controlValueLength);
+      }
+      /**
+       * Determines if a value update should involve emitting a change event, then updates the value.
+       */
+      syncValue() {
+          const newValue = this.selectedIndex > -1
+              ? this.firstSelectedOption?.text
+              : this.control.value;
+          this.updateValue(this.value !== newValue);
+      }
       updateListboxMaxHeightCssVariable() {
           if (this.listbox) {
               this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
@@ -21266,27 +21677,51 @@
   __decorate$1([
       attr
   ], Combobox.prototype, "appearance", void 0);
-  __decorate$1([
-      observable
-  ], Combobox.prototype, "dropdownButton", void 0);
   __decorate$1([
       attr({ attribute: 'error-text' })
   ], Combobox.prototype, "errorText", void 0);
   __decorate$1([
       attr({ attribute: 'error-visible', mode: 'boolean' })
   ], Combobox.prototype, "errorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'autocomplete', mode: 'fromView' })
+  ], Combobox.prototype, "autocomplete", void 0);
+  __decorate$1([
+      attr({ attribute: 'position' })
+  ], Combobox.prototype, "positionAttribute", void 0);
+  __decorate$1([
+      attr({ attribute: 'open', mode: 'boolean' })
+  ], Combobox.prototype, "open", void 0);
+  __decorate$1([
+      attr
+  ], Combobox.prototype, "placeholder", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "position", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "region", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "controlWrapper", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "control", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "listbox", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "dropdownButton", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "maxHeight", void 0);
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
-      baseClass: Combobox$1,
+      baseClass: FormAssociatedCombobox,
       template: template$u,
       styles: styles$D,
       shadowOptions: {
@@ -21324,6 +21759,7 @@
         ${errorTextTemplate}
     `
   });
+  applyMixins(Combobox, StartEnd, DelegatesARIACombobox);
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCombobox());
 
   /**
@@ -75345,7 +75781,7 @@ img.ProseMirror-separator {
   /**
    * Prerendering prepares render-ready dies data to be used by the rendering module
    */
-  class Prerendering {
+  let Prerendering$1 = class Prerendering {
       get labelsFontSize() {
           return this._labelsFontSize;
       }
@@ -75450,7 +75886,7 @@ img.ProseMirror-separator {
           rgbColor = new ColorRGBA64(rgbColor.r, rgbColor.g, rgbColor.b, this.calculateOpacity(dieTags, highlightedTags));
           return rgbColor.toStringWebRGBA();
       }
-  }
+  };
 
   /**
    * Data Manager uses Computations and Prerendering modules in order and exposes the results
@@ -75492,7 +75928,7 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.computations = new Computations$1(wafermap);
-          this.prerendering = new Prerendering(wafermap);
+          this.prerendering = new Prerendering$1(wafermap);
       }
       updateContainerDimensions() {
           this.computations.updateContainerDimensions();
@@ -75542,7 +75978,7 @@ img.ProseMirror-separator {
           this.defaultPadding = 0;
           this.baseMarginPercentage = 0.04;
       }
-      updateContainerDimensions() {
+      update() {
           const canvasDimensions = {
               width: this.wafermap.canvasWidth,
               height: this.wafermap.canvasHeight
@@ -75562,9 +75998,6 @@ img.ProseMirror-separator {
           };
           this._margin = this.calculateMarginAddition(baseMargin, canvasMargin);
           this._containerDimensions = this.calculateContainerDimensions(canvasDimensions, this._margin);
-          this.updateScales();
-      }
-      updateScales() {
           const containerDiameter = Math.min(this._containerDimensions.width, this._containerDimensions.height);
           const gridDimensions = this.gridDimensionsValidAndDefined()
               ? this.calculateGridDimensionsFromBoundingBox()
@@ -75674,6 +76107,66 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * Prerendering prepares render-ready dies data to be used by the rendering module
+   */
+  class Prerendering {
+      get labelsFontSize() {
+          return this._labelsFontSize;
+      }
+      get colorScale() {
+          return this._colorScale;
+      }
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.fontSizeFactor = 0.8;
+          this.colorScaleResolution = 10;
+      }
+      update() {
+          this._labelsFontSize = this.calculateLabelsFontSize(this.wafermap.experimentalDataManager.dieDimensions, this.wafermap.maxCharacters);
+          this._colorScale = this.calculateColorScale();
+      }
+      calculateColorScale() {
+          if (this.wafermap.colorScaleMode === WaferMapColorScaleMode.linear) {
+              const values = this.wafermap.colorScale.values.map(item => +item);
+              const d3ColorScale = linear()
+                  .domain(values)
+                  .range(this.wafermap.colorScale.colors);
+              let min = values[0];
+              let max = values[0];
+              values.forEach(value => {
+                  if (value < min) {
+                      min = value;
+                  }
+                  if (value > max) {
+                      max = value;
+                  }
+              });
+              // the linear color scale will not be infinite but will be limited by the color scale resolution
+              const valueSamples = ticks(min, max, values.length * this.colorScaleResolution);
+              return valueSamples.map(value => {
+                  return {
+                      color: d3ColorScale(value),
+                      value
+                  };
+              });
+          }
+          // ordinal color categories have to be sorted by value
+          return this.wafermap.colorScale.colors
+              .map((color, index) => {
+              return {
+                  color,
+                  value: +this.wafermap.colorScale.values[index]
+              };
+          })
+              .sort((a, b) => a.value - b.value);
+      }
+      calculateLabelsFontSize(dieDimensions, maxCharacters) {
+          return Math.min(dieDimensions.height, (dieDimensions.width / (Math.max(2, maxCharacters) * 0.5))
+              * this.fontSizeFactor);
+      }
+  }
+
   /**
    * Data Manager uses Computations and Prerendering modules in order and exposes the results
    */
@@ -75696,38 +76189,20 @@ img.ProseMirror-separator {
       get labelsFontSize() {
           return this.prerendering.labelsFontSize;
       }
-      get diesRenderInfo() {
-          return this.prerendering.diesRenderInfo;
-      }
-      get data() {
-          return this.dataMap;
+      get colorScale() {
+          return this.prerendering.colorScale;
       }
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.computations = new Computations(wafermap);
           this.prerendering = new Prerendering(wafermap);
       }
-      updateContainerDimensions() {
-          this.computations.updateContainerDimensions();
-          this.updateDataMap();
-          this.updateLabelsFontSize();
-      }
-      updateScales() {
-          this.computations.updateScales();
-          this.updateDataMap();
-          this.updateLabelsFontSize();
-      }
-      updateLabelsFontSize() {
-          this.prerendering.updateLabelsFontSize();
-      }
-      updateDiesRenderInfo() {
-          this.prerendering.updateDiesRenderInfo();
-      }
-      getWaferMapDie(point) {
-          return this.dataMap.get(`${point.x}_${point.y}`);
+      updateComputations() {
+          this.computations.update();
+          this.prerendering.update();
       }
-      updateDataMap() {
-          this.dataMap = new Map(this.wafermap.dies.map(die => [`${die.x}_${die.y}`, die]));
+      updatePrerendering() {
+          this.prerendering.update();
       }
   }
 
@@ -76608,18 +77083,14 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
       }
-      updateSortedDiesAndDrawWafer() {
-          // redundant function for backwards compatibility
-          this.drawWafer();
-      }
       drawWafer() {
           // rendering will be implemented in a future PR
           this.renderHover();
       }
       renderHover() {
-          this.wafermap.hoverWidth = this.wafermap.dataManager.dieDimensions.width
+          this.wafermap.hoverWidth = this.wafermap.experimentalDataManager.dieDimensions.width
               * this.wafermap.transform.k;
-          this.wafermap.hoverHeight = this.wafermap.dataManager.dieDimensions.height
+          this.wafermap.hoverHeight = this.wafermap.experimentalDataManager.dieDimensions.height
               * this.wafermap.transform.k;
           this.wafermap.hoverOpacity = this.wafermap.hoverDie === undefined
               ? HoverDieOpacity.hide
@@ -76628,17 +77099,17 @@ img.ProseMirror-separator {
       }
       calculateHoverTransform() {
           if (this.wafermap.hoverDie !== undefined) {
-              const scaledX = this.wafermap.dataManager.horizontalScale(this.wafermap.hoverDie.x);
+              const scaledX = this.wafermap.experimentalDataManager.horizontalScale(this.wafermap.hoverDie.x);
               if (scaledX === undefined) {
                   return '';
               }
-              const scaledY = this.wafermap.dataManager.verticalScale(this.wafermap.hoverDie.y);
+              const scaledY = this.wafermap.experimentalDataManager.verticalScale(this.wafermap.hoverDie.y);
               if (scaledY === undefined) {
                   return '';
               }
               const transformedPoint = this.wafermap.transform.apply([
-                  scaledX + this.wafermap.dataManager.margin.left,
-                  scaledY + this.wafermap.dataManager.margin.top
+                  scaledX + this.wafermap.experimentalDataManager.margin.left,
+                  scaledY + this.wafermap.experimentalDataManager.margin.top
               ]);
               return `translate(${transformedPoint[0]}, ${transformedPoint[1]})`;
           }
@@ -76653,7 +77124,7 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.onMouseMove = (event) => {
-              if (this.wafermap.isExperimentalRenderer()) {
+              if (this.wafermap.isExperimentalUpdate()) {
                   return;
               }
               const mousePosition = {
@@ -76698,8 +77169,7 @@ img.ProseMirror-separator {
           this.wafermap.removeEventListener('mouseout', this.onMouseOut);
       }
       calculateDieCoordinates(mousePosition) {
-          if (!this.wafermap.isExperimentalRenderer()
-              && this.wafermap.dataManager instanceof DataManager$1) {
+          if (!this.wafermap.isExperimentalUpdate()) {
               const originLocation = this.wafermap.originLocation;
               const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
                   || originLocation === WaferMapOriginLocation.topLeft
@@ -76732,12 +77202,8 @@ img.ProseMirror-separator {
   class HoverHandler {
       constructor(wafermap) {
           this.wafermap = wafermap;
-          /**
-           * @internal
-           * keep public for testing until data manager refactor
-           */
           this.onMouseMove = (event) => {
-              if (!this.wafermap.isExperimentalRenderer()) {
+              if (!this.wafermap.isExperimentalUpdate()) {
                   return;
               }
               // get original mouse position in case we are in zoom.
@@ -76792,8 +77258,7 @@ img.ProseMirror-separator {
           this.wafermap.removeEventListener('mouseout', this.onMouseOut);
       }
       calculateDieCoordinates(mousePosition) {
-          if (this.wafermap.isExperimentalRenderer()
-              && this.wafermap.dataManager instanceof DataManager) {
+          if (this.wafermap.isExperimentalUpdate()) {
               const originLocation = this.wafermap.originLocation;
               const xRoundFunction = originLocation === WaferMapOriginLocation.bottomLeft
                   || originLocation === WaferMapOriginLocation.topLeft
@@ -76804,8 +77269,10 @@ img.ProseMirror-separator {
                   ? Math.ceil
                   : Math.floor;
               // go to x and y scale to get the x,y values of the die.
-              const x = xRoundFunction(this.wafermap.dataManager.horizontalScale.invert(mousePosition.x - this.wafermap.dataManager.margin.left));
-              const y = yRoundFunction(this.wafermap.dataManager.verticalScale.invert(mousePosition.y - this.wafermap.dataManager.margin.top));
+              const x = xRoundFunction(this.wafermap.experimentalDataManager.horizontalScale.invert(mousePosition.x
+                  - this.wafermap.experimentalDataManager.margin.left));
+              const y = yRoundFunction(this.wafermap.experimentalDataManager.verticalScale.invert(mousePosition.y
+                  - this.wafermap.experimentalDataManager.margin.top));
               return { x, y };
           }
           return undefined;
@@ -76876,24 +77343,10 @@ img.ProseMirror-separator {
           this.dieLabelsHidden = false;
           this.dieLabelsSuffix = '';
           this.colorScaleMode = WaferMapColorScaleMode.linear;
-          /**
-           * @internal
-           */
-          this.stableDataManager = new DataManager$1(this.asRequiredFieldsWaferMap);
-          /**
-           * @internal
-           */
           this.experimentalDataManager = new DataManager(this.asRequiredFieldsWaferMap);
-          this.dataManager = this.stableDataManager;
-          /**
-           * @internal
-           */
-          this.mainRenderer = new RenderingModule(this.asRequiredFieldsWaferMap);
-          /**
-           * @internal
-           */
+          this.dataManager = new DataManager$1(this.asRequiredFieldsWaferMap);
           this.workerRenderer = new WorkerRenderer(this.asRequiredFieldsWaferMap);
-          this.renderer = this.mainRenderer;
+          this.renderer = new RenderingModule(this.asRequiredFieldsWaferMap);
           /**
            * @internal
            */
@@ -76951,6 +77404,36 @@ img.ProseMirror-separator {
           this.zoomHandler.disconnect();
           this.resizeObserver.unobserve(this);
       }
+      /**
+       * @internal
+       * Experimental update function called when an update is queued.
+       */
+      experimentalUpdate() {
+          if (this.validity.invalidDiesTableSchema) {
+              return;
+          }
+          if (this.waferMapUpdateTracker.requiresEventsUpdate) {
+              // zoom translateExtent needs to be recalculated when canvas size changes
+              this.zoomHandler.disconnect();
+              if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate
+                  || this.waferMapUpdateTracker.requiresScalesUpdate) {
+                  this.experimentalDataManager.updateComputations();
+                  this.workerRenderer.drawWafer();
+              }
+              else if (this.waferMapUpdateTracker.requiresLabelsFontSizeUpdate
+                  || this.waferMapUpdateTracker.requiresDiesRenderInfoUpdate) {
+                  this.experimentalDataManager.updatePrerendering();
+                  this.workerRenderer.drawWafer();
+              }
+              else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
+                  this.workerRenderer.drawWafer();
+              }
+              this.zoomHandler.connect();
+          }
+          else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
+              this.workerRenderer.renderHover();
+          }
+      }
       /**
        * @internal
        * Update function called when an update is queued.
@@ -76961,18 +77444,13 @@ img.ProseMirror-separator {
        */
       update() {
           this.validate();
-          if (this.validity.invalidDiesTableSchema) {
+          if (this.isExperimentalUpdate()) {
+              this.experimentalUpdate();
               return;
           }
-          this.renderer = this.isExperimentalRenderer()
-              ? this.workerRenderer
-              : this.mainRenderer;
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
               // zoom translateExtent needs to be recalculated when canvas size changes
               this.zoomHandler.disconnect();
-              this.dataManager = this.isExperimentalRenderer()
-                  ? this.experimentalDataManager
-                  : this.stableDataManager;
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                   this.dataManager.updateContainerDimensions();
                   this.renderer.updateSortedDiesAndDrawWafer();
@@ -77001,7 +77479,7 @@ img.ProseMirror-separator {
       /**
        * @internal
        */
-      isExperimentalRenderer() {
+      isExperimentalUpdate() {
           return this.diesTable !== undefined;
       }
       validate() {