UNPKG

azure-devops-ui

Version:

React components for building web UI in Azure DevOps

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