@ni/nimble-components 20.17.4 → 20.17.6

package/dist/all-components-bundle.js

@@ -16301,7 +16301,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 10 Jan 2024 13:29:56 GMT
+   * Generated on Tue, 16 Jan 2024 21:34:36 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17820,7 +17820,7 @@
       // The following two handlers are workarounds for issues with anchor menu items in submenus.
       // Events can bubble up the DOM and get handled by the menu item in the parent menu. When that happens,
       // the menu item's handlers (FAST) return false and prevent the default action, i.e. navigation.
-      // FAST has this issue about supporting links in menus: https://github.com/microsoft/fast/issues/5415
+      // See tech debt issue: https://github.com/ni/nimble/issues/1740
       /**
        * @internal
        */
@@ -17842,13 +17842,10 @@
           }
           return true;
       }
-      // The FAST Menu manages the `tabindex` of its menu items. Because of a bug in Chromium
-      // (https://bugs.chromium.org/p/chromium/issues/detail?id=1346606), setting the tabindex on an element
-      // with `delegatesFocus=true` causes the element to lose focus. This causes the menu to close, preventing
-      // arrowing through the items or navigating to the url. As a workaround, we intercept attempts to
-      // set the tabindex on the host and instead set it on the inner anchor.
-      // The referenced Chromium bug is actually fixed, but it hasn't been pulled into Edge yet (it is in
-      // Chrome). Issue https://github.com/ni/nimble/issues/1118 tracks removal of this workaround.
+      // The FAST Menu manages the `tabindex` of its menu items.
+      // When keyboard navigating to an item, it sets that item's `tabindex` to 0.
+      // We need to pass this on to the anchor, otherwise an anchor without an href
+      // will not be focusable and will prevent arrowing through the menu.
       setAttribute(qualifiedName, value) {
           if (qualifiedName === 'tabindex') {
               this.anchor.setAttribute(qualifiedName, value);
@@ -17857,11 +17854,9 @@
               super.setAttribute(qualifiedName, value);
           }
       }
-      // This is part of the bug workaround described above (in setAttribute)
       get tabIndex() {
           return this.anchor.tabIndex;
       }
-      // This is part of the bug workaround described above (in setAttribute)
       set tabIndex(value) {
           this.anchor.tabIndex = value;
       }
@@ -18339,10 +18334,15 @@
         --ni-private-tree-item-nested-width: 0;
     }
 
+    :host([disabled]) {
+        color: ${bodyDisabledFontColor};
+        cursor: default;
+    }
+
     .control {
         display: flex;
         text-decoration: none;
-        color: ${bodyFontColor};
+        color: inherit;
     }
 
     .control${focusVisible} {
@@ -18351,10 +18351,6 @@
         outline-offset: -2px;
     }
 
-    :host([disabled]) .control {
-        cursor: not-allowed;
-    }
-
     .positioning-region {
         display: flex;
         position: relative;
@@ -18367,6 +18363,10 @@
         background: ${fillHoverColor};
     }
 
+    :host([disabled]) .positioning-region:hover {
+        background: transparent;
+    }
+
     :host([selected]) .positioning-region {
         background: ${fillSelectedColor};
     }
@@ -18395,11 +18395,6 @@
         margin-inline-start: ${iconSize};
     }
 
-    :host([disabled]) .content-region {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
     ${
 /* this rule keeps children without an icon text aligned with parents */ ''}
     [part="start"] {
@@ -18409,12 +18404,12 @@
     ${ /* the start class is applied when the corresponding slot is filled */''}
     .start {
         display: flex;
-        fill: currentcolor;
         margin-inline-start: ${iconSize};
         margin-inline-end: ${iconSize};
     }
 
     slot[name='start']::slotted(*) {
+        ${iconColor.cssCustomProperty}: currentcolor;
         width: ${iconSize};
         height: ${iconSize};
     }
@@ -23815,6 +23810,7 @@
           this.propertyNotifier.subscribe(this);
       }
       disconnectedCallback() {
+          super.disconnectedCallback();
           this.propertyNotifier.unsubscribe(this);
           if (this.themeProvider) {
               for (const token of Object.values(this.supportedLabels)) {
@@ -63464,11 +63460,11 @@ img.ProseMirror-separator {
               }
           });
       }
-      connectedCallback() {
+      connect() {
           this.viewportResizeObserver.observe(this.table.viewport);
           this.updateVirtualizer();
       }
-      disconnectedCallback() {
+      disconnect() {
           this.viewportResizeObserver.disconnect();
       }
       dataChanged() {
@@ -64443,7 +64439,7 @@ img.ProseMirror-separator {
       connectedCallback() {
           super.connectedCallback();
           this.initialize();
-          this.virtualizer.connectedCallback();
+          this.virtualizer.connect();
           this.viewport.addEventListener('scroll', this.onViewPortScroll, {
               passive: true
           });
@@ -64452,7 +64448,7 @@ img.ProseMirror-separator {
       }
       disconnectedCallback() {
           super.disconnectedCallback();
-          this.virtualizer.disconnectedCallback();
+          this.virtualizer.disconnect();
           this.viewport.removeEventListener('scroll', this.onViewPortScroll);
           document.removeEventListener('keydown', this.onKeyDown);
           document.removeEventListener('keyup', this.onKeyUp);
@@ -67334,6 +67330,7 @@ img.ProseMirror-separator {
        * @internal
        */
       disconnectedCallback() {
+          super.disconnectedCallback();
           this.resizeObserver?.disconnect();
       }
       /**
@@ -67942,6 +67939,11 @@ img.ProseMirror-separator {
         --ni-private-tree-item-nested-width: 0;
     }
 
+    :host([disabled]) {
+        color: ${bodyDisabledFontColor};
+        cursor: default;
+    }
+
     ${ /* this controls the side border */''}
     :host([${groupSelectedAttribute}])::after {
         background: ${borderHoverColor};
@@ -67983,6 +67985,10 @@ img.ProseMirror-separator {
         background: ${fillHoverSelectedColor};
     }
 
+    :host([disabled]) .positioning-region:hover {
+        background-color: transparent;
+    }
+
     .positioning-region::before {
         content: '';
         display: block;
@@ -68007,11 +68013,6 @@ img.ProseMirror-separator {
         outline: none;
     }
 
-    :host([disabled]) .content-region {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
     .expand-collapse-button {
         background: none;
         border: none;
@@ -68021,7 +68022,6 @@ img.ProseMirror-separator {
         padding: 0px;
         justify-content: center;
         align-items: center;
-        cursor: pointer;
         margin-left: 10px;
         position: absolute;
     }
@@ -68044,12 +68044,12 @@ img.ProseMirror-separator {
 /* the start class is applied when the corresponding slots is filled */ ''}
     .start {
         display: flex;
-        fill: currentcolor;
         margin-inline-start: ${iconSize};
         margin-inline-end: ${iconSize};
     }
 
     slot[name='start']::slotted(*) {
+        ${iconColor.cssCustomProperty}: currentcolor;
         width: ${iconSize};
         height: ${iconSize};
     }