@ni/nimble-components 30.0.8 → 30.1.0

package/dist/all-components-bundle.js

@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Mon, 22 Jul 2024 15:29:17 GMT
+   * Generated on Tue, 23 Jul 2024 20:13:03 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -18773,6 +18773,7 @@
    * ```
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
+  /* eslint-enable max-classes-per-file */
 
   const styles$T = css `
     ${display('flex')}
@@ -20862,10 +20863,6 @@ so this becomes the fallback color for the slot */ ''}
         width: 0px;
     }
 
-    [part='start'] {
-        display: none;
-    }
-
     .control {
         align-items: center;
         cursor: pointer;
@@ -20893,10 +20890,59 @@ so this becomes the fallback color for the slot */ ''}
         border-bottom-color: ${failColor};
     }
 
+    [part='start'] {
+        display: none;
+    }
+
+    .selected-value {
+        flex: auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 0px;
+        padding-left: ${mediumPadding};
+    }
+
+    .selected-value[disabled]::placeholder {
+        color: ${bodyDisabledFontColor};
+    }
+
+    .indicator {
+        flex: none;
+        margin-left: ${smallPadding};
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${bodyFontColor};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${bodyDisabledFontColor};
+    }
+
+    [part='end'] {
+        margin-inline-start: auto;
+    }
+
+    :host([open][position='above']) .anchored-region {
+        padding-bottom: ${smallPadding};
+    }
+
+    :host([open][position='below']) .anchored-region {
+        padding-top: ${smallPadding};
+    }
+
     .listbox {
         display: inline-flex;
         flex-direction: column;
-        overflow-y: auto;
         width: 100%;
         --ni-private-listbox-visible-option-count: 10.5;
         --ni-private-listbox-anchor-element-gap: ${smallPadding};
@@ -20930,12 +20976,6 @@ so this becomes the fallback color for the slot */ ''}
         --ni-private-listbox-loading-indicator-height: ${controlHeight};
     }
 
-    .listbox slot {
-        display: block;
-        background: transparent;
-        padding: var(--ni-private-listbox-padding);
-    }
-
     :host([open][position='above']) .listbox {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -20946,55 +20986,33 @@ so this becomes the fallback color for the slot */ ''}
         border-top-right-radius: 0;
     }
 
-    :host([open][position='above']) .anchored-region {
-        padding-bottom: ${smallPadding};
+    .scrollable-region {
+        overflow-y: auto;
     }
 
-    :host([open][position='below']) .anchored-region {
-        padding-top: ${smallPadding};
+    .listbox slot {
+        display: block;
+        background: transparent;
+        padding: var(--ni-private-listbox-padding);
     }
 
-    .selected-value {
-        flex: auto;
-        font-family: inherit;
-        text-align: start;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding: 0px;
-        padding-left: ${mediumPadding};
+    .listbox.empty slot {
+        display: none;
     }
 
-    .selected-value[disabled]::placeholder {
-        color: ${bodyDisabledFontColor};
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: none;
     }
 
-    .indicator {
-        flex: none;
-        margin-left: ${smallPadding};
-        padding-right: 8px;
+    .no-results-label {
+        color: ${placeholderFontColor};
+        height: ${controlHeight};
+        display: inline-flex;
         display: flex;
-        justify-content: center;
+        flex: 1 0 auto;
         align-items: center;
-    }
-
-    .indicator slot[name='indicator'] svg {
-        width: ${iconSize};
-        height: ${iconSize};
-        fill: ${bodyFontColor};
-    }
-
-    :host([disabled]) .indicator slot[name='indicator'] svg {
-        fill: ${bodyDisabledFontColor};
-    }
-
-    [part='end'] {
-        margin-inline-start: auto;
-    }
-
-    ::slotted([role='option']),
-    ::slotted(option) {
-        flex: none;
+        padding: ${smallPadding} ${mediumPadding};
     }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.underline, css `
             .control {
@@ -21148,10 +21166,6 @@ so this becomes the fallback color for the slot */ ''}
     :host([disabled]) .dropdown-icon {
         fill: ${bodyDisabledFontColor};
     }
-
-    :host(:empty) .listbox {
-        display: none;
-    }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
             :host([error-visible]) .control {
                 border-bottom-width: ${borderWidth};
@@ -21214,6 +21228,7 @@ so this becomes the fallback color for the slot */ ''}
       return new AttachedBehaviorHTMLDirective('nimble-overflow', OverflowBehavior, propertyName);
   }
 
+  /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$x = (context, definition) => html `
     <template
@@ -21269,7 +21284,11 @@ so this becomes the fallback color for the slot */ ''}
             horizontal-scaling="anchor"
             ?hidden="${x => !x.open}">
             <div
-                class="listbox"
+                class="
+                    listbox
+                    scrollable-region
+                    ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
+                "
                 id="${x => x.listboxId}"
                 part="listbox"
                 role="listbox"
@@ -21284,6 +21303,11 @@ so this becomes the fallback color for the slot */ ''}
     property: 'slottedOptions',
 })}
                 ></slot>
+                ${when(x => x.filteredOptions.length === 0, html `
+                    <span class="no-results-label">
+                        ${x => filterNoResultsLabel.getValueFor(x)}
+                    </span>
+                `)}
             </div>
         </${anchoredRegionTag}>
     </template>
@@ -21480,11 +21504,8 @@ so this becomes the fallback color for the slot */ ''}
               this.filter = '';
           }
           const filter = this.filter.toLowerCase();
