@ni/nimble-components 21.0.4 → 21.1.0

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 25 Jan 2024 02:44:22 GMT
+   * Generated on Wed, 31 Jan 2024 20:08:27 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -52346,10 +52346,6 @@ img.ProseMirror-separator {
           this.mappingConfigs = mentionInternals.mappingConfigs;
           this.viewElement = mentionInternals.viewElement;
       }
-      static isObservedMentionInternalsProperty(arg) {
-          return (typeof arg === 'string'
-              && ['pattern', 'mappingConfigs'].includes(arg));
-      }
       isValidMentionHref(mentionHref) {
           return this.regexPattern.test(mentionHref);
       }
@@ -52380,6 +52376,150 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * Generic Tracker which sets or resets provided flags
+   */
+  class Tracker {
+      constructor(trackedItemsList) {
+          this.trackedItems = {};
+          this.trackedItems = trackedItemsList.reduce((r, key) => {
+              return {
+                  ...r,
+                  [key]: false
+              };
+          }, this.trackedItems);
+      }
+      getTrackedItems() {
+          return { ...this.trackedItems };
+      }
+      isTracked(key) {
+          return this.trackedItems[key];
+      }
+      track(key) {
+          this.trackedItems[key] = true;
+      }
+      untrack(key) {
+          this.trackedItems[key] = false;
+      }
+      trackAll() {
+          this.setAllKeys(true);
+      }
+      untrackAll() {
+          this.setAllKeys(false);
+      }
+      allTracked() {
+          return Object.values(this.trackedItems).every(x => x);
+      }
+      anyTracked() {
+          return Object.values(this.trackedItems).some(x => x);
+      }
+      noneTracked() {
+          return Object.values(this.trackedItems).every(x => !x);
+      }
+      setAllKeys(value) {
+          this.trackedItems = Object.keys(this.trackedItems).reduce((r, key) => {
+              return {
+                  ...r,
+                  [key]: value
+              };
+          }, this.trackedItems);
+      }
+  }
+
+  /**
+   * Generic Update Tracker Utility which extends Tracker Utility with update logic
+   */
+  class UpdateTracker extends Tracker {
+  }
+
+  const trackedItems$2 = ['pattern', 'mappingConfigs', 'buttonLabel'];
+  /**
+   * Helper class to track what updates are needed to the rich text components based on configuration
+   * changes.
+   */
+  class RichTextUpdateTracker extends UpdateTracker {
+      constructor(richText) {
+          super(trackedItems$2);
+          this.richText = richText;
+          this.updateQueued = false;
+      }
+      get updatePattern() {
+          return this.isTracked('pattern');
+      }
+      get updateMappingConfigs() {
+          return this.isTracked('mappingConfigs');
+      }
+      get updateButtonLabel() {
+          return this.isTracked('buttonLabel');
+      }
+      trackMentionInternalsPropertyChanged(changedMentionInternalsProperty) {
+          switch (changedMentionInternalsProperty) {
+              case 'mappingConfigs':
+                  this.track('mappingConfigs');
+                  break;
+              case 'pattern':
+                  this.track('pattern');
+                  break;
+              case 'buttonLabel':
+                  this.track('buttonLabel');
+                  break;
+          }
+          this.queueUpdate();
+      }
+      trackMentionElementsInstancesChanged() {
+          this.track('pattern');
+          this.track('mappingConfigs');
+          this.track('buttonLabel');
+          this.queueUpdate();
+      }
+      queueUpdate() {
+          if (!this.richText.$fastController.isConnected) {
+              return;
+          }
+          if (!this.updateQueued) {
+              this.updateQueued = true;
+              DOM.queueUpdate(() => {
+                  this.richText.createConfig();
+                  this.untrackAll();
+                  this.updateQueued = false;
+              });
+          }
+      }
+  }
+
+  /**
+   * Helper class for the nimble rich text components to validate that the configuration
+   * is valid and report which aspects of the configuration are valid or invalid.
+   */
+  class RichTextValidator {
+      constructor() {
+          this.invalidMentionConfiguration = false;
+          this.duplicateMentionConfiguration = false;
+      }
+      getValidity() {
+          return {
+              invalidMentionConfiguration: this.invalidMentionConfiguration,
+              duplicateMentionConfiguration: this.duplicateMentionConfiguration
+          };
+      }
+      isValid() {
+          return Object.values(this.getValidity()).every(x => x === false);
+      }
+      validate(mentions) {
+          this.validateDuplicateMentionConfigurations(mentions);
+          this.validateMentionConfigurations(mentions);
+      }
+      validateMentionConfigurations(mentions) {
+          this.invalidMentionConfiguration = mentions.some(x => !x.mentionInternals.validConfiguration);
+          return !this.invalidMentionConfiguration;
+      }
+      validateDuplicateMentionConfigurations(mentions) {
+          const mentionChars = mentions.map(mention => mention.mentionInternals.character);
+          this.duplicateMentionConfiguration = mentionChars.length !== new Set(mentionChars).size;
+          return !this.duplicateMentionConfiguration;
+      }
+  }
+
   async function waitUntilCustomElementsDefinedAsync(elements) {
       const definedElements = elements.map(async (item) => (item.matches(':not(:defined)')
           ? customElements.whenDefined(item.localName)
@@ -52401,29 +52541,57 @@ img.ProseMirror-separator {
            * @internal
            */
           this.childItems = [];
+          this.richTextUpdateTracker = new RichTextUpdateTracker(this);
+          this.richTextValidator = new RichTextValidator();
+      }
+      /**
+       * @public
+       */
+      get validity() {
+          return this.richTextValidator.getValidity();
+      }
+      /**
+       * @public
+       */
+      checkValidity() {
+          return this.richTextValidator.isValid();
       }
       /**
        * @internal
        */
       handleChange(source, args) {
-          if (source instanceof MentionInternals
-              && MarkdownParserMentionConfiguration.isObservedMentionInternalsProperty(args)) {
-              this.configuration = this.createConfig();
+          if (source instanceof MentionInternals && typeof args === 'string') {
+              this.richTextUpdateTracker.trackMentionInternalsPropertyChanged(args);
           }
       }
-      mentionElementsChanged(_old, _new) {
-          this.observeMentionInternals();
-          this.configuration = this.createConfig();
-      }
+      /**
+       * @internal
+       */
       createConfig() {
-          return new Configuration(this.mentionElements);
+          this.validate();
+          if (this.richTextValidator.isValid()) {
+              if (this.richTextUpdateTracker.updateMappingConfigs
+                  || this.richTextUpdateTracker.updatePattern) {
+                  this.configuration = new Configuration(this.mentionElements);
+              }
+          }
+          else {
+              this.configuration = undefined;
+          }
       }
-      childItemsChanged(_prev, _next) {
-          void this.updateMentionElementsFromChildItems();
+      validate() {
+          this.richTextValidator.validate(this.mentionElements);
+      }
+      childItemsChanged(prev, _next) {
+          if (prev !== undefined) {
+              void this.updateMentionElementsFromChildItems();
+          }
       }
       async updateMentionElementsFromChildItems() {
           await waitUntilCustomElementsDefinedAsync(this.childItems);
           this.mentionElements = this.childItems.filter((x) => x instanceof RichTextMention);
+          this.observeMentionInternals();
+          this.richTextUpdateTracker.trackMentionElementsInstancesChanged();
       }
       observeMentionInternals() {
           this.removeMentionInternalsObservers();
@@ -52443,36 +52611,10 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichText.prototype, "childItems", void 0);
-  __decorate$1([
-      observable
-  ], RichText.prototype, "mentionElements", void 0);
   __decorate$1([
       observable
   ], RichText.prototype, "configuration", void 0);
 
-  /**
-   * A configuration object for a Mention extension, to be used by the editor for loading mention plugins in tiptap.
-   * This object maintains the necessary internal values for loading mention extension.
-   */
-  class MentionExtensionConfiguration {
-      constructor(mentionInternals) {
-          MentionExtensionConfiguration.instance += 1;
-          const key = `${mentionPluginPrefix}${MentionExtensionConfiguration.instance}`;
-          this.name = key;
-          this.key = key;
-          this.viewElement = mentionInternals.viewElement;
-          this.character = mentionInternals.character;
-          this.mappingConfigs = mentionInternals.mappingConfigs;
-          this.iconTemplate = mentionInternals.iconTemplate;
-          this.buttonLabel = mentionInternals.buttonLabel ?? '';
-          this.mentionUpdateEmitter = mentionInternals.mentionUpdateEmitter;
-      }
-      static isObservedMentionInternalsProperty(arg) {
-          return typeof arg === 'string' && ['buttonLabel'].includes(arg);
-      }
-  }
-  MentionExtensionConfiguration.instance = 0;
-
   const starInputRegex$1 = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))$/;
   const starPasteRegex$1 = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))/g;
   const underscoreInputRegex$1 = /(?:^|\s)((?:__)((?:[^__]+))(?:__))$/;
@@ -56317,6 +56459,26 @@ img.ProseMirror-separator {
       return Fragment.fromArray(updatedNodes);
   }
 
+  /**
+   * A configuration object for a Mention extension, to be used by the editor for loading mention plugins in tiptap.
+   * This object maintains the necessary internal values for loading mention extension.
+   */
+  class MentionExtensionConfiguration {
+      constructor(mentionInternals) {
+          MentionExtensionConfiguration.instance += 1;
+          const key = `${mentionPluginPrefix}${MentionExtensionConfiguration.instance}`;
+          this.name = key;
+          this.key = key;
+          this.viewElement = mentionInternals.viewElement;
+          this.character = mentionInternals.character;
+          this.mappingConfigs = mentionInternals.mappingConfigs;
+          this.iconTemplate = mentionInternals.iconTemplate;
+          this.buttonLabel = mentionInternals.buttonLabel ?? '';
+          this.mentionUpdateEmitter = mentionInternals.mentionUpdateEmitter;
+      }
+  }
+  MentionExtensionConfiguration.instance = 0;
+
   /**
    * EditorConfiguration which will hold mentionExtensionConfig for configuring editor's mention extension and RichTextMarkdownSerializer
    */
@@ -56619,18 +56781,6 @@ img.ProseMirror-separator {
               });
           }
       }
