@ni/nimble-components 20.17.0 → 20.17.2

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 04 Jan 2024 21:07:51 GMT
+   * Generated on Fri, 05 Jan 2024 14:36:09 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17338,7 +17338,7 @@
 /*
     Not sure why but this is needed to get buttons with icons and buttons
     without icons to align on the same line when the button is inline-flex
-    See: https://github.com/microsoft/fast/issues/5414
+    See: https://github.com/ni/nimble/issues/503
 */ ''}
             vertical-align: middle;
         }
@@ -18576,11 +18576,18 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
+  const ZIndexLevels = {
+      zIndex1: '1',
+      // Original usages of 1000 were to compete with jqx grid usage of z-index 200 for table headers
+      // See: https://github.com/ni/nimble/pull/530#discussion_r863076750
+      zIndex1000: '1000'
+  };
+
   const styles$P = css `
     :host {
         contain: layout;
         display: block;
-        z-index: 1000;
+        z-index: ${ZIndexLevels.zIndex1000};
     }
 `;
 
@@ -20642,12 +20649,10 @@
         box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
-        left: 0;
         overflow-y: auto;
         width: 100%;
         --ni-private-listbox-padding: ${smallPadding};
         max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});
-        z-index: 1;
         box-shadow: ${elevation2BoxShadow};
         border: 1px solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};
@@ -56618,8 +56623,10 @@ img.ProseMirror-separator {
        * @internal
        */
       configurationChanged(prev, next) {
+          const formatButtonsState = this.getButtonsState(this.tiptapEditor);
+          const { from, to } = this.tiptapEditor.view.state.selection;
           if (this.isMentionExtensionConfigUnchanged(prev, next)) {
-              this.refreshMarkdownContent();
+              this.setMarkdown(this.getMarkdown());
           }
           else {
               const mentionExtensionConfig = this.getMentionExtensionConfig();
@@ -56628,6 +56635,8 @@ img.ProseMirror-separator {
               this.initializeEditor();
               this.setMarkdown(currentStateMarkdown);
           }
+          this.tiptapEditor.commands.setTextSelection({ from, to });
+          this.resetEditorButtonsState(formatButtonsState);
           this.setActiveMappingConfigs();
       }
       /**
@@ -56973,11 +56982,22 @@ img.ProseMirror-separator {
       getMentionExtensionConfigFromCharacter(character) {
           return this.getMentionExtensionConfig().find(config => config.character === character);
       }
-      // This method restore the cursor selection after setting the editor content when the editor is focused
-      refreshMarkdownContent() {
-          const { from, to } = this.tiptapEditor.view.state.selection;
-          this.setMarkdown(this.getMarkdown());
-          this.tiptapEditor.commands.setTextSelection({ from, to });
+      resetEditorButtonsState(buttonsState) {
+          if (buttonsState?.bold && !this.tiptapEditor.isActive('bold')) {
+              this.tiptapEditor.chain().focus().toggleBold().run();
+          }
+          if (buttonsState?.italics && !this.tiptapEditor.isActive('italic')) {
+              this.tiptapEditor.chain().focus().toggleItalic().run();
+          }
+      }
+      getButtonsState(tiptapEditor) {
+          if (!this.$fastController.isConnected) {
+              return undefined;
+          }
+          return {
+              bold: tiptapEditor.isActive('bold'),
+              italics: tiptapEditor.isActive('italic')
+          };
       }
   }
   __decorate$1([
@@ -61845,13 +61865,13 @@ img.ProseMirror-separator {
 
     .column-divider.active {
         display: block;
-        z-index: 1;
+        z-index: ${ZIndexLevels.zIndex1};
     }
 
     .header-container:hover .column-divider.left,
     .header-container:hover .column-divider.right {
         display: block;
-        z-index: 1;
+        z-index: ${ZIndexLevels.zIndex1};
     }
 
     .column-divider.left {