-          this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(filter));
+          this.filteredOptions = this._options.filter(o => o.text.toLowerCase().startsWith(filter) && !o.hidden);
           if (this.isAutocompleteList) {
-              if (!this.filteredOptions.length && !filter) {
-                  this.filteredOptions = this._options;
-              }
               this._options.forEach(o => {
                   o.visuallyHidden = !this.filteredOptions.includes(o);
               });
@@ -21906,6 +21927,9 @@ so this becomes the fallback color for the slot */ ''}
   __decorate$1([
       observable
   ], Combobox.prototype, "dropdownButton", void 0);
+  __decorate$1([
+      observable
+  ], Combobox.prototype, "filteredOptions", void 0);
   __decorate$1([
       observable
   ], Combobox.prototype, "hasOverflow", void 0);
@@ -44526,6 +44550,7 @@ img.ProseMirror-separator {
     }
 `;
 
+  /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$q = html `
     <template>
@@ -44541,7 +44566,11 @@ img.ProseMirror-separator {
             horizontal-scaling="anchor"
             ?hidden="${x => !x.open}">
             <div
-                class="listbox"
+                class="
+                    listbox
+                    scrollable-region
+                    ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
+                "
                 part="listbox"
                 role="listbox"
                 @click="${(x, c) => x.clickHandler(c.event)}"
@@ -44550,9 +44579,18 @@ img.ProseMirror-separator {
                 ${ref('listbox')}
             >
                 <slot name="option"
-                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                    ${slotted({
+    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
+    flatten: true,
+    property: 'slottedOptions'
+})}
                 >
                 </slot>
+                ${when(x => x.filteredOptions.length === 0, html `
+                    <span class="no-results-label">
+                        ${x => filterNoResultsLabel.getValueFor(x)}
+                    </span>
+                `)}
             </div>
         </${anchoredRegionTag}>
     </template>
@@ -44794,6 +44832,9 @@ img.ProseMirror-separator {
   __decorate$1([
       observable
   ], RichTextMentionListbox.prototype, "availableViewportHeight", void 0);
+  __decorate$1([
+      observable
+  ], RichTextMentionListbox.prototype, "filteredOptions", void 0);
   __decorate$1([
       observable
   ], RichTextMentionListbox.prototype, "anchorElement", void 0);
@@ -59831,10 +59872,6 @@ img.ProseMirror-separator {
         overflow-x: clip;
     }
 
-    .listbox.empty slot {
-        display: none;
-    }
-
     .listbox.above {
         flex-flow: column-reverse;
     }
@@ -59894,10 +59931,6 @@ img.ProseMirror-separator {
         outline: 0px;
     }
 
-    .scrollable-region {
-        overflow: auto;
-    }
-
     ::slotted([role='option']) {
         background-color: transparent;
     }
@@ -59914,14 +59947,6 @@ img.ProseMirror-separator {
         background-color: ${fillHoverSelectedColor};
     }
 
-    .no-results-label {
-        color: ${placeholderFontColor};
-        height: ${controlHeight};
-        display: inline-flex;
-        align-items: center;
-        padding: ${smallPadding} ${mediumPadding};
-    }
-
     .loading-container {
         padding-left: ${mediumPadding};
         padding-right: ${mediumPadding};
@@ -60152,6 +60177,7 @@ img.ProseMirror-separator {
         </div>
     </template>
 `;
+  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * Types of spinner appearance.
@@ -60267,7 +60293,7 @@ img.ProseMirror-separator {
             <div class="listbox-background">
                 <div
                     class="
-                        listbox 
+                        listbox
                         ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}
                         ${x => x.positionAttribute}
                     "
@@ -60303,12 +60329,12 @@ img.ProseMirror-separator {
     property: 'slottedOptions',
 })}
                         ></slot>
+                        ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0 && !x.loadingVisible), html `
+                            <span class="no-results-label">
+                                ${x => filterNoResultsLabel.getValueFor(x)}
+                            </span>
+                        `)}
                     </div>
-                    ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0 && !x.loadingVisible), html `
-                        <span class="no-results-label ${x => x.positionAttribute}">
-                            ${x => filterNoResultsLabel.getValueFor(x)}
-                        </span>
-                    `)}
                     ${when(x => x.loadingVisible, html `
                         <div class="loading-container ${x => x.positionAttribute} ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}"
                             @click="${(x, c) => x.ignoreClickHandler(c.event)}">
@@ -60323,6 +60349,7 @@ img.ProseMirror-separator {
         </${anchoredRegionTag}>
     </template>
 `;
+  /* eslint-enable @typescript-eslint/indent */
 
   // Based on: https://github.com/microsoft/fast/blob/%40microsoft/fast-foundation_v2.49.5/packages/web-components/fast-foundation/src/select/select.form-associated.ts
   /* eslint-disable max-classes-per-file */
@@ -60341,6 +60368,7 @@ img.ProseMirror-separator {
           this.proxy = document.createElement('select');
       }
   }
+  /* eslint-enable max-classes-per-file */
 
   const isOptionSelectable = (el) => {
       return !el.visuallyHidden && !el.disabled && !el.hidden;
@@ -66612,6 +66640,7 @@ focus outline in that case.
         </div>
     </template>
 `;
+  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * A styled cell that is used within the nimble-table-row.
@@ -70896,6 +70925,7 @@ focus outline in that case.
             </span>`)}
     </template>
 `;
+  /* eslint-enable @typescript-eslint/indent */
 
   /**
    * A cell view for displaying links
@@ -74698,6 +74728,7 @@ focus outline in that case.
               ?? unitTranslations.get('en'));
       }
   }
+  /* eslint-enable max-classes-per-file */
 
   const unitTranslations$1 = new Map([
       ['en', new UnitTranslation('byte', 'bytes', 'B')],