-      /**
-       * @internal
-       */
-      handleChange(source, args) {
-          if (source instanceof MentionInternals
-              && MentionExtensionConfiguration.isObservedMentionInternalsProperty(args)) {
-              this.configuration = this.createConfig();
-          }
-          else {
-              super.handleChange(source, args);
-          }
-      }
       /**
        * @internal
        */
@@ -56641,14 +56791,24 @@ img.ProseMirror-separator {
           this.mentionListbox?.close();
       }
       createConfig() {
-          return new EditorConfiguration(this.mentionElements);
+          this.validate();
+          if (this.richTextValidator.isValid()) {
+              if (this.richTextUpdateTracker.updateButtonLabel
+                  || this.richTextUpdateTracker.updateMappingConfigs
+                  || this.richTextUpdateTracker.updatePattern) {
+                  this.configuration = new EditorConfiguration(this.mentionElements);
+              }
+          }
+          else {
+              this.configuration = undefined;
+          }
       }
       isMentionExtensionConfigUnchanged(prev, next) {
           const prevConfigCharacters = prev?.mentionExtensionConfig
               .map(config => config.character)
               .sort((a, b) => a.localeCompare(b))
               .toString();
-          const nextConfigCharacters = next.mentionExtensionConfig
+          const nextConfigCharacters = next?.mentionExtensionConfig
               .map(config => config.character)
               .sort((a, b) => a.localeCompare(b))
               .toString();
@@ -63844,62 +64004,6 @@ img.ProseMirror-separator {
       observable
   ], TableLayoutManager.prototype, "activeColumnIndex", void 0);
 
