@ni/nimble-components 29.7.7 → 29.7.8

package/dist/all-components-bundle.min.js

@@ -3138,18 +3138,23 @@ const pg="nimble-icon-arrow-expander-down",fg="above",mg="underline",gg="outline
         flex-direction: column;
         overflow-y: auto;
         width: 100%;
+        --ni-private-listbox-visible-option-count: 10.5;
+        --ni-private-listbox-anchor-element-gap: ${Sl};
         --ni-private-listbox-padding: ${Sl};
         --ni-private-listbox-filter-height: 0px;
         --ni-private-listbox-loading-indicator-height: 0px;
         max-height: min(
             calc(
-                ${Sl} + 2 * ${$l} + ${Cl} * 10.5 +
-                    var(--ni-private-listbox-filter-height) +
-                    var(--ni-private-listbox-loading-indicator-height)
+                var(--ni-private-listbox-anchor-element-gap) + 
+                2 * ${$l} + 
+                var(--ni-private-listbox-padding) +
+                ${Cl} * var(--ni-private-listbox-visible-option-count) +
+                var(--ni-private-listbox-filter-height) +
+                var(--ni-private-listbox-loading-indicator-height)
             ),
             calc(
-                var(--ni-private-listbox-available-viewport-height) -
-                    ${Sl}
+                var(--ni-private-listbox-available-viewport-height) - 
+                var(--ni-private-listbox-anchor-element-gap)
             )
         );
         box-shadow: ${Nl};
@@ -7261,8 +7266,9 @@ const H_="nimble-toolbar",U_="Bold",q_="Italics",j_="Bulleted List",W_="Numbered
     }
 
     .listbox {
+        --ni-private-listbox-visible-option-count: 5.5;
+        --ni-private-listbox-anchor-element-gap: 0px;
         min-width: ${Rl};
-        max-height: calc(5.5 * ${Cl});
     }
 `,J_=Q`
     <template>
@@ -7283,6 +7289,8 @@ const H_="nimble-toolbar",U_="Bold",q_="Italics",j_="Bulleted List",W_="Numbered
                 role="listbox"
                 @click="${(t,e)=>t.clickHandler(e.event)}"
                 ?disabled="${t=>t.disabled}"
+                style="--ni-private-listbox-available-viewport-height: ${t=>t.availableViewportHeight}px;"
+                ${Ut("listbox")}
             >
                 <slot name="option"
                     ${ie({filter:t=>t instanceof HTMLElement&&qn.slottedOptionFilter(t),flatten:!0,property:"slottedOptions"})}
@@ -7292,16 +7300,17 @@ const H_="nimble-toolbar",U_="Bold",q_="Italics",j_="Bulleted List",W_="Numbered
         </${Oh}>
     </template>
 `,Q_=t=>t.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase()
-class tM extends Fi{constructor(){super(...arguments),this.filter="",this.filteredOptions=[],this.anchorElementIntersectionObserver=new IntersectionObserver((t=>{t[0]?.isIntersecting||this.setOpen(!1)}),{threshold:1,root:document})}close(){this.setOpen(!1)}get options(){return x.track(this,"options"),this.filteredOptions?.length?this.filteredOptions:[]}set options(t){this._options=t,x.notify(this,"options")}show(t){this.filter=t.filter,this.anchorElement=t.anchorNode,this.setOpen(!0),this.filterOptions()}keydownHandler(t){if(!this.open)return!1
+class tM extends Fi{constructor(){super(...arguments),this.availableViewportHeight=0,this.filter="",this.filteredOptions=[],this.anchorElementIntersectionObserver=new IntersectionObserver((t=>{t[0]?.isIntersecting||this.setOpen(!1)}),{threshold:1,root:document})}close(){this.setOpen(!1)}get options(){return x.track(this,"options"),this.filteredOptions?.length?this.filteredOptions:[]}set options(t){this._options=t,x.notify(this,"options")}show(t){const e=t.anchorNode.getBoundingClientRect().bottom
+this.availableViewportHeight=Math.trunc(window.innerHeight-e),this.filter=t.filter,this.anchorElement=t.anchorNode,this.setOpen(!0),this.filterOptions()}keydownHandler(t){if(!this.open)return!1
 switch(t.key){case Ba:case Aa:{if(!this.hasSelectableOptions)return!1
 const t={href:this.firstSelectedOption.value,displayName:this.firstSelectedOption.text}
-return this.emitMentionSelected(t),!0}case Ta:return this.setOpen(!1),!1
+return this.$emit("mention-selected",t),this.setOpen(!1),!0}case Ta:return this.setOpen(!1),!1
 default:return super.keydownHandler(t),!1}}filterOptions(){if(this.filter){const t=Q_(this.filter)
 this.filteredOptions=this._options.filter((e=>Q_(e.text).includes(t)))}else this.filteredOptions=this._options
 this._options.forEach((t=>{t.hidden=!this.filteredOptions.includes(t)})),this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption)):(this.selectedOptions=[],this.selectedIndex=-1)}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.filterOptions()}clickHandler(t){const e=t.target.closest("option,[role=option]")
 if(!e||e.disabled)return!1
 const n={href:e.value,displayName:e.text}
-return this.emitMentionSelected(n),!0}anchorElementChanged(t,e){t&&this.anchorElementIntersectionObserver.unobserve(t),this.region&&this.anchorElement&&(this.region.anchorElement=this.anchorElement,this.region.update(),this.anchorElementIntersectionObserver.observe(e))}regionChanged(){this.regionNotifier&&this.regionNotifier.unsubscribe(this),this.regionNotifier=x.getNotifier(this.region),this.regionNotifier.subscribe(this)}handleChange(t,e){super.handleChange(t,e),"initialLayoutComplete"===e&&this.focusAndScrollOptionIntoView()}focusAndScrollOptionIntoView(){this.open&&this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})}))}emitMentionSelected(t){this.$emit("mention-selected",t),this.setOpen(!1)}setOpen(t){this.open=t}}t([C],tM.prototype,"open",void 0),t([C],tM.prototype,"region",void 0),t([C],tM.prototype,"anchorElement",void 0)
+return this.$emit("mention-selected",n),this.setOpen(!1),!0}anchorElementChanged(t,e){t&&this.anchorElementIntersectionObserver.unobserve(t),this.region&&this.anchorElement&&(this.region.anchorElement=this.anchorElement,this.region.update(),this.anchorElementIntersectionObserver.observe(e))}regionChanged(){this.regionNotifier&&this.regionNotifier.unsubscribe(this),this.regionNotifier=x.getNotifier(this.region),this.regionNotifier.subscribe(this)}handleChange(t,e){super.handleChange(t,e),"initialLayoutComplete"===e&&this.focusAndScrollOptionIntoView()}focusAndScrollOptionIntoView(){this.open&&this.firstSelectedOption&&requestAnimationFrame((()=>{this.firstSelectedOption?.scrollIntoView({block:"nearest"})}))}setOpen(t){this.open=t}}t([C],tM.prototype,"open",void 0),t([C],tM.prototype,"region",void 0),t([C],tM.prototype,"availableViewportHeight",void 0),t([C],tM.prototype,"anchorElement",void 0)
 const eM=tM.compose({baseName:"rich-text-mention-listbox",template:J_,styles:X_})
 _i.getOrCreate().withPrefix("nimble").register(eM())
 const nM="nimble-rich-text-mention-listbox",iM=Q`