azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 26.8 kB
JavaScript
import"../../CommonImports";import"../../Core/core.css";import"./DropdownList.css";import"./List.css";import"./ListDropIndicator.css";import*as React from"react";import{ObservableArray,ObservableLike}from"../../Core/Observable";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{FocusWithin}from"../../FocusWithin";import{FocusZone,FocusZoneContext,FocusZoneDirection}from"../../FocusZone";import{Icon}from"../../Icon";import{Intersection,IntersectionContext}from"../../Intersection";import{getDefaultLinkProps,Link}from"../../Link";import{Observer,UncheckedObserver}from"../../Observer";import*as Resources from"../../Resources.Widgets";import{Tooltip}from"../../TooltipEx";import{css,eventTargetContainsNode,getSafeId,KeyCode}from"../../Util";import{EventDispatch}from"../../Utilities/Dispatch";import{getDragInProgress}from"../../Utilities/DragDrop";import{getTabIndex}from"../../Utilities/Focus";class List extends React.Component{constructor(t){super(t),this.bodyElement=React.createRef(),this.listElement=React.createRef(),this.spacerElements={},this.scrollToIndex=-1,this.scrollToOptions=void 0,this.selectOnFocus=!0,this.focusIndex=-1,this.pivotIndex=-1,this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS=!0===window.__VSS_INTERSECTION_PERFORMANCE_IMPROVEMENT_ENABLED,this.prevFirstMaterialized=-1,this.prevLastMaterialized=-1,this.onVirtualizeKeyDown=t=>{this.state.virtualize&&t.ctrlKey&&t.altKey&&"v"===t.key&&(t=this.props.itemProvider.length,this.setState({virtualize:!1,lastMaterialized:t-1,lastRendered:t-1,firstMaterialized:0,firstRendered:0}),Utils_Accessibility.announce(Resources.VirtualizationDisabled))},this.onBlur=()=>{this.focusIndex=-1},this.onClick=t=>{var e,i;this.onDispatch(t),t.defaultPrevented||t.altKey&&this.props.selectableText||this.listElement.current&&({cellElement:i,rowIndex:e}=cellFromEvent(t),i&&eventTargetContainsNode(t,["A"],i)||(i=ObservableLike.getValue(this.state.rows[e]),0<=e&&i&&(i={data:i,index:e},this.props.selectRowOnClick&&this.processSelectionEvent(t,i),this.props.singleClickActivation)&&this.rowActivated(t,i)))},this.onDispatch=t=>{this.state.eventDispatch.dispatchEvent(t)},this.onDoubleClick=t=>{var e,i;this.onDispatch(t),t.defaultPrevented||this.props.singleClickActivation||(e=cellFromEvent(t).rowIndex,i=ObservableLike.getValue(this.state.rows[e]),0<=e&&i&&this.rowActivated(t,{data:i,index:e}))},this.onFocusBody=t=>{var e,i;this.selectOnFocus&&(e=this.props["selection"],e&&!e.selectOnFocus||0<=(e=this.focusIndex)&&(i=ObservableLike.getValue(this.state.rows[e]))&&this.processSelectionEvent(t,{data:i,index:e}),this.selectOnFocus=!1)},this.onFocusItem=(t,e)=>{var i=this["focusIndex"];i!==t&&(0<=i?delete this.state.renderedRows[i]:delete this.state.renderedRows[this.getInitialTabbableRow()],delete this.state.renderedRows[t],this.focusIndex=t,i=ObservableLike.getValue(this.state.rows[t]))&&this.rowFocused(e,{data:i,index:t})},this.onKeyDown=e=>{if(this.onDispatch(e),!e.defaultPrevented){var t=e.target.nodeName;if("INPUT"!==t&&"TEXTAREA"!==t){const i=this["focusIndex"];var t=ObservableLike.getValue(this.state.rows[i]);t&&(e.which===KeyCode.enter?0<=i&&!eventTargetContainsNode(e,["A"])&&this.rowActivated(e,{data:t,index:i}):e.which===KeyCode.space?(this.processSelectionEvent(e,{data:t,index:i}),e.preventDefault()):e.which===KeyCode.upArrow||e.which===KeyCode.downArrow?(t=this.props["selection"],t&&(!t.selectOnFocus||!e.shiftKey&&e.ctrlKey)||(e.persist(),window.setTimeout(()=>{var t;this.focusIndex!=i&&(t=ObservableLike.getValue(this.state.rows[this.focusIndex]))&&this.processSelectionEvent(e,{data:t,index:this.focusIndex})},0))):e.which===KeyCode.pageDown?(t=this.getStats(),this.focusRow(Math.min(i+(t.lastRendered-t.firstRendered),this.state.rowCount-1),1),e.preventDefault()):e.which===KeyCode.pageUp?(t=this.getStats(),this.focusRow(Math.max(i-(t.lastRendered-t.firstRendered),0),-1),e.preventDefault()):e.which===KeyCode.home?(this.focusRow(0,1),e.preventDefault()):e.which===KeyCode.end&&(this.focusRow(this.state.rowCount-1,-1),e.preventDefault()))}}},this.onIntersect=t=>{this.state.virtualize&&(this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?this.processIntersectOptimized(t):this.processIntersect(t))},this.processIntersect=t=>{var n=this.context.root["scrollTop"],{firstRendered:l,firstMaterialized:c,lastRendered:h,lastMaterialized:d,rowCount:p,rowProportion:u}=this.state;let m=this.state["rowHeight"];if((n===this.state.scrollTop||!t.length)&&this.listElement.current&&this.bodyElement.current){var v=this.bodyElement.current.children;if(0===m){if(0<v.length){let e=0,i=0;for(let t=0;t<v.length;t++){var g=this.bodyElement.current.children[t],f=g.getBoundingClientRect().height,g=g.classList.contains("bolt-list-row-spacer");0<f&&!g&&(e+=f,i++)}0<i&&(m=e/i)}if(0===m)return;if(-1!==this.scrollToIndex)return void this.setState({firstMaterialized:Math.max(0,this.scrollToIndex-this.state.pageSize),lastMaterialized:this.scrollToIndex+Math.min(this.props.initialPageCount*this.state.pageSize,p-1),rowHeight:m})}var w,I=this.context.root.getBoundingClientRect();let e,i,s=c,r=d,o=r,a=s;for(let t=0;t<v.length;t++){var b=v[t],R=getAttributeAsNumber(b,"data-row-index"),x=b.getBoundingClientRect();c<=R&&R<=d&&(x.bottom<I.top-this.state.pageSize*(u*m)?s++:x.top>I.bottom+this.state.pageSize*(u*m)&&r--,R===c&&(e=b),R===d)&&(i=b),-1<R&&x.top<I.bottom&&x.bottom>I.top&&(a=Math.max(a,R),o=Math.min(o,R))}u<1?s>r||o===s||a===r?a>=p-1?s=Math.ceil(r-(I.height/m+this.state.pageSize)):(t=n-(this.listElement.current.offsetTop-this.context.root.offsetTop),s=Math.max(0,Math.min(p-1,Math.floor(t/(u*m)))-this.state.pageSize),r=Math.min(p-1,s+Math.ceil(I.height/(u*m)+this.state.pageSize-1)),a=-1,o=-1):(s=Math.min(s,o-this.state.pageSize),r=Math.max(r,a+this.state.pageSize-1),a=-1,o=-1):s>r?(t=n-(this.listElement.current.offsetTop-this.context.root.offsetTop),w=this.props.rowHeights?this.getFirstMaterializedItemBaseOnRowHeights(this.props.rowHeights,m,t):void 0,s=w?Math.max(0,Math.min(p-1,w-this.state.pageSize)):Math.max(0,Math.min(p-1,Math.floor(t/m))-this.state.pageSize),r=Math.min(p-1,s+Math.ceil(I.height/m+this.state.pageSize-1)),a=-1,o=-1):(s===c&&e&&0<(w=e.getBoundingClientRect().top-I.top)&&(s-=Math.ceil(w/m)),r===d&&i&&(t=i.getBoundingClientRect(),0<(w=I.bottom-t.bottom))&&(r+=Math.ceil(w/m))),s=Math.max(s,0),r=Math.min(r,p-1),s===c&&o===l&&r===d&&a===h&&m===this.state.rowHeight&&n===this.state.scrollTop||this.setState({firstMaterialized:s,firstRendered:o,lastMaterialized:r,lastRendered:a,rowHeight:m,scrollTop:n})}},this.processIntersectOptimized=t=>{if(this.context.root&&this.listElement.current&&this.bodyElement.current){var i=this.context.root["scrollTop"],{firstRendered:s,firstMaterialized:r,lastRendered:o,lastMaterialized:a,rowCount:n}=this.state;let t=this.state["rowHeight"];var l=this.bodyElement.current.children;if(0===t){if(0<l.length){let e=0,i=0;for(let t=0;t<l.length;t++){var c=l[t],h=c.getBoundingClientRect().height,c=c.classList.contains("bolt-list-row-spacer");0<h&&!c&&(e+=h,i++)}0<i&&(t=e/i)}if(0===t)return;if(-1!==this.scrollToIndex)return void this.setState({firstMaterialized:Math.max(0,this.scrollToIndex-this.state.pageSize),lastMaterialized:this.scrollToIndex+Math.min(this.props.initialPageCount*this.state.pageSize,n-1),rowHeight:t})}var d=this.context.root.getBoundingClientRect(),p=this.listElement.current.getBoundingClientRect(),d=d.top-p.top,p=this.context.root.clientHeight,u=this.state.pageSize;let e;e=this.props.rowHeights?(m=this.getFirstMaterializedItemBaseOnRowHeights(this.props.rowHeights,t,d),Math.max(0,Math.min(m-u,n-1))):Math.max(0,Math.min(Math.floor(d/t)-u,n-1));var m=Math.ceil(p/t),d=Math.min(n-1,e+m+2*u),p=e+u,m=d-u,p=Math.max(0,Math.min(p,n-1)),m=Math.max(p,Math.min(m,n-1));e=Math.max(e,0),d=Math.min(d,n-1),e===r&&p===s&&d===a&&m===o&&t===this.state.rowHeight&&i===this.state.scrollTop||this.setState({firstMaterialized:e,firstRendered:p,lastMaterialized:d,lastRendered:m,rowHeight:t,scrollTop:i})}},this.onPointerDownBody=t=>{this.selectOnFocus=!1},this.getInitialTabbableRow=()=>{var{defaultTabbableRow:t,itemProvider:e,selection:i}=this.props;if(t)return t;if(i)for(let t=0;t<e.length;t++)if(i.selectable(t))return t;return 0},this.getHeight=(t,e)=>{let i=0;var s=this.props.rowHeights||[],r=e?this.state.rowCount-t:0,o=e?this.state.rowCount:t;for(let t=r;t<o;t++)i+=s[t]||this.state.rowHeight;return i},this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&(this.contentVisibilityListenerRows=new WeakSet,this.contentVisibilityAbortController=new AbortController,this.skippedRows=new Set);var e=t.itemProvider.length,i=t.pageSize;if(this.state={columnCount:1,eventDispatch:t.eventDispatch||new EventDispatch,firstMaterialized:0,firstRendered:0,itemProvider:t.itemProvider,lastMaterialized:this.props.virtualize?Math.min(t.initialPageCount*i,e-1):e-1,lastRendered:this.props.virtualize?Math.min(t.initialPageCount*i,e-1):e-1,overlays:new ObservableArray,pageSize:i,renderedRows:{},rowCount:e,rowHeight:t.rowHeight||0,rowProportion:t.rowHeight&&t.maxHeight?Math.min(1,t.maxHeight/(t.rowHeight*e)):1,rows:{},scrollTop:0,virtualize:!!t.virtualize},t.behaviors)for(const s of t.behaviors)s.initialize&&s.initialize(t,this,this.state.eventDispatch)}static getDerivedStateFromProps(t,e){var i=t.itemProvider.length;let s=e.firstMaterialized,r=e.lastMaterialized;i!==e.rowCount&&(s=Math.max(0,Math.min(e.firstMaterialized,i)),r=e.virtualize?Math.max(s,Math.min(e.lastMaterialized+(e.lastMaterialized===e.rowCount-1||e.lastMaterialized===e.rowCount?t.pageSize:0),i-1)):i-1);i={firstMaterialized:s,itemProvider:t.itemProvider,lastMaterialized:r,pageSize:t.pageSize,rowCount:i,rowProportion:Math.min(1,(t.maxHeight||1e5)/(e.rowHeight*(i-(r-s))))};return t.itemProvider===e.itemProvider&&t.columnCount===e.columnCount||(i.columnCount=t.columnCount,i.renderedRows={},i.rows={}),i}render(){const{ariaRowOffset:i,className:s,focuszoneProps:r,id:o,maxWidth:a,minWidth:n,width:l}=this.props;var{firstMaterialized:e,lastMaterialized:c,rowCount:t,rowProportion:h}=this.state,d=this["focusIndex"];const p=this.props.role||(this.props.selection?"listbox":"list"),u="table"===p||"grid"===p||"treegrid"===p,m=[];var{bottomSpacer1:t,bottomSpacer2:h,firstFocusRow:d,lastFocusRow:v,topSpacer1:g,topSpacer2:f}=this.computeSpacerLayout(e,c,t,this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?1:h,d,this.state.pageSize);if(m.push(this.renderSpacer("st1",g)),d<e)for(let t=d;t<=v;t++)m.push(this.renderRow(t));m.push(this.renderSpacer("st2",f));for(let t=e;t<=c;t++)m.push(this.renderRow(t));if(m.push(this.renderSpacer("sb2",h,{countFromBottom:!0,estimateRowHeight:!this.props.rowHeights})),c<v)for(let t=d;t<=v;t++)m.push(this.renderRow(t));return m.push(this.renderSpacer("sb1",t,{countFromBottom:!0,estimateRowHeight:!this.props.rowHeights})),React.createElement(UncheckedObserver,{itemProvider:{filter:(t,e)=>{this.props.selection&&this.props.selection.onItemsChanged(t,e);var i,e={renderedRows:{},rows:{}};return null!=(i=this.skippedRows)&&i.clear(),t.removedItems&&this.focusIndex>=t.index&&t.index+t.removedItems.length>=this.focusIndex&&(this.focusIndex=-1),-1!==this.state.rowCount&&(i=(t.addedItems?t.addedItems.length:0)-(t.removedItems?t.removedItems.length:0))&&(e.rowCount=this.state.rowCount+i,e.firstMaterialized=Math.max(0,Math.min(this.state.firstMaterialized,e.rowCount-1)),e.lastMaterialized=this.state.virtualize?Math.max(e.firstMaterialized,Math.min(this.state.lastMaterialized+(t.index>=this.state.firstMaterialized&&t.index<=this.state.lastMaterialized+1?Math.min(this.state.pageSize,i):0),e.rowCount-1)):e.rowCount-1),this.setState(e),!1},observableValue:this.props.itemProvider}},React.createElement(FocusWithin,{onBlur:this.onBlur},t=>{let e=React.createElement("table",{"aria-colcount":u?this.props.ariaColumnCount||this.props.columnCount:void 0,"aria-label":this.props.ariaLabel,"aria-rowcount":u?this.state.itemProvider.length+i:void 0,className:css(s,"bolt-list body-m relative",this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&"bolt-list-cv-optimized",this.props.showScroll?void 0:"scroll-hidden"),id:getSafeId(o),onBlur:t.onBlur,onClick:this.onClick,onContextMenu:this.onDispatch,onDoubleClick:this.onDoubleClick,onDragEnd:this.onDispatch,onDragEnter:this.onDispatch,onDragExit:this.onDispatch,onDragOver:this.onDispatch,onDragStart:this.onDispatch,onDrop:this.onDispatch,onFocus:t.onFocus,onKeyDown:this.onKeyDown,onKeyUp:this.onDispatch,onPointerDown:this.onDispatch,ref:this.listElement,role:p,style:{maxWidth:a,minWidth:n,width:l},tabIndex:this.props.excludeTabStop?-1:0},this.props.renderHeader&&this.props.renderHeader(),React.createElement("tbody",{className:"relative",onFocus:this.onFocusBody,onPointerDown:this.onPointerDownBody,ref:this.bodyElement,role:"listbox"===p||"list"===p||"menu"===p||"tree"===p?"presentation":void 0},this.renderOverlay(this.listElement),m));return e=r?React.createElement(FocusZone,Object.assign({},r,{skipHiddenCheck:!0}),e):e}))}componentDidMount(){this.context.register(this.onIntersect),this.props.virtualize&&document.addEventListener("keydown",this.onVirtualizeKeyDown),this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&this.attachContentVisibilityListeners()}componentDidUpdate(){var{scrollToIndex:e,onScrollComplete:t}=this;if(-1!==e&&this.state.rowHeight){var i=this.bodyElement.current,{firstMaterialized:s,lastMaterialized:r}=this.state;if(s<=e&&e<=r&&i)for(let t=0;t<i.children.length;t++){var o=i.children[t];if(cellFromElement(o).rowIndex===e){o.scrollIntoView(this.scrollToOptions);break}}this.onScrollComplete=void 0,this.scrollToIndex=-1,this.scrollToOptions=void 0,t&&t(e)}this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&({firstMaterialized:s,lastMaterialized:r}=this.state,s===this.prevFirstMaterialized&&r===this.prevLastMaterialized||(this.prevFirstMaterialized=s,this.prevLastMaterialized=r,this.attachContentVisibilityListeners()))}componentWillUnmount(){var t;this.context.unregister(this.onIntersect),this.props.virtualize&&document.removeEventListener("keydown",this.onVirtualizeKeyDown),null!=(t=this.contentVisibilityAbortController)&&t.abort(),null!=(t=this.skippedRows)&&t.clear()}addOverlay(e,t,i,s=0,r){var o=this.state["overlays"],a=o.value.findIndex(t=>t.id===e),i={render:i,id:e,rowIndex:t,zIndex:s+1,columnIndex:r};0<=a?o.change(a,i):o.push(i)}removeOverlay(e){var t=this.state["overlays"],i=t.value.findIndex(t=>t.id===e);0<=i&&t.splice(i,1)}getFocusIndex(){return this.focusIndex}getStats(){return{firstMaterialized:this.state.firstMaterialized,firstRendered:this.state.firstRendered,lastMaterialized:this.state.lastMaterialized,lastRendered:this.state.lastRendered}}scrollIntoView(e,i,t){var{firstMaterialized:s,lastMaterialized:r,pageSize:o,rowCount:a,rowHeight:n,rowProportion:l}=this.state;if(0<=e&&e<this.state.rowCount){var c=this.bodyElement.current;if(s<=e&&e<=r&&c){for(let t=0;t<c.children.length;t++){var h=c.children[t];if(cellFromElement(h).rowIndex===e){h.scrollIntoView(i);break}}t&&t(e)}else{this.onScrollComplete&&this.onScrollComplete(-1),this.onScrollComplete=t,this.scrollToIndex=e,this.scrollToOptions=i;s=!this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&l<1?o:0;n&&this.setState({firstMaterialized:Math.max(0,e-s),lastMaterialized:Math.min(a-1,e+s)})}}}focusRow(s,r=1){return new Promise(i=>{this.scrollIntoView(s,{block:"center"},t=>{var e;t===s&&this.bodyElement.current&&(e=this.bodyElement.current.querySelector("[data-row-index='"+t+"']"))&&(e.getAttribute("tabindex")?e.focus():(e=Math.min(this.state.rowCount-1,Math.max(0,t+r)))!==t?this.focusRow(e,r):e!==this.focusIndex&&this.focusRow(e,-r)),i()})})}computeSpacerLayout(t,e,i,s,r,o){if(this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&(i<=0||t<=0&&i-1<=e))return{topSpacer1:0,topSpacer2:0,bottomSpacer1:0,bottomSpacer2:0,firstFocusRow:Number.MAX_SAFE_INTEGER,lastFocusRow:0};let a=0,n=t,l=Math.max(0,i-e-1),c=0,h=Number.MAX_SAFE_INTEGER,d=0;return-1!==r&&(h=Math.max(0,r-3),d=Math.min(i,r+3),h<t?(d=Math.min(d,t-1),a=h,n=t-d-1):d>e&&(h=Math.max(h,e+1),l=h-e-1,c=Math.max(0,i-d-1))),s<1&&(n+=Math.min(o,t)),{topSpacer1:a,topSpacer2:n,bottomSpacer1:c,bottomSpacer2:l,firstFocusRow:h,lastFocusRow:d}}processSelectionEvent(t,e){var i,s,{selection:r,enforceSingleSelect:o}=this.props;r&&!r.selectable(e.index)||(r&&(i=e["index"],o=!o&&r.multiSelect,0<=this.pivotIndex&&t.shiftKey&&o?r.select(Math.min(this.pivotIndex,i),Math.abs(this.pivotIndex-i)+1,t.ctrlKey||t.metaKey,o):(s=t.which===KeyCode.space,(t.ctrlKey||t.metaKey||r.alwaysMerge||s)&&o?r.toggle(i,!0,o):r.select(i,1,!1,o)),t.shiftKey||(this.pivotIndex=i)),this.rowSelected(t,e))}renderLoadingRow(t,e){return React.createElement(ListItem,{className:"bolt-list-row-loading",details:e,index:t},React.createElement("div",{className:"shimmer shimmer-line",style:{width:80*Math.random()+20+"%"}}," "))}renderOverlay(o){const{firstMaterialized:a,lastMaterialized:n,overlays:t}=this.state;return React.createElement(Observer,{overlays:t},t=>{const r=this.bodyElement.current;return 0<t.overlays.length&&r?React.createElement("div",{className:"bolt-list-overlay-container absolute"},t.overlays.map(t=>{if(-1!==t.rowIndex&&(t.rowIndex<a||t.rowIndex>n)&&!getDragInProgress())return null;if(this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS&&List.SUPPORTS_CONTENT_VISIBILITY_EVENT&&null!=(e=this.skippedRows)&&e.has(t.rowIndex)&&!getDragInProgress()){if(!(t.rowIndex>=a&&t.rowIndex<=n))return null;{const s=t.rowIndex;queueMicrotask(()=>{var t;return null==(t=this.skippedRows)?void 0:t.delete(s)})}}var e=o.current&&o.current.querySelector("[data-row-index='"+t.rowIndex+"']"),e=this.props.overlay?null==e?void 0:e.querySelector(this.props.overlay):e,i=null==(i=o.current)?void 0:i.querySelector("[data-column-index='"+t.columnIndex+"']");return e?i?React.createElement("div",{className:"bolt-list-overlay flex-row absolute",id:getSafeId(t.id),key:t.id,style:{height:e.offsetHeight,width:i.offsetWidth,top:e.getBoundingClientRect().top-r.getBoundingClientRect().top,left:i.getBoundingClientRect().left-r.getBoundingClientRect().left,zIndex:10*t.zIndex}},t.render({rowElement:i})):React.createElement("div",{className:"bolt-list-overlay flex-row absolute",id:getSafeId(t.id),key:t.id,style:{height:e.offsetHeight,top:e.getBoundingClientRect().top-r.getBoundingClientRect().top,zIndex:10*t.zIndex}},t.render({rowElement:e})):null})):null})}renderRow(n){var e=this.props["itemProvider"],{renderedRows:i,rows:s}=this.state;let r=i[n];if(!r){let a=s[n];if(!(a=a||(e.getItem?e.getItem(n):e.value[n])))return null;s[n]=a;i=this.props["selection"];let t;i&&(t={observableValue:i,filter:t=>{for(const e of t)if(n>=e.beginIndex&&n<=e.endIndex)return!0;return!1}}),r=React.createElement(UncheckedObserver,{item:a,key:n,selection:t},t=>{var{selectableText:e,renderRow:i,renderLoadingRow:s}=this.props,r=this["focusIndex"],r=0<=r?r:this.getInitialTabbableRow(),o=ObservableLike.getValue(a),e={selectableText:e,ariaBusy:!t.item,ariaRowOffset:this.props.ariaRowOffset+1,data:o,eventDispatch:this.state.eventDispatch,excludeTabStop:this.props.excludeTabStop||r!==n,listProps:this.props,onFocusItem:this.onFocusItem,singleClickActivation:this.props.onActivate&&this.props.singleClickActivation};return t.item?i(n,t.item,e):s?s(n,e):this.renderLoadingRow(n,e)}),this.state.renderedRows[n]=r}return r}attachContentVisibilityListeners(){if(List.SUPPORTS_CONTENT_VISIBILITY_EVENT&&this.bodyElement.current){var e=this.bodyElement.current.children;for(let t=0;t<e.length;t++){const i=e[t];this.contentVisibilityListenerRows.has(i)||(getAttributeAsNumber(i,"data-row-index")<0?this.contentVisibilityListenerRows.add(i):(this.contentVisibilityListenerRows.add(i),i.addEventListener("contentvisibilityautostatechange",t=>{var t=t.skipped,e=getAttributeAsNumber(i,"data-row-index");e<0||(t?this.skippedRows.add(e):this.skippedRows.delete(e))},{signal:this.contentVisibilityAbortController.signal})))}}}renderSpacer(i,t,e){var s=this.ENABLE_INTERSECTION_PERF_OPTIMIZATIONS?1:this.state.rowProportion,r=null!=e&&e.estimateRowHeight||null==(r=this.props.rowHeights)||!r.length?t*this.state.rowHeight*s:this.getHeight(t,null==e?void 0:e.countFromBottom);return React.createElement("tr",{className:"bolt-list-row-spacer invisible",key:i,ref:t=>{var e=this.spacerElements[i];t?e!==t&&(e&&this.context.unobserve(t),this.context.observe(t),this.spacerElements[i]=t):e&&(this.context.unobserve(e),delete this.spacerElements[i])},role:"presentation"},React.createElement("td",{className:"bolt-list-cell-spacer invisible",colSpan:this.props.columnCount,style:{height:r+"px"}}))}rowActivated(t,e){this.state.eventDispatch.dispatchEvent(t,e,"activate"),this.props.onActivate&&this.props.onActivate(t,e)}rowSelected(t,e){this.state.eventDispatch.dispatchEvent(t,e,"select"),this.props.onSelect&&this.props.onSelect(t,e)}rowFocused(t,e){this.state.eventDispatch.dispatchEvent(t,e,"focus"),this.props.onFocus&&this.props.onFocus(t,e)}getFirstMaterializedItemBaseOnRowHeights(t,e,i){if(!t.length)return 0;let s=0,r=0;for(;i>s&&r<this.state.rowCount;)s+=t[r]||e,r++;return 0<e&&i>s&&(r+=Math.ceil((i-s)/e)),r}}List.contextType=IntersectionContext,List.defaultProps={ariaRowOffset:0,columnCount:1,focuszoneProps:{direction:FocusZoneDirection.Vertical},initialPageCount:3,maxHeight:1e5,pageSize:10,singleClickActivation:!1,selectRowOnClick:!0,virtualize:!0},List.SUPPORTS_CONTENT_VISIBILITY_EVENT="oncontentvisibilityautostatechange"in HTMLElement.prototype;class ScrollableList extends React.Component{constructor(){super(...arguments),this.list=React.createRef(),this.scrollableElement=React.createRef()}render(){return React.createElement(Intersection,{rootMargin:window.innerHeight/2},React.createElement("div",{ref:this.scrollableElement,onScroll:this.props.onScroll,className:css(this.props.outerClassName,"flex-grow","scroll-auto")},React.createElement(List,Object.assign({},this.props,{ref:this.list}))))}addOverlay(t,e,i,s=0,r){if(this.list.current)return this.list.current.addOverlay(t,e,i,s,r)}getStats(){return this.list.current?this.list.current.getStats():{firstMaterialized:-1,firstRendered:-1,lastMaterialized:-1,lastRendered:-1}}removeOverlay(t){if(this.list.current)return this.list.current.removeOverlay(t)}focusRow(t,e=1){return this.list.current?this.list.current.focusRow(t,e):Promise.resolve()}getFocusIndex(){return this.list.current?this.list.current.getFocusIndex():-1}scrollIntoView(t,e){if(this.list.current)return this.list.current.scrollIntoView(t,e)}scrollTo(t){this.scrollableElement.current&&(this.scrollableElement.current.scrollTop=t)}}class SimpleList extends React.Component{constructor(){super(...arguments),this.list=React.createRef(),this.renderListItem=(t,e,i)=>renderListItem(t,i,renderListCell(e))}render(){var t={selectableText:this.props.selectableText,className:this.props.className,columnCount:1,eventDispatch:this.props.eventDispatch,focuszoneProps:this.props.focuszoneProps,id:this.props.id,initialPageCount:this.props.initialPageCount,itemProvider:this.props.itemProvider,maxHeight:this.props.maxHeight,onActivate:this.props.onActivate,onFocus:this.props.onFocus,onSelect:this.props.onSelect,pageSize:this.props.pageSize,renderRow:this.renderListItem,selection:this.props.selection,width:this.props.width,virtualize:this.props.virtualize};return this.props.scrollable?React.createElement(ScrollableList,Object.assign({},t,{ref:this.list})):React.createElement(List,Object.assign({},t,{ref:this.list}))}addOverlay(t,e,i,s=0){if(this.list.current)return this.list.current.addOverlay(t,e,i,s)}removeOverlay(t){if(this.list.current)return this.list.current.removeOverlay(t)}focusRow(t,e=1){return this.list.current?this.list.current.focusRow(t,e):Promise.resolve()}getFocusIndex(){return this.list.current?this.list.current.getFocusIndex():-1}getStats(){return this.list.current?this.list.current.getStats():{firstMaterialized:-1,firstRendered:-1,lastMaterialized:-1,lastRendered:-1}}scrollIntoView(t,e){if(this.list.current)return this.list.current.scrollIntoView(t,e)}}function renderListItem(t,e,i){return React.createElement(ListItem,{details:e,index:t},i)}function ListItem(i){const{children:s,details:r,index:o,linkProps:a,itemId:n,tabIndex:l}=i,{selectableText:c,ariaBusy:h,ariaDescribedBy:d,ariaLabel:p,ariaPosInSet:u,ariaSetSize:m,excludeFocusZone:v}=r,{selection:g,singleClickActivation:f}=r.listProps;return React.createElement(FocusWithin,{onFocus:function(t){i.details.onFocusItem(i.index,t)}},e=>React.createElement(FocusZoneContext.Consumer,null,t=>{t={"aria-busy":h,"aria-describedby":d,"aria-label":p,"aria-posinset":void 0===u?o+1:null===u?void 0:u,"aria-selected":g&&g.selected(o),"aria-setsize":void 0===m?i.details.listProps.itemProvider.length:null===m?void 0:m,className:css(i.className,"bolt-list-row",0===o&&"first-row",a&&"bolt-link",g&&g.selected(o)&&"selected",e.hasFocus&&"focused",f&&"single-click-activation",c&&"selectable-text"),"data-focuszone":v||g&&!g.selectable(o)?void 0:t.focuszoneId,"data-row-index":o,"data-itemid":n,tabIndex:null!==l&&void 0!==l?l:getTabIndex(r),onBlur:e.onBlur,onFocus:e.onFocus,role:g?"option":"listitem"};return React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},a?React.createElement("a",Object.assign({},getDefaultLinkProps(a),t),React.createElement("div",{className:"bolt-list-cell","data-column-index":0},React.createElement("div",{className:"bolt-list-cell-content flex-row"},s))):React.createElement("tr",Object.assign({},t),React.createElement("td",{className:"bolt-list-cell","data-column-index":0},React.createElement("div",{className:"bolt-list-cell-content flex-row"},s))))}))}function renderListCell(t,e=!0){let i=void 0,s=React.createElement("span",{className:"text-ellipsis body-m"},"string"==typeof t||"number"==typeof t?t:t.textNode||t.text),r=s=e?React.createElement(Tooltip,{overflowOnly:!0},s):s;e=css("bolt-list-cell-child flex-row flex-center");return"string"!=typeof t&&"number"!=typeof t&&(i=t.textClassName,t.iconProps&&(r=React.createElement(React.Fragment,null,Icon(Object.assign(Object.assign({},t.iconProps),{className:css("icon-margin",t.iconProps.className)})),s)),t.href)?React.createElement(Link,{className:css(i,e,"scroll-hidden"),href:t.href,rel:t.hrefRel,target:t.hrefTarget,excludeTabStop:!0,subtle:!0},r):React.createElement("span",{className:css(i,e,"bolt-list-cell-text")},r)}function getAttributeAsNumber(t,e){t=t.getAttribute(e);return t?parseInt(t,10):-1}function cellFromElement(t){var e;let i=-1,s=-1,r=null;for(;t;){if(-1!==(e=getAttributeAsNumber(t,"data-column-index"))&&(i=e,r=t),-1!==(e=getAttributeAsNumber(t,"data-row-index"))){s=e;break}if(t.classList.contains("bolt-list")){t=null;break}t=t.parentElement}return{cellElement:r,cellIndex:i,rowElement:t,rowIndex:s}}function cellFromEvent(t){return cellFromElement(t.target)}export{List,ScrollableList,SimpleList,renderListItem,ListItem,renderListCell,cellFromElement,cellFromEvent};