@ni/nimble-components 29.7.7 → 29.7.9

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`
@@ -9308,7 +9317,7 @@ let NT=class extends Fi{}
 class LT extends(An(NT)){constructor(){super(...arguments),this.proxy=document.createElement("select")}}const BT=t=>!t.visuallyHidden&&!t.disabled&&!t.hidden,PT=t=>!t.visuallyHidden&&!t.hidden
 class zT extends LT{constructor(){super(...arguments),this.appearance=mg,this.errorVisible=!1,this.filterMode=wg.none,this.clearable=!1,this.loadingVisible=!1,this.displayPlaceholder=!1,this.open=!1,this.listboxId=Va("listbox-"),this.hasOverflow=!1,this.filteredOptions=[],this.filter="",this.availableViewportHeight=0,this._value="",this.forcedPosition=!1}get collapsible(){return!(this.multiple||"number"==typeof this.size)}connectedCallback(){super.connectedCallback(),this.forcedPosition=!!this.positionAttribute,this.open&&this.initializeOpenState()}get value(){return x.track(this,"value"),this._value}set value(t){const e=this._value
 let n=t
-if(this.options?.length){const t=this.options.findIndex((t=>t.value===n)),e=this.options[this.selectedIndex]?.value??null,i=this.options[t]?.value??null;-1!==t&&e===i||(n="",this.selectedIndex=t),n=this.firstSelectedOption?.value??n}e===n||this.open&&this.selectedIndex<0||(this._value=n,super.valueChanged(e,n),x.notify(this,"value"),this.updateDisplayValue())}get displayValue(){return x.track(this,"displayValue"),this.firstSelectedOption?.text??""}anchoredRegionChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}controlChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}slottedOptionsChanged(t,e){const n=this.value
+if(this.options?.length){const t=this.options.findIndex((t=>t.value===n)),e=this.options[this.selectedIndex]?.value??null,i=this.options[t]?.value??null;-1!==t&&e===i||(n="",this.selectedIndex=t),n=this.firstSelectedOption?.value??n}e!==n&&(this._value=n,super.valueChanged(e,n),x.notify(this,"value"),this.updateDisplayValue())}get displayValue(){return x.track(this,"displayValue"),this.firstSelectedOption?.text??""}anchoredRegionChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}controlChanged(t,e){this.anchoredRegion&&this.control&&(this.anchoredRegion.anchorElement=this.control)}slottedOptionsChanged(t,e){const n=this.value
 this.options.forEach((t=>{const e=x.getNotifier(t)
 e.unsubscribe(this,"value"),e.unsubscribe(this,"hidden"),e.unsubscribe(this,"disabled")})),t?.filter(FT).forEach((t=>{const e=x.getNotifier(t)
 e.unsubscribe(this,"hidden"),e.unsubscribe(this,"visuallyHidden"),e.unsubscribe(this,"listOptions")}))
@@ -9320,7 +9329,7 @@ e.subscribe(this,"hidden"),e.subscribe(this,"visuallyHidden"),e.subscribe(this,"
 let e=!1
 if(this.open){const n=t.target.closest("option,[role=option]")
 if(e=null!==n,n?.disabled)return}const n=this.selectedIndex
-super.clickHandler(t),this.open=this.collapsible&&!this.open,!this.open&&this.selectedIndex!==n&&e&&this.updateValue(!0)}handleChange(t,e){const n=t
+super.clickHandler(t),this.open&&this.selectedIndex!==n&&e&&this.updateValue(!0),this.open=this.collapsible&&!this.open}handleChange(t,e){const n=t
 switch(e){case"value":this.updateValue()
 break
 case"selected":RT(n)&&n.selected?this.selectedIndex=this.options.indexOf(n):this.clearSelect()
@@ -9342,17 +9351,17 @@ return!this.isSameNode(e)||(this.focus(),!0)}keydownHandler(t){const e=this.sele
 super.keydownHandler(t)
 const n=t.key
 if(t.ctrlKey||t.shiftKey)return!0
-let i=this.openActiveIndex??this.selectedIndex
+let i=this.openActiveIndex??this.selectedIndex,s=!1
 switch(n){case La:if(this.open&&this.filterMode!==wg.none)break
 t.preventDefault(),this.collapsible&&this.typeAheadExpired&&(this.open=!this.open),this.open||this.focus()
 break
 case Oa:case Da:t.preventDefault()
 break
 case Aa:if(t.preventDefault(),0===this.filteredOptions.length||this.filteredOptions.every((t=>t.disabled)))return!1
-this.open=!this.open,this.open||this.focus()
+this.open?s=!0:this.open=!0,s&&this.focus()
 break
 case Ta:if(!this.open){if(this.clearable)return this.clearSelect(),this.updateValue(!0),!0
-break}this.collapsible&&this.open&&(t.preventDefault(),this.open=!1),i=this.selectedIndex,this.focus()}return this.open||this.selectedIndex===i||(this.selectedIndex=i),this.open||e===this.selectedIndex||this.updateValue(!0),!(n===Ma||n===Ea)}selectedIndexChanged(t,e){this.setSelectedOptions(),this.open&&this.setActiveOption(this.selectedIndex),this.updateValue()}typeaheadBufferChanged(t,e){if(this.$fastController.isConnected){const t=this.getTypeaheadMatches()
+break}this.collapsible&&this.open&&(t.preventDefault(),this.open=!1),i=this.selectedIndex,this.focus()}return this.open&&!s||(this.selectedIndex!==i&&(this.selectedIndex=i),e!==this.selectedIndex&&this.updateValue(!0)),s&&(this.open=!1),!(n===Ma||n===Ea)}selectedIndexChanged(t,e){this.setSelectedOptions(),this.open&&this.setActiveOption(this.selectedIndex),this.updateValue()}typeaheadBufferChanged(t,e){if(this.$fastController.isConnected){const t=this.getTypeaheadMatches()
 if(t.length){const e=this.options.indexOf(t[0])
 this.open&&this.filterMode!==wg.none||this.setActiveOption(e)}this.typeaheadExpired=!1}}disabledChanged(t,e){super.disabledChanged&&super.disabledChanged(t,e),this.ariaDisabled=this.disabled?"true":"false"}formResetCallback(){this.setProxyOptions(),super.setDefaultSelectedOption(),-1===this.selectedIndex&&(this.selectedIndex=0)}selectNextOption(){for(let t=(this.openActiveIndex??this.selectedIndex)+1;t<this.options.length;t++){const e=this.options[t]
 if(RT(e)&&BT(e)){this.setActiveOption(t)