@ni/nimble-components 24.1.9 → 24.1.11

package/dist/all-components-bundle.js

@@ -1715,8 +1715,20 @@
           return prev.concat(curr);
       }, null);
   }
+  /**
+   * A Symbol that can be added to a CSSStyleSheet to cause it to be prepended (rather than appended) to adoptedStyleSheets.
+   * @public
+   */
+  const prependToAdoptedStyleSheetsSymbol = Symbol("prependToAdoptedStyleSheets");
+  function separateSheetsToPrepend(sheets) {
+      const prepend = [];
+      const append = [];
+      sheets.forEach(x => (x[prependToAdoptedStyleSheetsSymbol] ? prepend : append).push(x));
+      return { prepend, append };
+  }
   let addAdoptedStyleSheets = (target, sheets) => {
-      target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+      const { prepend, append } = separateSheetsToPrepend(sheets);
+      target.adoptedStyleSheets = [...prepend, ...target.adoptedStyleSheets, ...append];
   };
   let removeAdoptedStyleSheets = (target, sheets) => {
       target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
@@ -1731,7 +1743,9 @@
           document.adoptedStyleSheets.push();
           document.adoptedStyleSheets.splice();
           addAdoptedStyleSheets = (target, sheets) => {
-              target.adoptedStyleSheets.push(...sheets);
+              const { prepend, append } = separateSheetsToPrepend(sheets);
+              target.adoptedStyleSheets.splice(0, 0, ...prepend);
+              target.adoptedStyleSheets.push(...append);
           };
           removeAdoptedStyleSheets = (target, sheets) => {
               for (const sheet of sheets) {
@@ -9040,6 +9054,7 @@
       constructor(source) {
           super();
           const sheet = new CSSStyleSheet();
+          sheet[prependToAdoptedStyleSheetsSymbol] = true;
           this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
           source.$fastController.addStyles(ElementStyles.create([sheet]));
       }
@@ -9476,23 +9491,7 @@
                   if (token) {
                       // Notify any token subscribers
                       token.notify(this.target);
-                      if (DesignTokenImpl.isCSSDesignToken(token)) {
-                          const parent = this.parent;
-                          const reflecting = this.isReflecting(token);
-                          if (parent) {
-                              const parentValue = parent.get(token);
-                              const sourceValue = source.get(token);
-                              if (parentValue !== sourceValue && !reflecting) {
-                                  this.reflectToCSS(token);
-                              }
-                              else if (parentValue === sourceValue && reflecting) {
-                                  this.stopReflectToCSS(token);
-                              }
-                          }
-                          else if (!reflecting) {
-                              this.reflectToCSS(token);
-                          }
-                      }
+                      this.updateCSSTokenReflection(source, token);
                   }
               },
           };
@@ -9566,6 +9565,25 @@
       get parent() {
           return childToParent.get(this) || null;
       }
+      updateCSSTokenReflection(source, token) {
+          if (DesignTokenImpl.isCSSDesignToken(token)) {
+              const parent = this.parent;
+              const reflecting = this.isReflecting(token);
+              if (parent) {
+                  const parentValue = parent.get(token);
+                  const sourceValue = source.get(token);
+                  if (parentValue !== sourceValue && !reflecting) {
+                      this.reflectToCSS(token);
+                  }
+                  else if (parentValue === sourceValue && reflecting) {
+                      this.stopReflectToCSS(token);
+                  }
+              }
+              else if (!reflecting) {
+                  this.reflectToCSS(token);
+              }
+          }
+      }
       /**
        * Checks if a token has been assigned an explicit value the node.
        * @param token - the token to check.
@@ -9731,6 +9749,7 @@
               return;
           }
           this.hydrate(token, this.getRaw(token));
+          this.updateCSSTokenReflection(this.store, token);
       }
       /**
        * Hydrates a token with a DesignTokenValue, making retrieval available.
@@ -11220,7 +11239,7 @@
                   item.setAttribute("tabindex", index === 0 ? "0" : "-1");
                   item.addEventListener("expanded-change", this.handleExpandedChanged);
                   item.addEventListener("focus", this.handleItemFocus);
-                  if (item instanceof MenuItem$1) {
+                  if (item instanceof MenuItem$1 || "startColumnCount" in item) {
                       item.startColumnCount = indent;
                   }
               });
@@ -13869,6 +13888,15 @@
     </template>
 `;
 
+  // returns the active element in the shadow context of the element in question.
+  function getRootActiveElement(element) {
+      const rootNode = element.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+          return rootNode.activeElement;
+      }
+      return document.activeElement;
+  }
+
   /**
    * A map for directionality derived from keyboard input strings,
    * visual orientation, and text direction.
@@ -14053,10 +14081,14 @@
        * @internal
        */
       setFocusedElement(activeIndex = this.activeIndex) {
-          var _a;
           this.activeIndex = activeIndex;
           this.setFocusableElements();
-          (_a = this.focusableElements[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+          if (this.focusableElements[this.activeIndex] &&
+              // Don't focus the toolbar element if some event handlers moved
+              // the focus on another element in the page.
+              this.contains(getRootActiveElement(this))) {
+              this.focusableElements[this.activeIndex].focus();
+          }
       }
       /**
        * Reduce a collection to only its focusable elements.
@@ -16301,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 08 Apr 2024 20:24:00 GMT
+   * Generated on Wed, 10 Apr 2024 17:29:50 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16956,7 +16988,7 @@
   const [linkFont, linkFontColor, linkDisabledFontColor, linkFontFamily, linkFontWeight, linkFontSize, linkFontLineHeight, linkFallbackFontFamily] = createFontTokens(tokenNames.linkFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [linkActiveFont, linkActiveFontColor, linkActiveDisabledFontColor, linkActiveFontFamily, linkActiveFontWeight, linkActiveFontSize, linkActiveFontLineHeight, linkActiveFallbackFontFamily] = createFontTokens(tokenNames.linkActiveFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [linkProminentFont, linkProminentFontColor, linkProminentDisabledFontColor, linkProminentFontFamily, linkProminentFontWeight, linkProminentFontSize, linkProminentFontLineHeight, linkProminentFallbackFontFamily] = createFontTokens(tokenNames.linkProminentFont, (element) => getColorForTheme(element, DigitalGreenDark105, PowerGreen, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
-  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, PowerGreen), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
+  const [linkActiveProminentFont, linkActiveProminentFontColor, linkActiveProminentDisabledFontColor, linkActiveProminentFontFamily, linkActiveProminentFontWeight, linkActiveProminentFontSize, linkActiveProminentFontLineHeight, linkActiveProminentFallbackFontFamily] = createFontTokens(tokenNames.linkActiveProminentFont, (element) => getColorForTheme(element, DigitalGreenLight, DigitalGreenLight, hexToRgbaCssColor(White, 0.6)), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), LinkLightUiFamily, LinkLightUiWeight, LinkLightUiSize, LinkLineHeight, LinkFallbackFontFamily);
   const [placeholderFont, placeholderFontColor, placeholderDisabledFontColor, placeholderFontFamily, placeholderFontWeight, placeholderFontSize, placeholderFontLineHeight, placeholderFallbackFontFamily] = createFontTokens(tokenNames.placeholderFont, (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.6), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), PlaceholderFamily, PlaceholderWeight, PlaceholderSize, PlaceholderLineHeight, PlaceholderFallbackFontFamily);
   const [bodyFont, bodyFontColor, bodyDisabledFontColor, bodyFontFamily, bodyFontWeight, bodyFontSize, bodyFontLineHeight, bodyFallbackFontFamily] = createFontTokens(tokenNames.bodyFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyFamily, BodyWeight, BodySize, BodyLineHeight, BodyFallbackFontFamily);
   const [bodyEmphasizedFont, bodyEmphasizedFontColor, bodyEmphasizedDisabledFontColor, bodyEmphasizedFontFamily, bodyEmphasizedFontWeight, bodyEmphasizedFontSize, bodyEmphasizedFontLineHeight, bodyEmphasizedFallbackFontFamily] = createFontTokens(tokenNames.bodyEmphasizedFont, (element) => getDefaultFontColorForTheme(element), (element) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), BodyEmphasizedFamily, BodyEmphasizedWeight, BodyEmphasizedSize, BodyEmphasizedLineHeight, BodyEmphasizedFallbackFontFamily);
@@ -17066,92 +17098,80 @@
   }
 
   const styles$W = css `
-    ${display('inline')}
+    @layer base, hover, focusVisible, active, disabled;
 
-    :host {
-        box-sizing: border-box;
-        font: ${linkFont};
-    }
-
-    .top-container {
-        display: contents;
-    }
-
-    [part='start'] {
-        display: none;
-    }
-
-    .control {
-        color: ${linkFontColor};
-        text-decoration: underline;
-    }
-
-    .control${focusVisible} {
-        display: inline;
-        outline: none;
-        box-shadow: inset 0px -1px ${linkFontColor};
-    }
-
-    .control:active {
-        color: ${linkActiveFontColor};
-        text-decoration: underline;
-    }
+    @layer base {
+        ${display('inline')}
 
-    .control${focusVisible}:active {
-        box-shadow: inset 0px -1px ${linkActiveFontColor};
-    }
+        :host {
+            box-sizing: border-box;
+            font: ${linkFont};
+        }
 
-    .control:not(:any-link) {
-        color: ${linkDisabledFontColor};
-        text-decoration: none;
-    }
+        .top-container {
+            display: contents;
+        }
 
-    .control:not(:any-link):active {
-        color: ${linkActiveDisabledFontColor};
-    }
+        .control {
+            color: ${linkFontColor};
+            text-decoration: underline;
+        }
 
-    :host([underline-hidden]) .control {
-        text-decoration: none;
-    }
+        :host([underline-hidden]) .control {
+            text-decoration: none;
+        }
 
-    :host([underline-hidden]) .control:hover {
-        text-decoration: underline;
-    }
+        :host([appearance='prominent']) .control {
+            color: ${linkProminentFontColor};
+        }
 
-    :host([underline-hidden]) .control${focusVisible} {
-        text-decoration: underline;
-    }
+        [part='start'] {
+            display: none;
+        }
 
-    :host([underline-hidden]) .control:not(:any-link) {
-        text-decoration: none;
-    }
+        .content {
+            pointer-events: none;
+        }
 
-    :host([appearance='prominent']) .control {
-        color: ${linkProminentFontColor};
+        [part='end'] {
+            display: none;
+        }
     }
 
-    :host([appearance='prominent']) .control:active {
-        color: ${linkActiveProminentFontColor};
+    @layer hover {
+        .control:any-link:hover {
+            text-decoration: underline;
+        }
     }
 
-    :host([appearance='prominent']) .control${focusVisible} {
-        box-shadow: inset 0px -1px ${linkProminentFontColor};
+    @layer focusVisible {
+        .control${focusVisible} {
+            outline: none;
+            box-shadow: inset 0px -1px;
+            text-decoration: underline;
+        }
     }
 
-    :host([appearance='prominent']) .control${focusVisible}:active {
-        box-shadow: inset 0px -1px ${linkActiveProminentFontColor};
-    }
+    @layer active {
+        .control:active {
+            color: ${linkActiveFontColor};
+            text-decoration: underline;
+            box-shadow: none;
+        }
 
-    :host([appearance='prominent']) .control:not(:any-link) {
-        color: ${linkProminentDisabledFontColor};
-    }
+        :host([appearance='prominent']) .control:active {
+            color: ${linkActiveProminentFontColor};
+        }
 
-    .content {
-        pointer-events: none;
+        :host([underline-hidden]) .control:active {
+            text-decoration: none;
+        }
     }
 
-    [part='end'] {
-        display: none;
+    @layer disabled {
+        .control:not(:any-link) {
+            color: ${linkDisabledFontColor};
+        }
     }
 `;
 
@@ -17941,20 +17961,6 @@
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleAnchorMenuItem());
-  // This is a workaround for the fact that FAST's menu uses `instanceof MenuItem`
-  // in their logic for indenting menu items. Since our AnchorMenuItem derives from
-  // AnchorBase and not FAST's MenuItem, we need to change their MenuItem's definition
-  // of `hasInstance` so that it includes our AnchorMenuItem, too.
-  //
-  // If/when we change FAST to test for the presence of `startColumnCount` instead
-  // of using `instanceof MenuItem`, we can remove this workaround. Here is the
-  // PR into FAST: https://github.com/microsoft/fast/pull/6667
-  const originalInstanceOf = MenuItem$1[Symbol.hasInstance].bind(MenuItem$1);
-  Object.defineProperty(MenuItem$1, Symbol.hasInstance, {
-      value(instance) {
-          return (originalInstanceOf(instance) || instance instanceof AnchorMenuItem);
-      }
-  });
 
   const styles$S = css `
     ${display('inline-flex')}
@@ -20070,7 +20076,7 @@
 
     .control:active {
         color: var(--ni-private-breadcrumb-link-active-font-color);
-        text-decoration: underline;
+        text-decoration: none;
     }
 
     [part='start'] {
@@ -53283,12 +53289,17 @@ img.ProseMirror-separator {
                                    * scheme and no matching mention pattern will be rendered as plain text (anchor with no href).
                                    * With this, the user can click the links only when the scheme is HTTP/HTTPS
                                    */
-                                  href: /^https?:\/\//i.test(href) ? href : null,
+                                  href: RichTextMarkdownParser.startsWithHttpOrHttps(href)
+                                      ? href
+                                      : null,
                                   rel: node.attrs.rel,
                                   // Adding `class` here is a workaround to render two mentions without a whitespace as display names
                                   // This attribute can be removed when the below issue is resolved
                                   // https://github.com/ni/nimble/issues/1707
-                                  class: href
+                                  class: href,
+                                  'underline-hidden': RichTextMarkdownParser.startsWithHttpOrHttps(href)
+                                      ? null
+                                      : true
                               }
                           ];
                       }
@@ -53306,6 +53317,9 @@ img.ProseMirror-separator {
           RichTextMarkdownParser.mentionConfigs = undefined;
           RichTextMarkdownParser.mentionedHrefs.clear();
       }
+      static startsWithHttpOrHttps(href) {
+          return /^https?:\/\//i.test(href);
+      }
   }
   _a$1 = RichTextMarkdownParser;
   RichTextMarkdownParser.mentionedHrefs = new Set();
@@ -58320,10 +58334,13 @@ img.ProseMirror-separator {
 
     ${
 /**
- * When an absolute link is not HTTPS/HTTP, the anchor tag renders without an `href`, appearing as plain text.
- * However, the `nimble-anchor` displays differently in color when the `href` attribute is absent.
- * To ensure a consistent appearance, the font color is forced to the default link color regardless of the `href`
- * attribute's presence.
+ * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link
+ * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.
+ * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like
+ * plain text when the `href` attribute is absent. They have a "disabled" color and may have an underline.
+ * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/
+ * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser
+ * emits an `underline-hidden` attribute when the `href` attribute is absent.
  *
  * See models/markdown-parser.ts where link elements are emitted for more info.
  */ ''}