-  /**
-   * Generic Tracker which sets or resets provided flags
-   */
-  class Tracker {
-      constructor(trackedItemsList) {
-          this.trackedItems = {};
-          this.trackedItems = trackedItemsList.reduce((r, key) => {
-              return {
-                  ...r,
-                  [key]: false
-              };
-          }, this.trackedItems);
-      }
-      getTrackedItems() {
-          return { ...this.trackedItems };
-      }
-      isTracked(key) {
-          return this.trackedItems[key];
-      }
-      track(key) {
-          this.trackedItems[key] = true;
-      }
-      untrack(key) {
-          this.trackedItems[key] = false;
-      }
-      trackAll() {
-          this.setAllKeys(true);
-      }
-      untrackAll() {
-          this.setAllKeys(false);
-      }
-      allTracked() {
-          return Object.values(this.trackedItems).every(x => x);
-      }
-      anyTracked() {
-          return Object.values(this.trackedItems).some(x => x);
-      }
-      noneTracked() {
-          return Object.values(this.trackedItems).every(x => !x);
-      }
-      setAllKeys(value) {
-          this.trackedItems = Object.keys(this.trackedItems).reduce((r, key) => {
-              return {
-                  ...r,
-                  [key]: value
-              };
-          }, this.trackedItems);
-      }
-  }
-
-  /**
-   * Generic Update Tracker Utility which extends Tracker Utility with update logic
-   */
-  class UpdateTracker extends Tracker {
-  }
-
   const isColumnProperty = (changedProperty, ...args) => {
       for (const arg of args) {
           if (changedProperty === arg) {
@@ -66988,6 +67092,83 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * Format for numbers (with optional units) in a number-text table column.
+   */
+  class NumberTextUnitFormat extends UnitFormat {
+      constructor(locale, options) {
+          super();
+          this._resolvedOptions = this.resolveOptions(options);
+          this.resolvedUnitFormat = this.resolveUnitFormat(locale, this._resolvedOptions);
+      }
+      resolvedOptions() {
+          return { ...this._resolvedOptions };
+      }
+      optionsMatch(targetOptions) {
+          const targetResolvedOptions = this.resolveOptions(targetOptions);
+          return (this._resolvedOptions.decimalDigits
+              === targetResolvedOptions.decimalDigits
+              && this._resolvedOptions.decimalMaximumDigits
+                  === targetResolvedOptions.decimalMaximumDigits
+              && this._resolvedOptions.numberTextFormat
+                  === targetResolvedOptions.numberTextFormat
+              && this._resolvedOptions.unitScale === targetResolvedOptions.unitScale);
+      }
+      tryFormat(number) {
+          return this.resolvedUnitFormat.format(number);
+      }
+      resolveUnitFormat(locale, options) {
+          const { numberTextFormat, decimalMaximumDigits, decimalDigits, unitScale } = options;
+          if (numberTextFormat === NumberTextFormat.default) {
+              return new DefaultUnitFormat(locale, {
+                  unitScale
+              });
+          }
+          if (typeof decimalDigits === 'number') {
+              return new DecimalUnitFormat(locale, {
+                  minimumFractionDigits: decimalDigits,
+                  maximumFractionDigits: decimalDigits,
+                  unitScale
+              });
+          }
+          return new DecimalUnitFormat(locale, {
+              minimumFractionDigits: 0,
+              maximumFractionDigits: decimalMaximumDigits,
+              unitScale
+          });
+      }
+      resolveOptions(options) {
+          if (!options || options.numberTextFormat === NumberTextFormat.default) {
+              return {
+                  numberTextFormat: NumberTextFormat.default,
+                  decimalDigits: undefined,
+                  decimalMaximumDigits: undefined,
+                  unitScale: options?.unitScale ?? passthroughUnitScale
+              };
+          }
+          const hasDecimalDigits = typeof options.decimalDigits === 'number';
+          const hasDecimalMaximumDigits = typeof options.decimalMaximumDigits === 'number';
+          if (hasDecimalDigits && hasDecimalMaximumDigits) {
+              throw new Error('decimalDigits and decimalMaximumDigits are mutually exclusive. Do not specify both.');
+          }
+          if (!hasDecimalDigits && !hasDecimalMaximumDigits) {
+              return {
+                  numberTextFormat: NumberTextFormat.decimal,
+                  decimalDigits: NumberTextUnitFormat.defaultDecimalDigits,
+                  decimalMaximumDigits: undefined,
+                  unitScale: options.unitScale ?? passthroughUnitScale
+              };
+          }
+          return {
+              numberTextFormat: NumberTextFormat.decimal,
+              decimalDigits: options.decimalDigits,
+              decimalMaximumDigits: options.decimalMaximumDigits,
+              unitScale: options.unitScale ?? passthroughUnitScale
+          };
+      }
+  }
+  NumberTextUnitFormat.defaultDecimalDigits = 2;
+
   const numberTextValidityFlagNames = [
       'invalidDecimalDigits',
       'invalidDecimalMaximumDigits',
@@ -67048,7 +67229,6 @@ img.ProseMirror-separator {
       observable
   ], Unit.prototype, "resolvedUnitScale", void 0);
 
-  const defaultDecimalDigits = 2;
   /**
    * The table column for displaying numbers as text.
    */
@@ -67144,26 +67324,14 @@ img.ProseMirror-separator {
       }
       createFormatter() {
           const unitScale = this.unit?.resolvedUnitScale;
-          switch (this.format) {
-              case NumberTextFormat.decimal: {
-                  const minimumFractionDigits = typeof this.decimalMaximumDigits === 'number'
-                      ? 0
-                      : this.decimalDigits ?? defaultDecimalDigits;
-                  const maximumFractionDigits = this.decimalMaximumDigits
-                      ?? this.decimalDigits
-                      ?? defaultDecimalDigits;
-                  return new DecimalUnitFormat(lang.getValueFor(this), {
-                      minimumFractionDigits,
-                      maximumFractionDigits,
-                      unitScale
-                  });
-              }
-              default: {
-                  return new DefaultUnitFormat(lang.getValueFor(this), {
-                      unitScale
-                  });
-              }
-          }
+          return new NumberTextUnitFormat(lang.getValueFor(this), {
+              // Attribute values sometimes resolve to either null or undefined
+              // See https://github.com/microsoft/fast/issues/6630
+              numberTextFormat: this.format ?? undefined,
+              decimalDigits: this.decimalDigits ?? undefined,
+              decimalMaximumDigits: this.decimalMaximumDigits ?? undefined,
+              unitScale
+          });
       }
       determineCellContentAlignment() {
           if (this.alignment === NumberTextAlignment.left) {